/* --- N.A.R. DESIGN PREMIUM COM GRADIENTE --- */

/*-------------------- 1. FUNDO DA TELA ------------------*/

/* FUNDO COM GRADIENTE AZUL E AMARELO */
/* O gradiente começa num azul marinho escuro e transita suavemente para um azul mais aberto, com um toque de dourado no fundo */
body, #body-login {
    background: linear-gradient(135deg, #001f3f 0%, #003366 40%, #fde047 100%) !important;
    background-attachment: fixed !important;
}

/*------------ 2. CABEÇALHO ----------*/

/*. CABEÇALHO IMPACTANTE: LOGO E TEXTO AMARELO */
#body-login header {
    background: none !important;
    height: auto !important;
    min-height: 280px !important; /* Mais espaço, como na image_8 */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 20px !important;
}
/* Adiciona o logótipo no topo do menu lateral */
#app-navigation::before {
    content: "";
    display: block;
    height: 100px; /* Ajusta conforme o tamanho do logo */
    width: 100%;
    background-image: url('/home/ffaleiro/web/naredondo.pt/public_html/email/core/img/logo.png'); /* Verifica o caminho da tua imagem */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 20px;
    margin-top: 10px;
}
/* 1. Centralização Absoluta do Nome */
#header .header-appname-container {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 100%;
    z-index: 1;
}

#header .header-appname {
    display: block !important;
    color: #FFD700 !important; /* Amarelo Ouro */
    font-weight: 800 !important;
    font-size: 1.4rem !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* Dá profundidade ao texto */
}

/* 2. Ajuste do Logótipo à Esquerda */
#header .logo {
    background-size: contain !important;
    width: 140px !important; /* Espaço para o logo não bater no texto */
    margin-left: 10px;
}

/* 3. Limpeza de ícones desnecessários no topo */
#header .header-left .icon-home, 
#header .header-left .logo-icon {
    display: none !important; /* Remove o ícone padrão para não poluir */
}

/* 4. Cor de Fundo do Cabeçalho (Azul N.A.R.) */
#header {
    background-color: #002e5b !important; /* Ajusta para o azul exato do clube */
}

/*----------- 3. LOGOTIPO ----------*/

/* Usamos o seletor .logo--login que é o padrão do Nextcloud */
.logo--login {
    background-image: url('/themes/NAREDONDO/core/img/logo.svg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    
/* TAMANHO EM PERCENTAGEM */
    width: 90% !important;        /* Ocupa 80% da largura da área */
    max-width: 800px !important;   /* Limite para não pixelizar no PC */
    height: 400px !important;      /* Altura proporcional */
    
    /* A SOMBRA QUE QUERES (Destaque 3D) */
    filter: drop-shadow(0px 25px 20px rgba(0,0,0,0.85)) !important;
	margin-bottom: 30px !important;
    
    /* GARANTIR QUE NÃO ESTÁ ESCONDIDO */
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin: 40px auto !important;
}

/*----------- 4. NOME DO CLUBE -------*/

/* O Nome do Clube, grande, amarelo e com sombra forte (como na image_8) */
#body-login header::after {
    content: "NÚCLEO ANDEBOL DE REDONDO" !important;
    display: block !important;
    color: #fde047 !important;
    font-weight: 900 !important;
    font-size: 32px !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    text-shadow: 2px 4px 10px rgba(0,0,0,0.8) !important;
    margin-top: 15px !important;
}

/*-------------- 5. CAIXA LOGIN --------*/

/* CAIXA DE LOGIN "GLASS" COM BORDA AMARELA (Ver image_8) */
.login-form {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(15px) !important; /* Efeito de vidro como na image_8 */
    -webkit-backdrop-filter: blur(15px) !important;
    border: 2px solid rgba(253, 224, 71, 0.4) !important; /* Borda amarela translúcida */
    border-radius: 20px !important;
    padding: 40px !important;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5) !important;
}

/* MELHORAR OS CAMPOS E O BOTÃO (image_8 style) */
#user, #password, .login-input {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(253, 224, 71, 0.2) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    height: 45px !important;
}

