/**
 * -------------------------------------------------------------------------
 * UI Branding plugin for GLPI - Centered Layout
 * -------------------------------------------------------------------------
 *
 * LICENSE
 *
 * This file is part of UI Branding plugin for GLPI.
 *
 * "UI Branding plugin for GLPI" is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 3 of the License, or
 * (at your option) any later version.
 *
 * "UI Branding plugin for GLPI" is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with "UI Branding plugin for GLPI". If not, see <http://www.gnu.org/licenses/>.
 * -------------------------------------------------------------------------
 * @copyright Copyright (C) 2025 by i-Vertix/PGUM.
 * @license   GPLv3 https://www.gnu.org/licenses/gpl-3.0.html
 * @link      https://github.com/i-Vertix/glpi-modifications
 * -------------------------------------------------------------------------
 */

/* ============================================================
   CENTERED LAYOUT - Clean centered card with hidden GLPI branding
   ============================================================ */

/* Full page background */
body.mod-layout-centered,
body.mod-layout-centered.welcome-anonymous,
.mod-layout-centered.welcome-anonymous {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh !important;
    background: url(../background.php) no-repeat fixed center !important;
    background-size: cover !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

/* Background overlay */
body.mod-layout-centered .page-anonymous::before,
body.mod-layout-centered::before {
    content: '' !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

/* Video background support */
body.mod-layout-centered video.mod-background-video {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    width: auto !important;
    height: auto !important;
    transform: translate(-50%, -50%) !important;
    z-index: -2 !important;
    object-fit: cover !important;
}

/* Remove GLPI default background */
body.mod-layout-centered .page-anonymous {
    background: none !important;
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 2rem !important;
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Container */
body.mod-layout-centered .container-tight {
    max-width: 450px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Row inside container */
body.mod-layout-centered .container-tight .row {
    margin: 0 !important;
    width: 100% !important;
}

/* Column inside row */
body.mod-layout-centered .container-tight .col,
body.mod-layout-centered .container-tight [class*="col-"] {
    padding: 0 !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

/* Main card styling */
body.mod-layout-centered .card,
body.mod-layout-centered .main-content-card {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
    overflow: hidden !important;
    animation: mod-centered-fade-in 0.5s ease-out !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* Card header */
body.mod-layout-centered .card-header {
    background: transparent !important;
    border: none !important;
    padding: 2rem 2rem 1rem 2rem !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Logo inside card header */
body.mod-layout-centered .card-header .glpi-logo {
    display: block !important;
    margin: 0 auto 1.5rem auto !important;
    max-width: 180px !important;
    width: auto !important;
    height: auto !important;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
    transition: transform 0.3s ease;
    text-align: center !important;
}

body.mod-layout-centered .card-header .glpi-logo:hover {
    transform: scale(1.05);
}

/* Card title */
body.mod-layout-centered .card-header h2 {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: var(--mod-text-color, #1f2937) !important;
    margin: 0 !important;
}

/* Card body */
body.mod-layout-centered .card-body {
    padding: 1.5rem 2rem 2rem 2rem !important;
}

/* Form elements */
body.mod-layout-centered input[type="text"],
body.mod-layout-centered input[type="password"],
body.mod-layout-centered input[type="email"] {
    width: 100% !important;
    padding: 0.875rem 1rem !important;
    margin-bottom: 1rem !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 10px !important;
    font-size: 1rem !important;
    transition: all 0.3s ease !important;
    background: #ffffff !important;
}

body.mod-layout-centered input:focus {
    border-color: var(--mod-primary-color, #2563eb) !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1) !important;
}

/* Labels */
body.mod-layout-centered label {
    font-weight: 500 !important;
    color: var(--mod-text-color, #1f2937) !important;
    margin-bottom: 0.5rem !important;
    display: block !important;
}

/* Login button */
body.mod-layout-centered button[type="submit"],
body.mod-layout-centered input[type="submit"] {
    width: 100% !important;
    padding: 1rem !important;
    margin-top: 1rem !important;
    background: var(--mod-primary-color, #2563eb) !important;
    color: white !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
}

body.mod-layout-centered button[type="submit"]:hover,
body.mod-layout-centered input[type="submit"]:hover {
    background: var(--mod-secondary-color, #1e40af) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3) !important;
}

body.mod-layout-centered button[type="submit"]:active,
body.mod-layout-centered input[type="submit"]:active {
    transform: translateY(0) !important;
}

/* Checkbox */
body.mod-layout-centered .form-check {
    margin: 1rem 0 !important;
}

body.mod-layout-centered .form-check-input {
    cursor: pointer !important;
}

body.mod-layout-centered .form-check-label {
    cursor: pointer !important;
    font-weight: 400 !important;
}

/* Links */
body.mod-layout-centered a {
    color: var(--mod-primary-color, #2563eb) !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

body.mod-layout-centered a:hover {
    color: var(--mod-secondary-color, #1e40af) !important;
    text-decoration: underline !important;
}

/* ============================================================
   HIDE GLPI DEFAULT ELEMENTS OUTSIDE CARD
   ============================================================ */

/* Hide ALL elements outside the main card */
body.mod-layout-centered > .text-center:not(.card .text-center),
body.mod-layout-centered .page-anonymous > .text-center:not(.card .text-center),
body.mod-layout-centered .page-anonymous > .container > .text-center:not(.card .text-center) {
    display: none !important;
}

/* Hide GLPI logo outside card */
body.mod-layout-centered > img:not(.card img),
body.mod-layout-centered .page-anonymous > img:not(.card img),
body.mod-layout-centered .page-anonymous > .container > img:not(.card img),
body.mod-layout-centered .page-anonymous > .container > .row > .col img:not(.card img),
body.mod-layout-centered .page-anonymous .text-center img:not(.card img),
body.mod-layout-centered .page-anonymous .glpi-logo:not(.card .glpi-logo):not(.card-header .glpi-logo),
body.mod-layout-centered img.glpi-logo:not(.card img):not(.card-header img) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Hide copyright/attribution outside card */
body.mod-layout-centered > .row > .text-center,
body.mod-layout-centered .page-anonymous > .row > .text-center,
body.mod-layout-centered > p:not(.card p),
body.mod-layout-centered .page-anonymous > p:not(.card p) {
    display: none !important;
}

/* Hide footer */
body.mod-layout-centered #footer,
body.mod-layout-centered footer {
    display: none !important;
}

/* Hide copyright containers */
body.mod-layout-centered #display_plugin_copyright,
body.mod-layout-centered .copyright:not(.card .copyright) {
    display: none !important;
}

/* Hide any branding outside card */
body.mod-layout-centered > .branding,
body.mod-layout-centered .page-anonymous > .branding {
    display: none !important;
}

/* Hide text-center in card body (only show in header) */
body.mod-layout-centered .card-body .text-center:first-of-type,
body.mod-layout-centered .card-body .text-center,
body.mod-layout-centered .card-body > .text-center {
    display: none !important;
}

/* Hide ANY logo outside the card structure */
body.mod-layout-centered .page-anonymous > div > img,
body.mod-layout-centered .page-anonymous div:not(.card):not(.card-header):not(.card-body) img.glpi-logo {
    display: none !important;
    visibility: hidden !important;
}

/* Force hide text-center containers outside card */
body.mod-layout-centered .page-anonymous > .container-tight > .text-center:not(.card .text-center),
body.mod-layout-centered .container-tight > .text-center:not(.card .text-center) {
    display: none !important;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes mod-centered-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ============================================================
   RESPONSIVE DESIGN
   ============================================================ */

@media (max-width: 768px) {
    body.mod-layout-centered .page-anonymous {
        padding: 1rem !important;
    }
    
    body.mod-layout-centered .container-tight {
        max-width: 100% !important;
    }
    
    body.mod-layout-centered .card-header {
        padding: 1.5rem 1.5rem 1rem 1.5rem !important;
    }
    
    body.mod-layout-centered .card-body {
        padding: 1rem 1.5rem 1.5rem 1.5rem !important;
    }
    
    body.mod-layout-centered .card-header .glpi-logo {
        max-width: 150px !important;
    }
}

@media (max-width: 480px) {
    body.mod-layout-centered .page-anonymous {
        padding: 0.5rem !important;
    }
    
    body.mod-layout-centered .card,
    body.mod-layout-centered .main-content-card {
        border-radius: 15px !important;
    }
    
    body.mod-layout-centered .card-header {
        padding: 1.25rem 1.25rem 0.75rem 1.25rem !important;
    }
    
    body.mod-layout-centered .card-body {
        padding: 0.75rem 1.25rem 1.25rem 1.25rem !important;
    }
    
    body.mod-layout-centered .card-header h2 {
        font-size: 1.5rem !important;
    }
    
    body.mod-layout-centered input[type="text"],
    body.mod-layout-centered input[type="password"],
    body.mod-layout-centered input[type="email"] {
        padding: 0.75rem 0.875rem !important;
        font-size: 0.9375rem !important;
    }
    
    body.mod-layout-centered button[type="submit"],
    body.mod-layout-centered input[type="submit"] {
        padding: 0.875rem !important;
        font-size: 1rem !important;
    }
}

/* =========================
 *    Overrides UI Branding - Layout Centered (GLPI 11)
 *       Autor: Francisco + Copilot
 *          Arquivo: custom_override.css
 *             Local: glpi/plugins/mod/css/custom_override.css
 *                ========================= */

/* --- 0) Zera overlay/blur global --- */
body.mod-layout-centered::before,
body.mod-layout-centered .page-anonymous::before {
	  content: none !important;
	    background: none !important;
	      backdrop-filter: none !important;
	        -webkit-backdrop-filter: none !important;
		  opacity: 0 !important;
	  }

	  /* --- 1) Remove efeito “vidro” do card e ajusta sombra --- */
	  body.mod-layout-centered .card,
	  body.mod-layout-centered .main-content-card {
		    backdrop-filter: none !important;
		      -webkit-backdrop-filter: none !important;
		        background: rgba(255, 255, 255, 0.98) !important;
			  border: 1px solid rgba(255, 255, 255, 0.6) !important;
			    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18) !important;
		    }

		    /* --- 2) BACKGROUND: escolha uma estratégia principal ---
		     *    A) COVER (recomendado para eliminar 100% das faixas SEM distorção; pode cortar bordas)
		     *       B) CONTAIN (nunca corta; pode sobrar faixas; combinado com “preenchimento” abaixo)
		     *          C) COVER automático só em ultra-wide (mix equilibrado)
		     *          */

/* Caminho do background do plugin UI Branding (ajuste se mudou):
 *    O layout centered aponta para ../background.php; mantenha-o
 *    */
:root {
	  /* Ponto focal padrão para COVER: ajuste para preservar elementos importantes */
	  --focal-x: 15%; /* 0% = extrema esquerda, 100% = extrema direita */
	    --focal-y: 20%; /* 0% = topo, 100% = base */
	      --fallback-bg: #0d1933; /* cor base no tom do banner sci-fi */
      }

      /* 🎯 ESTRATÉGIA A — COVER (ativa por padrão) */
      body.mod-layout-centered,
      body.mod-layout-centered.welcome-anonymous {
	        background: url(../background.php) no-repeat !important;
		  background-size: cover !important;                 /* cobre toda a viewport */
		    background-position: left var(--focal-x) top var(--focal-y) !important;
		      background-color: var(--fallback-bg) !important;   /* fallback */
	      }

	      /* 👉 Se preferir a ESTRATÉGIA B (CONTAIN), comente o bloco da A acima
	       *    e descomente o bloco abaixo. Ele adiciona "preenchimento" estético
	       *       nas laterais para esconder faixas sem cortar nem distorcer. */
/*
 * body.mod-layout-centered,
 * body.mod-layout-centered.welcome-anonymous {
 *   position: relative !important;
 *     background: url(../background.php) center top / contain no-repeat !important;
 *       background-color: var(--fallback-bg) !important;
 *       }
 *       body.mod-layout-centered::after {
 *         content: '' !important;
 *           position: fixed !important;
 *             inset: 0 !important;
 *               z-index: -1 !important;
 *                 background:
 *                     radial-gradient(120% 100% at 0% 50%, rgba(13,25,51,1) 0%, rgba(13,25,51,0) 60%),
 *                         radial-gradient(120% 100% at 100% 50%, rgba(13,25,51,1) 0%, rgba(13,25,51,0) 60%);
 *                           pointer-events: none !important;
 *                           }
 *                           */

/* 👉 ESTRATÉGIA C (Híbrida): CONTAIN até 16:9; ultra-wide vira COVER automaticamente */
/*
 * body.mod-layout-centered,
 * body.mod-layout-centered.welcome-anonymous {
 *   background: url(../background.php) center top / contain no-repeat !important;
 *     background-color: var(--fallback-bg) !important;
 *     }
 *     @media (min-aspect-ratio: 16/9) {
 *       body.mod-layout-centered,
 *         body.mod-layout-centered.welcome-anonymous {
 *             background-size: cover !important;
 *                 background-position: left var(--focal-x) top var(--focal-y) !important;
 *                   }
 *                   }
 *                   */

/* --- 3) Ajustes visuais finos (opcionais) --- */
/* Reduz ligeiramente a sombra do card em telas muito pequenas */
@media (max-width: 480px) {
	  body.mod-layout-centered .card,
	    body.mod-layout-centered .main-content-card {
		        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16) !important;
			  }
		  }