:root{
    --background-primary-color: #FCFCEF;
    --background-secondary-color: #632739;
    --background-secondary-hover-color: #f8a0ac;
    --color-button-primary-color: #374151;
    --background-secondary-color-hover:  ;
    --background-primary-hover: rgba(0,0,0,0.05);
    --border-primary-color: #d1d5db;
    
}
body {
    margin: 0;
    padding: 0;
}

/* ── Topbar ──────────────────────────────── */
.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background-color: var(--background-primary-color);
    border-bottom: 1px solid rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    height: 64px;
}

.topbar-left,
.topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.brand {
    font-size: 18px;
    font-weight: 500;
    color: #1f2937;
}

.mud-theme-primary{
    background-color: var(--background-secondary-color) !important;
}

.time-input{
    display: flex;
    align-items: center;
    width: 100%;
    border: solid 1px var(--border-primary-color);
    padding: 0.5rem;
    border-radius: 0.5rem;
}

/* ── Botões genéricos ───────────────────── */

.icon-btn-container {
    color: var(--background-secondary-color);
    padding-right: 5px;
    
}
.icon-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-button-primary-color);
    cursor: pointer;
    font-size: 20px;
    transition: background 0.15s;
}
.icon-btn:hover { background: rgba(0,0,0,0.06); }
.ti-copy{
    color: var(--primary-contrast) !important
}

/* ── Botão de empresa ───────────────────── */
.company-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    color: var(--color-button-primary-color);
    font-size: 14px;
    transition: background 0.15s;
}
.company-btn:hover { background: rgba(0,0,0,0.05); }

.company-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}
.company-label { font-size: 11px; color: #6b7280; }
.company-name  { font-size: 13px; font-weight: 500; }

/* ── Botão de usuário (topbar) ───────────── */
.user-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 14px;
    color: var(--color-button-primary-color);
}
.user-btn:hover { background: rgba(0,0,0,0.05); }
.user-btn-info { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.user-btn-name  { font-size: 13px; font-weight: 500; }
.user-btn-email { font-size: 11px; color: #6b7280; }

/* ── Overlay ────────────────────────────── */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 49;
}
.nav-overlay.open { display: block; }

/* ── Sidebar ────────────────────────────── */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: min(320px, 75vw);
    background-color: var(--background-primary-color);
    box-shadow: 4px 0 16px rgba(0,0,0,0.12);
    z-index: 50;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
}
.sidebar.open { transform: translateX(0); }

/* ── Header da sidebar ──────────────────── */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #d1d5db;
}
.sidebar-title {
    font-size: 18px;
    font-weight: 500;
    color: #1f2937;
}

/* ── Navegação ──────────────────────────── */
.sidebar-nav {
    flex: 1;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-button-primary-color);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.nav-item i { 
    font-size: 20px; 
    color: #6b7280; 
    flex-shrink: 0; 
    transition: color 0.15s; 
}
.nav-item:hover {
    background: var(--background-secondary-hover-color); 
    color: #111827; 
}
.nav-item:hover i { 
    color: var(--color-button-primary-color); 
}

/* Estado ativo — mesma cor do Figma */
.nav-item.active {
    background-color: var(--background-secondary-color);
    color: #fff;
}
.nav-item.active i { color: #fff; }

.nav-divider {
    height: 1px;
    background: #d1d5db;
    margin: 12px 0;
}

.nav-section-label {
    display: block;
    padding: 4px 18px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-tertiary, #9a8f80);
}

/* Menu operacional sem empresa ativa: cinza, não clicável (tooltip via title). */
.nav-item-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.nav-item-disabled:hover {
    background: transparent;
}

/* ── Footer da sidebar ──────────────────── */
.sidebar-footer {
    border-top: 1px solid #d1d5db;
    padding: 16px 24px;
}
.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #6b7280;
    flex-shrink: 0;
}
.user-details { display: flex; flex-direction: column; overflow: hidden; }
.user-name  { font-size: 14px; font-weight: 500; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-email { font-size: 12px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.logout-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: none;
    border-radius: 10px;
    background: rgba(0,0,0,0.05);
    color: #1f2937;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}
/* O form existe só para carregar o token antiforgery do logout; não deve criar caixa. */
.logout-form { display: contents; }
.logout-btn:hover { background: rgba(0,0,0,0.09); }
.logout-btn i { font-size: 18px; }

/* ── Conteúdo principal ─────────────────── */
.app-layout { display: flex; flex-direction: column; height: 100vh; }
.main-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px 16px;
    height: 0; /* força o flex-child a respeitar o container */
}

@media (min-width: 640px) {
    .main-content { padding: 24px 32px; }
}

/* Esconder info no mobile */
@media (max-width: 639px) {
    .company-info, .user-btn-info { display: none; }
}




html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}


.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.filtro-menu{
    width: 130px;
}
.filtro-menu .mud-button-root {
     width: 100%;
     justify-content: center !important;
}

.filtro-menu .mud-button-label {
    justify-content: center !important;
}

.text-totalizer{
    
}
code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.sub-string{
    font-size: 15px;
    padding-left: 2px;
}

.row{
    display: flex;
    align-items: center;
}

/* Settings.razor.css  — scoped styles */

/* ── Layout ── */
.settings-container { 
    display: flex; 
    flex-direction: column; 
    gap: 1.5rem; 
    padding: 1.5rem;
    margin: 0 auto; 
}

