:root {

    color-scheme: light;

    --app-bg: #ffffff;

    --app-surface: #ffffff;

    --app-surface-muted: rgba(255, 255, 255, 0.9);

    /* Palette personalizzata */

    --app-primary: #7e3230; /* rosso caldo */

    --app-primary-dark: #7a2735; /* rosso/vino più scuro */

    --app-primary-soft: rgba(126, 50, 48, 0.18);

    --app-text: #2b1a1d; /* testo principale scuro ma caldo */

    --app-text-bg: #ffffff;

    --app-text-muted: #7d6668; /* testo attenuato */

    --app-border: rgba(43, 26, 29, 0.15);

    --app-radius-lg: 1.5rem;

    --app-radius-md: 1rem;

    --transition-base: all 0.2s ease-in-out;

}



html {

    font-size: 15px;

    position: relative;

    min-height: 100%;

    scroll-behavior: smooth;

}



@media (min-width: 768px) {

    html {

        font-size: 16px;

    }

}



body {

    margin: 0;

    min-height: 100vh;

    font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    color: var(--app-text);

    background: var(--app-bg);

    background-attachment: fixed;

    line-height: 1.6;

}



.app-body {

    display: flex;

    min-height: 100vh;

}



.app-shell {

    display: flex;

    flex-direction: column;

    width: 100%;

}



.app-header {

    background: transparent;

    backdrop-filter: blur(18px);

    position: sticky;

    top: 0;

    z-index: 1040;

}



.app-navbar {

    background-image: url('/img/navbarBG.png');

    background-size: cover;

    background-position: center;

    background-repeat: repeat;

    border-radius: 0 0 var(--app-radius-lg) var(--app-radius-lg);

    padding-block: 0.75rem;

    color: white;

}



    .app-navbar .navbar-brand {

        font-weight: 700;

        letter-spacing: 0.04em;

    }



    .app-navbar .nav-link {

        font-weight: 500;

        text-transform: uppercase;

        letter-spacing: 0.05em;

        opacity: 0.75;

        transition: var(--transition-base);

    }



        .app-navbar .nav-link:hover,

        .app-navbar .nav-link:focus,

        .app-navbar .nav-link.active {

            opacity: 1;

            color: #fff;

        }



.app-main {

    flex: 1 1 auto;

    display: flex;

    align-items: stretch;

    padding-block: clamp(2rem, 3vw, 4rem);

}



.app-content {

    background: var(--app-surface);

    border-radius: var(--app-radius-lg);

    box-shadow: 0 35px 60px -30px rgba(43, 26, 29, 0.3);

    padding: clamp(1.75rem, 1.5vw + 1.5rem, 3rem);

}



.app-content--fluid {

    background: transparent;

    box-shadow: none;

    padding-left: clamp(0.5rem, 1.5vw, 2rem);

    padding-right: clamp(0.5rem, 1.5vw, 2rem);

}



.app-footer {

    background: transparent;

}



h1, h2, h3, h4, h5, h6 {

    font-weight: 600;

    color: var(--app-text);

}



.page-lead {

    color: var(--app-text-muted);

    max-width: 60ch;

}



a {

    color: var(--app-primary);

    text-decoration: none;

    transition: var(--transition-base);

}



    a:hover,

    a:focus {

        color: var(--app-primary-dark);

        text-decoration: none;

    }



.btn-primary {

    background: linear-gradient(135deg, var(--app-primary) 0%, var(--app-primary-dark) 100%);

    border: none;

    border-radius: 999px;

    box-shadow: 0 10px 20px -10px rgba(122, 39, 53, 0.6);

    padding-inline: 1.5rem;

}



.btn-outline-primary,

.btn-outline-warning,

.btn-outline-success {

    border-radius: 999px;

}