/* Botão de login com a cor primária (amarelo) */
#submit-button {
    background-color: #fde047 !important;
    color: #001f3f !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border-radius: 8px !important;
    border: none !important;
}

				/* CORREÇÃO DA PALAVRA-PASSE (TEXTO A PRETO) */
/* Aqui forçamos a cor preta dentro dos campos de input */
#user, #password, .login-input {
    color: #000000 !important; /* TEXTO A PRETO COMO PEDISTE */
    background-color: #ffffff !important; /* Fundo branco para o texto preto destacar */
    font-weight: bold !important;
}

/* Ajuste do placeholder (texto que aparece antes de escrever) */
::placeholder {
    color: #555555 !important;
}

/* LIMPEZA E AJUSTE DA CAIXA DE LOGIN */
.logo--login, #body-login h2, .header-appname-container, footer, #nextcloud {
    display: none !important;
}
/*-----------------PALAVRA PASSE --------------*/

/*--------- 6. RODAPÉ -------*/

/* --- ESTRUTURA ANTI-CORTE DEFINITIVA N.A.R. --- */

/* 1. FORÇAR O CORPO A DAR ESPAÇO */
/* Criamos uma margem real no fundo do ecrã que o JavaScript não consegue ignorar */
html {
    height: 100% !important;
}

body {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    /* Criamos um espaço vazio no fundo do ecrã de 45px */
    padding-bottom: 45px !important; 
}

/* 2. O RODAPÉ (AGORA ELE "OCUPA" ESPAÇO REAL) */
body::after {
    content: "© 2026 N.A.R. | SISTEMA DE GESTÃO | DESIGN BY FRANCISCO FALEIRO" !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 45px !important;
    background: #000b16 !important; /* Azul escuro sólido para garantir leitura */
    color: #fde047 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 13px !important;
    border-top: 2px solid #fde047 !important;
    z-index: 2000 !important; /* Fica no topo visual */
    font-family: 'Montserrat', sans-serif !important;
    pointer-events: none !important;
}

/* 3. RECORTE DO CONTEÚDO (PARA NÃO PASSAR POR BAIXO) */
/* Isto obriga o Nextcloud a terminar ANTES da barra amarela */
#content-wrapper, #content {
    max-height: calc(100vh - 95px) !important; /* Cabeçalho + Rodapé */
    overflow-y: auto !important;
}

/* 4. AJUSTE PARA DEFINIÇÕES E APP SETTINGS */
/* Sobe os botões que ficam no canto inferior esquerdo */
#app-settings-button, .settings-button, #quota, .scroll-button {
    bottom: 55px !important;
}

/* 5. FIX PARA A BARRA LATERAL (MENU ESQUERDO) */
#app-navigation {
    height: calc(100% - 45px) !important;
}

/*--------- 7. RETIRAR MARCAS NEXTCLOUD COMPLETAS -------*/

/* LIMPEZA TOTAL DE MARCAS NEXTCLOUD */
/* Remove qualquer texto ou logo do sistema (ver image_2 e image_3) */
#body-login h2, 
.logo--login, 
.header-appname-container, 
footer, 
#nextcloud {
    display: none !important;
}

/*---------- OUTRAS CONFIGURAÇOES -------*/
/* --- AJUSTE DE COMPATIBILIDADE N.A.R. (SEM CORTES) --- */

/* CRIA ESPAÇO NO FUNDO DA LISTA */
/* Isto garante que o último ficheiro e a barra de contagem apareçam acima do rodapé */
#app-content {
    padding-bottom: 80px !important;
}

.filestable {
    margin-bottom: 80px !important;
}
/* 4. GARANTIR QUE OS MENUS DE CONFIGURAÇÃO NÃO SÃO CORTADOS */
#app-settings {
    margin-bottom: 50px !important;
}

/* 5. CORREÇÃO PARA MOBILE (TELEMÓVEL) */
@media only screen and (max-width: 768px) {
    #app-content {
        padding-bottom: 100px !important;
    }
}
/*---------- SITE EXTERNO " SI.FPA.PT" -------*/
/* --- TELA BRANCA ABSOLUTA PARA SITE EXTERNO --- */