.header-row { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.page-title  { font-size: 1.875rem; font-weight: 600; color: #111827; margin: 0; }
.page-subtitle { 
    font-size: 0.875rem; 
    color: var(--color-button-primary-color); 
    margin: 0.25rem 0 0; 
}

/* ── Cards ── */
.card {
    background: #fff; 
    border: 1px solid #e5e7eb; 
    border-radius: 0.75rem; 
    overflow: hidden; 
}

.card-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid #f3f4f6; }
.card-header-left { flex: 1; }
.card-title  { 
    font-size: 1.125rem; 
    font-weight: 600; 
    color: #111827; 
    margin: 0; 
    display: flex; 
    align-items: center; 
    gap: 0.5rem; 
}
.time-stack{
    height:9rem;
    padding: 0 3px;
}
.card-icon {
   color: var(--background-secondary-color);
}
.card-subtitle { font-size: 0.8125rem; color: #6b7280; margin: 0.25rem 0 0; }
.card-body   { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }

/* ── Buttons ── */
.btn { 
    display: inline-flex; 
    align-items: center; 
    gap: 0.375rem; 
    padding: 0.5rem 1rem; 
    border-radius: 0.5rem; 
    font-size: 0.875rem; 
    font-weight: 500; 
    cursor: pointer; 
    border: none; 
    transition: background 0.15s, opacity 0.15s;
}
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-save{ 
    background: var(--background-primary-color) !important; 
    color: var(--color-button-primary-color);
    border: 1px solid var(--border-primary-color);
}
.btn-save:hover:not(:disabled) {
    background: var(--background-primary-hover) !important;
    border-color: var(--border-primary-color) !important;
    box-shadow: none !important;
    color: var(--color-button-primary-color); 
}
.btn-outline {
    background: var(--background-primary-color);
    color: var(--color-button-primary-color);
    border: 1px solid var(--border-primary-color); 
}

.btn-outline:hover:not(:disabled) { 
    background: var(--background-primary-hover);
}

.btn-ghost {
    background: transparent; 
    color: var(--color-button-primary-color);
}

.btn-ghost:hover:not(:disabled) { background: #f3f4f6; }
.btn-sm   { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
.btn-lg   { padding: 0.75rem 1.5rem; font-size: 1rem; }
.btn-group { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ── Alert ── */
.alert { padding: 0.75rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; }
.alert-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.alert-error   { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.alert-warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }

/* ── Global Schedule Box ── */
.global-schedule-box { border: 2px solid rgba(99,102,241,0.25); border-radius: 0.75rem; padding: 1rem 1.25rem; background: rgba(99,102,241,0.04); }
.global-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem; }
.section-title { font-size: 1rem; font-weight: 600; color: #111827; margin: 0; }

/* ── Periods Grid ── */
.periods-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 0.75rem;
}
@media (max-width: 640px) { .periods-grid { grid-template-columns: 1fr; } }

/* ── Period Card ── */
.period-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 0.875rem; }
.period-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.period-label { font-size: 0.875rem; font-weight: 500; cursor: pointer; }

.time-fields { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.time-row  { display: flex; align-items: center; gap: 0.5rem; }
.time-label { font-size: 0.75rem; color: #6b7280; min-width: 2.5rem; }

/* ── Days List ── */
.days-list { display: flex; flex-direction: column; gap: 0.75rem; padding-top: 1rem; border-top: 1px solid #f3f4f6; }
.day-card  { border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 1rem; }
.day-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.day-toggle { display: flex; align-items: center; gap: 0.625rem; }
.day-label  { font-weight: 500; color: #111827; }
.closed-label { font-size: 0.875rem; color: #dc2626; font-weight: 500; }
.ml { padding-left: 1.5rem; }
.periods-grid.ml { padding-left: 1.5rem; }

/* ── Toggle Switch ── */
.switch { position: relative; display: inline-block; width: 2.5rem; height: 1.375rem; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { 
    position: absolute; 
    cursor: pointer; 
    inset: 0; 
    background: #d1d5db; 
    border-radius: 9999px; 
    transition: background 0.2s; 
}
.slider::before { content: ""; position: absolute; width: 1rem; height: 1rem; left: 0.1875rem; bottom: 0.1875rem; background: #fff; border-radius: 50%; transition: transform 0.2s; }
.switch input:checked + .slider { 
    background: var(--background-secondary-color); 
}
.switch input:checked + .slider::before { transform: translateX(1.125rem); }

/* ── Form ── */
.two-col-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 640px) { .two-col-grid { grid-template-columns: 1fr; } }
.form-group  { display: flex; flex-direction: column; gap: 0.375rem; }
.form-label  { 
    font-size: 0.875rem; 
    font-weight: 500; 
    color: var(--color-button-primary-color); 
}
.form-input  { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.5rem; font-size: 0.875rem; color: #111827; transition: border-color 0.15s; box-sizing: border-box; }
.form-input:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99,102,241,0.15); }
.form-hint   { font-size: 0.75rem; color: #9ca3af; margin: 0; }

/* ── Info Box ── */
.info-box   { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 0.5rem; padding: 1rem; }
.info-title { font-size: 0.875rem; font-weight: 600; color: #1e3a5f; margin: 0 0 0.375rem; }
.info-text  { font-size: 0.875rem; color: #1d4ed8; margin: 0; line-height: 1.5; }

/* ── Summary ── */
.summary-list { display: flex; flex-direction: column; }
.summary-row  { display: flex; justify-content: space-between; align-items: center; padding: 0.625rem 0; border-bottom: 1px solid #f3f4f6; }
.summary-row.last { border-bottom: none; }
.summary-label { font-size: 0.875rem; color: #6b7280; }
.summary-value { font-size: 0.875rem; font-weight: 500; color: #111827; }

/* ── Mobile Save Button ── */
.mobile-save-btn { display: none; position: fixed; bottom: 1rem; right: 1rem; z-index: 10; }
@media (max-width: 768px) { .mobile-save-btn { display: block; } }
.mobile-save-btn .btn { box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

/* ============================================================
   MaitreIA Design System implementation
   Source: MaitreIA Design System.zip
   ============================================================ */
:root {
    --bordeaux-50: #fbf1f3;
    --bordeaux-100: #f6e0e6;
    --bordeaux-200: #edbfcc;
    --bordeaux-300: #df98ab;
    --bordeaux-400: #cc6a83;
    --bordeaux-500: #b23e5c;
    --bordeaux-600: #8e2e47;
    --bordeaux-700: #632739;
    --bordeaux-800: #4e2230;
    --bordeaux-900: #391a25;

    --gold-50: #fbf7ec;
    --gold-100: #f5edd2;
    --gold-200: #ecdca8;
    --gold-300: #ddc47e;
    --gold-400: #cdab5c;
    --gold-500: #b68f3f;
    --gold-600: #93702f;
    --gold-700: #6f5424;

    --sand-0: #ffffff;
    --sand-50: #faf7f2;
    --sand-100: #f4efe6;
    --sand-200: #e8e0d3;
    --sand-300: #d6cab8;
    --sand-400: #b3a594;
    --sand-500: #8a7e70;
    --sand-600: #645a4f;
    --sand-700: #463e37;
    --sand-800: #2f2a25;
    --sand-900: #211d1a;
    --sand-950: #161210;

    --green-50: #eef7f0;
    --green-500: #2f9e57;
    --green-600: #1f8048;
    --green-700: #186238;
    --amber-50: #fdf4e7;
    --amber-500: #d9921f;
    --amber-600: #b4760f;
    --amber-700: #8a5a0c;
    --red-50: #fcefee;
    --red-500: #d5483f;
    --red-600: #b53127;
    --red-700: #8f261e;
    --blue-50: #eef4fb;
    --blue-500: #3b7bd4;
    --blue-600: #2a62b3;
    --blue-700: #214e8c;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 9999px;

    --font-sans: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
    --font-display: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-mono: "JetBrains Mono", "Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --tracking-normal: 0;

    --topbar-h: 64px;
    --content-max: 1200px;
    --z-sidebar: 50;
    --z-overlay: 49;
    --z-topbar: 40;

    --ease-standard: cubic-bezier(0.2, 0, 0.1, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 120ms;
    --dur-base: 180ms;
    --dur-slow: 280ms;
    --transition-base: all var(--dur-base) var(--ease-standard);
    /* Atraso do "crescimento" de cada barra/ponto do dashboard — cada elemento sobrescreve
       este valor inline (ver Dashboard.razor); a declaração aqui só existe pra a variável
       ter uma origem real e ferramentas de análise de CSS conseguirem resolvê-la. */
    --chart-delay: 0ms;

    color-scheme: light;
}

:root,
[data-theme="light"] {
    --canvas: var(--sand-50);
    --surface: var(--sand-0);
    --surface-2: var(--sand-100);
    --surface-3: var(--sand-200);
    --text-primary: var(--sand-900);
    --text-secondary: var(--sand-600);
    --text-tertiary: var(--sand-500);
    --border: var(--sand-200);
    --border-strong: var(--sand-300);
    --divider: var(--sand-100);
    --primary: var(--bordeaux-600);
    --primary-hover: var(--bordeaux-700);
    --primary-active: var(--bordeaux-800);
    --primary-soft: var(--bordeaux-50);
    --primary-soft-fg: var(--bordeaux-700);
    --primary-contrast: #ffffff;
    --accent: var(--gold-400);
    --accent-hover: var(--gold-500);
    --accent-soft: var(--gold-50);
    --accent-soft-fg: var(--gold-700);
    --success: var(--green-600);
    --success-soft: var(--green-50);
    --success-fg: var(--green-700);
    --warning: var(--amber-600);
    --warning-soft: var(--amber-50);
    --warning-fg: var(--amber-700);
    --danger: var(--red-600);
    --danger-soft: var(--red-50);
    --danger-fg: var(--red-700);
    --info: var(--blue-600);
    --info-soft: var(--blue-50);
    --info-fg: var(--blue-700);
    --chart-1: var(--bordeaux-500);
    --chart-2: var(--gold-400);
    --chart-3: var(--green-500);
    --chart-4: var(--blue-500);
    --chart-5: var(--amber-500);
    --chart-6: var(--sand-700);
    --chart-grid: var(--sand-200);
    --neutral-hover: rgba(45, 32, 28, 0.05);
    --neutral-active: rgba(45, 32, 28, 0.09);
    --overlay: rgba(33, 29, 26, 0.45);
    --shadow-xs: 0 1px 2px rgba(57, 26, 37, 0.06);
    --shadow-sm: 0 1px 3px rgba(57, 26, 37, 0.08), 0 1px 2px rgba(57, 26, 37, 0.04);
    --shadow-md: 0 4px 12px rgba(57, 26, 37, 0.10), 0 2px 4px rgba(57, 26, 37, 0.05);
    --shadow-lg: 0 12px 28px rgba(57, 26, 37, 0.14), 0 4px 10px rgba(57, 26, 37, 0.06);
    --shadow-focus: 0 0 0 3px rgba(142, 46, 71, 0.24);

    --background-primary-color: var(--canvas);
    --background-secondary-color: var(--primary);
    --background-secondary-hover-color: var(--primary-soft);
    --color-button-primary-color: var(--text-primary);
    --background-primary-hover: var(--neutral-hover);
    --border-primary-color: var(--border-strong);

    --mud-palette-primary: var(--primary);
    --mud-palette-primary-darken: var(--primary-hover);
    --mud-palette-primary-lighten: var(--bordeaux-400);
    --mud-palette-primary-text: var(--primary-contrast);
    --mud-palette-secondary: var(--accent);
    --mud-palette-secondary-text: var(--sand-900);
    --mud-palette-background: var(--canvas);
    --mud-palette-background-grey: var(--surface-2);
    --mud-palette-surface: var(--surface);
    --mud-palette-text-primary: var(--text-primary);
    --mud-palette-text-secondary: var(--text-secondary);
    --mud-palette-lines-default: var(--border);
    --mud-palette-lines-inputs: var(--border-strong);
    --mud-palette-table-lines: var(--divider);
    --mud-palette-table-hover: var(--neutral-hover);
    --mud-palette-divider: var(--divider);
    --mud-palette-success: var(--success);
    --mud-palette-warning: var(--warning);
    --mud-palette-error: var(--danger);
    --mud-palette-info: var(--info);
}

[data-theme="dark"] {
    color-scheme: dark;
    --canvas: #241d19;
    --surface: #2f2620;
    --surface-2: #3a302a;
    --surface-3: #483b34;
    --text-primary: #f5ede8;
    --text-secondary: #cbbab0;
    --text-tertiary: #9a8b80;
    --border: #483a33;
    --border-strong: #5d4a40;
    --divider: #382e28;
    --primary: var(--bordeaux-400);
    --primary-hover: var(--bordeaux-300);
    --primary-active: var(--bordeaux-200);
    --primary-soft: rgba(204, 106, 131, 0.14);
    --primary-soft-fg: var(--bordeaux-200);
    --primary-contrast: #2a121b;
    --accent: var(--gold-400);
    --accent-hover: var(--gold-300);
    --accent-soft: rgba(205, 171, 92, 0.14);
    --accent-soft-fg: var(--gold-200);
    --success: #4cb878;
    --success-soft: rgba(47,158,87,0.16);
    --success-fg: #8fdca9;
    --warning: #e2a93f;
    --warning-soft: rgba(217,146,31,0.16);
    --warning-fg: #f0c878;
    --danger: #e8635a;
    --danger-soft: rgba(213,72,63,0.16);
    --danger-fg: #f3a39c;
    --info: #5e98e0;
    --info-soft: rgba(59,123,212,0.16);
    --info-fg: #a3c5ee;
    --chart-1: var(--bordeaux-400);
    --chart-2: var(--gold-400);
    --chart-3: #4cb878;
    --chart-4: #5e98e0;
    --chart-5: #e2a93f;
    --chart-6: #9a8b80;
    --chart-grid: #3a2c25;
    --neutral-hover: rgba(255, 246, 240, 0.06);
    --neutral-active: rgba(255, 246, 240, 0.10);
    --overlay: rgba(8, 5, 4, 0.6);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.4);
    --shadow-focus: 0 0 0 3px rgba(204, 106, 131, 0.34);

    --background-primary-color: var(--canvas);
    --background-secondary-color: var(--primary);
    --background-secondary-hover-color: var(--primary-soft);
    --color-button-primary-color: var(--text-primary);
    --background-primary-hover: var(--neutral-hover);
    --border-primary-color: var(--border-strong);

    --mud-palette-primary: var(--primary);
    --mud-palette-primary-darken: var(--primary-hover);
    --mud-palette-primary-lighten: var(--bordeaux-300);
    --mud-palette-primary-text: var(--primary-contrast);
    --mud-palette-secondary: var(--accent);
    --mud-palette-secondary-text: #2a1d10;
    --mud-palette-background: var(--canvas);
    --mud-palette-background-grey: var(--surface-2);
    --mud-palette-surface: var(--surface);
    --mud-palette-text-primary: var(--text-primary);
    --mud-palette-text-secondary: var(--text-secondary);
    --mud-palette-lines-default: var(--border);
    --mud-palette-lines-inputs: var(--border-strong);
    --mud-palette-table-lines: var(--divider);
    --mud-palette-table-hover: var(--neutral-hover);
    --mud-palette-divider: var(--divider);
    --mud-palette-success: var(--success);
    --mud-palette-warning: var(--warning);
    --mud-palette-error: var(--danger);
    --mud-palette-info: var(--info);
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    background: var(--canvas);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body,
.mud-typography,
.mud-input,
.mud-button-root {
    font-family: var(--font-sans) !important;
    letter-spacing: 0 !important;
}

a,
.btn-link,
.mud-link {
    color: var(--primary);
}

a:hover,
.mud-link:hover {
    color: var(--primary-hover);
}

.tabular-nums,
.font-mono,
.mud-table td[data-label*="Preço"],
.mud-table td[data-label*="Total"],
.mud-table td[data-label*="Telefone"],
.mud-typography-h5 {
    font-family: var(--font-mono);
    font-feature-settings: "tnum" 1;
}

.app-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: 100vh;
    background: var(--canvas);
    color: var(--text-primary);
}

.topbar {
    position: sticky;
    top: 0;
    z-index: var(--z-topbar);
    height: var(--topbar-h);
    flex-shrink: 0;
    padding: 0 16px;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}

[data-theme="dark"] .topbar {
    background: rgba(47, 38, 32, 0.86);
}

.topbar-left,
.topbar-right {
    gap: 10px;
}

.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--text-primary);
}

.brand-logo {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    box-shadow: var(--shadow-xs);
    object-fit: cover;
}

.brand-wordmark,
.sidebar-title {
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0;
    line-height: 1;
}

.brand-wordmark span {
    color: var(--gold-500);
}

.icon-btn {
    width: 38px;
    height: 38px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    background: transparent;
    transition: var(--transition-base);
}

.icon-btn:hover,
.icon-btn:focus-visible {
    background: var(--neutral-hover);
    color: var(--text-primary);
}

.icon-btn:focus-visible,
.company-btn:focus-visible,
.user-btn:focus-visible,
.logout-btn:focus-visible,
.btn:focus-visible,
.mud-button-root:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.icon-btn-soft {
    background: var(--primary-soft);
    color: var(--primary-soft-fg);
}

.company-btn {
    padding: 6px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-primary);
    transition: var(--transition-base);
}

.company-btn:hover {
    background: var(--surface-2);
}

.company-btn > .ti-building-store {
    color: var(--primary);
    font-size: 18px;
}

.company-label {
    color: var(--text-tertiary);
    font-size: var(--text-xs);
}

.company-name,
.user-btn-name {
    color: var(--text-primary);
    font-weight: var(--fw-semibold);
}

.user-btn {
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    transition: var(--transition-base);
}

.user-btn:hover {
    background: var(--neutral-hover);
}

.user-btn-email {
    color: var(--text-secondary);
}

.topbar-avatar,
.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-pill);
    background: var(--primary-soft);
    color: var(--primary-soft-fg);
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
    flex-shrink: 0;
}

.nav-overlay {
    background: var(--overlay);
    z-index: var(--z-overlay);
}

.sidebar {
    width: min(300px, 78vw);
    background: var(--surface);
    border-right: 1px solid var(--border);
    box-shadow: none;
    z-index: var(--z-sidebar);
    transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-base) var(--ease-standard);
}

.sidebar.open {
    box-shadow: var(--shadow-lg);
}

.sidebar-header {
    padding: 18px 22px;
    border-bottom: 1px solid var(--divider);
}

.sidebar-nav {
    padding: 18px 14px;
    gap: 2px;
}

.nav-item {
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--text-base);
    font-weight: var(--fw-medium);
    transition: var(--transition-base);
}

.nav-item i {
    color: var(--text-tertiary);
}

.nav-item:hover {
    background: var(--neutral-hover);
    color: var(--text-primary);
}

.nav-item:hover i {
    color: var(--primary);
}

.nav-item.active {
    background: var(--primary);
    color: var(--primary-contrast);
}

.nav-item.active i {
    color: var(--primary-contrast);
}

.nav-divider,
.sidebar-footer,
.sidebar-header {
    border-color: var(--divider);
}

.nav-divider {
    background: var(--divider);
    margin: 12px 8px;
}

.sidebar-footer {
    padding: 14px 18px;
}

.user-name {
    color: var(--text-primary);
    font-weight: var(--fw-semibold);
}

.user-email {
    color: var(--text-secondary);
}

.logout-btn {
    justify-content: flex-start;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text-primary);
}

.logout-btn:hover {
    background: var(--neutral-active);
}

.main-content {
    flex: 1;
    height: 0;
    overflow-y: auto;
    padding: 24px clamp(16px, 4vw, 40px);
    background: var(--canvas);
}

.content-shell {
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
}

.mud-typography-h4,
.page-title {
    color: var(--text-primary) !important;
    font-family: var(--font-display) !important;
    font-size: var(--text-2xl) !important;
    font-weight: var(--fw-bold) !important;
    letter-spacing: 0 !important;
    line-height: 1.15 !important;
}

.mud-typography-h5 {
    color: var(--text-primary) !important;
    font-size: var(--text-2xl) !important;
    font-weight: var(--fw-bold) !important;
    letter-spacing: 0 !important;
    line-height: 1.1 !important;
}

.mud-typography-h6,
.card-title {
    color: var(--text-primary) !important;
    font-family: var(--font-display) !important;
    font-size: var(--text-lg) !important;
    font-weight: var(--fw-semibold) !important;
    letter-spacing: 0 !important;
}

.mud-paper-layout{
    padding:15px;
    border: 1px solid var(--border-primary-color);
    border-radius: 10px;
}

.mud-text-secondary,
.page-subtitle,
.card-subtitle,
.form-hint,
.summary-label {
    color: var(--text-secondary) !important;
}

.text-totalizer{
    font-weight: 700;
    padding-left: 5px;
}

.text-table{
    font-weight: 600 !important;
}

.mud-paper,
.mud-card,
.card {
    background: var(--surface) !important;
    color: var(--text-primary);
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
}

.mud-card,
.card {
    overflow: hidden;
}

.mud-card-header,
.card-header {
    border-bottom: 1px solid var(--divider) !important;
    background: var(--surface) !important;
}

.mud-card-content,
.card-body {
    color: var(--text-primary);
}

.mud-button-root,
.btn {
    border-radius: var(--radius-sm) !important;
    font-weight: var(--fw-semibold) !important;
    text-transform: none !important;
    transition: var(--transition-base) !important;
}

.mud-button-filled-primary,
.btn-primary,
.mud-theme-primary {
    background: var(--primary) !important;
    color: var(--primary-contrast) !important;
    border-color: transparent !important;
}

.mud-button-filled-primary:hover,
.btn-primary:hover {
    background: var(--primary-hover) !important;
}

.mud-button-outlined,
.mud-button-outlined-primary,
.btn-outline,
.btn-save {
    background: var(--surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-strong) !important;
}

.mud-button-outlined:hover,
.mud-button-outlined-primary:hover,
.btn-outline:hover,
.btn-save:hover {
    background: var(--surface-2) !important;
    border-color: var(--border-strong) !important;
}

.mud-button-text,
.btn-ghost {
    color: var(--text-primary) !important;
}

.mud-button-text:hover,
.btn-ghost:hover {
    background: var(--neutral-hover) !important;
}

.mud-icon-button {
    border-radius: var(--radius-sm) !important;
    color: var(--text-secondary) !important;
}

.mud-icon-button:hover {
    background: var(--neutral-hover) !important;
    color: var(--primary) !important;
}

.mud-input-control,
.mud-input,
.mud-input-slot,
.mud-select {
    color: var(--text-primary) !important;
}

.paper-totalizer{
    height: 200px;
}
.mud-input-outlined .mud-input-outlined-border,
.mud-picker-input-button {
    border-color: var(--border-strong) !important;
}

.mud-input-outlined:hover .mud-input-outlined-border,
.mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: var(--primary) !important;
}

.mud-input-label,
.mud-input-adornment,
.mud-input-helper-text {
    color: var(--text-secondary) !important;
}

.mud-input-focused .mud-input-label {
    color: var(--primary) !important;
}

.mud-checkbox .mud-icon-root,
.mud-switch .mud-switch-thumb,
.mud-radio .mud-icon-root {
    color: var(--primary) !important;
}

.mud-table-root,
.mud-table {
    background: var(--surface) !important;
    color: var(--text-primary) !important;
}

.mud-table-container {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    background: var(--surface);
}

.mud-table-toolbar {
    border-bottom: 1px solid var(--divider);
    background: var(--surface);
    gap: 8px;
}

.mud-table-head .mud-table-cell,
.mud-table-cell {
    border-color: var(--divider) !important;
}

.mud-table-head .mud-table-cell {
    color: var(--text-secondary) !important;
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
}

.mud-table-row:hover {
    background: var(--neutral-hover) !important;
}

.mud-chip {
    border-radius: var(--radius-pill) !important;
    font-weight: var(--fw-semibold) !important;
    letter-spacing: 0 !important;
}

.mud-chip-filled-default {
    background: var(--surface-2) !important;
    color: var(--text-secondary) !important;
}

.mud-chip-filled-success,
.mud-chip-text-success {
    background: var(--success-soft) !important;
    color: var(--success-fg) !important;
}

.mud-chip-filled-error,
.mud-chip-text-error {
    background: var(--danger-soft) !important;
    color: var(--danger-fg) !important;
}

.mud-chip-filled-info,
.mud-chip-text-info {
    background: var(--info-soft) !important;
    color: var(--info-fg) !important;
}

.mud-chip-filled-warning,
.mud-chip-text-warning {
    background: var(--warning-soft) !important;
    color: var(--warning-fg) !important;
}

.mud-dialog,
.mud-dialog .mud-dialog-title,
.mud-dialog .mud-dialog-content,
.mud-dialog .mud-dialog-actions,
.mud-popover-paper,
.mud-picker-container {
    background: var(--surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}

.mud-dialog {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-lg) !important;
}

.mud-dialog-title {
    border-bottom: 1px solid var(--divider);
}

.mud-alert {
    border-radius: var(--radius-sm) !important;
}

.mud-alert-info {
    background: var(--info-soft) !important;
    color: var(--info-fg) !important;
}

.mud-alert-success,
.alert-success {
    background: var(--success-soft) !important;
    color: var(--success-fg) !important;
    border-color: color-mix(in srgb, var(--success) 28%, transparent) !important;
}

.mud-alert-error,
.alert-error {
    background: var(--danger-soft) !important;
    color: var(--danger-fg) !important;
    border-color: color-mix(in srgb, var(--danger) 28%, transparent) !important;
}

.mud-skeleton {
    background: var(--surface-2) !important;
}

.order-column {
    background: var(--surface-2) !important;
}

.order-column-icon {
    color: var(--primary) !important;
}

.order-card {
    background: var(--surface) !important;
    border-radius: var(--radius-md) !important;
}

/* O kanban de pedidos ocupa toda a largura útil da tela (ignora o teto de 1200px). */
.content-shell:has(.orders-page) {
    max-width: none;
}

/* O card preenche exatamente a largura da coluna, sem transbordar. */
.order-column .mud-drop-item {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.order-column .order-card {
    width: 100%;
    min-width: 0;
}

/* Permite que os filhos flex encolham em vez de forçar o card além da coluna. */
.order-column .order-card > .flex-1 {
    min-width: 0;
}

/* Tag "Manual" do card: nunca encolhe (flex-shrink: 0) — numa fila estreita quem cede
   espaço é o nome do cliente (text-truncate), nunca esta tag por cima dele. */
.order-card-manual-chip {
    flex-shrink: 0;
}

.order-card-manual-chip-short {
    display: none;
}

/* Resolução baixa/mobile (mesmo teto do kanban em coluna única, ver @media 900px abaixo):
   a tag vira só "M" — ocupando o mínimo, ela nunca chega a disputar espaço com o nome. */
@media (max-width: 900px) {
    .order-card-manual-chip-full {
        display: none;
    }

    .order-card-manual-chip-short {
        display: inline;
    }
}

/* ── Combobox "Mover" do card ──────────────
   <select> nativo: caminho principal para trocar o status no mobile (abre o seletor
   nativo do sistema; arrastar é ruim em toque) e um atalho conveniente no desktop. */
.order-card-move {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.order-card-move-icon {
    color: var(--text-secondary);
    flex-shrink: 0;
}

.order-card-move-select {
    flex: 1;
    min-width: 0;
    padding: 7px 30px 7px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background-color: var(--surface-2);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* seta customizada (chevron cinza neutro, legível em ambos os temas) */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: border-color var(--dur-fast);
}

.order-card-move-select:hover,
.order-card-move-select:focus {
    outline: none;
    border-color: var(--primary);
}

/* ── Kanban estilo Trello no mobile ─────────
   As colunas deixam de dividir a largura e passam a rolar na horizontal, uma por
   vez com "encaixe" (scroll-snap), deixando espiar a próxima. O card ganha o menu
   "Mover" acima para trocar de coluna sem depender de arrastar. */
@media (max-width: 900px) {
    .orders-kanban {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scroll-padding-left: 2px;
    }

    .orders-kanban > .order-column {
        flex: 0 0 86% !important;
        min-width: 86% !important;
        max-width: 86%;
        scroll-snap-align: start;
    }

    /* A coluna de cancelados recolhida continua como uma faixa estreita. */
    .orders-kanban > .order-column--collapsed {
        flex: 0 0 48px !important;
        min-width: 48px !important;
        max-width: 48px;
        width: 48px !important;
    }
}

.settings-container {
    gap: var(--space-6);
    padding: 0;
}

.header-row {
    margin-bottom: 0;
}

.card-header {
    padding: var(--space-5) var(--space-6);
}

.card-body {
    padding: var(--space-6);
}

.card-icon,
.card-title i {
    color: var(--primary) !important;
}

.global-schedule-box {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--primary-soft);
}

.period-card,
.day-card,
.periods-grid .mud-paper {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-xs) !important;
}

.day-card {
    background: var(--surface) !important;
}

.period-label,
.day-label,
.summary-value,
.section-title {
    color: var(--text-primary);
}

.closed-label {
    color: var(--danger-fg);
}

.switch .slider {
    background: var(--border-strong);
}

.switch input:checked + .slider {
    background: var(--primary);
}

.info-box {
    background: var(--info-soft);
    border-color: color-mix(in srgb, var(--info) 30%, transparent);
    border-radius: var(--radius-sm);
}

.info-title,
.info-text {
    color: var(--info-fg);
}

.summary-row {
    border-color: var(--divider);
}

.form-label {
    color: var(--text-primary);
}

.form-input,
.login-input {
    background: var(--surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-strong) !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-sans) !important;
}

.form-input:focus,
.login-input:focus {
    border-color: var(--primary) !important;
    box-shadow: var(--shadow-focus) !important;
}

.login-label,
.login-error {
    font-family: var(--font-sans) !important;
}

.login-label {
    color: var(--text-primary) !important;
    font-weight: var(--fw-semibold) !important;
}

.login-shell,
.auth-shell {
    background: var(--canvas) !important;
    color: var(--text-primary);
    font-family: var(--font-sans) !important;
}

.auth-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--space-6);
}

.auth-brand .brand-logo {
    width: 76px;
    height: 76px;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.auth-brand .brand-wordmark {
    font-size: 1.625rem;
}

.auth-brand-subtitle {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.mobile-save-btn .btn {
    box-shadow: var(--shadow-lg);
}

/* ── Abas em formulário (diálogo da empresa no Master) ──
   O MudGrid usa margin-top: -24px para compensar o gutter dos itens. Dentro de um
   MudTabPanel isso empurra o conteúdo para cima da barra de abas: o grid cobria os
   24px de baixo dos 48px do cabeçalho e engolia o clique (só a metade de cima
   trocava de aba). Zera o recuo e devolve o respiro pelo container dos painéis. */
.ds-form-tabs .mud-tabs-panels {
    padding-top: 20px;
}

.ds-form-tabs .mud-tab-panel > .mud-grid {
    margin-top: 0;
}

/* ── Configurações: menu lateral de categorias + painel (estilo "Configurações do Windows") ── */
.settings-shell {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
}

.settings-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: sticky;
    top: var(--space-4);
    padding: var(--space-2);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}

.settings-nav-item {
    display: flex;
    align-items: center;
    /* O reset de `button` do MudBlazor centraliza o conteúdo; aqui os itens têm que
       alinhar ícone e rótulo à esquerda, senão cada linha começa em um ponto. */
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.settings-nav-item:hover {
    background: var(--surface-hover, rgba(0, 0, 0, 0.04));
    color: var(--text-primary);
}

.settings-nav-item.active {
    background: var(--primary-soft);
    color: var(--primary-soft-fg);
    font-weight: var(--fw-semibold);
}

.settings-nav-item i {
    font-size: 1.125rem;
    flex-shrink: 0;
}

.settings-nav-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.settings-nav-title {
    line-height: 1.2;
}

.settings-nav-hint {
    font-size: var(--text-xs);
    font-weight: var(--fw-regular);
    color: var(--text-secondary);
    line-height: 1.3;
}

.settings-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    min-width: 0;
}

/* Formas de pagamento */
.payment-tag {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary-soft-fg);
    font-size: var(--text-xs);
}

.payment-state-on {
    color: var(--primary-soft-fg);
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
}

.payment-state-off {
    color: var(--text-secondary);
    font-size: var(--text-xs);
}

/* ── Taxas de entrega por bairro ── */
.delivery-rate-fee {
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-contrast);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
}

.neighborhood-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.neighborhood-chip {
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--surface-hover, rgba(0, 0, 0, 0.04));
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: var(--text-xs);
}

/* Seletor de bairros do diálogo de taxa: rola dentro do próprio bloco para o modal
   não crescer sem controle em cidades com muitos bairros. */
.neighborhood-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 4px;
    max-height: 260px;
    overflow-y: auto;
    margin-top: var(--space-3);
    padding: var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.neighborhood-option {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--text-sm);
    cursor: pointer;
}

.neighborhood-option:hover {
    background: var(--surface-hover, rgba(0, 0, 0, 0.04));
}

.neighborhood-option.taken {
    color: var(--text-secondary);
    cursor: not-allowed;
}

.neighborhood-option input {
    flex-shrink: 0;
    accent-color: var(--primary);
}

.neighborhood-option-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.neighborhood-add-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.neighborhood-add-row .mud-input-control {
    flex: 1;
}

@media (max-width: 640px) {
    .neighborhood-picker {
        grid-template-columns: 1fr;
        max-height: 220px;
    }

    .neighborhood-add-row {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 900px) {
    .settings-shell {
        grid-template-columns: 1fr;
    }

    .settings-nav {
        position: static;
        flex-direction: row;
        overflow-x: auto;
    }

    .settings-nav-item {
        white-space: nowrap;
    }

    .settings-nav-hint {
        display: none;
    }
}

/* Claude UI kit alignment: Tabler icons, compact buttons, product table and dialogs */
.topbar .brand-logo {
    display: none;
}

.topbar .brand-lockup {
    gap: 0;
}

.topbar .user-btn-info {
    display: none;
}

.topbar .user-btn {
    min-width: 38px;
    padding: 0;
    border: 0;
    background: transparent;
}

.ds-button {
    min-height: 38px !important;
    padding: 0 16px !important;
}

.ds-button .mud-button-label,
.ds-icon-button .mud-button-label,
.mud-button-root .mud-button-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ds-button i {
    font-size: 18px;
    line-height: 1;
}

.ds-button-outlined {
    background: var(--surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-strong) !important;
}

.ds-button-outlined:hover {
    background: var(--surface-2) !important;
}

.ds-button-ghost {
    background: transparent !important;
    color: var(--text-primary) !important;
    border: 0 !important;
}

.ds-button-ghost:hover {
    background: var(--neutral-hover) !important;
}

.ds-icon-button {
    min-width: 32px !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    color: var(--text-secondary) !important;
    border-radius: var(--radius-sm) !important;
}

.ds-icon-button i {
    font-size: 18px;
}

.ds-icon-button:hover {
    color: var(--primary) !important;
    background: var(--neutral-hover) !important;
}

.ds-icon-button-danger {
    color: var(--danger-fg) !important;
}

.ds-icon-button-danger:hover {
    color: var(--danger) !important;
    background: var(--danger-soft) !important;
}

.ds-segmented {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.ds-segmented-item {
    min-width: 0 !important;
    height: 28px !important;
    padding: 0 12px !important;
    border-radius: var(--radius-xs) !important;
    color: var(--text-secondary) !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--fw-medium) !important;
}

.ds-segmented-item.active {
    background: var(--surface) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-xs);
}

.ds-search-shell {
    position: relative;
    width: min(280px, 100%);
}

.ds-search-shell > .ti {
    position: absolute;
    left: 13px;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    font-size: 18px;
    pointer-events: none;
}

.ds-search-shell .mud-input-root {
    padding-left: 38px !important;
}

.ds-search-field {
    width: 100%;
}

.ds-select-shell {
    position: relative;
    width: min(220px, 100%);
}

.ds-select-shell > .ti {
    position: absolute;
    left: 13px;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    font-size: 18px;
    pointer-events: none;
}

.ds-select-shell .mud-input-root {
    padding-left: 38px !important;
}

.client-search {
    width: min(340px, 100%);
}

.client-sort {
    width: min(210px, 100%);
}

.history-search {
    width: 100%;
}

.ds-table .mud-table-container {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.ds-table .mud-table-toolbar {
    min-height: 68px;
    padding: 14px 20px;
}

.ds-table .mud-table-head .mud-table-cell {
    padding: 12px 20px !important;
    color: var(--text-tertiary) !important;
    font-size: 0.6875rem !important;
    font-weight: var(--fw-semibold) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
}

.ds-table .mud-table-body .mud-table-cell {
    padding: 14px 20px !important;
    vertical-align: middle;
}

.product-name-cell {
    min-width: 320px;
}

.product-name-cell b {
    display: block;
    color: var(--text-primary);
    font-weight: var(--fw-bold);
    line-height: 1.35;
}

.product-name-cell span {
    display: block;
    max-width: 360px;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-price-cell {
    color: var(--text-primary) !important;
    font-family: var(--font-mono);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
}

.product-days-cell {
    color: var(--text-secondary) !important;
    font-size: var(--text-sm) !important;
    white-space: nowrap;
}

.category-chip {
    border-radius: var(--radius-pill) !important;
    font-size: var(--text-xs) !important;
}

.category-chip-danger {
    background: var(--danger-soft) !important;
    color: var(--danger-fg) !important;
}

.category-chip-warning {
    background: var(--warning-soft) !important;
    color: var(--warning-fg) !important;
}

.category-chip-info {
    background: var(--info-soft) !important;
    color: var(--info-fg) !important;
}

.category-chip-success {
    background: var(--success-soft) !important;
    color: var(--success-fg) !important;
}

.category-chip-accent {
    background: var(--accent-soft) !important;
    color: var(--accent-soft-fg) !important;
}

.status-chip {
    min-width: 0;
    height: 22px !important;
    padding: 0 10px !important;
    font-size: 0.75rem !important;
}

.registration-chip {
    gap: 4px !important;
    height: 22px !important;
    padding: 0 9px !important;
    font-size: var(--text-xs) !important;
}

.registration-chip .ti {
    font-size: 14px;
}

.registration-chip-ai {
    background: var(--info-soft) !important;
    color: var(--info-fg) !important;
}

.registration-chip-manual {
    background: var(--success-soft) !important;
    color: var(--success-fg) !important;
}

.client-meta-icon,
.history-meta-icon {
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1;
}

/* Bolhas de conversa estilo WhatsApp — usam os tokens de tema (claro/escuro). */
.wa-bubble {
    max-width: 75%;
    padding: 8px 12px;
    border-radius: 12px;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.08));
    word-break: break-word;
}

/* Mensagem do cliente (recebida) — à esquerda, tom neutro. */
.wa-bubble--in {
    background-color: var(--surface-2);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-bottom-left-radius: 4px;
}

/* Resposta da IA / atendente (enviada) — à direita, cor primária com contraste garantido. */
.wa-bubble--out {
    background-color: var(--primary);
    color: var(--primary-contrast);
    border-bottom-right-radius: 4px;
}

.wa-bubble__author {
    display: block;
    font-size: 11px;
    font-weight: 600;
    opacity: 0.85;
    margin-bottom: 2px;
}

.wa-bubble__text {
    font-size: 14px;
    line-height: 1.35;
    white-space: pre-wrap;
}

.wa-bubble__meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 4px;
    font-size: 11px;
    opacity: 0.75;
}

