/*
RECOMMENDED FONT LOADING (add to your HTML ):
*/
:root {
/* Font */
--font-family-sans: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
/* Colors - Twilight Blue / Modern Blue Theme (NOVA PALETA) */
--primary-color: #3B82F6; /* Azul vibrante (Tailwind Blue 500) */
--primary-hover-color: #2563EB; /* Azul mais escuro para hover (Tailwind Blue 600) */
--primary-focus-ring-color: rgba(59, 130, 246, 0.35);
--accent-color: #06B6D4; /* Ciano vibrante (Tailwind Cyan 500) */
--accent-hover-color: #0891B2; /* Ciano mais escuro (Tailwind Cyan 600) */
--accent-text-color-on-bg: #ffffff; /* Texto branco sobre o ciano */
--accent-rgb: 6, 182, 212; /* RGB para o ciano --accent-color */
--body-bg-color: #0F172A; /* Azul ardósia muito escuro (Tailwind Slate 900) */
--surface-color: #1E293B; /* Azul ardósia escuro (Tailwind Slate 800) */
--surface-hover-color: #334155; /* Azul ardósia um pouco mais claro (Tailwind Slate 700) */
--text-color: #CBD5E1; /* Cinza azulado mais claro (Tailwind Slate 300) */
--text-muted-color: #94A3B8; /* Cinza azulado (Tailwind Slate 400) */
--heading-color: #F1F5F9; /* Cinza muito claro, quase branco (Tailwind Slate 100) */
--border-color: #334155; /* Azul ardósia (Tailwind Slate 700) */
--border-color-light: #475569; /* Azul ardósia (Tailwind Slate 600) */
--table-header-bg-color: #1E293B;
--table-header-text-color: var(--heading-color);
--table-row-even-bg-color: #293548;
--table-row-hover-bg-color: #3B4A60;
--error-color: #EF4444;
--success-color: #22C55E;
/* Shadows - Adaptadas para o novo tema */
--shadow-small: 0 2px 4px rgba(0, 0, 0, 0.25);
--shadow-medium: 0 5px 15px rgba(0, 0, 0, 0.3);
--shadow-large: 0 10px 30px rgba(0,0,0,0.35);
--shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.35);
--glow-primary: 0 0 8px rgba(59, 130, 246, 0.6);
--glow-accent: 0 0 8px rgba(var(--accent-rgb), 0.7);
/* Borders & Radius (Mantido) */
--border-radius-small: 4px;
--border-radius-medium: 6px;
--border-radius-large: 8px;
/* Transitions (Mantido) */
--transition-fast: 0.15s ease-in-out;
--transition-normal: 0.2s ease-in-out;
--transition-smooth: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
/* Spacing (Mantido) */
--spacing-xsmall: 4px;
--spacing-small: 8px;
--spacing-medium: 16px;
--spacing-large: 24px;
--spacing-xlarge: 32px;
--spacing-xxlarge: 48px;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
font-family: var(--font-family-sans);
background-color: var(--body-bg-color);
color: var(--text-color);
line-height: 1.7;
padding: 0;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: flex;
flex-direction: column;
min-height: 100%;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: var(--spacing-large) 0;
}
h1, h2, h3, h4, h5, h6 {
color: var(--heading-color);
margin-top: var(--spacing-large);
margin-bottom: var(--spacing-medium);
font-weight: 700;
line-height: 1.3;
}
h1 { font-size: 2.75rem; font-weight: 800; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
p {
margin-bottom: var(--spacing-medium);
}
a {
color: var(--accent-color);
text-decoration: none;
transition: color var(--transition-fast), text-decoration var(--transition-fast);
font-weight: 500;
}
a:hover, a:focus {
color: var(--accent-hover-color);
text-decoration: underline;
}
/* Visually Hidden Class */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Page Layout Styles */
.page-header {
background-color: var(--surface-color);
padding: var(--spacing-medium) var(--spacing-large);
margin-bottom: var(--spacing-large);
box-shadow: var(--shadow-medium);
border-bottom: 2px solid var(--accent-color); /* Ciano */
flex-shrink: 0;
}
/* Estilo .page-header.hero mantido do seu CSS original, caso use em algum lugar.
A home V1 usa .home-header que é estilizado separadamente abaixo. */
.page-header.hero {
padding: var(--spacing-xxlarge) var(--spacing-large);
margin-bottom: var(--spacing-xlarge);
background-size: cover;
background-position: center center;
background-color: #222;
color: white;
text-align: center;
border-radius: 0 0 var(--border-radius-large) var(--border-radius-large);
}
.page-header.hero h1 {
color: white;
font-size: 3.5rem;
text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
margin-bottom: var(--spacing-small);
}
.page-header.hero p.subtitle {
font-size: 1.25rem;
color: var(--text-color);
margin-bottom: var(--spacing-large);
text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
}
.main-navigation {
margin-top: var(--spacing-medium);
display: flex;
gap: var(--spacing-small);
flex-wrap: wrap;
justify-content: center;
}
.filter-controls {
background-color: var(--surface-hover-color);
padding: var(--spacing-medium);
border-radius: var(--border-radius-medium);
margin: var(--spacing-medium) 0;
display: flex;
align-items: center;
gap: var(--spacing-medium);
flex-wrap: wrap;
border: 1px solid var(--border-color);
}
.filter-controls label {
font-weight: 500;
color: var(--heading-color);
}
.track-image-container {
margin: var(--spacing-large) auto;
background-color: var(--surface-color);
padding: var(--spacing-small);
border-radius: var(--border-radius-medium);
box-shadow: var(--shadow-medium);
max-width: 600px;
border: 1px solid var(--border-color);
}
.track-image-container img {
border: 2px solid var(--border-color-light);
}
main {
padding: var(--spacing-medium);
flex-grow: 1;
width: 100%;
}
.page-footer {
text-align: center;
margin-top: auto;
padding: var(--spacing-large) var(--spacing-medium);
border-top: 1px solid var(--border-color);
font-size: 0.9rem;
color: var(--text-muted-color);
background-color: var(--surface-color);
flex-shrink: 0;
width: 100%;
}
/* Details & Summary - Ajustado para nova paleta */
details { background-color: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--border-radius-medium); margin-bottom: var(--spacing-medium); box-shadow: var(--shadow-small); overflow: hidden; }
summary { cursor: pointer; font-size: 1.25rem; font-weight: 600; padding: var(--spacing-medium) var(--spacing-large); position: relative; display: flex; align-items: center; background-color: var(--surface-hover-color); color: var(--heading-color); transition: background-color var(--transition-fast); }
details:hover summary { background-color: #3c4a5e; } /* Tom de hover um pouco diferente para surface-hover */
summary h3 { margin: 0; font-size: 1.25rem; font-weight: 600; }
summary::-webkit-details-marker, summary::marker { display: none; }
summary::before { content: '▼'; font-size: 0.9em; margin-right: var(--spacing-medium); transform-origin: center; transition: transform var(--transition-normal); color: var(--accent-color); } /* Ciano */
details[open] > summary::before { transform: rotate(-90deg); }
.details-content { padding: var(--spacing-large); border-top: 1px solid var(--border-color); }
/* Form Elements - Ajustado para nova paleta */
label { display: block; margin-bottom: var(--spacing-small); font-weight: 500; color: var(--text-color); }
input, select, textarea {
font-family: inherit;
font-size: 1rem; padding: 12px 15px; margin-bottom: var(--spacing-large); width: 100%;
border: 1px solid var(--border-color);
border-radius: var(--border-radius-medium);
background-color: #0B1220; /* Fundo de input mais escuro */
box-shadow: var(--shadow-inner);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
color: var(--heading-color);
}
input::placeholder, textarea::placeholder { color: var(--text-muted-color); }
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--accent-color); /* Ciano */
background-color: var(--surface-color);
box-shadow: var(--shadow-inner), 0 0 0 3px rgba(var(--accent-rgb), 0.35); /* Usando accent-rgb para ciano */
}
textarea { min-height: 120px; resize: vertical; }
/* Buttons - Ajustado para nova paleta */
button, input[type="button"], input[type="submit"] {
background-color: var(--primary-color); /* Azul vibrante */
color: #ffffff; border: none; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.8px; padding: 12px 28px; cursor: pointer;
border-radius: var(--border-radius-medium);
box-shadow: var(--shadow-small), 0 0 0 0 transparent;
transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
button.accent, input[type="button"].accent, input[type="submit"].accent {
background-color: var(--accent-color); /* Ciano */
color: var(--accent-text-color-on-bg); /* Branco sobre ciano */
}
button:hover, input[type="button"]:hover, input[type="submit"]:hover {
background-color: var(--primary-hover-color);
box-shadow: var(--shadow-medium); transform: translateY(-2px);
}
button.accent:hover, input[type="button"].accent:hover, input[type="submit"].accent:hover {
background-color: var(--accent-hover-color);
}
button:focus, input[type="button"]:focus, input[type="submit"]:focus {
outline: none;
box-shadow: var(--shadow-small), 0 0 0 3px var(--primary-focus-ring-color);
}
button.accent:focus, input[type="button"].accent:focus, input[type="submit"].accent:focus {
box-shadow: var(--shadow-small), 0 0 0 3px rgba(var(--accent-rgb), 0.4); /* Usando accent-rgb para ciano */
}
button:active, input[type="button"]:active, input[type="submit"]:active { transform: translateY(0px); box-shadow: var(--shadow-inner); }
.button-container { display: flex; gap: var(--spacing-medium); flex-wrap: wrap; margin-top: var(--spacing-medium); margin-bottom: var(--spacing-medium); justify-content: flex-start; }
.button-container.center { justify-content: center; }
/* Table Styling - Ajustado para nova paleta */
.table-responsive-wrapper { overflow-x: auto; margin-top: var(--spacing-medium); margin-bottom: var(--spacing-medium); border: 1px solid var(--border-color); border-radius: var(--border-radius-large); background-color: var(--surface-color); }
.table-responsive-wrapper { scrollbar-width: thin; scrollbar-color: var(--border-color) var(--surface-hover-color); }
.table-responsive-wrapper::-webkit-scrollbar { height: 12px; width: 12px; }
.table-responsive-wrapper::-webkit-scrollbar-track { background: var(--surface-hover-color); border-radius: var(--border-radius-small); }
.table-responsive-wrapper::-webkit-scrollbar-thumb { background-color: var(--border-color); border-radius: var(--border-radius-small); border: 3px solid var(--surface-hover-color); }
.table-responsive-wrapper::-webkit-scrollbar-thumb:hover { background-color: var(--text-muted-color); }
table { width: 100%; border-collapse: separate; border-spacing: 0; }
th, td { text-align: left; padding: var(--spacing-medium); border-bottom: 1px solid var(--border-color); white-space: nowrap; }
th { background-color: var(--table-header-bg-color); color: var(--table-header-text-color); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; position: sticky; top: 0; z-index: 10; }
tr:last-child td { border-bottom: none; }
tr:nth-child(even) { background-color: var(--table-row-even-bg-color); }
tr:hover { background-color: var(--table-row-hover-bg-color); }
/* Image Styling */
img { display: block; max-width: 100%; height: auto; border-radius: var(--border-radius-medium); }
.image-preview-container { margin-top: var(--spacing-small); margin-bottom: var(--spacing-medium); padding: var(--spacing-medium); border: 2px dashed var(--border-color); border-radius: var(--border-radius-medium); min-height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: rgba(0,0,0,0.1); }
.image-preview-container img { max-width: 100%; max-height: 200px; display: none; border: 1px solid var(--border-color); margin-bottom: var(--spacing-small); border-radius: var(--border-radius-small); }
/* Login Page Specific Styles - Ajustado para nova paleta e sticky footer */
.login-page-body {
padding: 0;
}
.login-page-body .page-header {
width: 100%;
margin-bottom: 0;
border-bottom: 1px solid var(--border-color);
}
.login-container {
width: 100%;
max-width: 450px;
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
padding: var(--spacing-xlarge) var(--spacing-medium);
margin: 0 auto;
}
.login-box {
background-color: var(--surface-color);
padding: var(--spacing-xlarge) var(--spacing-xxlarge);
border-radius: var(--border-radius-large);
box-shadow: var(--shadow-large);
width: 100%;
text-align: center;
border-top: 4px solid var(--accent-color); /* Ciano */
}
.login-box h2 { margin-top: 0; margin-bottom: var(--spacing-large); color: var(--heading-color); }
.login-box input { margin-bottom: var(--spacing-medium); }
.login-box button { width: 100%; margin-top: var(--spacing-medium); padding: 14px 28px; }
.login-page-body .page-footer {
width: 100%;
flex-shrink: 0;
margin-top: auto;
}
/* Admin Page Specific Styles - Ajustado para nova paleta */
.admin-header nav { display: flex; flex-wrap: wrap; gap: var(--spacing-medium); align-items: center; }
.admin-main-content { max-width: 900px; margin-left: auto; margin-right: auto; padding: var(--spacing-large); }
.admin-section { margin-bottom: var(--spacing-large); border: 1px solid var(--border-color); border-radius: var(--border-radius-medium); overflow: hidden;}
.admin-section summary { background-color: var(--surface-color); border-bottom: 1px solid var(--border-color); border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0; }
details[open].admin-section > summary { border-bottom-color: var(--border-color); border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0; }
.admin-section .details-content { background-color: var(--surface-hover-color); border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium); }
.error-message { color: var(--error-color); font-size: 0.9rem; margin-top: var(--spacing-xsmall); font-weight: 500; }
.model-tooltip { cursor: help; text-decoration: underline dotted var(--accent-color); font-weight: 500; } /* Ciano */
.management-item { padding: var(--spacing-medium); border-bottom: 1px solid var(--border-color-light); gap: var(--spacing-medium); }
.management-item:last-child { border-bottom: none; }
.management-item p { margin-bottom: var(--spacing-xsmall); }
.management-item strong { color: var(--heading-color); }
.management-item img { border: 1px solid var(--border-color); margin-bottom: var(--spacing-small); }
.management-actions { display: flex; gap: var(--spacing-small); flex-shrink: 0; margin-top: var(--spacing-medium); }
#entryManagement button, #trackManagement button, #vehicleManagement button { margin: 0; padding: var(--spacing-xsmall) var(--spacing-small); font-size: 0.85rem; width: auto; text-transform: none; letter-spacing: 0.2px; }
.management-actions button[onclick*="remove"], .management-actions button[onclick*="delete"] { background-color: var(--error-color); color: white; }
.management-actions button[onclick*="remove"]:hover, .management-actions button[onclick*="delete"]:hover { background-color: #c42828; }
/* Utility classes */
.text-center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
/* ============================================================ */
/* ESTILOS PARA HOME PAGE V1 (CARDS CENTRALIZADOS) - Twilight Blue */
/* (Anteriormente .home-header, .home-main-content, .nav-card etc.) */
/* ============================================================ */
/* Seletor .page-header já é usado para outras páginas, então para a home V1
usaremos a classe .home-v1-header que pode ser adicionada ao da home V1. */
.home-v1-header {
text-align: center;
margin-bottom: var(--spacing-xxlarge);
padding-top: var(--spacing-large);
border-bottom: none;
box-shadow: none;
background-color: transparent;
flex-shrink: 0;
}
.home-v1-header h1 { /* Título H1 dentro de .home-v1-header */
font-size: 3rem;
margin-bottom: var(--spacing-small);
color: var(--heading-color);
font-weight: 800;
}
.home-v1-header .subtitle { /* Subtítulo dentro de .home-v1-header */
font-size: 1.2rem;
color: var(--text-muted-color);
margin-bottom: 0;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
/* Seletor para o da home V1, se necessário para diferenciá-lo */
.home-v1-main-content {
max-width: 1100px;
margin-left: auto;
margin-right: auto;
padding-left: var(--spacing-medium);
padding-right: var(--spacing-medium);
flex-grow: 1;
width: 100%;
}
.home-nav-grid { /* Grid para os cards da home V1 */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--spacing-large);
margin-top: var(--spacing-large);
padding: 0;
}
.nav-card { /* Estilo dos cards para home V1 */
background-color: var(--surface-color);
border-radius: var(--border-radius-large);
padding: var(--spacing-large);
text-align: center;
box-shadow: var(--shadow-medium);
transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
text-decoration: none;
color: var(--text-color);
display: flex;
flex-direction: column;
align-items: center;
border: 2px solid var(--border-color);
}
.nav-card:hover, .nav-card:focus {
transform: translateY(-6px);
box-shadow: var(--shadow-large);
border-color: var(--accent-color); /* Ciano */
text-decoration: none;
color: var(--text-color);
}
.nav-card:hover h3, .nav-card:focus h3 { /* Título do card V1 */
color: var(--accent-hover-color); /* Ciano mais escuro */
}
.nav-card-icon-fa { /* Ícone para os cards da home V1 */
font-size: 42px;
color: var(--accent-color); /* Ciano */
margin-bottom: var(--spacing-medium);
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--surface-hover-color);
border-radius: 50%;
transition: color var(--transition-fast), background-color var(--transition-fast);
}
.nav-card:hover .nav-card-icon-fa,
.nav-card:focus .nav-card-icon-fa { /* Ícone do card V1 no hover */
color: var(--accent-hover-color); /* Ciano mais escuro */
background-color: #383e4a; /* Ou uma variação de --surface-hover-color */
}
.nav-card h3 { /* Título dentro do card V1 */
margin-top: 0;
margin-bottom: var(--spacing-small);
color: var(--heading-color);
font-size: 1.4rem;
font-weight: 700;
transition: color var(--transition-normal);
}
.nav-card p { /* Parágrafo dentro do card V1 */
font-size: 0.9rem;
color: var(--text-muted-color);
flex-grow: 1;
margin-bottom: var(--spacing-medium);
min-height: 50px;
}
.nav-card .nav-card-button { /* Botão dentro do card V1 */
display: inline-block;
width: auto;
margin-top: auto;
padding: 10px 22px;
font-weight: 600;
background-color: var(--primary-color); /* Azul */
color: #ffffff;
border-radius: var(--border-radius-medium);
text-transform: uppercase;
letter-spacing: 0.6px;
transition: background-color var(--transition-fast);
text-decoration: none;
border: 1px solid transparent;
}
.nav-card:hover .nav-card-button, .nav-card:focus .nav-card-button {
background-color: var(--primary-hover-color); /* Azul mais escuro */
text-decoration: none;
}
/* Removendo a seção duplicada da HOME V3, pois já está integrada acima */
/* Se precisar dos estilos da V3 (com sidebar) especificamente,
eles já foram fornecidos e mesclados na resposta anterior.
Esta resposta foca em aplicar a paleta "Twilight Blue" ao seu CSS existente
que já incluía os estilos para a home V1 (cards centralizados).
*/