*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:        #f5f5f5;
    --surface:   #ffffff;
    --primary:   #4f46e5;
    --primary-h: #4338ca;
    --danger:    #dc2626;
    --success:   #16a34a;
    --text:      #111827;
    --muted:     #6b7280;
    --hint:      #9ca3af;
    --border:    #e5e7eb;
    --border-s:  #f3f4f6;
    --radius:    8px;
    --radius-lg: 10px;
}

body {
    font-family: system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    font-size: .875rem;
    min-height: 100vh;
}

/* ── Auth ── */
.auth-wrapper { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:1rem; }

.auth-card {
    background: var(--surface);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    width: 100%;
    max-width: 420px;
}

.auth-card h1 { font-size:1.25rem; font-weight:600; margin-bottom:.25rem; }
.auth-card p.subtitle { color:var(--muted); font-size:.82rem; margin-bottom:1.5rem; }

/* ── Alertas ── */
.alert { padding:.65rem 1rem; border-radius:var(--radius); font-size:.82rem; margin-bottom:1rem; }
.alert-error   { background:#fee2e2; color:var(--danger);  border:0.5px solid #fca5a5; }
.alert-success { background:#dcfce7; color:var(--success); border:0.5px solid #86efac; }
.alert-warning { background:#fef3c7; color:#92400e;        border:0.5px solid #fcd34d; }

/* ── Formulários ── */
.form-group { margin-bottom:.75rem; }

.form-group label, .field label {
    display:block; font-size:.68rem; font-weight:600; color:var(--muted);
    text-transform:uppercase; letter-spacing:.04em; margin-bottom:.3rem;
}

.required { color:#ef4444; margin-left:2px; }

.form-group input,
.form-group select,
.form-group textarea,
.field input,
.field select {
    width:100%; padding:.45rem .7rem; border:0.5px solid var(--border);
    border-radius:var(--radius); font-size:.82rem; color:var(--text);
    background:var(--surface); outline:none; transition:border-color .15s,box-shadow .15s;
}

.form-group input:focus, .form-group select:focus, .field input:focus, .field select:focus {
    border-color:var(--primary); box-shadow:0 0 0 3px rgba(79,70,229,.1);
}

.form-row {
    display:grid; gap:.75rem;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    margin-bottom:.75rem;
}

select {
    padding:.45rem .7rem; border:0.5px solid var(--border);
    border-radius:var(--radius); font-size:.82rem; background:var(--surface); width:100%; outline:none;
}

/* ── Botões ── */
.btn {
    display:inline-flex; align-items:center; gap:.35rem;
    padding:.45rem 1rem; border-radius:var(--radius);
    font-size:.82rem; font-weight:500; cursor:pointer;
    border:0.5px solid transparent; text-decoration:none;
    transition:background .12s,opacity .12s; white-space:nowrap;
}
.btn:active { transform:scale(.98); }
.btn-primary, .btn { background:var(--primary); color:#fff; border-color:var(--primary); }
.btn-primary:hover, .btn:hover { background:var(--primary-h); }
.btn-ghost { background:var(--surface); color:var(--text); border-color:var(--border); }
.btn-ghost:hover { background:var(--bg); }
.btn-secondary { background:var(--surface); color:var(--text); border-color:var(--border); }
.btn-secondary:hover { background:var(--bg); }
.btn-danger { background:var(--surface); color:var(--danger); border-color:#fca5a5; }
.btn-danger:hover { background:#fee2e2; }
.btn-success { background:var(--surface); color:var(--success); border-color:#86efac; }
.btn-success:hover { background:#dcfce7; }
.btn-warning { background:var(--surface); color:#92400e; border-color:#fcd34d; }
.btn-warning:hover { background:#fef3c7; }
.btn-sm { padding:.28rem .65rem; font-size:.75rem; }
.btn-full { width:100%; justify-content:center; }

.form-actions {
    display:flex; gap:.5rem; padding-top:.75rem; margin-top:.75rem;
    border-top:0.5px solid var(--border-s);
}

/* ── Layout com sidebar ── */
body { display:flex; flex-direction:column; }

.topbar {
    position:fixed; top:0; left:0; right:0; z-index:100; height:52px;
    display:flex; align-items:center; padding:0 1.25rem;
    background:var(--surface); border-bottom:0.5px solid var(--border);
}
.topbar .brand { font-weight:700; font-size:1rem; color:var(--primary); margin-right:auto; }
.topbar-right { display:flex; align-items:center; gap:1rem; font-size:.8rem; }

.badge-admin { background:var(--primary); color:#fff; font-size:.68rem; padding:.15rem .5rem; border-radius:99px; font-weight:600; }

.layout-body { display:flex; margin-top:52px; min-height:calc(100vh - 52px); }

/* ── Sidebar ── */
.sidebar {
    width:220px; min-width:220px; background:#1e1e2e;
    display:flex; flex-direction:column;
    position:fixed; top:52px; left:0; bottom:0; overflow-y:auto; z-index:90;
}
.sidebar-nav { padding:.5rem 0; flex:1; }
.sidebar-sep { font-size:.6rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:#4b5563; padding:.75rem 1.25rem .25rem; }
.sidebar-link { display:flex; align-items:center; gap:.55rem; padding:.48rem 1.25rem; color:#9ca3af; text-decoration:none; font-size:.8rem; border-left:3px solid transparent; transition:background .12s,color .12s; }
.sidebar-link:hover { background:rgba(255,255,255,.05); color:#e5e7eb; }
.sidebar-link.active { background:rgba(79,70,229,.18); color:#a5b4fc; border-left-color:#6366f1; }
.sidebar-icon { font-size:.9rem; width:16px; text-align:center; flex-shrink:0; }
.sidebar-footer { padding:.875rem 1.25rem; border-top:0.5px solid rgba(255,255,255,.08); }
.sidebar-user { font-size:.75rem; color:#6b7280; margin-bottom:.5rem; }
.sidebar-user strong { color:#9ca3af; display:block; font-size:.78rem; }
.sidebar-logout { display:block; text-align:center; padding:.38rem; background:rgba(220,38,38,.12); color:#f87171; border-radius:6px; text-decoration:none; font-size:.75rem; transition:background .12s; }
.sidebar-logout:hover { background:rgba(220,38,38,.25); }
.sidebar-toggle { display:none; background:none; border:none; font-size:1.3rem; cursor:pointer; color:var(--text); margin-right:.75rem; }

/* ── Conteúdo principal ── */
.main-content { margin-left:220px; flex:1; padding:1.5rem; min-height:calc(100vh - 52px); }

/* ── Page header ── */
.page-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:1.25rem; }
.page-header h2 { font-size:1.1rem; font-weight:600; }
.breadcrumb { font-size:.72rem; color:var(--hint); margin-bottom:.2rem; }

/* ── Stats ── */
.stats-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.75rem; margin-bottom:1rem; }
.stat-card { background:var(--surface); border:0.5px solid var(--border); border-radius:var(--radius); padding:.875rem 1rem; }
.stat-label { font-size:.65rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--hint); margin-bottom:.25rem; }
.stat-value { font-size:1.4rem; font-weight:600; color:var(--text); line-height:1; }
.stat-sub   { font-size:.7rem; color:var(--hint); margin-top:.2rem; }

/* ── Cards ── */
.card { background:var(--surface); border:0.5px solid var(--border); border-radius:var(--radius-lg); margin-bottom:1rem; overflow:hidden; }
.card-header { display:flex; align-items:center; justify-content:space-between; padding:.875rem 1.25rem; border-bottom:0.5px solid var(--border-s); }
.card-title { display:flex; align-items:center; gap:.5rem; font-size:.82rem; font-weight:600; color:var(--text); }
.card-title-icon { width:26px; height:26px; background:#eff6ff; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:.8rem; color:var(--primary); }
.card-body { padding:1.25rem; }
.card-search { padding:.32rem .65rem; border:0.5px solid var(--border); border-radius:6px; font-size:.75rem; width:180px; outline:none; transition:border-color .15s; }
.card-search:focus { border-color:var(--primary); }

/* ── Tabela ── */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.8rem; }
table th { background:#f9fafb; border-bottom:0.5px solid var(--border); padding:.5rem .875rem; text-align:left; font-weight:600; font-size:.65rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); white-space:nowrap; }
table td { padding:.55rem .875rem; border-bottom:0.5px solid var(--border-s); vertical-align:middle; color:var(--text); }
table tr:last-child td { border-bottom:none; }
table tr:hover td { background:#fafafa; }
.td-muted { color:var(--muted) !important; }
.td-inactive { color:var(--hint) !important; }

/* ── Badges ── */
.badge { display:inline-flex; align-items:center; padding:.18rem .55rem; border-radius:99px; font-size:.68rem; font-weight:500; white-space:nowrap; }
.badge-green  { background:#dcfce7; color:#15803d; }
.badge-red    { background:#fee2e2; color:#b91c1c; }
.badge-blue   { background:#dbeafe; color:#1d4ed8; }
.badge-orange { background:#ffedd5; color:#c2410c; }
.badge-gray   { background:#f3f4f6; color:#6b7280; }

/* ── Links ── */
.link { color:var(--primary); text-decoration:none; }
.link:hover { text-decoration:underline; }
.text-center { text-align:center; }
.mt-1 { margin-top:.75rem; }
.text-muted { color:var(--muted); }

/* ── Overlay de Processamento ── */
#loading-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:9999; align-items:center; justify-content:center; }
.loading-card { background:var(--surface); border-radius:16px; padding:2.5rem 3rem; display:flex; flex-direction:column; align-items:center; gap:1.25rem; box-shadow:0 8px 32px rgba(0,0,0,.18); min-width:320px; text-align:center; }
.loading-spinner { width:52px; height:52px; border:4px solid var(--border); border-top-color:var(--primary); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading-card p { font-size:1.05rem; font-weight:600; color:var(--text); margin:0; }
.loading-card small { font-size:.85rem; color:var(--muted); }

/* ── Mobile ── */
@media (max-width:768px) {
    .sidebar-toggle { display:block; }
    .sidebar { transform:translateX(-100%); transition:transform .2s; }
    .sidebar.open { transform:translateX(0); }
    .main-content { margin-left:0; }
    .form-row { grid-template-columns:1fr; }
}