/* assets/css/components.css */

/* -------------------------------------------------------------------------- */
/* General Reusable Classes */
/* -------------------------------------------------------------------------- */
.container {
    max-width: 1400px; /* Largura máxima para conteúdo principal */
    margin: 0 auto;
    padding: var(--spacing-md);
}

.flex-group {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

.flex-group--end {
    justify-content: flex-end;
}

.grid {
    display: grid;
    gap: var(--spacing-lg);
}

.grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid--cols-5 { grid-template-columns: repeat(5, 1fr); }

/* Para seções de conteúdo */
.content-section {
    margin-bottom: var(--spacing-xxl); /* Extreme white space para separar clusters de dados */
}

/* -------------------------------------------------------------------------- */
/* BUTTONS & Interaction (Baseado no .md e screenshots) */
/* -------------------------------------------------------------------------- */
.btn {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-body-md-size);
    font-weight: var(--font-title-md-weight); /* Medium weight para botões */
    border-radius: var(--border-radius-md); /* Arredondado 8px */
    cursor: pointer;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    transition: all var(--transition-speed) var(--transition-timing-bezier);
    white-space: nowrap; /* Evita quebra de linha em botões */
}

/* Primary Button */
.btn-primary {
    background: var(--gradient-primary); /* Gradiente do .md */
    color: var(--color-text-on-primary); /* on_primary_container do .md */
    border: none;
    box-shadow: var(--shadow-sm); /* Sombra suave */
}

.btn-primary:hover {
    background: var(--gradient-primary-hover); /* Gradiente no hover */
    box-shadow: var(--shadow-md); /* Sombra mais pronunciada */
}

.btn-primary:active {
    transform: translateY(1px); /* Pequeno efeito de clique */
    box-shadow: var(--shadow-sm);
}

/* Ghost Button (Secondary/Outline) */
.btn-ghost {
    background: none;
    color: var(--color-primary-accent); /* Cor do texto primary-accent */
    border: 1px solid rgba(var(--color-outline-variant), 0.3); /* Ghost Border */
    box-shadow: none;
    padding: calc(var(--spacing-sm) - 1px) calc(var(--spacing-md) - 1px); /* Ajusta padding por causa da borda */
}

.btn-ghost:hover {
    background-color: var(--color-surface-container-highest); /* Fill com surface_container_highest */
    color: var(--color-text-main);
    border-color: transparent; /* Remove borda ao preencher */
}

/* Disabled State */
.btn:disabled,
.btn-disabled {
    cursor: not-allowed;
    opacity: 0.5;
    background: var(--color-surface-container-low);
    color: var(--color-text-secondary);
    box-shadow: none;
    border: none;
    /* Remover hover/active styles */
    pointer-events: none; /* Impede eventos de mouse */
}

/* Botão de Icone */
.btn-icon {
    width: var(--spacing-xl);
    height: var(--spacing-xl);
    padding: 0;
    border-radius: var(--border-radius-md);
    background-color: var(--color-surface-container);
    color: var(--color-text-secondary);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.btn-icon:hover {
    background-color: var(--color-surface-container-high);
    color: var(--color-text-main);
}


/* -------------------------------------------------------------------------- */
/* INPUTS & Form Elements (Baseado no .md e screenshots) */
/* -------------------------------------------------------------------------- */
.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-xs);
    color: var(--color-text-secondary);
    font-size: var(--font-body-md-size);
    font-weight: var(--font-body-md-weight);
}

.form-control {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--color-surface-container-lowest); /* surface_container_lowest background */
    color: var(--color-text-main);
    border: none; /* No border */
    border-radius: var(--border-radius-sm); /* Arredondamento suave */
    font-size: var(--font-body-md-size);
    transition: all var(--transition-speed) var(--transition-timing-bezier);
    line-height: 1.5; /* Garante altura consistente */
    box-shadow: inset 0 0 0 1px rgba(var(--color-outline-variant), 0.15); /* Ghost Border sutil interno */
}

.form-control::placeholder {
    color: var(--color-text-secondary);
    opacity: 0.7;
}