.wa-bubble__meta i {
    font-size: 13px;
    line-height: 1;
}

/* Aviso de sistema (handoff, etc.) — centralizado e discreto. */
.wa-system {
    display: inline-block;
    max-width: 85%;
    padding: 4px 12px;
    border-radius: 10px;
    background-color: var(--surface-3);
    color: var(--text-secondary);
    font-size: 12px;
    text-align: center;
}

.ds-dialog-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
}

.ds-dialog-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}

.ds-dialog-close:hover {
    background: var(--neutral-hover);
    color: var(--text-primary);
}

.mud-dialog {
    overflow: hidden;
}

.mud-dialog-title {
    padding: 18px 22px !important;
}

.mud-dialog-content {
    padding: 22px !important;
}

.mud-dialog-actions {
    padding: 16px 22px !important;
    background: var(--surface-2) !important;
    border-top: 1px solid var(--divider);
}

.mud-dialog-actions .mud-button-text {
    color: var(--text-primary) !important;
}

.allergen-hint-icon {
    color: var(--warning);
    font-size: 14px;
}

.upload-drop-icon {
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: 30px;
}

.mud-alert .ti {
    margin-right: 4px;
    font-size: 16px;
    vertical-align: -2px;
}

.ds-checkbox-list {
    gap: 8px 18px;
}

