/* ==========================================================================
   GEDS — Base layout centralizzato
   Palette, sidebar, topbar e area contenuti.
   Riferimento visivo del backend, riutilizzato da tutte le sezioni.
   ========================================================================== */

:root {
    /* Palette brand GEDS */
    --geds-red: #e2001a;
    --geds-blue: #004b93;
    --geds-bg: #ffffff;

    /* Layout */
    --geds-sidebar-width: 250px;
    --geds-sidebar-collapsed-width: 64px;
    --geds-topbar-height: 56px;

    /* Neutri / struttura */
    --geds-border: #e9ecef;
    --geds-sidebar-bg: #0e2e5c;
    --geds-sidebar-active-bg: #1a4a8a;
    --geds-sidebar-hover-bg: #163f7a;
    --geds-sidebar-text: rgba(255, 255, 255, 0.88);
    --geds-sidebar-text-muted: rgba(255, 255, 255, 0.42);
    --geds-sidebar-border: rgba(255, 255, 255, 0.1);
    --geds-content-bg: #f5f6f8;
    --geds-text: #212529;
    --geds-text-muted: #6c757d;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--geds-content-bg);
    color: var(--geds-text);
    font-size: 0.9375rem;
    line-height: 1.5;
}

a { text-decoration: none; }

/* --------------------------------------------------------------------------
   Layout generale
   -------------------------------------------------------------------------- */
.geds-layout {
    display: flex;
    min-height: 100vh;
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */
.geds-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    width: var(--geds-sidebar-width);
    flex: 0 0 var(--geds-sidebar-width);
    background: var(--geds-sidebar-bg);
    border-right: 1px solid var(--geds-sidebar-border);
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 1040;
    transition: width 0.2s ease, flex-basis 0.2s ease;
}

.geds-sidebar.collapsed {
    width: var(--geds-sidebar-collapsed-width);
    flex-basis: var(--geds-sidebar-collapsed-width);
}

.geds-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: var(--geds-topbar-height);
    padding: 5px;
    border-bottom: 1px solid var(--geds-sidebar-border);
    white-space: nowrap;
    /* overflow: hidden; */
}

.geds-brand-logo {
    display: block;
    height: 38px;
    width: 175px;
    object-fit: contain;
    object-position: left center;
    flex: 0 0 auto;
    filter: brightness(0) invert(1);
}

.geds-nav {
    padding: 0.75rem 0.6rem;
    flex: 1;
}

.geds-nav-title {
    padding: 0.6rem 0.8rem 0.3rem 0.85rem;
    margin-top: 0.4rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--geds-sidebar-text-muted);
    border-left: 2px solid var(--geds-red);
    white-space: nowrap;
    overflow: hidden;
}

.geds-nav .geds-nav-title:first-child {
    margin-top: 0;
}

.geds-sidebar.collapsed .geds-nav-title {
    visibility: hidden;
    height: 0;
    padding: 0;
    margin: 0;
    border-left: none;
}

.geds-nav-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.8rem;
    margin: 0.1rem 0;
    border-radius: 8px;
    color: var(--geds-sidebar-text);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    border-left: 3px solid transparent;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.geds-nav-link i {
    flex: 0 0 20px;
    font-size: 1.05rem;
    text-align: center;
    color: var(--geds-sidebar-text);
}

.geds-nav-link:hover {
    background: var(--geds-sidebar-hover-bg);
    color: #ffffff;
}

.geds-nav-link:hover i {
    color: #ffffff;
}

.geds-nav-link.active {
    background: var(--geds-sidebar-active-bg);
    color: #ffffff;
}

.geds-nav-link.active i {
    color: #ffffff;
}

.geds-nav-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.geds-nav-badge {
    flex: 0 0 auto;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--geds-sidebar-text-muted);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
}

.geds-sidebar.collapsed .geds-nav-link {
    justify-content: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border-left-color: transparent;
}

.geds-sidebar.collapsed .geds-nav-label,
.geds-sidebar.collapsed .geds-nav-badge {
    display: none;
}

.geds-sidebar.collapsed .geds-nav-link.active {
    background: var(--geds-sidebar-active-bg);
    color: #ffffff;
}

.geds-sidebar.collapsed .geds-nav-link.active i {
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   Area principale + topbar
   -------------------------------------------------------------------------- */
.geds-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.geds-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: var(--geds-topbar-height);
    padding: 0 1rem;
    background: var(--geds-bg);
    border-bottom: 1px solid var(--geds-border);
}

