/*
 * Estilos CSS baseados no Ágora Design System (gov.pt)
 * https://mosaico.gov.pt/ferramentas/agora-design-system
 */

/* =============================================
   IMPORTAÇÃO DE FONTES
   ============================================= */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;500;600;700;900&display=swap');

/* =============================================
   VARIÁVEIS CSS - CORES ÁGORA
   ============================================= */
:root {
    /* Cores Primárias */
    --agora-primary-dark: #003366;
    --agora-primary: #005EB8;
    --agora-primary-light: #4A90D9;
    --agora-primary-lighter: #E8F4FD;
    
    /* Cores de Estado */
    --agora-success: #008751;
    --agora-success-light: #E6F5EE;
    --agora-warning: #FFAA00;
    --agora-warning-light: #FFF8E6;
    --agora-error: #D32F2F;
    --agora-error-light: #FDEAEA;
    --agora-info: #0288D1;
    --agora-info-light: #E3F2FD;
    
    /* Cores Neutras */
    --agora-black: #1D1D1B;
    --agora-gray-darkest: #333333;
    --agora-gray-dark: #515151;
    --agora-gray: #757575;
    --agora-gray-light: #BDBDBD;
    --agora-gray-lighter: #E0E0E0;
    --agora-gray-lightest: #F5F5F5;
    --agora-white: #FFFFFF;
    
    /* Espaçamentos */
    --agora-spacing-xs: 4px;
    --agora-spacing-sm: 8px;
    --agora-spacing-md: 16px;
    --agora-spacing-lg: 24px;
    --agora-spacing-xl: 32px;
    --agora-spacing-xxl: 48px;
    
    /* Border Radius */
    --agora-radius-sm: 4px;
    --agora-radius-md: 8px;
    --agora-radius-lg: 12px;
    --agora-radius-xl: 16px;
    --agora-radius-full: 9999px;
    
    /* Transições */
    --agora-transition-fast: 150ms ease-in-out;
    --agora-transition-normal: 250ms ease-in-out;
    --agora-transition-slow: 350ms ease-in-out;
    
    /* Sombras */
    --agora-shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
    --agora-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --agora-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    --agora-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
}

/* =============================================
   ESTILOS GLOBAIS
   ============================================= */