/* ── Seleção de permissões (cadastro de usuário) ─────────────── */
.perm-selector {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.perm-selector-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
}

.perm-selector-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.perm-selector-summary i {
    font-size: 18px;
    color: var(--primary);
}

.perm-selector-summary strong {
    color: var(--text-primary);
    font-weight: var(--fw-bold);
}

.perm-selector-actions {
    display: flex;
    gap: 6px;
}

.perm-chip-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: var(--transition-base);
}

.perm-chip-action:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-soft);
}

.perm-chip-action:disabled {
    opacity: .45;
    cursor: default;
}

.perm-modules {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.perm-module {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    overflow: hidden;
    transition: border-color var(--dur-base) var(--ease-standard);
}

.perm-module--active {
    border-color: var(--primary);
}

.perm-module-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--divider);
}

.perm-module-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    background: var(--primary-soft);
    color: var(--primary-soft-fg);
    font-size: 17px;
}

.perm-module-title {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.perm-module-title h4 {
    margin: 0;
    font-size: var(--text-base);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    line-height: 1.25;
}

.perm-module-count {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

.perm-module-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 4px 8px;
    border: none;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: var(--transition-base);
}

.perm-module-toggle:hover {
    background: var(--neutral-hover);
    color: var(--primary);
}

.perm-module-grid {
    display: flex;
    flex-direction: column;
    padding: 6px;
}

.perm-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-standard);
}