.form-control:focus {
    outline: none;
    box-shadow: inset 0 0 0 1px rgba(var(--color-outline-variant), 0.15), 0 2px 0 0 var(--color-primary-accent); /* Borda inferior de foco */
    background-color: var(--color-surface-container); /* Leve elevação no foco */
}

.form-control[type="date"] {
    appearance: none; /* Remove seta padrão em alguns browsers */
    -webkit-appearance: none;
}

/* Campo de busca (TopBar) */
.search-input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    padding-left: var(--spacing-xl); /* Espaço para ícone de busca */
    background-color: var(--color-surface-container); /* Nível 2 */
    color: var(--color-text-main);
    border: none;
    border-radius: var(--border-radius-md);
    font-size: var(--font-body-md-size);
    transition: all var(--transition-speed) var(--transition-timing-bezier);
    box-shadow: var(--shadow-sm);
    position: relative; /* Para o ícone */
}

.search-input::placeholder {
    color: var(--color-text-secondary);
}

.search-input:focus {
    outline: none;
    box-shadow: var(--shadow-md);
    background-color: var(--color-surface-container-high); /* Eleva no foco */
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-wrapper .icon {
    position: absolute;
    left: var(--spacing-sm);
    color: var(--color-text-secondary);
    font-size: 1rem;
}

/* Mensagens de erro/validação */
.input-feedback {
    font-size: var(--font-label-sm-size);
    color: var(--color-error-critical);
    margin-top: var(--spacing-xs);
    display: flex;
    align-items: center;
    gap: var(--spacing-xxs);
}

/* Select component */
.select-control {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--color-surface-container-lowest);
    color: var(--color-text-main);
    border: none;
    border-radius: var(--border-radius-sm);
    font-size: var(--font-body-md-size);
    transition: all var(--transition-speed) var(--transition-timing-bezier);
    box-shadow: inset 0 0 0 1px rgba(var(--color-outline-variant), 0.15);
    appearance: none; /* Remove seta padrão */
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2394a3b8'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-sm) center;
    background-size: 16px;
}

.select-control:focus {
    outline: none;
    box-shadow: inset 0 0 0 1px rgba(var(--color-outline-variant), 0.15), 0 2px 0 0 var(--color-primary-accent);
    background-color: var(--color-surface-container);
}

/* Radio/Checkbox customizado (ex: Vehicle Assignment) */
.radio-card {
    background-color: var(--color-surface-container-low); /* Nível 1 */
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: background-color var(--transition-speed) var(--transition-timing-bezier);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100px; /* Para manter altura consistente */
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(var(--color-outline-variant), 0.1);
}

.radio-card:hover {
    background-color: var(--color-surface-container-high); /* Nível 3 */
}

.radio-card input[type="radio"] {
    /* Esconder o radio button nativo */
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.radio-card input[type="radio"]:checked + .radio-card-content {
    /* Adiciona um estilo visual quando o radio está checado */
    background-color: var(--color-surface-container); /* Nível 2 */
    box-shadow: inset 0 0 0 2px var(--color-primary-base); /* Borda colorida */
}

.radio-card-content {
    /* Estilo do conteúdo do card, para aplicar o checked */
    padding: var(--spacing-md); /* Internal padding */
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    border-radius: var(--border-radius-md);
    transition: box-shadow var(--transition-speed) var(--transition-timing-bezier), background-color var(--transition-speed) var(--transition-timing-bezier);
    height: 100%;
}

.radio-card input[type="radio"]:checked + .radio-card-content .radio-card-title {
    color: var(--color-text-main);
}

.radio-card input[type="radio"]:checked + .radio-card-content .radio-card-status-icon {
    color: var(--color-primary-base);
}

.radio-card-title {
    font-size: var(--font-title-md-size);
    font-weight: var(--font-title-md-weight);
    color: var(--color-text-secondary);
}

.radio-card-text {
    font-size: var(--font-body-md-size);
    color: var(--color-text-secondary);
}

.radio-card-status {
    display: flex;
    align-items: center;
    gap: var(--spacing-xxs);
    font-size: var(--font-label-sm-size);
    color: var(--color-text-secondary);
    margin-top: auto; /* Empurra para o final do card */
}

.radio-card-status-icon {
    font-size: 1rem;
    color: var(--color-text-secondary);
}


/* -------------------------------------------------------------------------- */
/* CARDS & KPI Metrics (Baseado no .md e screenshots) */
/* -------------------------------------------------------------------------- */
.card {
    background-color: var(--color-surface-container); /* Nível 2 */
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm); /* Sombra suave para elevação */
    transition: background-color var(--transition-speed) var(--transition-timing-bezier), box-shadow var(--transition-speed) var(--transition-timing-bezier);
    /* Asymmetric padding */
    padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-xl) var(--spacing-lg); /* Top/Left 24px, Bottom/Right 32px */
}

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

