/* /css/style.css */
/* Versão 16.2.0 - [HOTFIX] Corrige o layout da página de histórico, garantindo as margens laterais. */

/****************************************************************/
/* 1. TOKENS DO DESIGN SYSTEM (FONTE DA VERDADE)                 */
/****************************************************************/
:root {
/* 1.1. Paleta de Cores */
--color-primary: #13bbb4;
--color-primary-hover: #10a69f;
--color-secondary-action: #11FAEE;
--color-secondary-action-hover: #0dd1c4;
--color-danger: #EF4444;
--color-danger-hover: #DC2626;
--color-surface-background: #111827;
--color-surface-card: #1F2937;
--color-text-primary: rgba(255, 255, 255, 0.9);
--color-text-secondary: rgba(255, 255, 255, 0.6);
--color-text-placeholder: rgba(255, 255, 255, 0.4);
--color-text-on-secondary-action: #1F2937;
--color-border: rgba(255, 255, 255, 0.1);
--color-border-hover: rgba(255, 255, 255, 0.2);

/* 1.2. Tipografia */
--font-family-heading: 'Oswald', sans-serif;
--font-family-body: 'Roboto', sans-serif;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-bold: 700;

/* 1.3. Espaçamento (Base 1rem = 16px) */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--spacing-2xl: 2.5rem;

/* 1.4. Layout e Componentes */
--border-radius-sm: 0.25rem;
--border-radius-md: 0.5rem;
--border-radius-lg: 1rem;
--border-radius-full: 9999px;
--max-width-container: 448px;
--shadow-card: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);

}

/****************************************************************/
/* 2. RESET E ESTILOS GLOBAIS                                    */
/****************************************************************/
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: var(--font-family-body);
font-weight: var(--font-weight-regular);
background-color: var(--color-surface-background);
color: var(--color-text-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

html,
body {
-webkit-tap-highlight-color: transparent;
}

#app-container,
.bikes-list-container,
.bike-card,
button,
[role="button"] {
touch-action: manipulation;
}

.font-oswald {
font-family: var(--font-family-heading);
font-weight: var(--font-weight-bold);
}

/****************************************************************/
/* 3. LAYOUT PRINCIPAL                                           */
/****************************************************************/
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start; /* Alterado para alinhar ao topo em telas grandes */
padding: var(--spacing-md);
gap: var(--spacing-lg);
}

@media (min-height: 800px) {
    .container {
        justify-content: center; /* Centraliza verticalmente apenas se houver espaço */
    }
}

.card {
width: 100%;
max-width: var(--max-width-container);
background-color: var(--color-surface-card);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-card);
padding: var(--spacing-xl);
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
position: relative;
}

/* [CORREÇÃO] Garante que a view de histórico tenha o mesmo tamanho da view principal */
#historyView {
    width: 100%;
    max-width: var(--max-width-container);
}

#historyView > .card {
gap: var(--spacing-sm);
}

.divider {
border-top: 1px solid var(--color-border);
}

#historyView .divider {
margin: 0;
}

/****************************************************************/
/* 4. COMPONENTES BASE                                           */
/****************************************************************/

.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-sm);
padding: 0.75rem var(--spacing-md);
border-radius: var(--border-radius-md);
font-weight: var(--font-weight-medium);
border: none;
cursor: pointer;
transition: background-color 0.2s, border-color 0.2s, transform 0.1s;
text-align: center;
}

.btn:hover {
transform: translateY(-1px);
}

.btn:disabled {
cursor: not-allowed;
opacity: 0.6;
}

.btn-primary {
background-color: var(--color-primary);
color: white;
padding: var(--spacing-md);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
letter-spacing: 0.05em;
font-family: var(--font-family-heading);
}

.btn-primary:hover:not(:disabled) {
background-color: var(--color-primary-hover);
}

.btn-secondary {
background-color: var(--color-border-hover);
color: var(--color-text-primary);
}

.btn-secondary:hover:not(:disabled) {
background-color: var(--color-border);
}

.btn-secondary-action {
    background-color: var(--color-border);
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}

.btn-secondary-action:hover:not(:disabled) {
    background-color: var(--color-border-hover);
}

.wizard-footer .btn {
font-family: var(--font-family-heading);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 0.95rem;
}

.btn-danger {
background-color: var(--color-danger);
color: white;
}

.btn-danger:hover:not(:disabled) {
background-color: var(--color-danger-hover);
}

