body {
margin: 0;
font-family: Arial;
display: flex;
height: 100vh;
}

/* LOGIN */
.login {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.card {
background: white;
padding: 20px;
border-radius: 10px;
max-width: 900px;
margin: auto;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.login .card {
max-width: 350px;
}

/* SIDEBAR */
.sidebar {
width: 220px;
background: #2d3748;
color: white;
padding: 20px;
}

.sidebar button {
width: 100%;
margin-top: 10px;
padding: 10px;
background: #4a5568;
border: none;
color: white;
cursor: pointer;
}

.sidebar button:hover {
background: #718096;
}

/* MAIN */
.main {
flex: 1;
background: #f4f4f4;
padding: 20px;
}

/* INPUT */
input {
width: 100%;
padding: 10px;
margin-top: 10px;
}

/* RADIO */
label {
display: block;
margin-top: 10px;
}

input[type="radio"] {
width: auto;
margin-right: 5px;
}

/* BUTTON */
button {
width: 100%;
padding: 10px;
margin-top: 10px;
background: #667eea;
border: none;
color: white;
cursor: pointer;
}

button:hover {
background: #5a67d8;
}

/* OLHINHO */
.senha-box {
position: relative;
}

.olho {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}

/* STATUS */
.status { margin-top: 10px; }
.error { color: red; }
.success { color: green; }
.loading { color: orange; }

/* TABLE */
table {
width: 100%;
border-collapse: collapse;
margin-top: 15px;
}

td, th {
padding: 10px;
border-bottom: 1px solid #ddd;
}

th {
background: #f4f4f4;
}

/* ESCONDER */
#sistema {
display: none;
}

.table-container {
    width: 100%;
    overflow-x: auto;
    margin-top: 15px;
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px; /* ativa scroll quando faltar espaço */
}

td, th {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    white-space: nowrap; /* evita quebrar linha estranha */
}

th {
    background: #f4f4f4;
}