.perm-option:hover {
    background: var(--neutral-hover);
}

.perm-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.perm-option-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    flex-shrink: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xs);
    background: var(--surface);
    color: transparent;
    font-size: 12px;
    transition: var(--transition-base);
}

.perm-option--on .perm-option-box {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--primary-contrast);
}

.perm-option input:focus-visible + .perm-option-box {
    box-shadow: var(--shadow-focus);
}

.perm-option-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.perm-option-label {
    font-size: var(--text-base);
    font-weight: var(--fw-medium);
    color: var(--text-primary);
    line-height: 1.3;
}

.perm-option--on .perm-option-label {
    color: var(--primary);
    font-weight: var(--fw-semibold);
}

.perm-option-description {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    line-height: 1.35;
}

@media (max-width: 600px) {
    .perm-modules {
        grid-template-columns: 1fr;
    }

    .perm-selector-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }
}

.mud-checkbox {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px;
    margin: 0 !important;
}

.mud-checkbox .mud-button-root {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    padding: 0 !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius-xs) !important;
    background: var(--surface) !important;
    color: transparent !important;
}

.mud-checkbox .mud-button-root .mud-icon-root {
    display: none !important;
}

.mud-checkbox .mud-checkbox-true,
.mud-checkbox .mud-checkbox-indeterminate {
    position: relative;
    border-color: var(--primary) !important;
    background: var(--primary) !important;
    color: #fff !important;
}