/* 1. LOCALIZA O CONTEÚDO DA APP EXTERNAL E PINTA TUDO DE BRANCO */
/* O [class*="external"] apanha qualquer variação de nome da app */
body[class*="external"] #content,
body[class*="external"] #app-content,
body[class*="external"] .external-site-container,
body[class*="external"] #app-content-wrapper {
    background-color: #ffffff !important;
    background-image: none !important; /* Remove o teu gradiente azul/amarelo */
}

/* 2. RESOLVER O RODAPÉ A TAPAR (O CORTE) */
/* Encurtamos a janela do site em 95px (45px do topo + 45px do rodapé + 5px margem) */
body[class*="external"] iframe#external-sites-iframe {
    background-color: #ffffff !important;
    height: calc(100vh - 95px) !important; 
    display: block !important;
}
/*------------- INFORMAÇÃO DO CLIMA / TEMPO ---------*/
/* --- TRANSFORMAÇÃO WIDGET WINDY N.A.R. --- */

/* 1. O Contentor do Widget */
.dashboard-widget__windy, 
[class*="windy"] {
    background-color: #ffffff !important;
    border: 2px solid #fde047 !important;
    border-radius: 15px !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3) !important;
    padding: 10px !important;
}

/* 2. Forçar o fundo branco dentro do Iframe/Widget do Windy */
/* Nota: Se for um iframe, o CSS externo tem limites, mas tentamos forçar o container */
.dashboard-widget__windy iframe {
    background-color: #ffffff !important;
    border-radius: 10px !important;
}

/* 3. Se o Windy estiver no topo (Status Bar) */
#body-user .status-buttons [class*="windy"],
#body-user .status-buttons .live-status-item {
    background: #ffffff !important;
    color: #434343 !important;
    border: 2px solid #fde047 !important;
    border-radius: 50px !important;
    opacity: 1 !important;
}

/* 4. Esconder elementos desnecessários para ficar "clean" */
.dashboard-widget__windy .extra-info {
    display: none !important;
}

/* --- DESIGN CLIMA N.A.R. PORTUGUÊS --- */

/* 1. O Botão Principal */
#body-user .status-buttons .live-status-item.weather-status {
    background-color: #ffffff !important;
    background-image: none !important;
    border: 2px solid #fde047 !important; /* Amarelo N.A.R. */
    border-radius: 50px !important;
    opacity: 1 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    padding: 8px 15px !important;
}

/* 2. Esconder o texto em Inglês e forçar Português */
#body-user .live-status-item.weather-status .weather-status__text {
    display: none !important; /* Esconde o "fair weather" */
}

#body-user .live-status-item.weather-status::after {
    content: "Céu Limpo" !important; /* Escreve em Português */
    color: #434343 !important;
    font-weight: 800 !important;
    margin-left: 5px !important;
}

/* 3. Ajustar a Temperatura */
#body-user .live-status-item.weather-status .weather-status__temperature {
    color: #434343 !important;
    font-weight: 900 !important;
}
/* --- FORÇAR PORTUGUÊS E DESIGN BRANCO/AMARELO --- */
/* --- TRADUÇÃO E DESIGN N.A.R. --- */

/* Forçar a Pílula Branca com Borda Amarela */
html body #body-user .status-buttons .live-status-item.weather-status {
    background-color: #ffffff !important;
    background-image: none !important;
    border: 2px solid #fde047 !important;
    border-radius: 50px !important;
    opacity: 1 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
}

/* Forçar Texto em Português (Céu Limpo) */
html body #body-user .live-status-item.weather-status .weather-status__text {
    font-size: 0 !important; /* Esconde o inglês */
}

html body #body-user .live-status-item.weather-status .weather-status__text::before {
    content: "Céu Limpo" !important;
    font-size: 14px !important;
    color: #434343 !important;
    font-weight: 800 !important;
    visibility: visible !important;
}

/* Cor da Temperatura e Ícone */
html body #body-user .live-status-item.weather-status .weather-status__temperature,
html body #body-user .live-status-item.weather-status .weather-status__icon {
    color: #434343 !important;
    opacity: 1 !important;
}