/* ============================================================
   Cms — sistema de design global (tokens + base)
   Casca do layout (topbar/sidebar/tema — ver MainLayout.razor/NavMenu.razor)
   replicada do SchedulePro.Web ("temarquei", D:\NovoAgendamento\src\SchedulePro.Web),
   a pedido explícito — mesma paleta (indigo/violeta + rosa) e fonte (Inter).
   Antes disso o app usava a direção "Corporate Clean" do handoff "Layout melhor
   para CMS" (indigo mais escuro #4f46e5 + Plus Jakarta Sans + sidebar escura) —
   as páginas internas (Empresas, Usuários, CMS...) ainda usam esses tokens pra
   cards/botões/badges, só a casca (agora MudBlazor) parou de usar os tokens de
   sidebar antigos (removidos abaixo por ficarem órfãos).
   Carregado uma vez em wwwroot/index.html, vale para toda a app. As paginas
   continuam podendo ter <style> proprios por cima disso para ajustes
   especificos (ver Pages/Login.razor, por exemplo).
   ============================================================ */

:root {
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --color-bg: #f8fafc;
    --color-surface: #ffffff;
    --color-border: #e2e8f0;
    --color-border-soft: #eef2f6;
    --color-border-strong: #cbd5e1;
    --color-text: #0f172a;
    --color-text-muted: #64748b;
    --color-text-subtle: #94a3b8;
    --color-text-faint: #cbd5e1;

    --color-primary: #6366f1;
    --color-primary-hover: #4f46e5;
    --color-primary-light: #eef0ff;
    --color-primary-soft: #e0e7ff;

    --color-secondary: #ec4899;
    --color-secondary-light: #fce7f3;

    --color-success: #16a34a;
    --color-success-bg: #dcfce7;
    --color-success-border: #bbf0cd;
    --color-error: #dc2626;
    --color-error-bg: #fee2e2;
    --color-error-border: #fbcaca;
    --color-warning: #92400e;
    --color-warning-bg: #fffbeb;
    --color-warning-border: #fde68a;

    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-pill: 20px;

    --shadow-sm: 0 1px 2px rgba(27, 30, 43, .05);
    --shadow-md: 0 8px 24px rgba(27, 30, 43, .08);
    --shadow-lg: 0 16px 40px rgba(27, 30, 43, .14);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-size: 14px;
    line-height: 1.5;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d7dae2; border-radius: 8px; border: 3px solid var(--color-bg); }

h1, h2, h3 {
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 .5rem;
    color: var(--color-text);
}

h1 { font-size: 1.625rem; }
h2 { font-size: 1rem; font-weight: 800; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border-soft); }
h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
h3 { font-size: .9375rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }

p { margin: 0 0 .75rem; color: var(--color-text-muted); }

a { color: var(--color-primary); text-decoration: none; font-weight: 600; }
a:hover { color: var(--color-primary-hover); }

em { color: var(--color-text-subtle); font-style: normal; }

/* ---------- Botoes ---------- */

button {
    font-family: inherit;
    font-size: .8125rem;
    font-weight: 600;
    padding: .55rem .95rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}

button:hover { background: #fafbfc; border-color: var(--color-border-strong); }
button:disabled { opacity: .55; cursor: not-allowed; }
button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-primary-light); border-color: var(--color-primary); }

/* Botao de submit (Salvar/Entrar/Criar/Adicionar/Vincular...) vira o botao "primario" da tela
   automaticamente, sem precisar marcar cada um no markup de cada pagina. */
button[type="submit"], .btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
button[type="submit"]:hover, .btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: #fff; }

/* Link estilizado como botao (ex.: "+ Nova Empresa", "+ Novo Usuário") — os links de navegacao
   do design ficam com cara de botao solido, nao de texto azul sublinhado. */