.mud-checkbox .mud-checkbox-true::after {
    content: "";
    width: 11px;
    height: 6px;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: rotate(-45deg) translate(1px, -1px);
}

.mud-checkbox .mud-checkbox-indeterminate::after {
    content: "";
    width: 10px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
}

.mud-checkbox .mud-typography {
    color: var(--text-primary);
    font-size: var(--text-base);
}

.mud-card-header .mud-card-header-actions {
    margin-inline-start: auto;
}

.mud-card-content .mud-paper[style*="background-color: var(--mud-palette-background-grey)"] {
    min-height: 48px;
    padding: 12px 14px !important;
    background: var(--surface-2) !important;
    border: 0 !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
}

.category-chevron,
.card-title-icon,
.stat-card-icon,
.order-column-icon,
.order-card-meta-icon {
    color: var(--primary);
    font-size: 18px;
    line-height: 1;
}

.stat-card-icon {
    color: var(--text-secondary);
    font-size: 22px;
}

.order-card-meta-icon {
    color: var(--text-secondary);
    font-size: 16px;
}

@media (max-width: 760px) {
    .topbar {
        padding: 0 12px;
    }

    .brand-logo {
        width: 30px;
        height: 30px;
    }

    .brand-wordmark {
        font-size: 1rem;
    }

    .main-content {
        padding: 18px 14px 88px;
    }

    .mud-table-toolbar {
        align-items: stretch;
    }

    /* Vários dialogs fixam min-width (480–500px) e estouravam a viewport do celular.
       Aqui eles passam a caber na tela, sobrepondo o min-width inline. */
    .mud-dialog {
        min-width: 0 !important;
        width: 100% !important;
        max-width: calc(100vw - 24px) !important;
        margin-left: 12px !important;
        margin-right: 12px !important;
    }

    /* Conteúdos de largura fixa dentro dos dialogs também acompanham a tela. */
    .mud-dialog [style*="width: 260px"],
    .mud-dialog [style*="width:260px"] {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ── Dashboard ── */
.kpi-card {
    border-radius: var(--radius-md, 10px);
    height: 100%;
    transition: box-shadow var(--dur-base, 150ms) ease;
}

.kpi-card:hover {
    box-shadow: var(--shadow-md);
}

.kpi-icon-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
}

.kpi-icon-badge i {
    font-size: 20px;
    line-height: 1;
}

.kpi-icon-badge--primary { background: var(--primary-soft); color: var(--primary); }
.kpi-icon-badge--success { background: var(--success-soft); color: var(--success); }
.kpi-icon-badge--warning { background: var(--warning-soft); color: var(--warning); }
.kpi-icon-badge--info { background: var(--info-soft); color: var(--info); }
.kpi-icon-badge--danger { background: var(--danger-soft); color: var(--danger); }

.dashboard-chart-card {
    border-radius: var(--radius-md, 10px);
    height: 100%;
}

.dashboard-filter-presets .mud-button-root {
    text-transform: none;
}

.dashboard-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 40px 16px;
    text-align: center;
    color: var(--text-secondary);
    min-height: 220px;
}