.card {

    border: none;

    border-radius: var(--app-radius-md);

    box-shadow: 0 20px 45px -30px rgba(43, 26, 29, 0.4);

    transition: transform 0.2s ease, box-shadow 0.3s ease;

}



    .card:hover {

        transform: translateY(-4px);

        box-shadow: 0 30px 60px -35px rgba(43, 26, 29, 0.45);

    }



.alert {

    border-radius: var(--app-radius-md);

}



.form-control, .form-select {

    border-radius: 0.85rem;

    border-color: var(--app-border);

    box-shadow: none;

    padding-block: 0.75rem;

}



    .form-control:focus, .form-select:focus {

        border-color: var(--app-primary);

        box-shadow: 0 0 0 0.25rem var(--app-primary-soft);

    }



.table {

    border-radius: var(--app-radius-md);

    overflow: hidden;

}



.badge {

    border-radius: 999px;

    padding: 0.35rem 0.75rem;

    font-weight: 500;

}



/* Calendar layout helpers */

html, body {

    height: 100%;

}



.calendar-viewport {

    background: rgba(255, 255, 255, 0);

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    border-radius: var(--app-radius-lg);

    box-shadow: 0 30px 60px -40px rgba(43, 26, 29, 0.35);

    padding: clamp(1.5rem, 1vw + 1.25rem, 2.5rem);

}



.app-content--fluid .calendar-viewport {

    background: rgba(255, 255, 255, 0.35);

    backdrop-filter: blur(14px);

    box-shadow: 0 25px 50px -30px rgba(43, 26, 29, 0.35);

}



.calendar-container {

    min-height: 70vh;

}



@media (min-width: 992px) {

    .calendar-container {

        min-height: 80vh;

    }

}



/* FullCalendar tweaks */

.fc .fc-toolbar.fc-header-toolbar {

    padding: 0.75rem 0 1.25rem;

    gap: 1rem;

}



.fc .fc-toolbar-title {

    font-weight: 600;

    font-size: clamp(1.4rem, 2vw, 1.8rem);

    color: var(--app-text);

}



.fc .fc-button-primary {



    background: linear-gradient(135deg, var(--app-primary) 0%, var(--app-primary-dark) 100%);

    border: none;

    border-radius: 999px;

    box-shadow: 0 10px 20px -12px rgba(122, 39, 53, 0.45);

    transition: var(--transition-base);

}



    .fc .fc-button-primary:not(:disabled):hover,

    .fc .fc-button-primary:not(:disabled):focus {

        filter: brightness(1.05);

        box-shadow: 0 18px 30px -18px rgba(122, 39, 53, 0.55);

    }



.fc .fc-col-header-cell-cushion,

.fc .fc-daygrid-day-number,

.fc .fc-timegrid-axis-cushion {

    color: var(--app-text);

    font-weight: 500;

}



.fc-theme-standard td,

.fc-theme-standard th {

    background: rgba(255, 255, 255, 0);

    border-color: var(--app-border);

}



.fc .fc-daygrid-day.fc-day-today,

.fc .fc-timegrid-col.fc-day-today {

    background: rgba(255, 255, 255, 0);

}



.fc .fc-now-indicator-line {

    border-color: rgba(184, 145, 78, 0.9); /* #B8914E */

}



.fc-event {

    border: 0.05px solid rgba(43, 26, 29, 0.75);

    border-radius: 1rem;

    padding: 0.25rem 0.5rem;

    font-size: 0.95rem;

    font-weight: 500;

    letter-spacing: 0.01em;

    box-shadow: 0 15px 35px -25px rgba(43, 26, 29, 0.55);

}



/* TimeGrid: rimuove il filetto chiaro (inset) che FullCalendar aggiunge */

.fc .fc-timegrid-event-harness-inset .fc-event {

    box-shadow: none !important;

}



/* A volte il bordo "bianco" è sul wrapper interno */

.fc .fc-timegrid-event-harness-inset .fc-event-main,

.fc .fc-timegrid-event-harness-inset .fc-event-main-frame {

    box-shadow: none !important;

    outline: none !important;

    border: 0 !important;

}



