:root{
    --primary:#0f5fa8;
    --primary-dark:#12324d;
    --primary-soft:#eaf3fb;
    --bg:#f4f6f8;
    --text:#24313a;
    --muted:#6d7b85;
    --border:#dce3e8;
    --white:#ffffff;
    --danger:#b3261e;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--primary);text-decoration:none}

/* Cabeçalho simples e estável */
.topbar{
    min-height:64px;
    background:var(--primary-dark);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:10px 22px;
    border-bottom:3px solid var(--primary);
}
.brand{display:flex;align-items:center;min-width:0}
.brand-copy{min-width:0}
.brand strong{display:block;font-size:20px;line-height:1.15;color:#fff}
.brand small{display:block;margin-top:3px;font-size:12px;color:#d7e5ef}
.userbox{display:flex;align-items:center;gap:12px;font-size:14px;white-space:nowrap}
.userbox span{max-width:260px;overflow:hidden;text-overflow:ellipsis}
.userbox a{color:#fff;font-weight:600;border:1px solid #ffffff55;border-radius:6px;padding:7px 11px}
.userbox a:hover{background:#ffffff18}

/* Menu separado do cabeçalho: nada sobrepõe os itens */
.menu{
    min-height:52px;
    background:#fff;
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:stretch;
    gap:2px;
    padding:0 22px;
    overflow-x:auto;
    overflow-y:hidden;
}
.menu a{
    display:flex;
    align-items:center;
    padding:0 14px;
    min-height:52px;
    color:#33434f;
    border-bottom:3px solid transparent;
    white-space:nowrap;
}
.menu a:hover{background:#f6f9fb;color:var(--primary)}
.menu a.active{color:var(--primary);border-color:var(--primary);font-weight:700}

.container{width:100%;max-width:1200px;margin:24px auto;padding:0 18px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.card,.stat{background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 2px 8px #0000000a}
.card{padding:20px;margin-bottom:18px}
.stat{padding:20px}
.stat b{display:block;font-size:30px;color:var(--primary);line-height:1.1}
.stat span{display:block;margin-top:5px;color:var(--muted)}

h1{font-size:24px;margin:0 0 18px;color:#20313e}
h2{font-size:19px;margin:0 0 14px;color:#2b3e4c}
h3{color:#2b3e4c}
p{line-height:1.5}

label{display:block;font-weight:600;margin:10px 0 6px}
input,select,textarea{
    width:100%;
    padding:10px 12px;
    border:1px solid #c9d5dc;
    border-radius:7px;
    background:#fff;
    color:var(--text);
    font:inherit;
}
input:focus,select:focus,textarea:focus{outline:2px solid #0f5fa826;border-color:var(--primary)}
textarea{min-height:84px;resize:vertical}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.full{grid-column:1/-1}

button,.btn{
    display:inline-block;
    border:0;
    border-radius:7px;
    padding:10px 15px;
    background:var(--primary);
    color:#fff;
    font-weight:700;
    cursor:pointer;
}
button:hover,.btn:hover{filter:brightness(.95)}
.btn.secondary{background:#edf2f5;color:var(--text);border:1px solid #d8e0e5}
.btn.danger{background:var(--danger)}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

table{width:100%;border-collapse:collapse;background:#fff}
th,td{padding:11px 10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
th{font-size:13px;color:var(--muted);background:#f8fafb}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-size:12px;font-weight:700}
.alert{padding:12px 14px;border-radius:7px;margin-bottom:16px}
.alert.success{background:#eaf6ee;color:#246b2b}
.alert.error{background:#fdecea;color:#8a1c17}
small.help{color:var(--muted);display:block;margin-top:5px}

.login-wrap{min-height:calc(100vh - 64px);display:grid;place-items:center;padding:24px}
.login-card{width:min(420px,100%);background:#fff;border:1px solid var(--border);border-radius:12px;padding:26px;box-shadow:0 8px 28px #00000014}
.login-card h1{text-align:center;margin-bottom:6px}
.login-card .subtitle{text-align:center;color:var(--muted);margin:0 0 20px}
.login-name{text-align:center;margin-bottom:20px}
.login-name strong{display:block;font-size:28px;color:var(--primary-dark)}
.login-name small{display:block;margin-top:4px;color:var(--muted)}

footer{text-align:center;color:var(--muted);padding:28px 16px}

@media(max-width:700px){
    .topbar{padding:10px 14px}
    .brand strong{font-size:18px}
    .userbox span{display:none}
    .menu{padding:0 8px}
    .menu a{padding:0 11px}
    .container{margin:18px auto;padding:0 12px}
    .form-grid{grid-template-columns:1fr}
    .card{padding:16px}
}