.geds-toggle {
    border: 0;
    background: transparent;
    color: var(--geds-blue);
    font-size: 1.3rem;
    line-height: 1;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
}

.geds-toggle:hover {
    background: #f1f3f5;
}

.geds-page-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--geds-text);
    margin: 0;
}

.geds-topbar-user {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.geds-topbar-user .geds-username {
    color: var(--geds-text);
    font-weight: 500;
}

.geds-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--geds-blue);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.geds-content {
    padding: 1.5rem;
    flex: 1;
}

/* --------------------------------------------------------------------------
   Layout ospiti (es. login)
   -------------------------------------------------------------------------- */
.geds-guest {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #003066 0%, #004b93 45%, #0060b8 100%);
}

/* --------------------------------------------------------------------------
   Overlay backdrop (mobile sidebar)
   -------------------------------------------------------------------------- */
.geds-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1044;
}

.geds-sidebar-overlay.active {
    display: block;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Sidebar: always fixed, starts hidden, slides in when .mobile-open */
    .geds-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 1045;
        width: var(--geds-sidebar-width) !important;
        flex-basis: var(--geds-sidebar-width) !important;
    }

    .geds-sidebar.mobile-open {
        transform: translateX(0);
    }

    /* Override desktop-collapsed styles: on mobile all labels/titles always shown */
    .geds-sidebar.collapsed .geds-nav-label,
    .geds-sidebar.collapsed .geds-nav-badge {
        display: initial;
    }

    .geds-sidebar.collapsed .geds-nav-title {
        visibility: visible;
        height: auto;
        padding: 0.6rem 0.8rem 0.3rem 0.85rem;
        margin-top: 0.4rem;
        border-left: 2px solid var(--geds-red);
    }

    .geds-sidebar.collapsed .geds-nav-title:first-child {
        margin-top: 0;
    }

    .geds-sidebar.collapsed .geds-nav-link {
        justify-content: flex-start;
        padding-left: 0.8rem;
        padding-right: 0.8rem;
        border-left: 3px solid transparent;
    }

    .geds-sidebar.collapsed .geds-nav-link.active {
        border-left-color: transparent;
    }
}

/* ── Badge di stato GEDS ──────────────────────────────────────────────────── */
.badge-donor,
.badge-admin,
.badge-operator,
.badge-warning {
    display: inline-flex;
    align-items: center;
    padding: 0.3em 0.65em;
    font-size: 0.8em;
    font-weight: 600;
    border-radius: 0.375rem;
    white-space: nowrap;
}
.badge-donor    { background-color: #198754; color: #fff; }   /* verde  — idoneo / DONOR       */
.badge-admin    { background-color: #dc3545; color: #fff; }   /* rosso  — non idoneo / ADMIN   */
.badge-operator { background-color: #0d6efd; color: #fff; }   /* blu    — OPERATOR             */
.badge-warning  { background-color: #ffc107; color: #212529; } /* giallo — AGE_RESTRICTION     */
/* ── Notification bell — dashboard topbar ──────────────────────────────── */
.geds-notif-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--geds-text);
    transition: background 0.15s;
}
.geds-notif-bell:hover { background: rgba(0,0,0,0.06); }
.geds-notif-bell i { font-size: 1.2rem; }

.geds-notif-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: #dc3545;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    pointer-events: none;
}

.geds-notif-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: -8px;
    width: 340px;
    max-height: 420px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.14);
    z-index: 500;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.geds-notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 8px;
    font-weight: 600;
    font-size: 0.88rem;
    border-bottom: 1px solid rgba(0,0,0,0.07);
}
.geds-notif-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
}
.geds-notif-item {
    padding: 11px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    cursor: pointer;
    transition: background 0.1s;
}
.geds-notif-item:hover { background: #f5f7fa; }
.geds-notif-item.unread { background: #f0f5ff; }
.geds-notif-item.unread:hover { background: #e6eeff; }
.geds-notif-title {
    font-size: 0.83rem;
    font-weight: 600;
    margin-bottom: 2px;
    color: #1a1a1a;
}
.geds-notif-msg {
    font-size: 0.78rem;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.geds-notif-ts {
    font-size: 0.72rem;
    color: #999;
    margin-top: 3px;
}
.geds-notif-empty {
    padding: 20px 16px;
    font-size: 0.83rem;
    color: #888;
    text-align: center;
}