/* E qui forzi il bordo scuro vero */

.fc .fc-timegrid-event-harness-inset .fc-event,

.fc .fc-event,

.fc .fc-h-event,

.fc .fc-v-event {

    border: 1px solid rgba(43, 26, 29, 0.85) !important;

}

    /* Eventi con palette personalizzata */

    .fc-event[data-status="free"] {

        background: linear-gradient(135deg, #c5b565 0%, #b8914e 100%);

        color: #3a2e1e;

    }



    .fc-event[data-status="booked"],

    .fc-event[data-status="busy"] {

        background: linear-gradient(135deg, #7a2735 0%, #7e3230 100%);

        color: #fcecec;

    }



    .fc-event[data-status="blocked"] {

        background: linear-gradient(135deg, #b8914e 0%, #7e3230 100%);

        color: #fff7e9;

    }



    .fc-event[data-status="default"] {

        background: linear-gradient(135deg, #e8dfc0 0%, #c5b565 100%);

        color: #2b1a1d;

    }



.fc .fc-timegrid-slot {

    height: 2.5rem;

}



.fc .fc-timegrid-axis-cushion {

    font-size: 0.85rem;

    color: var(--app-text-muted);

}



.fc .fc-daygrid-more-link {

    color: var(--app-primary-dark);

    font-weight: 500;

}



@media (max-width: 576px) {

    .app-navbar {

        border-radius: 0;

    }



    .app-content,

    .calendar-viewport {

        border-radius: var(--app-radius-md);

        padding: 1.25rem;

    }



    .fc .fc-toolbar.fc-header-toolbar {

        flex-wrap: wrap;

    }

}



/* Utility helpers */

.shadow-soft {

    box-shadow: 0 25px 50px -35px rgba(43, 26, 29, 0.25) !important;

}



.text-muted {

    color: var(--app-text-muted) !important;

}



.hidden-cell-content {

    visibility: hidden !important;

}



.toggle-password {

    position: absolute;

    top: 50%;

    right: 12px;

    transform: translateY(-50%);

    cursor: pointer;

    font-size: 1.2rem;

    color: var(--app-text-muted);

    user-select: none;

}



    .toggle-password:hover {

        color: var(--app-text);

    }



.app-index {

    background-image: url('/img/indexBG.png');

    background-size: cover;

    background-position: center;

    background-repeat: repeat;

    border-radius: 0 0 var(--app-radius-lg) var(--app-radius-lg);

    padding-block: 0.75rem;

    color: white;

}



/* --------------------------------------------------------------

   HOME PAGE — Stile migliorato

   Compatibile con il tuo design esistente

---------------------------------------------------------------- */



/* Sfondo della Home (inserito tramite ViewBag.BodyClass = "home-bg") */

.home-bg {

    background: url('/img/indexBG.png') center/cover no-repeat fixed;

    padding-top: 2rem;

    padding-bottom: 2rem;

}



/* Wrapper generale */

.home-wrapper {

    display: flex;

    justify-content: center;

    width: 100%;

}



/* Card hero superiore */

.home-hero-card {

    background: rgba(255, 255, 255, 0.75);

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    border-radius: var(--app-radius-lg);

    padding: 2rem 2.5rem;

    border: 1px solid var(--app-border);

    box-shadow: 0 25px 50px -25px rgba(43, 26, 29, 0.4);

}



/* Nome dell'utente colorato */

.home-username {

    color: var(--app-primary-dark);

    font-weight: 700;

}



/* Pulsante principale */

.btn-home-primary {

    background: linear-gradient(135deg, var(--app-primary) 0%, var(--app-primary-dark) 100%);

    color: #fff;

    border: none;

    border-radius: 999px;

    padding: 0.65rem 1.6rem;

    font-weight: 500;

    box-shadow: 0 12px 25px -12px rgba(126, 50, 48, 0.45);

    transition: var(--transition-base);

}



    .btn-home-primary:hover {

        filter: brightness(1.08);

        box-shadow: 0 18px 35px -15px rgba(126, 50, 48, 0.55);

    }



/* Pulsante outline */

.btn-outline-home {

    border-radius: 999px;

    padding: 0.65rem 1.6rem;

    border: 1px solid var(--app-primary);

    color: var(--app-primary);

    background: transparent;

}



    .btn-outline-home:hover {

        background: rgba(126, 50, 48, 0.12);

        color: var(--app-primary-dark);

    }



/* Card dashboard */

.dashboard-card {

    background: var(--app-surface);

    border-radius: var(--app-radius-md);

    border: 1px solid var(--app-border);

    padding: 1.2rem;

    box-shadow: 0 25px 60px -32px rgba(43, 26, 29, 0.35);

}



/* Bordo accentato per ruolo Admin */

.admin-card {

    border-left: 4px solid rgba(126, 50, 48, 0.50); /* rosso molto più soft */

}



/* Bordo accentato per Cliente */

.customer-card {

    border-left: 4px solid rgba(126, 50, 48, 0.30);

}



/* Pill di stato (a destra nella hero) */

.home-status-pill {

    display: inline-flex;

    align-items: center;

    gap: 0.4rem;

    padding: 0.35rem 0.85rem;

    border-radius: 999px;

    background: rgba(34, 197, 94, 0.12);

    color: #15803d;

    font-size: 0.8rem;

    font-weight: 500;

}



    .home-status-pill .dot {

        width: 8px;

        height: 8px;

        border-radius: 999px;

        background: #22c55e;

    }



/* Listino prezzi */

.home-price-list li {

    font-size: 0.95rem;

    padding-block: 0.25rem;

}



.price-tag {

    background: var(--app-primary-soft);

    padding: 0.2rem 0.75rem;

    border-radius: 999px;

    font-weight: 600;

}



/* Animazione rapida ingresso */

.home-hero-card,

.dashboard-card {

    animation: fadeInHome 0.35s ease-out;

}



@keyframes fadeInHome {

    from {

        opacity: 0;

        transform: translateY(8px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* Wrapper della pagina che contiene background + contenuto */

.calendar-page {

    position: relative;

    min-height: 100vh; /* arriva fino al fondo della viewport */

    overflow: hidden; /* evita scrollbar dovute al background */

}



/* Contenitore delle 3 immagini (sfondo) */

.calendar-background {

    position: fixed; /* fondamentale */

    inset: 0;

    display: flex;

    width: 100vw;

    height: 100vh;

    margin: 0;

    padding: 0;

    z-index: 0;

}



    /* Le 3 immagini affiancate e alte quanto tutta la pagina */

    .calendar-background img {

        flex: 1 1 33.333%;

        width: 33.333%;

        height: 100%;

        object-fit: cover;

        display: block;

    }



/* Il contenuto deve stare sopra al background */

.calendar-content {

    position: relative;

    z-index: 1;

}



/* 1) Header giorni: applico il colore (anche trasparente) */

.fc-theme-standard thead th.fc-col-header-cell {

    background: rgba(255, 255, 255, 0) !important; /* <-- trasparente ma visibile */

}



/* Testo giorni */

.fc-theme-standard thead th .fc-col-header-cell-cushion {

    color: rgba(43, 26, 29, 0.95) !important;

    font-weight: 600;

}



/* 2) Tolgo il "bianco sotto" (strati del calendario) */

.fc,

.fc .fc-scrollgrid,

.fc .fc-scrollgrid-section,

.fc .fc-scrollgrid-section-header,

.fc .fc-scrollgrid-section-header > *,

.fc .fc-view-harness,

.fc .fc-view-harness-active {

    background: transparent !important;

}



/* (opzionale) se vedi ancora bianco è spesso questo: */

.fc-theme-standard .fc-scrollgrid {

    border: 0 !important;

}