.btn-icon {
width: var(--spacing-2xl);
height: var(--spacing-2xl);
padding: 0;
color: var(--color-text-secondary);
background-color: transparent;
border: 1px solid var(--color-border-hover);
border-radius: var(--border-radius-full);
transition: all 0.2s ease-in-out;
display: grid;
place-items: center;
}

.btn-icon:hover {
transform: scale(1.1);
color: var(--color-text-primary);
border-color: var(--color-text-secondary);
background-color: rgba(255, 255, 255, 0.05);
}

.btn-icon svg,
.btn-icon i,
.btn-icon .material-symbols-outlined {
width: 1.25rem;
height: 1.25rem;
font-size: 1.25rem;
}

.form-input,
.form-select,
.form-textarea {
width: 100%;
padding: 0.75rem var(--spacing-md);
background-color: var(--color-surface-background);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-md);
color: var(--color-text-primary);
font-size: 1rem;
font-family: var(--font-family-body);
transition: border-color 0.2s, box-shadow 0.2s;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 2px var(--color-primary);
}

.form-select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 1rem center;
background-repeat: no-repeat;
background-size: 1.25em;
padding-right: 3rem;
}

.form-select option {
background: var(--color-surface-card);
color: var(--color-text-primary);
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
filter: invert(0.8);
cursor: pointer;
}

.form-label {
display: block;
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
margin-bottom: var(--spacing-sm);
}

/****************************************************************/
/* 5. COMPONENTES ESPECÍFICOS DA APLICAÇÃO                      */
/****************************************************************/

.login-card {
max-width: 400px;
text-align: center;
gap: var(--spacing-xl);
padding: var(--spacing-2xl);
}

.terms-container {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin-top: var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    text-align: left;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.terms-container input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--color-surface-background);
    width: 1.15em;
    height: 1.15em;
    border: 1px solid var(--color-border-hover);
    border-radius: var(--border-radius-sm);
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
    flex-shrink: 0;
}

.terms-container input[type="checkbox"]::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--color-primary);
    transform-origin: bottom left;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.terms-container input[type="checkbox"]:checked::before {
    transform: scale(1);
}

.terms-container a {
    color: var(--color-primary);
    text-decoration: underline;
}

.login-header h1 {
font-size: 3rem;
letter-spacing: 0.05em;
}

#google-login-btn {
width: 100%;
}

#google-login-btn svg {
width: 1.25rem;
height: 1.25rem;
}

.error-message {
color: var(--color-danger);
font-size: 0.875rem;
height: 1.25rem;
}

.main-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--spacing-md);
}

.main-header h1 {
font-size: 2.25rem;
letter-spacing: 0.05em;
}

.header-actions {
display: flex;
align-items: center;
gap: var(--spacing-sm);
}

#shareAppBtn .material-symbols-outlined {
    color: var(--color-primary);
    transition: transform 0.2s;
    font-weight: 700;
    font-variation-settings: 'FILL' 1;
    font-size: 1.4rem;
}

#shareAppBtn:hover .material-symbols-outlined {
    transform: scale(1.15);
}

.profile-btn {
overflow: hidden;
border: 3px solid var(--color-primary);
}

.profile-btn img {
width: 100%;
height: 100%;
object-fit: cover;
}

.welcome-message {
text-align: center;
color: var(--color-text-secondary);
font-size: 1.125rem;
}

.welcome-message span {
font-weight: var(--font-weight-bold);
color: var(--color-text-primary);
}

.bikes-list-container {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}

.bike-card {
background-color: var(--color-surface-background);
border-radius: var(--border-radius-lg);
padding: var(--spacing-lg);
display: flex;
align-items: center;
gap: var(--spacing-lg);
border: 1px solid var(--color-border);
cursor: pointer;
transition: border-color 0.2s, background-color 0.2s;
position: relative;
overflow: hidden;
}

.bike-card:hover {
background-color: var(--color-border);
border-color: var(--color-border-hover);
}

.bike-icon {
flex-shrink: 0;
width: 3.5rem;
height: 3.5rem;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(19, 187, 180, 0.1);
border-radius: var(--border-radius-full);
}

.bike-icon i {
font-size: 1.75rem;
color: var(--color-primary);
}

.bike-info {
flex-grow: 1;
}

.bike-info h3 {
font-family: var(--font-family-heading);
font-size: 1.5rem;
font-weight: var(--font-weight-bold);
text-transform: uppercase;
line-height: 1.2;
}