.card-title {
    font-size: var(--font-title-md-size);
    font-weight: var(--font-title-md-weight);
    color: var(--color-text-main);
    margin-bottom: 0; /* Override default h3 margin */
}

.card-subtitle {
    font-size: var(--font-body-md-size);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-xxs);
}

/* KPI Cards */
.kpi-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 120px; /* Altura mínima para consistência */
}

.kpi-card-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.kpi-card-icon {
    font-size: 1.5rem;
    color: var(--color-text-secondary);
}

.kpi-card-label {
    font-size: var(--font-body-md-size);
    color: var(--color-text-secondary);
    font-weight: var(--font-body-md-weight);
}

.kpi-card-value {
    font-size: var(--font-display-lg-size); /* display-lg para métricas herói */
    font-weight: var(--font-display-lg-weight);
    color: var(--color-text-main);
    display: flex; /* Para alinhar com trend indicator */
    align-items: baseline;
    gap: var(--spacing-sm);
}

/* KPI Trend Indicator (Glassmorphic pill) */
.kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xxs);
    font-size: var(--font-body-md-size);
    padding: var(--spacing-xxs) var(--spacing-xs);
    border-radius: var(--border-radius-sm);
    background-color: rgba(var(--color-surface-container-highest-rgb), 0.8); /* Glassmorphic background */
    backdrop-filter: blur(var(--glass-blur));
    color: var(--color-tertiary-success); /* Cor de sucesso por padrão, ajustar com modificador */
    font-weight: var(--font-title-md-weight);
    line-height: 1; /* Para evitar espaçamento extra */
    box-shadow: var(--shadow-sm); /* Sombra suave para o pill */
}

/* Cores do KPI Trend */
.kpi-trend--success { color: var(--color-tertiary-success); }
.kpi-trend--error { color: var(--color-error-critical); }
.kpi-trend--neutral { color: var(--color-text-secondary); }

.kpi-trend .icon {
    font-size: 0.8em;
}

/* Chart Container */
.chart-container {
    background-color: var(--color-surface-container); /* Nível 2 */
    border-radius: var(--border-radius-md);
    padding: var(--spacing-lg) var(--spacing-xl); /* Asymmetric padding */
    box-shadow: var(--shadow-sm);
    min-height: 300px; /* Placeholder para o gráfico */
    display: flex;
    flex-direction: column;
}

.chart-container .chart-title {
    font-size: var(--font-title-md-size);
    color: var(--color-text-main);
    margin-bottom: var(--spacing-md);
}

/* -------------------------------------------------------------------------- */
/* BADGES (Glow-Pills) (Baseado no .md e screenshots) */
/* -------------------------------------------------------------------------- */

/* Helper para RGBA de cores base, para fundos com opacidade */
/* Definir no variables.css ou aqui, para ter mais controle */
:root {
    --color-tertiary-success-rgb: 74, 225, 118;   /* #4ae176 */
    --color-badge-idle-rgb: 124, 58, 237;          /* #7c3aed (secondary-warning) - Usado para Idle */
    --color-error-critical-rgb: 239, 68, 68;      /* #ef4444 */
    --color-warning-maintenance-rgb: 245, 158, 11; /* #f59e0b */
    --color-surface-container-highest-rgb: 45, 52, 73; /* #2d3449 */
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xxs);
    padding: var(--spacing-xxs) var(--spacing-sm);
    border-radius: var(--border-radius-lg); /* Mais arredondado para pills */
    font-size: var(--font-label-sm-size);
    font-weight: var(--font-label-sm-weight);
    text-transform: var(--font-label-sm-text-transform);
    line-height: 1;
    white-space: nowrap; /* Evita quebra de linha */
}