a.btn-primary, a.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 40px;
    padding: 0 1rem;
    border-radius: var(--radius-sm);
    font-size: .8125rem;
    font-weight: 700;
    text-decoration: none;
}
a.btn-primary:hover { text-decoration: none; }
a.btn-secondary {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
}
a.btn-secondary:hover { background: #fafbfc; text-decoration: none; color: var(--color-text); }

/* ---------- Formularios ---------- */

label {
    display: block;
    font-size: .78125rem;
    font-weight: 700;
    color: var(--color-text-muted);
    margin-bottom: .4rem;
}

/* input:not([type=checkbox]):not([type=radio]) em vez de listar input[type="text"],
   input[type="password"] etc.: os componentes <InputText>/<InputNumber>/<InputDate> do Blazor
   NÃO renderizam o atributo type="text" (confirmado via getComputedStyle em produção — o campo
   fica com type=null no DOM), então um seletor baseado em atributo nunca casava com eles e a
   maioria dos campos de texto do app renderizava sem estilo nenhum (sem borda, sem padding,
   altura de input nu do navegador) — só escapavam os campos que usavam <input> puro com type
   explícito (ex.: "Nova senha" em Usuarios/Form.razor) ou tinham uma classe própria (ex.:
   .login-input no Login). Esse seletor por elemento cobre os dois casos de uma vez, sem
   depender de type estar presente. InputCheckbox do Blazor renderiza type="checkbox" de verdade,
   então a exclusão abaixo continua funcionando normalmente. */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    width: 100%;
    font-family: inherit;
    font-size: .875rem;
    padding: .6rem .8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    transition: border-color .15s ease, box-shadow .15s ease;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

input[type="checkbox"] { width: auto; accent-color: var(--color-primary); }

/* ---------- Tabelas ---------- */
/* Continuam <table> semantico (nao viramos div-grid como o prototipo) — so o visual imita o
   prototipo: dentro de um .card, cabecalho discreto maiusculo, divisorias suaves. */

/* display:block (removido) quebrava o layout nativo de tabela — a <tr> parava de esticar até o
   fim da largura disponível e encolhia pro tamanho do conteúdo (ex.: tabela com só 3-4 colunas
   curtas ficava "colada" à esquerda, com um vão vazio à direita dentro do .card, mesmo a <table>
   em si medindo 100% do container). overflow-x:auto sozinho, sem display:block, já dá scroll
   horizontal em telas estreitas nos navegadores atuais — sem precisar sair do modo de tabela nativo. */
table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 1.5rem;
    font-size: .84375rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table thead th {
    text-align: left;
    padding: .5rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    font-size: .65625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-text-subtle);
    background: #fafbfc;
    white-space: nowrap;
}

table tbody td {
    padding: .5rem 1.25rem;
    border-bottom: 1px solid var(--color-border-soft);
    vertical-align: middle;
}