.bike-model {
font-size: 70%;
font-weight: var(--font-weight-regular);
opacity: 0.85;
}

.bike-info p {
font-size: 1rem;
color: var(--color-text-secondary);
margin-top: var(--spacing-xs);
}

.bike-menu-btn {
background: none;
border: none;
color: var(--color-text-secondary);
cursor: pointer;
padding: var(--spacing-sm);
border-radius: var(--border-radius-full);
}

.bike-menu-btn:hover {
background-color: rgba(255, 255, 255, 0.1);
color: var(--color-text-primary);
}

.bike-menu-btn svg, .bike-menu-btn i {
width: 1.25rem;
height: 1.25rem;
}

.bike-color-indicator {
position: absolute;
top: 0;
left: 0;
width: 0.5rem;
height: 100%;
}

.modal-overlay,
.wizard-overlay {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
padding: var(--spacing-md);
z-index: 50;
opacity: 1;
transition: opacity 0.3s ease;
}

.modal-overlay.hidden,
.wizard-overlay.hidden {
opacity: 0;
pointer-events: none;
}

.modal-card,
.wizard-card {
background-color: var(--color-surface-card);
border-radius: var(--border-radius-lg);
padding: var(--spacing-xl);
width: 100%;
max-width: 400px;
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
box-shadow: var(--shadow-card);
position: relative;
}

.modal-card {
text-align: center;
}

.modal-card h3 {
font-size: 1.25rem;
font-weight: var(--font-weight-medium);
}

.modal-actions {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}

.wizard-viewport {
overflow: hidden;
}

.wizard-steps-container {
display: flex;
transition: transform 0.4s ease-in-out;
}

.wizard-step {
width: 100%;
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
}

.wizard-header {
text-align: center;
}

.wizard-header p {
color: var(--color-text-secondary);
font-size: 0.875rem;
}

.wizard-header h2 {
font-size: 1.5rem;
margin-top: var(--spacing-sm);
}

.wizard-progress {
display: flex;
gap: var(--spacing-sm);
justify-content: center;
margin-bottom: var(--spacing-md);
}

.progress-dot {
width: 0.75rem;
height: 0.75rem;
background-color: var(--color-border);
border-radius: var(--border-radius-full);
transition: background-color 0.3s;
}

.progress-dot.active {
background-color: var(--color-primary);
}

.wizard-content {
min-height: 150px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
}

.wizard-footer {
display: flex;
justify-content: space-between;
gap: var(--spacing-md);
}

.review-grid {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--spacing-sm) var(--spacing-md);
text-align: left;
width: 100%;
align-items: center;
}

.review-grid dt {
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
}

.review-grid dd {
font-weight: var(--font-weight-bold);
display: flex;
align-items: center;
gap: var(--spacing-sm);
}

.review-color-swatch {
width: 1.25rem;
height: 1.25rem;
border-radius: 50%;
background-color: var(--color-swatch-bg);
border: 2px solid var(--color-surface-background);
}

.card-close-btn {
position: absolute;
top: var(--spacing-md);
right: var(--spacing-md);
z-index: 10;
background-color: var(--color-primary);
color: white;
border: none;
}

.card-close-btn:hover {
background-color: var(--color-primary-hover);
color: white;
}

.color-palette-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
gap: var(--spacing-sm);
width: 100%;
justify-content: center;
}

.color-swatch {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: var(--color-swatch-bg);
cursor: pointer;
border: 3px solid transparent;
transition: all 0.2s ease-in-out;
display: flex;
align-items: center;
justify-content: center;
}

.color-swatch:hover {
transform: scale(1.1);
}

.color-swatch.selected {
border-color: var(--color-primary);
box-shadow: 0 0 0 2px var(--color-primary);
}

.color-swatch i {
font-size: 1.25rem;
color: white;
opacity: 0;
transform: scale(0.5);
transition: all 0.2s ease-in-out;
}

.color-swatch.selected i {
opacity: 1;
transform: scale(1);
}

.color-swatch[data-color-name="Branco"] i,
.color-swatch[data-color-name="Amarelo"] i,
.color-swatch[data-color-name="Prateado"] i {
color: #333;
}

.form-field-wrapper {
width: 100%;
margin-bottom: var(--spacing-sm);
}

.custom-input-container {
width: 100%;
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out, margin-top 0.4s ease-in-out;
}

.custom-input-container.visible {
max-height: 100px;
opacity: 1;
margin-top: var(--spacing-md);
}