.badge-dot {
    width: 6px; /* Aumentado de 4px para melhor visibilidade */
    height: 6px;
    border-radius: 50%;
    /* No fundo de baixa opacidade, o dot será a cor sólida */
}

/* Status Badges */
.badge-status--active {
    background-color: rgba(var(--color-tertiary-success-rgb), 0.1); /* 10% opacity */
    color: var(--color-tertiary-success);
}
.badge-status--active .badge-dot {
    background-color: var(--color-tertiary-success);
}

.badge-status--idle {
    background-color: rgba(var(--color-badge-idle-rgb), 0.1);
    color: var(--color-badge-idle);
}
.badge-status--idle .badge-dot {
    background-color: var(--color-badge-idle);
}

.badge-status--delayed {
    background-color: rgba(var(--color-error-critical-rgb), 0.1);
    color: var(--color-error-critical);
}
.badge-status--delayed .badge-dot {
    background-color: var(--color-error-critical);
}

.badge-status--maintenance {
    background-color: rgba(var(--color-warning-maintenance-rgb), 0.1);
    color: var(--color-warning-maintenance);
}
.badge-status--maintenance .badge-dot {
    background-color: var(--color-warning-maintenance);
}

/* -------------------------------------------------------------------------- */
/* TABLE (Baseado no .md e screenshots) */
/* -------------------------------------------------------------------------- */
.table-container {
    background-color: var(--color-surface-container); /* Nível 2 para o container da tabela */
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    /* Asymmetric padding para o container da tabela, se a tabela não preencher 100% */
    padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-xl) var(--spacing-lg);
}

.table {
    width: 100%;
    border-collapse: collapse; /* Remove espaçamento entre células */
    color: var(--color-text-main);
    /* Sem linhas divisórias */
}

.table th,
.table td {
    padding: var(--spacing-md) var(--spacing-sm); /* Espaçamento interno das células */
    text-align: left;
    vertical-align: middle; /* Alinhamento vertical */
}

.table thead th {
    font-size: var(--font-label-sm-size); /* label-sm para headers */
    font-weight: var(--font-label-sm-weight);
    text-transform: var(--font-label-sm-text-transform);
    color: var(--color-text-on-surface-variant); /* on_surface_variant */
    padding-bottom: var(--spacing-lg); /* Mais espaço abaixo do header */
    border-bottom: 1px solid rgba(var(--color-outline-variant), 0.1); /* Ghost Border sutil */
}

.table tbody tr {
    transition: background-color var(--transition-speed) var(--transition-timing-bezier);
}

/* Zebra por cor */
.table tbody tr:nth-child(odd) {
    background-color: var(--color-surface); /* Nível 0 */
}

.table tbody tr:nth-child(even) {
    background-color: var(--color-surface-container-low); /* Nível 1 */
}

.table tbody tr:hover {
    background-color: var(--color-surface-container-high); /* Nível 3 no hover */
}

/* Suporte para Avatar */
.table-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: var(--spacing-sm);
}

/* Suporte para Texto Secundário */
.table-main-text {
    font-size: var(--font-body-md-size);
    color: var(--color-text-main);
    font-weight: var(--font-title-md-weight); /* Levemente mais bold */
    display: block; /* Para permitir linha abaixo */
}

.table-secondary-text {
    font-size: var(--font-label-sm-size);
    color: var(--color-text-secondary);
    display: block;
    margin-top: var(--spacing-xxs);
}

/* Status Badge na Tabela */
.table-status {
    /* O badge já tem seu próprio estilo, apenas alinhamento */
    display: flex;
    align-items: center;
}

/* Ações (...) na Tabela */
.table-actions {
    text-align: right; /* Alinha o menu de ações à direita */
}

/* Barra de Progresso (ex: Fuel Level) */
.progress-bar-wrapper {
    width: 80px; /* Largura fixa para barras de progresso na tabela */
    height: 6px;
    background-color: rgba(var(--color-outline-variant), 0.2);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    position: relative;
}