table tbody tr:hover td { background: #fafbfc; }
table tbody tr:last-child td { border-bottom: none; }

/* Tabela dentro de um .card fica sem borda propria (o card ja fornece) */
.card table { margin-bottom: 0; }
.card table thead th:first-child, .card table tbody td:first-child { padding-left: 1.25rem; }

/* ---------- Alertas ---------- */

.erro, .sucesso, .aviso {
    display: flex;
    gap: .75rem;
    padding: .85rem 1.1rem;
    border-radius: var(--radius-md);
    margin-bottom: 1.25rem;
    font-size: .84375rem;
    line-height: 1.5;
    border: 1px solid;
}

.erro { color: #991b1b; background: var(--color-error-bg); border-color: var(--color-error-border); }
.sucesso { color: #065f46; background: var(--color-success-bg); border-color: var(--color-success-border); }
.aviso { color: var(--color-warning); background: var(--color-warning-bg); border-color: var(--color-warning-border); border-left: 3px solid #f59e0b; }

/* ---------- Cards ---------- */

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

.card-header {
    padding: .9rem 1.25rem;
    font-weight: 700;
    font-size: .875rem;
    background: #fafbfc;
    border-bottom: 1px solid var(--color-border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.card-body { padding: 1.5rem; }

/* ---------- Badges (pilulas de status) ---------- */

.badge {
    display: inline-flex;
    align-items: center;
    font-size: .71875rem;
    font-weight: 700;
    padding: .2rem .65rem;
    border-radius: var(--radius-pill);
}

.badge-success { color: var(--color-success); background: var(--color-success-bg); }
.badge-danger { color: var(--color-error); background: var(--color-error-bg); }
.badge-neutral { color: var(--color-text-subtle); background: var(--color-border-soft); }

/* ---------- Toggle (switch on/off, usado em Empresas/Servicos.razor) ---------- */

.toggle { display: inline-flex; align-items: center; cursor: pointer; }
.toggle input { display: none; }
.toggle-track {
    width: 40px;
    height: 23px;
    border-radius: 20px;
    background: var(--color-border-strong);
    position: relative;
    transition: background .15s ease;
    flex-shrink: 0;
}
.toggle-thumb {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: 3px;
    left: 3px;
    transition: left .15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}
.toggle input:checked + .toggle-track { background: var(--color-primary); }
.toggle input:checked + .toggle-track .toggle-thumb { left: 20px; }

/* ---------- Checkbox customizado (visual do handoff — quadrado com check em SVG) ---------- */

.check-box { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; font-size: .78125rem; font-weight: 600; }
.check-box input { display: none; }
.check-box-mark {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid var(--color-border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .12s ease, border-color .12s ease;
}
.check-box input:checked + .check-box-mark {
    background: var(--color-primary);
    border-color: var(--color-primary);
}
.check-box-mark svg { display: none; }
.check-box input:checked + .check-box-mark svg { display: block; }
.check-box-off-label { color: var(--color-text-subtle); font-weight: 500; }

/* ---------- Avatar (iniciais) ---------- */

.avatar {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.avatar-circle { border-radius: 50%; }
.avatar-square { border-radius: 9px; }

/* ---------- Breadcrumb ---------- */

.breadcrumb {
    font-size: .8125rem;
    color: var(--color-text-subtle);
    margin-bottom: .4rem;
}
.breadcrumb a { font-weight: 600; }
.breadcrumb .sep { color: var(--color-text-faint); margin: 0 .3rem; }

.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.page-header h1 { margin-bottom: 0; }
.page-subtitle { font-size: .875rem; color: var(--color-text-muted); margin-top: .3rem; }

/* Select/input avulso (sem estar dentro de um .form-linha ou div que ja limita a largura) —
   evita que ele estique por todo o conteudo da pagina. */
.select-inline {
    max-width: 280px;
}

/* ---------- Linha de formulario (campos lado a lado) — usado em varias paginas ---------- */
/* As paginas que usam essa classe tambem redeclaram essas mesmas regras no <style> local
   (redundante, inofensivo) — manter aqui garante que o comportamento responsivo abaixo
   vale em todo lugar, mesmo se uma pagina nova esquecer de copiar o bloco local. */

.form-linha { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1.5rem; }
.form-linha > div { display: flex; flex-direction: column; gap: .3rem; }
.dica { color: var(--color-text-subtle); font-size: .8125rem; max-width: 700px; }

/* ---------- Responsivo ---------- */

@media (max-width: 880px) {
    h1 { font-size: 1.3rem; }

    /* Empilha os campos de formularios "em linha" — em telas estreitas ficar lado a lado
       espreme demais os inputs. */
    .form-linha { flex-direction: column; align-items: stretch; }
    .form-linha > div { max-width: none !important; }

    .page-header { flex-direction: column; align-items: stretch; }
}

@media (max-width: 480px) {
    body { font-size: 13px; }
}

/* Blazor error UI (nativo do template) — background era var(--color-sidebar-bg), token removido
   na migração pro MudBlazor (a sidebar virou MudDrawer, não usa mais essa variável); ficou órfã
   aqui fazendo o banner de erro renderizar sem cor nenhuma. Cor fixa agora, não depende de token
   que outra parte do app possa remover de novo no futuro. */
#blazor-error-ui {
    background: #111827;
    color: #fff;
    bottom: 0;
    box-shadow: var(--shadow-lg);
    display: none;
    left: 0;
    padding: .85rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: .8125rem;
}
#blazor-error-ui .reload { color: #a5b4fc; text-decoration: underline; margin-left: .5rem; }
#blazor-error-ui .dismiss { cursor: pointer; float: right; opacity: .7; }

/* ---------- Modal reutilizável (backdrop + card centralizada) ---------- */
/* Usado por toda tela de "Editar" do app (pedido explícito: nenhuma edição navega pra outra
   página ou expande inline na lista — tudo abre como modal por cima, sem perder o contexto/scroll
   da lista de trás). Clique no backdrop fecha; clique dentro do modal não propaga (senão qualquer
   clique dentro do formulário fecharia o modal). */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 300;
    padding: 2rem 1.25rem;
    overflow-y: auto;
}

.modal-dialog {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 640px;
    padding: 1.6rem;
    animation: modal-in .15s ease;
}

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

@keyframes modal-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
    .modal-backdrop { padding: 1.25rem; }
}