.dashboard-empty i {
    font-size: 28px;
    opacity: .5;
}

.rank-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rank-row-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.rank-position {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.rank-label {
    flex: 1;
    min-width: 0;
}

.rank-value {
    flex-shrink: 0;
    font-weight: 600;
    font-size: .8125rem;
    color: var(--text-primary);
    white-space: nowrap;
}

.rank-bar-track {
    position: relative;
    height: 8px;
    border-radius: 4px;
    background: var(--surface-2);
    overflow: hidden;
    margin-left: 30px;
}

.rank-bar-fill {
    position: absolute;
    inset: 0;
    border-radius: 4px;
    animation: rank-grow-width calc(var(--dur-slow, 280ms) * 2) cubic-bezier(.22, .68, 0, 1.01) both;
    animation-delay: var(--chart-delay, 0ms);
}

@media (max-width: 760px) {
    .rank-bar-track {
        margin-left: 0;
    }
}

/* Conteúdo que fica visível durante um refresh (troca de filtro): em vez de sumir pra um
   skeleton, só esmaece um pouco — o "flash" de tela em branco é o que estava incomodando. */
.dashboard-refresh-target {
    transition: opacity var(--dur-base, 180ms) ease;
}

.dashboard-refresh-target.is-refreshing {
    opacity: .45;
    pointer-events: none;
}

/* Gráficos "nascem" da base a cada carga de dados (troca de filtro ou primeira renderização).
   Como o SVG é recriado por inteiro a cada render (é uma string, não elementos diffados), a
   animação sempre reinicia sozinha — dá a sensação de construção progressiva pedida. */
@keyframes chart-grow-y {
    from { transform: scaleY(0); }
}

@keyframes chart-fade-in {
    from { opacity: 0; }
}

@keyframes rank-grow-width {
    from { width: 0%; }
}

.chart-bar {
    transform-box: fill-box;
    transform-origin: center bottom;
    animation: chart-grow-y calc(var(--dur-slow, 280ms) * 2) cubic-bezier(.22, .68, 0, 1.01) both;
    animation-delay: var(--chart-delay, 0ms);
    /* Quem recebe o hover é a coluna invisível (.chart-hit); a barra só reage visualmente. */
    pointer-events: none;
    transition: filter var(--dur-fast, 120ms) ease;
}

.chart-series {
    transform-box: fill-box;
    transform-origin: center bottom;
    animation: chart-grow-y calc(var(--dur-slow, 280ms) * 2.4) cubic-bezier(.22, .68, 0, 1.01) both;
}

.chart-point {
    animation: chart-fade-in calc(var(--dur-slow, 280ms) * 1.4) ease-out both;
    animation-delay: var(--chart-delay, 0ms);
    /* Quem recebe o hover é o círculo invisível (.chart-point-hit) logo atrás. */
    pointer-events: none;
    transform-box: fill-box;
    transform-origin: center;
    transition: transform var(--dur-fast, 120ms) ease;
}

.chart-hit,
.chart-point-hit {
    cursor: default;
}

.chart-hit:hover + .chart-bar {
    filter: brightness(1.12);
}

.chart-point-hit:hover + .chart-point {
    transform: scale(1.6);
}

/* Tooltip customizado dos gráficos do dashboard (ver wwwroot/js/dashboard-tooltip.js). */
.chart-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--radius-sm, 8px);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-fast, 120ms) ease;
    will-change: transform;
}

.chart-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
}

.chart-tooltip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.chart-tooltip-label {
    color: var(--text-secondary);
}

.chart-tooltip-value {
    color: var(--text-primary);
    font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: 0ms;
        --dur-base: 0ms;
        --dur-slow: 0ms;
    }

    .chart-bar,
    .chart-series,
    .chart-point,
    .rank-bar-fill {
        animation: none !important;
    }

    .chart-bar,
    .chart-point,
    .chart-tooltip {
        transition: none !important;
    }
}

/* Faixa fixa de envios pelo WhatsApp suspensos (WhatsAppSuspendedBanner). */
.wa-suspended-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    border-width: 1px;
    border-style: solid;
}

.wa-suspended-banner a {
    margin-left: auto;
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}