/* public\shared\css\tema.css */

:root {
    --fonte-padrao: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    --cor-principal: #bc8ac8;
    --cor-principal-texto: hsl(0 0% 100%);
    --cor-secundaria: #4b5563;
    --cor-acao: #0ea5e9;
    --cor-acao-hover: #0284c7;
    --cor-sucesso: #16a34a;
    --cor-alerta: #f59e0b;
    --cor-perigo: #dc2626;
    --cor-borda: #e5e7eb;
    --cor-gelo: #f7f7f7;
    --cor-branco: #ffffff;
    --sombra: 0 2px 10px rgba(0, 0, 0, 0.06);

    --cor-bg: hsl(220 20% 97%);
    --cor-surface: hsl(0 0% 100%);
    --cor-texto: hsl(220 25% 14%);
    --cor-texto-sec: hsl(220 12% 46%);

    --cor-perigo: hsl(0 72% 56%);
    --cor-sucesso: hsl(152 60% 40%);
    --cor-aviso: hsl(38 92% 50%);
    --cor-input-bg: hsl(220 20% 97%);
    --cor-input-borda: hsl(220 18% 82%);
    --cor-input-focus: hsl(263 55% 52%);
    --sombra-sm: 0 1px 3px hsl(220 20% 10% / 0.06);
    --sombra-md: 0 4px 12px hsl(220 20% 10% / 0.08);
    --sombra-lg: 0 8px 30px hsl(220 20% 10% / 0.12);
    --raio: 10px;
    --raio-sm: 6px;
    --transicao: 0.2s ease;
    font-size: 15px;
}

a {
    color: inherit;
    text-decoration: none;
}
button {
    cursor: pointer;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.topbar-user {
    margin-left: auto;
    padding: 20px;
}

/* ── Tabelas ─────────────────────────────────── */
.tabela-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--raio-sm);
}

.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.tabela th {
    background: hsl(220 20% 95%);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--cor-texto-sec);
    padding: 8px 10px;
    text-align: left;
    position: sticky;
    top: 0;
    white-space: nowrap;
}
.tabela td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--cor-borda);
    vertical-align: middle;
}
.tabela tbody tr:last-child td {
    border-bottom: none;
}
.tabela tbody tr:hover {
    background: hsl(220 20% 97%);
}

/* =========================
   Modal Força Troca Senha
========================= */

.modal-force-password {
    width: min(420px, 92vw);
    border-radius: 18px;
    overflow: hidden;
    animation: fadeInScale 0.18s ease;
    max-width: 600px;
}

.modal-force-password header {
    background: linear-gradient(135deg, var(--cor-principal), #a46bb4);
    color: #fff;
    padding: 20px 24px;
    font-size: 1.1rem;
    font-weight: 600;
}

.modal-force-password .content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.modal-force-password label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--cor-secundaria);
}

.modal-force-password input {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--cor-borda);
    font-size: 0.95rem;
    transition: all 0.15s ease;
    max-width: 95%;
}

.modal-force-password input:focus {
    border-color: var(--cor-principal);
    box-shadow: 0 0 0 3px rgba(188, 138, 200, 0.18);
}

.modal-force-password footer {
    padding: 20px 24px;
    border-top: 1px solid var(--cor-borda);
    background: #fafafa;
}

.modal-force-password .btn-force {
    width: 100%;
    padding: 12px;
    border-radius: 14px;
    background: var(--cor-principal);
    color: #fff;
    font-weight: 600;
    border: none;
    transition: all 0.15s ease;
}

.modal-force-password .btn-force:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(188, 138, 200, 0.25);
}

.modal-force-password .hint {
    font-size: 0.75rem;
    color: var(--cor-secundaria);
    opacity: 0.8;
}

@keyframes fadeInScale {
    from {
        transform: translate(-50%, -52%) scale(0.96);
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}