.progress-bar-fill {
    height: 100%;
    width: 0%; /* Controlado via JS ou inline style */
    background-color: var(--color-tertiary-success);
    border-radius: var(--border-radius-sm);
    transition: width var(--transition-speed) var(--transition-timing-bezier);
}

.progress-bar-fill--warning {
    background-color: var(--color-warning-maintenance);
}

.progress-bar-fill--error {
    background-color: var(--color-error-critical);
}


/* -------------------------------------------------------------------------- */
/* DROPDOWN (Baseado no .md e screenshots) */
/* -------------------------------------------------------------------------- */
.dropdown-wrapper {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    position: absolute;
    top: 100%; /* Abaixo do gatilho */
    left: 0;
    z-index: var(--z-index-dropdown);
    min-width: 180px;
    margin-top: var(--spacing-xs); /* Espaçamento do gatilho */

    /* Glassmorphism */
    background-color: rgba(var(--color-surface-container-highest-rgb), 0.8); /* 80% opacity */
    backdrop-filter: blur(var(--glass-blur));
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-ambient); /* Ambient Shadow */
    /* Tint: 1px inner-glow */
    outline: 1px solid rgba(var(--color-outline-variant-rgb), 0.2); /* Não é border, é outline */

    padding: var(--spacing-xs);
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--transition-speed) var(--transition-timing-bezier),
                transform var(--transition-speed) var(--transition-timing-bezier),
                visibility var(--transition-speed) var(--transition-timing-bezier);
}

.dropdown-wrapper.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-text-secondary);
    font-size: var(--font-body-md-size);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-speed) var(--transition-timing-bezier), color var(--transition-speed) var(--transition-timing-bezier);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.dropdown-item:hover {
    background-color: var(--color-surface-container-high); /* Nível 3 */
    color: var(--color-text-main);
}

/* -------------------------------------------------------------------------- */
/* MODAL (Baseado no .md e prompt) */
/* -------------------------------------------------------------------------- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--color-surface-rgb), 0.6); /* Fundo com blur */
    backdrop-filter: blur(var(--glass-blur));
    z-index: var(--z-index-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-speed) var(--transition-timing-bezier), visibility var(--transition-speed) var(--transition-timing-bezier);
}

.modal-overlay.open {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background-color: var(--color-surface-container); /* Nível 2 */
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-ambient); /* Sombra suave do .md */
    max-width: 600px;
    width: 90%;
    padding: var(--spacing-xl);
    transform: scale(0.9);
    transition: transform var(--transition-speed) var(--transition-timing-bezier);
    position: relative;
    /* Tint: 1px inner-glow */
    outline: 1px solid rgba(var(--color-outline-variant-rgb), 0.2);
}

.modal-overlay.open .modal-content {
    transform: scale(1);
}

.modal-overlay.open {
    display: flex; /* ou block, dependendo do layout */
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.modal-title {
    font-size: var(--font-headline-sm-size);
    color: var(--color-text-main);
    margin-bottom: 0;
}

.modal-close-btn {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    transition: color var(--transition-speed) var(--transition-timing-bezier);
}

.modal-close-btn:hover {
    color: var(--color-text-main);
}

.modal-body {
    margin-bottom: var(--spacing-lg);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
}

/* -------------------------------------------------------------------------- */
/* PAGINATION */
/* -------------------------------------------------------------------------- */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--spacing-xxl);
    gap: var(--spacing-xs);
}

.pagination-item {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-md);
    color: var(--color-text-secondary);
    background-color: var(--color-surface-container-low); /* Nivel 1 */
    cursor: pointer;
    transition: background-color var(--transition-speed) var(--transition-timing-bezier), color var(--transition-speed) var(--transition-timing-bezier);
    font-size: var(--font-body-md-size);
}

.pagination-item:hover {
    background-color: var(--color-surface-container-high); /* Nivel 3 */
    color: var(--color-text-main);
}

.pagination-item.active {
    background-color: var(--color-primary-base); /* Cor primária para item ativo */
    color: var(--color-text-on-primary);
    pointer-events: none; /* Não clicável se ativo */
}