.history-header {
display: flex;
align-items: flex-start;
gap: var(--spacing-md);
text-align: left;
}

.history-header-info {
flex-grow: 1;
}

.history-header-info h2 {
font-family: var(--font-family-heading);
font-size: 1.75rem;
font-weight: var(--font-weight-bold);
color: var(--color-text-primary);
text-transform: uppercase;
line-height: 1.1;
}

.history-header-info p {
color: var(--color-text-secondary);
margin-top: 0.5rem;
}

.history-header-actions {
display: flex;
gap: var(--spacing-sm);
justify-content: flex-start;
width: 100%;
margin-top: calc(var(--spacing-sm) / 2);
margin-bottom: calc(var(--spacing-md) / 2);
}

.history-header-actions .bike-menu-btn:hover {
color: var(--color-primary);
}

.history-header-actions .bike-menu-btn[data-action="delete-bike-from-history"]:hover {
color: var(--color-danger);
}

.registros-list-container {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}

.registro-card {
background-color: var(--color-surface-background);
border-radius: var(--border-radius-lg);
padding: var(--spacing-md) var(--spacing-lg);
display: flex;
align-items: center;
gap: var(--spacing-lg);
border: 1px solid var(--color-border);
}

.registro-icon {
flex-shrink: 0;
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(255, 255, 255, 0.05);
border-radius: var(--border-radius-full);
}

.registro-icon i,
.registro-icon .material-symbols-outlined {
    font-size: 1.75rem;
    color: var(--color-text-secondary);
}

.registro-info {
flex-grow: 1;
}

.registro-info h4 {
font-family: var(--font-family-heading);
font-size: 1.25rem;
font-weight: var(--font-weight-bold);
text-transform: uppercase;
}

.registro-info p {
font-size: 0.875rem;
color: var(--color-text-secondary);
}

.offline-icon {
margin-bottom: var(--spacing-lg);
}

.main-footer {
width: 100%;
max-width: var(--max-width-container);
padding: 0 var(--spacing-md) var(--spacing-md);
}

.footer-text {
text-align: center;
font-size: 0.75rem;
color: var(--color-text-secondary);
}


/****************************************************************/
/* 6. CLASSES UTILITÁRIAS                                         */
/****************************************************************/
.hidden {
display: none !important;
}

.w-full {
width: 100%;
}

.text-center {
text-align: center;
}

.space-y-4 > * + * {
margin-top: var(--spacing-md);
}

/****************************************************************/
/* 7. COMPONENTES PWA E ANIMAÇÕES                                 */
/****************************************************************/
.toast {
position: fixed;
top: 2rem;
left: 50%;
transform: translateX(-50%);
background-color: var(--color-primary);
color: white;
padding: var(--spacing-md) var(--spacing-lg);
border-radius: var(--border-radius-lg);
display: flex;
align-items: center;
gap: var(--spacing-md);
z-index: 100;
box-shadow: var(--shadow-card);
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
max-width: 90%;
}

.toast.opacity-0 {
opacity: 0;
transform: translateX(-50%) translateY(-20px);
}

.toast-icon {
width: 1.5rem;
height: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
}

.toast-icon i {
font-size: 1.25rem;
}

.install-steps {
list-style-position: inside;
text-align: left;
display: flex;
flex-direction: column;
gap: var(--spacing-md);
color: var(--color-text-secondary);
}

.install-steps li strong {
color: var(--color-text-primary);
}

.install-steps li i {
color: var(--color-primary);
display: inline-block;
width: 1.25rem;
text-align: center;
}

.opacity-0 {
opacity: 0;
}

.pointer-events-none {
pointer-events: none;
}

#loaderOverlay {
position: fixed;
inset: 0;
z-index: 9999;
background-color: rgba(17, 24, 39, 0.8);
display: grid;
place-items: center;
-webkit-transform: translateZ(0);
will-change: opacity;
}

#loaderOverlay.hidden {
display: none !important;
}

.polymorph-loader {
width: 40px;
height: 40px;
background: var(--color-primary);
animation: polymorph-anim 3s infinite linear;
}

@keyframes polymorph-anim {
0% {
border-radius: 50%;
transform: rotate(0deg);
}
25% {
border-radius: 0;
transform: rotate(90deg);
}
50% {
border-radius: 50%;
transform: rotate(180deg) scale(0.7);
}
75% {
border-radius: 0;
transform: rotate(270deg);
}
100% {
border-radius: 50%;
transform: rotate(360deg);
}
}