body {
    font-family: 'Lato', 'Open Sans', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =============================================
   APPBAR - ESTILO GOV.PT
   ============================================= */
.mud-appbar {
    background: linear-gradient(135deg, var(--agora-primary) 0%, var(--agora-primary-dark) 100%) !important;
}

.mud-appbar .mud-icon-button {
    color: var(--agora-white) !important;
}

.mud-appbar .mud-typography {
    font-weight: 600 !important;
}

/* =============================================
   BOTÕES - ESTILO ÁGORA
   ============================================= */
.mud-button {
    text-transform: none !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    border-radius: var(--agora-radius-md) !important;
    transition: var(--agora-transition-normal) !important;
}

.mud-button-filled.mud-button-primary {
    background-color: var(--agora-primary) !important;
}

.mud-button-filled.mud-button-primary:hover {
    background-color: var(--agora-primary-dark) !important;
    box-shadow: var(--agora-shadow-md) !important;
}

.mud-button-outlined.mud-button-primary {
    border-color: var(--agora-primary) !important;
    color: var(--agora-primary) !important;
}

.mud-button-outlined.mud-button-primary:hover {
    background-color: var(--agora-primary-lighter) !important;
}

/* Focus states para acessibilidade */
.mud-button:focus-visible {
    outline: 3px solid var(--agora-primary-light) !important;
    outline-offset: 2px !important;
}

/* =============================================
   INPUTS E FORMULÁRIOS
   ============================================= */
.mud-input-control .mud-input-outlined-border {
    border-radius: var(--agora-radius-md) !important;
}

/* Focus state para inputs - usar apenas border, sem outline */
.mud-input-control:focus-within .mud-input-outlined-border {
    border-color: var(--agora-primary) !important;
    border-width: 2px !important;
}

/* Remover outline padrão dos inputs quando focados */
.mud-input-control:focus-within,
.mud-input-control *:focus,
.mud-input-control *:focus-visible,
.mud-input-slot:focus,
.mud-input-slot:focus-visible,
.mud-input:focus,
.mud-input:focus-visible,
.mud-input-root:focus-within,
input.mud-input-slot:focus,
input.mud-input-slot:focus-visible {
    outline: none !important;
}

.mud-input-label {
    font-weight: 500 !important;
}

/* =============================================
   CARDS
   ============================================= */
.mud-paper {
    border-radius: var(--agora-radius-md) !important;
}

.mud-card {
    border-radius: var(--agora-radius-lg) !important;
    overflow: hidden;
}

.mud-card-header {
    padding: var(--agora-spacing-lg) !important;
}

.mud-card-content {
    padding: var(--agora-spacing-lg) !important;
}

/* =============================================
   TABELAS
   ============================================= */
.mud-table {
    border-radius: var(--agora-radius-md) !important;
    overflow: hidden;
}

.mud-table-head .mud-table-cell {
    background-color: var(--agora-gray-lightest) !important;
    font-weight: 600 !important;
    color: var(--agora-gray-darkest) !important;
    border-bottom: 2px solid var(--agora-gray-lighter) !important;
}

.mud-table-row:hover {
    background-color: var(--agora-primary-lighter) !important;
}

/* =============================================
   CHIPS
   ============================================= */
.mud-chip {
    border-radius: var(--agora-radius-full) !important;
    font-weight: 500 !important;
}

/* =============================================
   ALERTS
   ============================================= */
.mud-alert {
    border-radius: var(--agora-radius-md) !important;
    border-left: 4px solid !important;
}

.mud-alert-info {
    background-color: var(--agora-info-light) !important;
    border-left-color: var(--agora-info) !important;
}

.mud-alert-success {
    background-color: var(--agora-success-light) !important;
    border-left-color: var(--agora-success) !important;
}

.mud-alert-warning {
    background-color: var(--agora-warning-light) !important;
    border-left-color: var(--agora-warning) !important;
}

.mud-alert-error {
    background-color: var(--agora-error-light) !important;
    border-left-color: var(--agora-error) !important;
}

/* =============================================
   DRAWER (MENU LATERAL)
   ============================================= */
.mud-drawer {
    border-right: 1px solid var(--agora-gray-lighter) !important;
}

.mud-nav-link {
    border-radius: var(--agora-radius-md) !important;
    margin: 2px 8px !important;
    transition: var(--agora-transition-fast) !important;
}

.mud-nav-link:hover {
    background-color: var(--agora-primary-lighter) !important;
}

.mud-nav-link.active {
    background-color: var(--agora-primary) !important;
    color: var(--agora-white) !important;
}

.mud-nav-link.active .mud-icon-root {
    color: var(--agora-white) !important;
}

/* =============================================
   DIALOGS
   ============================================= */
.mud-dialog {
    border-radius: var(--agora-radius-lg) !important;
}

.mud-dialog-title {
    font-weight: 600 !important;
}

/* =============================================
   SNACKBAR
   ============================================= */
.mud-snackbar {
    border-radius: var(--agora-radius-md) !important;
}

/* =============================================
   TOOLTIPS
   ============================================= */
.mud-tooltip {
    border-radius: var(--agora-radius-sm) !important;
}

/* =============================================
   TABS
   ============================================= */
.mud-tabs-panels {
    border-radius: 0 0 var(--agora-radius-md) var(--agora-radius-md) !important;
}

.mud-tab {
    font-weight: 500 !important;
    text-transform: none !important;
}

.mud-tab.mud-tab-active {
    color: var(--agora-primary) !important;
}

/* =============================================
   BREADCRUMBS
   ============================================= */
.mud-breadcrumb-item {
    font-weight: 500;
}

.mud-breadcrumb-item a {
    color: var(--agora-primary) !important;
    text-decoration: none !important;
}

.mud-breadcrumb-item a:hover {
    text-decoration: underline !important;
}

/* =============================================
   ACESSIBILIDADE - FOCUS VISIBLE
   ============================================= */
/* Focus visible para elementos interativos (exceto inputs que têm estilo próprio) */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible:not(.mud-input-slot):not(.mud-input):not(input):not(textarea):not(select) {
    outline: 2px solid var(--agora-primary) !important;
    outline-offset: 2px !important;
}

/* Selects e Pickers do MudBlazor */
.mud-select:focus-within .mud-input-outlined-border,
.mud-picker:focus-within .mud-input-outlined-border {
    border-color: var(--agora-primary) !important;
    border-width: 2px !important;
}

.mud-select *:focus,
.mud-select *:focus-visible,
.mud-picker *:focus,
.mud-picker *:focus-visible {
    outline: none !important;
}

/* =============================================
   MUDSELECT MOBILE - Corrigir overflow e flickering
   ============================================= */
.mud-popover-open {
    /* Garantir que o popover não causa reflow */
    will-change: transform;
}

.mud-select-menu {
    /* Limitar altura máxima em mobile */
    max-height: 50vh !important;
    overflow-y: auto !important;
}

@media (max-width: 600px) {
    .mud-popover {
        /* Garantir que cabe no ecrã */
        max-width: calc(100vw - 32px) !important;
        max-height: 50vh !important;
    }

    .mud-select-menu {
        max-height: 40vh !important;
    }

    .mud-list-item {
        /* Itens mais compactos em mobile */
        min-height: 40px !important;
        padding: 8px 12px !important;
    }
}

/* =============================================
   CLASSES UTILITÁRIAS ÁGORA
   ============================================= */
.agora-text-primary { color: var(--agora-primary) !important; }
.agora-text-success { color: var(--agora-success) !important; }
.agora-text-warning { color: var(--agora-warning) !important; }
.agora-text-error { color: var(--agora-error) !important; }
.agora-text-info { color: var(--agora-info) !important; }

.agora-bg-primary { background-color: var(--agora-primary) !important; }
.agora-bg-primary-light { background-color: var(--agora-primary-lighter) !important; }
.agora-bg-success { background-color: var(--agora-success-light) !important; }
.agora-bg-warning { background-color: var(--agora-warning-light) !important; }
.agora-bg-error { background-color: var(--agora-error-light) !important; }
.agora-bg-info { background-color: var(--agora-info-light) !important; }

.agora-border { border: 1px solid var(--agora-gray-lighter) !important; }
.agora-border-primary { border: 1px solid var(--agora-primary) !important; }

.agora-rounded { border-radius: var(--agora-radius-md) !important; }
.agora-rounded-lg { border-radius: var(--agora-radius-lg) !important; }

.agora-shadow { box-shadow: var(--agora-shadow-md) !important; }
.agora-shadow-lg { box-shadow: var(--agora-shadow-lg) !important; }

/* =============================================
   DARK MODE OVERRIDES
   ============================================= */
.mud-theme-dark .mud-appbar {
    background: linear-gradient(135deg, #1E1E1E 0%, #121212 100%) !important;
}

.mud-theme-dark .mud-table-head .mud-table-cell {
    background-color: #252525 !important;
    color: #E0E0E0 !important;
}

.mud-theme-dark .mud-nav-link:hover {
    background-color: rgba(74, 144, 217, 0.15) !important;
}

.mud-theme-dark .mud-nav-link.active {
    background-color: var(--agora-primary-light) !important;
    color: var(--agora-black) !important;
}

/* =============================================
   PRINT STYLES
   ============================================= */
@media print {
    .mud-appbar,
    .mud-drawer,
    .mud-fab {
        display: none !important;
    }
    
    .mud-main-content {
        margin: 0 !important;
        padding: 0 !important;
    }
}