.pagination-item.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.pagination-goto {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-left: var(--spacing-lg);
}

.pagination-goto .form-control {
    width: 60px; /* Largura menor para o input de página */
    text-align: center;
    padding: var(--spacing-sm) var(--spacing-xs);
}

/* -------------------------------------------------------------------------- */
/* Alerts / System Messages */
/* -------------------------------------------------------------------------- */
.alert-message {
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    font-size: var(--font-body-md-size);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-lg);
}

.alert-message .icon {
    font-size: 1.2rem;
}

.alert-message--success {
    background-color: rgba(var(--color-tertiary-success-rgb), 0.15);
    color: var(--color-tertiary-success);
    outline: 1px solid rgba(var(--color-tertiary-success-rgb), 0.3); /* Borda sutil */
}

.alert-message--warning {
    background-color: rgba(var(--color-warning-maintenance-rgb), 0.15);
    color: var(--color-warning-maintenance);
    outline: 1px solid rgba(var(--color-warning-maintenance-rgb), 0.3);
}

.alert-message--error {
    background-color: rgba(var(--color-error-critical-rgb), 0.15);
    color: var(--color-error-critical);
    outline: 1px solid rgba(var(--color-error-critical-rgb), 0.3);
}

.alert-message--info {
    background-color: rgba(var(--color-primary-accent-rgb), 0.15); /* Usando primary-accent para info */
    color: var(--color-primary-accent);
    outline: 1px solid rgba(var(--color-primary-accent-rgb), 0.3);
}

/* System Online Indicator (Top right of Dashboard) */
.system-online-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xxs);
    font-size: var(--font-label-sm-size);
    font-weight: var(--font-label-sm-weight);
    color: var(--color-tertiary-success);
    text-transform: var(--font-label-sm-text-transform);
}

.system-online-indicator::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-tertiary-success);
    box-shadow: 0 0 5px var(--color-tertiary-success); /* Pequeno glow */
}

/* -------------------------------------------------------------------------- */
/* Utility Classes (Minimal, based on common needs) */
/* -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-main { color: var(--color-text-main); }
.text-secondary { color: var(--color-text-secondary); }
.text-primary-accent { color: var(--color-primary-accent); }
.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }
.mt-xl { margin-top: var(--spacing-xl); }
.ml-auto { margin-left: auto; } /* Para empurrar itens para a direita */
.mr-auto { margin-right: auto; }
.p-0 { padding: 0; }
.m-0 { margin: 0; }

/* Placeholder for chart.js */
.chart-canvas {
    width: 100%;
    max-height: 250px; /* Altura máxima para gráficos */
    /* Estilos específicos de Chart.js serão via JS */
}

/* Mini map for regional density */
.mini-map-container {
    background-color: var(--color-surface); /* Nível 0, para contraste */
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    height: 200px; /* Altura fixa para o mapa */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    font-size: var(--font-body-md-size);
    overflow: hidden; /* Para esconder qualquer borda do mapa real */
    position: relative;
}

.mini-map-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a imagem preencha o container */
    opacity: 0.6; /* Mais sutil como fundo */
}

/* Container de Arquitetura (bottom UI kit) */
.arch-card {
    background-color: var(--color-surface-container-low); /* Nível 1 */
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 150px;
    box-shadow: var(--shadow-sm);
    transition: background-color var(--transition-speed) var(--transition-timing-bezier), box-shadow var(--transition-speed) var(--transition-timing-bezier);
}

.arch-card:hover {
    background-color: var(--color-surface-container); /* Nível 2 no hover */
    box-shadow: var(--shadow-md);
}

.arch-card-header {
    font-size: var(--font-title-md-size);
    color: var(--color-text-main);
    font-weight: var(--font-title-md-weight);
    margin-bottom: var(--spacing-xs);
}

.arch-card-text {
    font-size: var(--font-body-md-size);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
}

.arch-card-action {
    margin-top: auto; /* Empurra para o final */
}

/* Para o card "CONTENT" do UI Kit com a faixa amarela */
.arch-card--content {
    position: relative;
    overflow: hidden; /* Para a faixa */
}

