/* /Pages/Clientes.razor.rz.scp.css */
/* Clientes: página, números, lista e modais vêm de wwwroot/app.css.
   Aqui ficam só as células próprias da lista de clientes. */

.cl-mono[b-8fm2zhlo5g] { font-variant-numeric: tabular-nums; color: var(--text-primary); white-space: nowrap; }
.cl-dim[b-8fm2zhlo5g]  { color: var(--text-muted); font-size: var(--fs-sm); }

.cl-num[b-8fm2zhlo5g] { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.cl-user[b-8fm2zhlo5g] { display: flex; align-items: center; gap: .65rem; }
.cl-name[b-8fm2zhlo5g] { font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.cl-sub[b-8fm2zhlo5g]  { font-size: var(--fs-xs); color: var(--text-muted); margin-top: .05rem; }

.cl-avatar[b-8fm2zhlo5g] {
    width: 30px; height: 30px;
    min-width: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: var(--fs-xs);
    letter-spacing: .02em;
    flex-shrink: 0;
}
.cl-av--blue[b-8fm2zhlo5g]   { background: var(--blue-100); color: var(--blue-700); }
.cl-av--teal[b-8fm2zhlo5g]   { background: #DDF2F0; color: #0E6E6A; }
.cl-av--amber[b-8fm2zhlo5g]  { background: #FBEFD5; color: #8A5300; }
.cl-av--violet[b-8fm2zhlo5g] { background: #ECEEFD; color: #4451C4; }
.cl-av--rose[b-8fm2zhlo5g]   { background: #FBE7EE; color: #A3315A; }

.cl-tag[b-8fm2zhlo5g] {
    display: inline-flex;
    align-items: center;
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: .1rem .5rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.cl-tag--amber[b-8fm2zhlo5g] { background: var(--warning-dim); color: var(--warning); border-color: var(--warning-border); }
.cl-tag--green[b-8fm2zhlo5g] { background: var(--success-dim); color: var(--success); border-color: var(--success-border); }
.cl-tag--muted[b-8fm2zhlo5g] { background: #ECEFF4; color: var(--text-muted); border-color: var(--border); }

.cl-badge[b-8fm2zhlo5g] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: .1rem .55rem;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.cl-badge i[b-8fm2zhlo5g] { display: block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.cl-badge--ok[b-8fm2zhlo5g]     { background: var(--success-dim); color: var(--success); border-color: var(--success-border); }
.cl-badge--puffs[b-8fm2zhlo5g]  { background: var(--blue-100); color: var(--blue-700); border-color: var(--blue-200); }
.cl-badge--sample[b-8fm2zhlo5g] { background: var(--info-dim); color: var(--info); border-color: #D3D7FA; }
.cl-badge--off[b-8fm2zhlo5g]    { background: #ECEFF4; color: var(--text-muted); border-color: var(--border); }

.cl-acts[b-8fm2zhlo5g] { display: inline-flex; gap: .25rem; }
.cl-act[b-8fm2zhlo5g] {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border-radius: var(--radius);
    border: 1px solid var(--border-strong);
    background: var(--white);
    cursor: pointer;
    color: var(--text-muted);
    transition: background-color .12s, color .12s, border-color .12s;
}
.cl-act--edit:hover[b-8fm2zhlo5g] { color: var(--blue-600); background: var(--blue-50); border-color: var(--blue-300); }
.cl-act--del:hover[b-8fm2zhlo5g]  { color: var(--danger); background: var(--danger-dim); border-color: var(--danger-border); }
/* /Pages/Componentes/LoginLayout.razor.rz.scp.css */
.login-shell[b-e6dlv4inbg] {
    min-height: 100vh;
    background: var(--white);
}
/* /Pages/Login.razor.rz.scp.css */
/* Login ao estilo Salesforce: coluna branca com o logótipo e o formulário,
   faixa da marca com linhas de vapor à direita. O logótipo tem fundo branco,
   por isso fica sempre sobre branco. */

.lg[b-xlpo0mma29] {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(380px, 520px) 1fr;
    background: var(--white);
    font-family: var(--font);
}

/* ── Coluna do formulário ──────────────────────────────────────── */
.lg-main[b-xlpo0mma29] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem 1.5rem;
}
.lg-logo[b-xlpo0mma29] {
    width: 260px;
    height: auto;
    margin-bottom: 1.75rem;
}

.lg-card[b-xlpo0mma29] {
    width: 100%;
    max-width: 360px;
    padding: 1.5rem 1.5rem 1.25rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--white);
}
.lg-title[b-xlpo0mma29] {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.lg-alert[b-xlpo0mma29] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: 1rem;
    padding: .6rem .75rem;
    font-size: var(--fs-sm);
    color: var(--danger);
    background: var(--danger-dim);
    border: 1px solid var(--danger-border);
    border-radius: var(--radius);
}
.lg-alert svg[b-xlpo0mma29] { flex: 0 0 auto; margin-top: 1px; }

.lg-card[b-xlpo0mma29]  .lg-fields { display: flex; flex-direction: column; gap: .9rem; }
.lg-card[b-xlpo0mma29]  .lg-fld { display: flex; flex-direction: column; gap: .3rem; }
.lg-card[b-xlpo0mma29]  .lg-fld label { font-size: var(--fs-sm); color: var(--text-secondary); }
.lg-card[b-xlpo0mma29]  .lg-fld input {
    height: 38px;
    padding: 0 .75rem;
    font-family: var(--font);
    font-size: var(--fs-md);
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--white);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.lg-card[b-xlpo0mma29]  .lg-fld input:focus { border-color: var(--blue-500); box-shadow: var(--focus-ring); }
.lg-card[b-xlpo0mma29]  .lg-fld input.invalid { border-color: var(--danger); outline: none; }
.lg-card[b-xlpo0mma29]  .lg-val { font-size: var(--fs-xs); color: var(--danger); }

.lg-card[b-xlpo0mma29]  .lg-submit { width: 100%; height: 40px; font-size: var(--fs-md); margin-top: .25rem; }

.lg-card[b-xlpo0mma29]  .lg-check {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}
.lg-card[b-xlpo0mma29]  .lg-check input { width: 16px; height: 16px; accent-color: var(--blue-600); }

.lg-help[b-xlpo0mma29] {
    max-width: 360px;
    margin-top: 1rem;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    text-align: center;
}
.lg-foot[b-xlpo0mma29] { margin-top: auto; padding-top: 2rem; font-size: var(--fs-xs); color: var(--text-dim); }

/* ── Faixa da marca ────────────────────────────────────────────── */
.lg-side[b-xlpo0mma29] {
    display: flex;
    align-items: center;
    padding: clamp(2rem, 6vw, 5rem);
    color: var(--white);
    background:
        var(--vapor) repeat left top / 240px 136px,
        var(--band);
}
.lg-side__copy[b-xlpo0mma29] { max-width: 30rem; }
.lg-side__copy h2[b-xlpo0mma29] {
    font-size: clamp(1.75rem, 2.6vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.015em;
    color: var(--white);
    margin-bottom: 1.5rem;
}
.lg-side__copy ul[b-xlpo0mma29] { list-style: none; display: flex; flex-direction: column; gap: .7rem; }
.lg-side__copy li[b-xlpo0mma29] {
    position: relative;
    padding-left: 1.6rem;
    font-size: var(--fs-md);
    line-height: 1.4;
    color: rgba(255, 255, 255, .88);
}
.lg-side__copy li[b-xlpo0mma29]::before {
    content: '';
    position: absolute;
    left: 0;
    top: .2em;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Responsivo ────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .lg[b-xlpo0mma29] { grid-template-columns: 1fr; }
    .lg-side[b-xlpo0mma29] { display: none; }
    .lg-main[b-xlpo0mma29] { background: var(--white); }
}
@media (max-width: 420px) {
    .lg-main[b-xlpo0mma29] { padding: 1.5rem 1rem 1rem; }
    .lg-logo[b-xlpo0mma29] { width: 210px; }
    .lg-card[b-xlpo0mma29] { padding: 1.25rem 1rem 1rem; }
}
/* /Pages/Produtos.razor.rz.scp.css */
/* Produtos: página, números, lista, modais e formulários vêm de wwwroot/app.css.
   Aqui fica só a tabela, que centra as colunas numéricas. */

.prod-table[b-menv2k1nzz] { width: 100%; border-collapse: collapse; font-size: var(--fs-base); font-family: var(--font); }
.prod-table thead th[b-menv2k1nzz] {
    text-align: center;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-elevated);
    padding: .5rem .875rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.prod-table tbody td[b-menv2k1nzz] {
    padding: .55rem .875rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
    vertical-align: middle;
    text-align: center;
}
.prod-table th.ta-left[b-menv2k1nzz], .prod-table td.ta-left[b-menv2k1nzz] { text-align: left; }
.prod-table thead th:first-child[b-menv2k1nzz], .prod-table tbody td:first-child[b-menv2k1nzz] { padding-left: 1.125rem; }
.prod-table thead th:last-child[b-menv2k1nzz], .prod-table tbody td:last-child[b-menv2k1nzz] { padding-right: 1.125rem; }
.prod-table tbody tr:hover td[b-menv2k1nzz] { background: var(--bg-hover); }
.prod-table tbody tr:last-child td[b-menv2k1nzz] { border-bottom: none; }

.prod-cell[b-menv2k1nzz] { display: flex; align-items: center; gap: .65rem; }
.prod-avatar[b-menv2k1nzz] {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    border-radius: 6px;
    background: #F1EAFB;
    color: #6B3FB0;
    font-weight: 700;
    font-size: var(--fs-xs);
    display: grid;
    place-items: center;
}
.prod-cell__name[b-menv2k1nzz] { font-weight: 600; color: var(--text-primary); }

.row-actions[b-menv2k1nzz] { justify-content: center; }