/*
 * METAGEST v1.14.6 — Brand alignment Metastudio
 *
 * Obiettivo:
 * avvicinare graficamente METAGEST al sito istituzionale Metastudio,
 * usando lo sfondo della homepage come richiamo leggero e non invasivo.
 *
 * Nota:
 * per ora l'immagine viene letta dal sito WordPress. In una fase successiva
 * si può copiarla in static/img/ per rendere METAGEST indipendente dal sito.
 */

:root {
    --metastudio-site-bg: url("https://www.metastudiostp.it/wp-content/uploads/2023/04/28Metastudio-Societa-Tra-Professionist-geometri-Milano.jpg");
    --metastudio-navy: #011640;
    --metastudio-blue: #007CB7;
    --metastudio-cyan: #0A8FC7;
    --metastudio-soft: #EAF7FC;
    --metastudio-panel: rgba(255, 255, 255, 0.88);
    --metastudio-panel-strong: rgba(255, 255, 255, 0.94);
    --metastudio-border: rgba(0, 124, 183, 0.12);
    --metastudio-shadow: 0 22px 70px rgba(1, 22, 64, 0.10);
}

/* Backoffice: sfondo fotografico molto leggero, non invasivo */
body {
    background-color: #f3f8fb;
    background-image:
        linear-gradient(140deg, rgba(255,255,255,0.95) 0%, rgba(234,247,252,0.90) 100%);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background-image:
        linear-gradient(120deg, rgba(255,255,255,0.90), rgba(234,247,252,0.82)),
        var(--metastudio-site-bg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.20;
}

body::after {
    content: "";
    position: fixed;
    inset: auto -8vw -18vh -8vw;
    height: 42vh;
    z-index: -2;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(0,124,183,0.11), rgba(255,255,255,0.0));
    clip-path: polygon(0 35%, 50% 100%, 100% 35%, 100% 100%, 0 100%);
}

/* Sidebar più vicina ai colori del sito */
.sidebar {
    background:
        linear-gradient(180deg, rgba(0,124,183,0.95) 0%, rgba(8,124,158,0.96) 46%, rgba(1,96,127,0.98) 100%) !important;
    box-shadow: 12px 0 40px rgba(1,22,64,0.10);
}

.sidebar::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 0%, rgba(255,255,255,0.16), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.05), transparent 30%);
}

.sidebar > * {
    position: relative;
    z-index: 1;
}

/* Header pagina: richiamo card/hero, ma leggibile */
.topbar,
.page-header,
.content-header {
    background: rgba(255,255,255,0.70);
    border: 1px solid rgba(0,124,183,0.08);
    border-radius: 24px;
    box-shadow: 0 18px 50px rgba(1,22,64,0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.topbar h1,
.page-header h1,
.content-header h1,
.page-title {
    color: var(--metastudio-navy);
}

/* Pannelli operativi: bianchi, ma più coerenti con il sito */
.panel,
.card,
.dashboard-card,
.summary-card,
.metric-card,
.accordion-card,
.detail-card,
.task-item,
.record-card,
.list-card,
.empty-state {
    background-color: var(--metastudio-panel-strong);
    border-color: var(--metastudio-border);
    box-shadow: var(--metastudio-shadow);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.panel-header,
.card-header,
.section-header {
    border-color: rgba(0,124,183,0.08);
}

.panel-header h2,
.card-header h2,
.section-header h2,
h2 {
    color: var(--metastudio-navy);
}

/* KPI / valori principali */
.kpi-value,
.stat-value,
.metric-value,
.money,
.project-code {
    color: var(--metastudio-navy);
}

.kpi-label,
.stat-label,
.metric-label {
    color: #5f7482;
}

/* Bottoni principali più coerenti con il sito */
.btn-primary,
button.btn-primary,
.login-button {
    background: linear-gradient(135deg, var(--metastudio-blue), var(--metastudio-cyan)) !important;
    border-color: var(--metastudio-blue) !important;
    box-shadow: 0 12px 24px rgba(0,124,183,0.18);
}

.btn-primary:hover,
button.btn-primary:hover,
.login-button:hover {
    background: linear-gradient(135deg, #006b9d, #0787bd) !important;
    border-color: #006b9d !important;
}

/* Campi form */
.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--metastudio-blue) !important;
    box-shadow: 0 0 0 4px rgba(0,124,183,0.12) !important;
}

/* Login: sfondo homepage più evidente, con overlay blu */
body:has(.login-wrap) {
    background-color: var(--metastudio-navy);
    background-image:
        linear-gradient(135deg, rgba(1,22,64,0.78) 0%, rgba(0,124,183,0.55) 100%),
        var(--metastudio-site-bg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

body:has(.login-wrap)::before,
body:has(.login-wrap)::after {
    display: none;
}

.login-card {
    background: rgba(255,255,255,0.93) !important;
    border-color: rgba(255,255,255,0.34) !important;
    box-shadow: 0 28px 90px rgba(1,22,64,0.32) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.login-logo {
    filter: drop-shadow(0 18px 28px rgba(1,22,64,0.18));
}

/* Browser che non supportano :has: restano con lo stile backoffice, senza rompere il login. */
@supports not selector(body:has(.login-wrap)) {
    body {
        background-image:
            linear-gradient(135deg, rgba(1,22,64,0.78) 0%, rgba(0,124,183,0.55) 100%),
            var(--metastudio-site-bg);
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }
}

/* Mobile: manteniamo tutto più semplice e leggero */
@media (max-width: 991px) {
    body::before {
        opacity: 0.12;
        background-position: center top;
    }

    body::after {
        height: 24vh;
    }

    .topbar,
    .page-header,
    .content-header {
        border-radius: 18px;
    }

    .panel,
    .card,
    .dashboard-card,
    .summary-card,
    .metric-card,
    .accordion-card,
    .detail-card {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}


.login-logo img,
img.login-logo {
    max-width: min(300px, 72vw);
    height: auto;
}


/* Login: logo dentro il riquadro principale */
.login-card .login-logo {
    display: block !important;
    width: min(250px, 72vw) !important;
    height: auto !important;
    margin: 0 auto 22px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.login-wrap {
    gap: 0 !important;
}

/* Login: abbassa leggermente il riquadro per un centraggio visivo migliore */
body:has(.login-wrap) .login-wrap {
    transform: translateY(4vh);
}

@media (max-width: 767px) {
    body:has(.login-wrap) .login-wrap {
        transform: translateY(2vh);
    }
}

/* Login: ulteriore abbassamento riquadro */
body:has(.login-wrap) .login-wrap {
    transform: translateY(7vh);
}

@media (max-width: 767px) {
    body:has(.login-wrap) .login-wrap {
        transform: translateY(4vh);
    }
}