.arch-card--content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 8px; /* Altura da faixa */
    background: var(--color-warning-maintenance); /* Cor amarela */
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
}

/* Driver Performance Card - Compliance Score */
.compliance-score-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg) var(--spacing-xl);
    background-color: var(--color-surface-container);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
}

.compliance-score-ring {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-title-md-size);
    font-weight: var(--font-title-md-weight);
    color: var(--color-text-main);
    background: radial-gradient(closest-side, var(--color-surface-container) 79%, transparent 80% 100%),
                conic-gradient(var(--color-tertiary-success) 72%, rgba(var(--color-outline-variant-rgb), 0.2) 0); /* 72% como exemplo */
    /* Nota: A porcentagem deve ser controlada dinamicamente via JS ou inline style */
}

.compliance-score-details {
    flex-grow: 1;
}

.compliance-score-status {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-body-md-size);
    color: var(--color-tertiary-success); /* 'Ready' em verde */
}

.compliance-score-status::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-tertiary-success);
}

/* Health Bar (Fleet Health) */
.health-bar {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-xs);
}

.health-bar-label {
    font-size: var(--font-body-md-size);
    color: var(--color-text-secondary);
    width: 80px; /* Largura fixa para labels */
}

.health-bar-progress {
    flex-grow: 1;
    height: 8px;
    background-color: rgba(var(--color-outline-variant-rgb), 0.2);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
}

.health-bar-fill {
    height: 100%;
    width: 0%; /* Controlado via JS ou inline */
    background-color: var(--color-tertiary-success);
    border-radius: var(--border-radius-sm);
    transition: width var(--transition-speed) var(--transition-timing-bezier);
}

.health-bar-fill--warning {
    background-color: var(--color-warning-maintenance);
}

.health-bar-fill--error {
    background-color: var(--color-error-critical);
}

.health-bar-percentage {
    font-size: var(--font-body-md-size);
    color: var(--color-text-main);
    margin-left: var(--spacing-sm);
    width: 40px; /* Largura fixa para porcentagem */
    text-align: right;
}

/* Link mais utilitário */
.text-link {
    color: var(--color-primary-accent);
    font-weight: var(--font-title-md-weight);
    transition: color var(--transition-speed) var(--transition-timing-bezier);
}
.text-link:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

/* Scrollbar Customization (para dark theme premium) */
/* Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-surface-container-low); /* Cor de fundo da trilha da barra de rolagem */
    border-radius: var(--border-radius-sm);
}

::-webkit-scrollbar-thumb {
    background: var(--color-surface-container-high); /* Cor da barra de rolagem */
    border-radius: var(--border-radius-sm);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-hover-background); /* Cor da barra de rolagem ao passar o mouse */
}

/* =========================================================
   🔥 MOBILE FIX GLOBAL (FORMULÁRIOS + TABELAS)
========================================================= */

@media (max-width: 768px) {

    /* =========================
       GRID → 1 COLUNA
    ========================= */
    .grid--cols-2,
    .grid--cols-3,
    .grid--cols-4 {
        grid-template-columns: 1fr !important;
    }

    /* =========================
       CARDS
    ========================= */
    .card {
        padding: var(--spacing-md);
    }

    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    /* =========================
       INPUTS
    ========================= */
    .form-control,
    .input,
    input,
    select,
    textarea {
        width: 100%;
        font-size: 16px; /* evita zoom no iOS */
    }

    /* =========================
       BOTÕES
    ========================= */
    .btn {
        width: 100%;
    }

    /* =========================
       TABELAS (SCROLL INTERNO)
    ========================= */
    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 600px;
    }

    /* =========================
       REMOVE SCROLL GLOBAL
    ========================= */
    body {
        overflow-x: hidden;
    }

}

/* =========================================================
   AJUSTE FINAL - TABELAS NO MOBILE
========================================================= */

@media (max-width: 768px) {

    .table-container {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding: var(--spacing-sm);
    }

    .table {
        min-width: 680px;
        width: max-content;
    }

    .table th,
    .table td {
        white-space: nowrap;
    }

    .table-actions {
        min-width: 140px;
    }
}