:root{--bg:#0b1220;--panel:#111b2e;--panel2:#17233b;--text:#e9eef7;--muted:#93a4bc;--accent:#35b7ff;--ok:#42d392;--warn:#f2bb4b;--bad:#ff6376;--line:#24334f}
*{box-sizing:border-box} body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)} a{color:inherit;text-decoration:none}.layout{display:grid;grid-template-columns:240px 1fr;min-height:100vh}.sidebar{background:#08101d;border-right:1px solid var(--line);padding:22px 14px}.brand{font-size:20px;font-weight:800;padding:8px 12px 24px}.brand span{color:var(--accent)}.nav a{display:block;padding:11px 12px;border-radius:10px;color:var(--muted);margin:3px 0}.nav a:hover{background:var(--panel2);color:var(--text)}.main{padding:28px}.top{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:24px}.muted{color:var(--muted)}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:18px 0}.card,.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px}.card .num{font-size:32px;font-weight:800}.ok{color:var(--ok)}.warn{color:var(--warn)}.bad{color:var(--bad)}table{width:100%;border-collapse:collapse}th,td{padding:11px;border-bottom:1px solid var(--line);text-align:left}th{color:var(--muted);font-size:13px}input,select,textarea{width:100%;background:#0c1627;color:var(--text);border:1px solid var(--line);border-radius:9px;padding:10px}label{display:block;font-size:13px;color:var(--muted);margin-bottom:5px}.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.btn{display:inline-block;border:0;border-radius:9px;background:var(--accent);color:#06101c;padding:10px 14px;font-weight:700;cursor:pointer}.btn.secondary{background:var(--panel2);color:var(--text)}.btn.badbtn{background:var(--bad);color:white}.section-title{margin:28px 0 12px}.login-wrap{min-height:100vh;display:grid;place-items:center}.login-card{width:min(460px,92vw);background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px}.error{background:#3a1520;color:#ffb9c2;border-radius:8px;padding:10px;margin-bottom:12px}.tag{display:inline-block;padding:4px 8px;border-radius:999px;background:var(--panel2);font-size:12px;color:var(--muted)}@media(max-width:800px){.layout{grid-template-columns:1fr}.sidebar{display:none}.main{padding:16px}.grid2,.grid3{grid-template-columns:1fr}}

/* ==============================
   SETTINGS TABS
   ============================== */

.settings-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.settings-tab {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text);
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    transition: .15s ease;
}

.settings-tab:hover {
    background: rgba(255,255,255,.08);
}

.settings-tab.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.notification-badge {
    position: absolute;
    top: -8px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #e53935;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px rgba(15,20,30,.9);
}

/* DATABIT DocHub - Toggle switch */

.toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    width: fit-content;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex: 0 0 48px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 999px;
    transition: .2s;
}

.toggle-slider::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    left: 2px;
    top: 2px;
    background: #fff;
    border-radius: 50%;
    transition: .2s;
}

.toggle-switch input:checked + .toggle-slider {
    background: #4da3ff;
    border-color: #4da3ff;
    box-shadow: 0 0 12px rgba(77,163,255,.30);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(22px);
}

.custom-section-title {
    margin-top: 26px;
    margin-bottom: 16px;
    font-size: 20px;
}

/* DATABIT DocHub - Scelta multipla */

.multi-choice {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 5px;
}

.choice-pill {
    display: inline-flex;
    cursor: pointer;
    user-select: none;
}

.choice-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.choice-pill span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.05);
    transition: .18s ease;
}

.choice-pill input:checked + span {
    background: #4da3ff;
    border-color: #4da3ff;
    color: #fff;
    box-shadow: 0 0 12px rgba(77,163,255,.30);
}

.choice-pill input:disabled + span {
    cursor: default;
    opacity: .75;
}

/* DocHub - Sezioni comprimibili */

.custom-section-collapse {
    margin: 14px 0;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    background: rgba(255,255,255,.018);
    overflow: hidden;
}

.custom-section-summary {
    position: relative;
    cursor: pointer;
    padding: 16px 46px 16px 18px;
    font-size: 19px;
    font-weight: 700;
    user-select: none;
    list-style: none;
}

.custom-section-summary::-webkit-details-marker {
    display: none;
}

.custom-section-summary::after {
    content: "›";
    position: absolute;
    right: 20px;
    top: 50%;
    font-size: 25px;
    line-height: 1;
    transform: translateY(-50%) rotate(90deg);
    transition: transform .18s ease;
}

.custom-section-collapse[open] > .custom-section-summary::after {
    transform: translateY(-50%) rotate(-90deg);
}

.custom-section-summary:hover {
    background: rgba(255,255,255,.035);
}

.custom-section-body {
    padding: 4px 18px 18px 18px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.settings-section-collapse .custom-field-settings-card {
    margin-top: 14px;
}

.settings-section-collapse .custom-field-settings-card:last-child {
    margin-bottom: 0 !important;
}

/* DocHub - blocchi principali comprimibili */

.main-collapse {
    margin-top: 24px;
}

.main-collapse-summary {
    font-size: 24px;
    padding-top: 18px;
    padding-bottom: 18px;
}

.main-collapse > .custom-section-body {
    padding-top: 18px;
}

.custom-fields-save-row {
    padding: 16px 18px 18px 18px;
}

/* DocHub - azioni documenti */

.document-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.document-actions form {
    margin: 0;
}

/* DocHub - azioni documenti */

.document-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.document-actions form {
    margin: 0;
}


/* =========================================================
   DATABIT DocHub - RESPONSIVE / MOBILE / PWA
   ========================================================= */

html {
    width: 100%;
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
}

img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
}


/* ---------------------------------------------------------
   Sidebar desktop
   --------------------------------------------------------- */

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    display: block;
    font-size: 20px;
    font-weight: 800;
    padding: 8px 12px 24px;
    cursor: pointer;
}

.brand:hover {
    opacity: .92;
}

.sidebar-close {
    display: none;
}


/* ---------------------------------------------------------
   Header mobile
   --------------------------------------------------------- */

.mobile-header {
    display: none;
}

.mobile-brand {
    font-size: 19px;
    font-weight: 800;
    white-space: nowrap;
}

.mobile-brand span {
    color: var(--accent);
}

.hamburger {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    padding: 0;

    border: 1px solid var(--line);
    border-radius: 10px;

    background: var(--panel);
    cursor: pointer;
}

.hamburger span {
    width: 21px;
    height: 2px;
    margin: 2.5px 0;

    border-radius: 2px;

    background: var(--text);
}


/* ---------------------------------------------------------
   Top
   --------------------------------------------------------- */

.top-title {
    min-width: 0;
}

.top-title h1 {
    margin-top: 0;
    overflow-wrap: anywhere;
}

.top-user {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.notification-link {
    position: relative;
    font-size: 22px;
    text-decoration: none;
}


/* ---------------------------------------------------------
   Sicurezza layout
   --------------------------------------------------------- */

.main {
    min-width: 0;
    max-width: 100%;
}

.panel,
.card,
.custom-section-collapse {
    max-width: 100%;
}

.panel {
    overflow-x: auto;
}


/* ---------------------------------------------------------
   Tabelle
   --------------------------------------------------------- */

table {
    max-width: 100%;
}

th,
td {
    overflow-wrap: anywhere;
    word-break: normal;
}


/* ---------------------------------------------------------
   Form
   --------------------------------------------------------- */

input,
select,
textarea,
button {
    max-width: 100%;
}

input,
select,
textarea {
    font-size: 16px;
}


/* ---------------------------------------------------------
   Overlay sidebar
   --------------------------------------------------------- */

.sidebar-overlay {
    display: none;
}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 800px) {

    body.menu-open {
        overflow: hidden;
    }

    .layout {
        display: block;
        min-height: 100vh;
        min-height: 100dvh;
    }


    /* Sidebar mobile */

    .sidebar {
        display: block;

        position: fixed;

        z-index: 1100;

        top: 0;
        left: 0;

        width: min(310px, 86vw);

        height: 100vh;
        height: 100dvh;

        padding:
            max(18px, env(safe-area-inset-top))
            14px
            max(18px, env(safe-area-inset-bottom))
            14px;

        background: #08101d;

        border-right: 1px solid var(--line);

        transform: translateX(-105%);

        transition:
            transform .22s ease,
            visibility .22s ease;

        visibility: hidden;

        box-shadow:
            14px 0 40px rgba(0,0,0,.38);
    }

    .sidebar.open {
        transform: translateX(0);
        visibility: visible;
    }


    .sidebar-close {
        display: inline-flex;

        align-items: center;
        justify-content: center;

        width: 40px;
        height: 40px;

        flex: 0 0 40px;

        border: 0;
        border-radius: 10px;

        background: rgba(255,255,255,.06);
        color: var(--text);

        font-size: 28px;
        line-height: 1;

        cursor: pointer;
    }


    .sidebar .brand {
        padding: 8px 8px 22px;
    }


    /* Overlay */

    .sidebar-overlay {
        display: block;

        position: fixed;

        z-index: 1050;

        inset: 0;

        background: rgba(0,0,0,.58);

        opacity: 0;
        visibility: hidden;

        transition:
            opacity .22s ease,
            visibility .22s ease;
    }

    .sidebar-overlay.open {
        opacity: 1;
        visibility: visible;
    }


    /* Main */

    .main {
        width: 100%;

        padding:
            max(14px, env(safe-area-inset-top))
            max(14px, env(safe-area-inset-right))
            max(18px, env(safe-area-inset-bottom))
            max(14px, env(safe-area-inset-left));
    }


    /* Mobile header */

    .mobile-header {
        display: flex;

        align-items: center;

        gap: 13px;

        min-height: 54px;

        margin-bottom: 16px;
    }


    /* Titolo pagina */

    .top {
        gap: 12px;

        margin-bottom: 18px;
    }

    .top h1 {
        font-size: clamp(24px, 7vw, 32px);
        margin-bottom: 4px;
    }

    .user-name {
        display: none;
    }


    /* Form */

    .grid2,
    .grid3 {
        grid-template-columns: minmax(0, 1fr);
    }


    /* Cards */

    .cards {
        grid-template-columns:
            repeat(
                auto-fit,
                minmax(min(145px, 100%), 1fr)
            );

        gap: 10px;
    }

    .card,
    .panel {
        padding: 14px;
        border-radius: 13px;
    }


    /* Sezioni */

    .custom-section-summary {
        font-size: 17px;
        padding: 15px 42px 15px 14px;
    }

    .main-collapse-summary {
        font-size: 20px;
    }

    .custom-section-body {
        padding: 12px;
    }


    /* Tabelle */

    .panel:has(table) {
        padding: 10px;
    }

    table {
        width: 100%;
        min-width: 560px;
        font-size: 14px;
    }

    th,
    td {
        padding: 9px 8px;
    }


    /* Azioni documenti */

    .document-actions {
        min-width: 150px;
    }

    .document-actions .btn {
        padding: 8px 10px;
        font-size: 13px;
    }


    /* Tabs impostazioni */

    .settings-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
    }

    .settings-tab {
        flex: 0 0 auto;
        white-space: nowrap;
    }

}


/* =========================================================
   TELEFONI PICCOLI
   ========================================================= */

@media (max-width: 480px) {

    .main {
        padding-left:
            max(10px, env(safe-area-inset-left));

        padding-right:
            max(10px, env(safe-area-inset-right));
    }

    .mobile-brand {
        font-size: 18px;
    }

    .top {
        align-items: flex-start;
    }

    .top-user {
        gap: 8px;
    }

    .cards {
        grid-template-columns: 1fr;
    }

    .btn {
        min-height: 40px;
    }

}


/* =========================================================
   PWA standalone
   ========================================================= */

@media (display-mode: standalone) {

    body {
        padding-top: env(safe-area-inset-top);
    }

}


/* =========================================================
   DATABIT DocHub - Scheda Azienda compatta
   ========================================================= */

.company-profile {
    padding: 18px 20px;
}

.company-profile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.company-name {
    font-size: 23px;
    font-weight: 800;
    line-height: 1.2;
}

.company-info-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 0;
}

.company-info-item {
    min-width: 0;
    padding: 9px 14px 9px 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.company-info-item span {
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 12px;
}

.company-info-item strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.company-notes {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.company-notes > span {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 12px;
}

.company-notes > div {
    white-space: pre-wrap;
    font-size: 14px;
}

.company-edit-link {
    flex: 0 0 auto;
}

.settings-divider {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 28px 0 22px;
}

.settings-table-wrap {
    width: 100%;
    overflow-x: auto;
}


/* Tablet */

@media (max-width: 1000px) {

    .company-info-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* Smartphone */

@media (max-width: 600px) {

    .company-profile {
        padding: 14px;
    }

    .company-profile-head {
        align-items: flex-start;
        margin-bottom: 12px;
    }

    .company-name {
        font-size: 20px;
    }

    .company-info-grid {
        grid-template-columns: 1fr;
    }

    .company-info-item {
        display: grid;
        grid-template-columns: minmax(110px, 40%) 1fr;
        gap: 8px;
        align-items: baseline;
        padding: 8px 0;
    }

    .company-info-item span {
        margin: 0;
    }

    .company-info-item strong {
        text-align: right;
    }

    .company-edit-link {
        padding: 8px 10px;
        font-size: 12px;
    }

}


/* =========================================================
   DATABIT DocHub - Scadenziario
   ========================================================= */

.deadline-stats {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.deadline-stat {
    display: flex;
    flex-direction: column;
    gap: 5px;

    padding: 15px;

    border: 1px solid var(--line);
    border-radius: 14px;

    background: var(--panel);
}

.deadline-stat span {
    color: var(--muted);
    font-size: 13px;
}

.deadline-stat strong {
    font-size: 27px;
}

.deadline-list {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.deadline-card {
    display: grid;
    grid-template-columns:
        74px minmax(0,1fr) auto;

    gap: 16px;
    align-items: center;

    padding: 15px 16px;

    border: 1px solid var(--line);
    border-radius: 14px;

    background: var(--panel);
}

.deadline-expired {
    border-left:
        4px solid var(--bad);
}

.deadline-today,
.deadline-7 {
    border-left:
        4px solid var(--warn);
}

.deadline-date {
    text-align: center;
}

.deadline-date strong {
    display: block;
    font-size: 28px;
}

.deadline-date span {
    color: var(--muted);
    font-size: 12px;
}

.deadline-title {
    font-size: 16px;
    font-weight: 750;
}

.deadline-meta {
    margin: 3px 0 6px;
    color: var(--accent);
    font-size: 13px;
}

.deadline-status {
    margin-top: 8px;
}

.deadline-badge {
    display: inline-flex;
    padding: 4px 8px;

    border-radius: 999px;

    background: var(--panel2);

    font-size: 12px;
    font-weight: 700;
}

.deadline-badge.bad {
    color: var(--bad);
}

.deadline-badge.warn {
    color: var(--warn);
}

.deadline-badge.ok {
    color: var(--ok);
}

.deadline-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
}

.deadline-actions form {
    margin: 0;
}

.deadline-help {
    margin-top: 4px;
    font-size: 11px;
}


/* =========================================================
   Notifiche cliccabili
   ========================================================= */

.notifications-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

.notification-list {
    display: grid;
    gap: 8px;
}

.notification-item {
    display: grid;
    grid-template-columns:
        16px minmax(0,1fr) 24px;

    gap: 10px;
    align-items: center;

    padding: 14px;

    border: 1px solid var(--line);
    border-radius: 12px;

    background: rgba(255,255,255,.015);
}

.notification-item:hover {
    background: var(--panel2);
}

.notification-unread {
    border-color:
        rgba(53,183,255,.35);
}

.notification-dot {
    display: block;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--accent);
}

.notification-date {
    margin-top: 6px;
    color: var(--muted);
    font-size: 11px;
}

.notification-arrow {
    color: var(--muted);
    font-size: 28px;
}

.dochub-focus-target {
    outline:
        2px solid var(--accent);

    outline-offset: 2px;

    animation:
        dochubFocus 1.2s ease;
}

@keyframes dochubFocus {
    from {
        box-shadow:
            0 0 30px
            rgba(53,183,255,.5);
    }

    to {
        box-shadow: none;
    }
}


@media (max-width: 900px) {

    .deadline-stats {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

}


@media (max-width: 650px) {

    .deadline-card {
        grid-template-columns:
            58px minmax(0,1fr);
    }

    .deadline-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .deadline-date strong {
        font-size: 23px;
    }

    .notifications-head {
        align-items: flex-start;
        flex-direction: column;
    }

}


/* =========================================================
   Gestione versioni documenti
   ========================================================= */

.document-manage-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.document-manage-title {
    font-size: 21px;
    font-weight: 800;
}

.document-history {
    display: grid;
    gap: 8px;
}

.document-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding: 12px 14px;

    border: 1px solid var(--line);
    border-radius: 12px;

    background:
        rgba(255,255,255,.015);
}

@media (max-width: 650px) {

    .document-manage-summary,
    .document-history-item {
        align-items: flex-start;
        flex-direction: column;
    }

}


/* =========================================================
   Azioni distruttive
   ========================================================= */

.btn.danger {
    background: rgba(255, 99, 118, .14);
    border-color: rgba(255, 99, 118, .45);
    color: var(--bad);
}

.btn.danger:hover {
    background: rgba(255, 99, 118, .24);
    border-color: var(--bad);
    color: #fff;
}

.btn.danger:focus {
    outline: 2px solid rgba(255, 99, 118, .45);
    outline-offset: 2px;
}


/* =========================================================
   Fix modifica scadenza dentro card
   ========================================================= */

.deadline-edit-box {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    margin-top: 8px;
}

.deadline-edit-box .custom-section-body {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.deadline-edit-box form {
    width: 100%;
}

.deadline-edit-box .grid3 {
    width: 100%;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}

.deadline-edit-box input,
.deadline-edit-box select,
.deadline-edit-box textarea {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}


@media (max-width: 900px) {

    .deadline-edit-box .grid3 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 600px) {

    .deadline-edit-box .grid3 {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   Dashboard mobile - 2 card per riga
   ========================================================= */

@media (max-width: 600px) {

    .cards {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        gap: 10px;
    }

    .cards .card {
        min-width: 0;
        padding: 14px;
        border-radius: 14px;
    }

    .cards .card .muted {
        font-size: 13px;
        line-height: 1.25;
    }

    .cards .card .num {
        font-size: 28px;
        line-height: 1.1;
        margin-top: 6px;
    }

}


/* =========================================================
   DATABIT DocHub - Dashboard V2
   ========================================================= */

.dashboard-alerts {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.dashboard-alert {
    display: flex;
    align-items: center;
    gap: 14px;

    min-width: 0;
    padding: 17px;

    border: 1px solid var(--line);
    border-radius: 15px;

    background: var(--panel);

    text-decoration: none;

    transition:
        transform .15s ease,
        border-color .15s ease,
        background .15s ease;
}

.dashboard-alert:hover,
.dashboard-stat:hover {
    transform: translateY(-2px);
    border-color: rgba(53,183,255,.45);
    background: var(--panel2);
}

.dashboard-alert-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 44px;

    width: 44px;
    height: 44px;

    border-radius: 13px;

    background: rgba(53,183,255,.09);
    color: var(--accent);

    font-weight: 850;
    font-size: 17px;
}

.dashboard-alert span {
    display: block;
    color: var(--muted);
    font-size: 13px;
}

.dashboard-alert strong {
    display: block;
    margin-top: 2px;

    font-size: 29px;
    line-height: 1;
}

.dashboard-alert-bad .dashboard-alert-icon,
.dashboard-alert-bad strong {
    color: var(--bad);
}

.dashboard-alert-bad .dashboard-alert-icon {
    background: rgba(255,99,118,.10);
}

.dashboard-alert-today .dashboard-alert-icon,
.dashboard-alert-today strong {
    color: var(--warn);
}

.dashboard-alert-today .dashboard-alert-icon {
    background: rgba(242,187,75,.10);
}


/* statistiche */

.dashboard-stats {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 10px;

    margin-bottom: 18px;
}

.dashboard-stat {
    display: flex;
    align-items: center;
    gap: 11px;

    min-width: 0;

    padding: 12px 14px;

    border: 1px solid var(--line);
    border-radius: 13px;

    background:
        rgba(255,255,255,.015);

    text-decoration: none;

    transition:
        transform .15s ease,
        border-color .15s ease,
        background .15s ease;
}

.dashboard-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    border-radius: 10px;

    background: rgba(53,183,255,.08);
    color: var(--accent);

    font-size: 17px;
}

.dashboard-stat span {
    display: block;

    color: var(--muted);

    font-size: 12px;
}

.dashboard-stat strong {
    display: block;

    margin-top: 1px;

    font-size: 22px;
}


/* contenuto */

.dashboard-main-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 14px;

    align-items: start;
}

.dashboard-section {
    min-width: 0;
}

.dashboard-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 12px;

    margin-bottom: 14px;
}

.dashboard-section-head h3 {
    margin: 0 0 3px;
}

.dashboard-deadlines,
.dashboard-documents,
.dashboard-activity-list {
    display: grid;
    gap: 8px;
}


/* scadenze */

.dashboard-deadline {
    display: grid;
    grid-template-columns:
        58px minmax(0, 1fr) auto;

    gap: 12px;
    align-items: center;

    padding: 11px 12px;

    border: 1px solid
        rgba(255,255,255,.06);

    border-radius: 12px;

    background:
        rgba(255,255,255,.015);
}

.dashboard-date {
    text-align: center;
}

.dashboard-date strong {
    display: block;

    font-size: 23px;
    line-height: 1;
}

.dashboard-date span {
    color: var(--muted);
    font-size: 11px;
}

.dashboard-deadline-main {
    min-width: 0;
}

.dashboard-deadline-main > strong {
    display: block;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-deadline-owner {
    margin: 2px 0 5px;

    color: var(--accent);

    font-size: 12px;
}

.dashboard-status {
    display: inline-flex;

    padding: 3px 7px;

    border-radius: 999px;

    background: var(--panel2);

    font-size: 11px;
    font-weight: 700;
}

.dashboard-status.bad {
    color: var(--bad);
}

.dashboard-status.warn {
    color: var(--warn);
}


/* documenti */

.dashboard-document {
    display: grid;
    grid-template-columns:
        36px minmax(0, 1fr) auto;

    gap: 10px;
    align-items: center;

    padding: 11px 12px;

    border: 1px solid
        rgba(255,255,255,.06);

    border-radius: 12px;

    background:
        rgba(255,255,255,.015);
}

.dashboard-doc-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border-radius: 10px;

    background: rgba(53,183,255,.08);
    color: var(--accent);
}

.dashboard-document-main {
    min-width: 0;
}

.dashboard-document-main > strong {
    display: block;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-document-meta {
    margin-top: 4px;

    color: var(--muted);

    font-size: 11px;
}

.dashboard-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 5px;
    flex-wrap: wrap;
}

.dashboard-row-actions .btn {
    padding: 7px 9px;
    font-size: 12px;
}


/* attività */

.dashboard-activity {
    margin-top: 14px;
}

.dashboard-activity-item {
    display: grid;
    grid-template-columns:
        12px minmax(0, 1fr);

    gap: 10px;

    padding: 9px 4px;

    border-bottom: 1px solid
        rgba(255,255,255,.05);
}

.dashboard-activity-item:last-child {
    border-bottom: 0;
}

.dashboard-activity-dot {
    width: 8px;
    height: 8px;

    margin-top: 6px;

    border-radius: 50%;

    background: var(--accent);
}

.dashboard-activity-main {
    min-width: 0;
}

.dashboard-activity-date {
    margin-top: 4px;

    color: var(--muted);

    font-size: 11px;
}

.dashboard-empty {
    padding: 18px;

    text-align: center;

    color: var(--muted);
}


/* tablet */

@media (max-width: 1000px) {

    .dashboard-alerts,
    .dashboard-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .dashboard-main-grid {
        grid-template-columns: 1fr;
    }

}


/* smartphone */

@media (max-width: 600px) {

    .dashboard-alerts {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 8px;
    }

    .dashboard-alert {
        gap: 9px;

        padding: 12px;

        min-height: 74px;
    }

    .dashboard-alert-icon {
        width: 35px;
        height: 35px;

        flex-basis: 35px;

        border-radius: 10px;

        font-size: 14px;
    }

    .dashboard-alert span {
        font-size: 11px;
    }

    .dashboard-alert strong {
        font-size: 24px;
    }


    .dashboard-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 8px;
    }

    .dashboard-stat {
        padding: 10px;

        min-height: 58px;
    }

    .dashboard-stat-icon {
        width: 30px;
        height: 30px;

        flex-basis: 30px;

        font-size: 14px;
    }

    .dashboard-stat span {
        font-size: 11px;
    }

    .dashboard-stat strong {
        font-size: 19px;
    }


    .dashboard-section-head {
        align-items: flex-start;
    }


    .dashboard-deadline,
    .dashboard-document {
        grid-template-columns:
            50px minmax(0, 1fr);
    }

    .dashboard-document {
        grid-template-columns:
            34px minmax(0, 1fr);
    }

    .dashboard-row-actions {
        grid-column: 1 / -1;

        justify-content: flex-start;

        padding-top: 3px;
    }

}


/* =========================================================
   DATABIT DocHub - Temi
   ========================================================= */

/*
 * DARK esplicito
 */

html[data-theme="dark"] {
    color-scheme: dark;

    --bg: #0b1220;
    --panel: #111b2e;
    --panel2: #17233b;

    --text: #e9eef7;
    --muted: #93a4bc;

    --accent: #35b7ff;
    --ok: #42d392;
    --warn: #f2bb4b;
    --bad: #ff6376;

    --line: #24334f;
}


/*
 * LIGHT esplicito
 */

html[data-theme="light"] {
    color-scheme: light;

    --bg: #eef3f8;
    --panel: #f8fafc;
    --panel2: #edf2f7;

    --text: #1f2937;
    --muted: #6f7f92;

    --accent: #0b74b8;
    --ok: #198754;
    --warn: #b86f00;
    --bad: #d9384e;

    --line: #cfd8e3;
}


/*
 * SISTEMA:
 * se il dispositivo preferisce LIGHT
 */

@media (prefers-color-scheme: light) {

    html[data-theme="system"] {
        color-scheme: light;

        --bg: #eef3f8;
        --panel: #f8fafc;
        --panel2: #edf2f7;

        --text: #1f2937;
        --muted: #6f7f92;

        --accent: #0b74b8;
        --ok: #198754;
        --warn: #b86f00;
        --bad: #d9384e;

        --line: #cfd8e3;
    }

}


/*
 * SISTEMA:
 * se il dispositivo preferisce DARK
 */

@media (prefers-color-scheme: dark) {

    html[data-theme="system"] {
        color-scheme: dark;

        --bg: #0b1220;
        --panel: #111b2e;
        --panel2: #17233b;

        --text: #e9eef7;
        --muted: #93a4bc;

        --accent: #35b7ff;
        --ok: #42d392;
        --warn: #f2bb4b;
        --bad: #ff6376;

        --line: #24334f;
    }

}


/* =========================================================
   Correzioni specifiche tema chiaro
   ========================================================= */

html[data-theme="light"] body,
html[data-theme="system"] body {
    background: var(--bg);
    color: var(--text);
}


/*
 * Elementi che in alcune parti del CSS storico
 * utilizzano rgba bianchi pensati per il dark.
 */

html[data-theme="light"] .card,
html[data-theme="light"] .panel,
html[data-theme="light"] .deadline-card,
html[data-theme="light"] .dashboard-alert,
html[data-theme="light"] .dashboard-stat,
html[data-theme="light"] .dashboard-deadline,
html[data-theme="light"] .dashboard-document,
html[data-theme="light"] .notification-item,
html[data-theme="light"] .document-history-item,
html[data-theme="light"] .company-profile,

html[data-theme="system"] .card,
html[data-theme="system"] .panel,
html[data-theme="system"] .deadline-card,
html[data-theme="system"] .dashboard-alert,
html[data-theme="system"] .dashboard-stat,
html[data-theme="system"] .dashboard-deadline,
html[data-theme="system"] .dashboard-document,
html[data-theme="system"] .notification-item,
html[data-theme="system"] .document-history-item,
html[data-theme="system"] .company-profile {
    color: var(--text);
}


/*
 * LIGHT esplicito
 */

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
    background: #ffffff;
    color: var(--text);
    border-color: var(--line);
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
    color: #8794a7;
}

html[data-theme="light"] .sidebar {
    background: #e7edf4;
    border-color: var(--line);
}

html[data-theme="light"] .mobile-header {
    background: rgba(238,243,248,.96);
}

html[data-theme="light"] .sidebar-overlay {
    background: rgba(22,32,51,.28);
}

html[data-theme="light"] table tr {
    border-color: var(--line);
}

html[data-theme="light"] .btn.secondary {
    background: #e7edf4;
    color: var(--text);
    border-color: var(--line);
}

html[data-theme="light"] .btn.secondary:hover {
    background: #dce5ef;
}


/*
 * SYSTEM + preferenza LIGHT
 */

@media (prefers-color-scheme: light) {

    html[data-theme="system"] input,
    html[data-theme="system"] select,
    html[data-theme="system"] textarea {
        background: #ffffff;
        color: var(--text);
        border-color: var(--line);
    }

    html[data-theme="system"] input::placeholder,
    html[data-theme="system"] textarea::placeholder {
        color: #8794a7;
    }

    html[data-theme="system"] .sidebar {
        background: #ffffff;
        border-color: var(--line);
    }

    html[data-theme="system"] .mobile-header {
        background: rgba(238,243,248,.96);
    }

    html[data-theme="system"] .sidebar-overlay {
        background: rgba(22,32,51,.28);
    }

    html[data-theme="system"] .btn.secondary {
        background: #e7edf4;
        color: var(--text);
        border-color: var(--line);
    }

    html[data-theme="system"] .btn.secondary:hover {
        background: #dce5ef;
    }

}

/* =========================================================
   Light soft refinements
   ========================================================= */

html[data-theme="light"] .panel,
html[data-theme="light"] .card,
html[data-theme="light"] .dashboard-alert,
html[data-theme="light"] .dashboard-stat,
html[data-theme="light"] .deadline-card,
html[data-theme="light"] .dashboard-deadline,
html[data-theme="light"] .dashboard-document,
html[data-theme="light"] .notification-item,
html[data-theme="light"] .document-history-item {
    box-shadow: 0 2px 10px rgba(31, 41, 55, .04);
}

html[data-theme="light"] .main {
    background:
        linear-gradient(
            180deg,
            #eef3f8 0%,
            #e9eff5 100%
        );
}

html[data-theme="light"] .sidebar {
    background: #e7edf4;
}

html[data-theme="light"] .mobile-header {
    background: rgba(231,237,244,.96);
}

html[data-theme="light"] .dashboard-alert-icon,
html[data-theme="light"] .dashboard-stat-icon,
html[data-theme="light"] .dashboard-doc-icon {
    background: #dfeaf4;
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
    background: #fdfefe;
}


/* =========================================================
   DATABIT DocHub - Aurora Glass
   ========================================================= */

html[data-theme="aurora"] {
    color-scheme: dark;

    --bg: #08111f;
    --panel: rgba(16, 28, 49, .72);
    --panel2: rgba(28, 46, 77, .72);

    --text: #eef6ff;
    --muted: #9eb2cc;

    --accent: #4fd6ff;
    --ok: #4be6a0;
    --warn: #ffc75a;
    --bad: #ff6f91;

    --line: rgba(130, 170, 220, .18);

    --aurora-violet: #7c5cff;
    --aurora-blue: #3aa7ff;
    --aurora-cyan: #4fd6ff;
    --aurora-pink: #d86cff;
}


/* fondo */

html[data-theme="aurora"] body {
    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(124,92,255,.18),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 15%,
            rgba(79,214,255,.15),
            transparent 28%
        ),
        radial-gradient(
            circle at 50% 90%,
            rgba(216,108,255,.11),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #07101c 0%,
            #0a1323 55%,
            #09111e 100%
        );

    color: var(--text);
}


/* main area */

html[data-theme="aurora"] .main {
    background: transparent;
}


/* sidebar */

html[data-theme="aurora"] .sidebar {
    background:
        linear-gradient(
            180deg,
            rgba(9,18,33,.93),
            rgba(12,24,43,.88)
        );

    border-right:
        1px solid rgba(103,178,255,.16);

    box-shadow:
        14px 0 40px rgba(0,0,0,.18);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}


/* brand */

html[data-theme="aurora"] .brand {
    text-shadow:
        0 0 18px rgba(79,214,255,.15);
}

html[data-theme="aurora"] .brand span {
    background:
        linear-gradient(
            90deg,
            #4fd6ff,
            #7c5cff,
            #d86cff
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


/* nav */

html[data-theme="aurora"] .nav a {
    border: 1px solid transparent;
    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

html[data-theme="aurora"] .nav a:hover {
    background:
        linear-gradient(
            90deg,
            rgba(79,214,255,.10),
            rgba(124,92,255,.08)
        );

    border-color:
        rgba(79,214,255,.18);

    transform: translateX(3px);

    box-shadow:
        inset 0 0 18px
        rgba(79,214,255,.04);
}


/* pannelli glass */

html[data-theme="aurora"] .panel,
html[data-theme="aurora"] .card,
html[data-theme="aurora"] .deadline-card,
html[data-theme="aurora"] .dashboard-alert,
html[data-theme="aurora"] .dashboard-stat,
html[data-theme="aurora"] .dashboard-deadline,
html[data-theme="aurora"] .dashboard-document,
html[data-theme="aurora"] .notification-item,
html[data-theme="aurora"] .document-history-item,
html[data-theme="aurora"] .custom-section-collapse {

    background:
        linear-gradient(
            145deg,
            rgba(24, 42, 70, .72),
            rgba(11, 24, 43, .62)
        );

    border:
        1px solid rgba(116,177,255,.15);

    box-shadow:
        0 14px 34px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.035);

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


/* hover premium */

html[data-theme="aurora"] .dashboard-alert:hover,
html[data-theme="aurora"] .dashboard-stat:hover,
html[data-theme="aurora"] .notification-item:hover {

    border-color:
        rgba(79,214,255,.38);

    background:
        linear-gradient(
            145deg,
            rgba(30, 52, 86, .82),
            rgba(15, 31, 55, .72)
        );

    box-shadow:
        0 16px 38px rgba(0,0,0,.24),
        0 0 22px rgba(79,214,255,.08);
}


/* icone */

html[data-theme="aurora"] .dashboard-alert-icon,
html[data-theme="aurora"] .dashboard-stat-icon,
html[data-theme="aurora"] .dashboard-doc-icon {

    background:
        linear-gradient(
            145deg,
            rgba(79,214,255,.15),
            rgba(124,92,255,.12)
        );

    border:
        1px solid rgba(79,214,255,.18);

    color: #79e2ff;

    box-shadow:
        inset 0 0 16px rgba(79,214,255,.05);
}


/* bottoni */

html[data-theme="aurora"] .btn {
    border:
        1px solid rgba(79,214,255,.20);

    background:
        linear-gradient(
            135deg,
            #2596d8,
            #367fe7
        );

    color: #ffffff;

    box-shadow:
        0 6px 18px rgba(37,150,216,.18);

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        filter .15s ease;
}

html[data-theme="aurora"] .btn:hover {
    transform: translateY(-1px);

    box-shadow:
        0 10px 24px rgba(37,150,216,.28);

    filter: brightness(1.06);
}


html[data-theme="aurora"] .btn.secondary {
    background:
        rgba(35, 55, 86, .58);

    border-color:
        rgba(128,175,230,.16);

    color: #dfeeff;

    box-shadow: none;
}

html[data-theme="aurora"] .btn.secondary:hover {
    background:
        rgba(44, 70, 108, .75);

    border-color:
        rgba(79,214,255,.30);
}


html[data-theme="aurora"] .btn.danger {
    background:
        linear-gradient(
            135deg,
            rgba(255,111,145,.22),
            rgba(210,65,100,.20)
        );

    border-color:
        rgba(255,111,145,.40);

    color: #ff9bb2;
}


/* inputs */

html[data-theme="aurora"] input,
html[data-theme="aurora"] select,
html[data-theme="aurora"] textarea {

    background:
        rgba(8,18,33,.68);

    border:
        1px solid rgba(128,175,230,.18);

    color: var(--text);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025);
}

html[data-theme="aurora"] input:focus,
html[data-theme="aurora"] select:focus,
html[data-theme="aurora"] textarea:focus {

    border-color:
        rgba(79,214,255,.55);

    outline: none;

    box-shadow:
        0 0 0 3px rgba(79,214,255,.08);
}


/* tabelle */

html[data-theme="aurora"] table th {
    color: #b6c9df;
}

html[data-theme="aurora"] table tr {
    border-color:
        rgba(130,170,220,.10);
}

html[data-theme="aurora"] table tr:hover td {
    background:
        rgba(79,214,255,.025);
}


/* headings */

html[data-theme="aurora"] h1,
html[data-theme="aurora"] h2,
html[data-theme="aurora"] h3 {

    text-shadow:
        0 0 18px rgba(79,214,255,.045);
}


/* notification badge */

html[data-theme="aurora"] .notification-badge {
    box-shadow:
        0 0 14px rgba(255,99,118,.32);
}


/* focus */

html[data-theme="aurora"] .dochub-focus-target {
    outline-color: #4fd6ff;

    box-shadow:
        0 0 28px rgba(79,214,255,.18);
}


/* scrollbar */

html[data-theme="aurora"] {
    scrollbar-color:
        rgba(79,214,255,.28)
        rgba(8,18,33,.25);
}


/* mobile header */

html[data-theme="aurora"] .mobile-header {
    background:
        rgba(7,16,28,.78);

    border-bottom:
        1px solid rgba(79,214,255,.12);

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


/* hamburger */

html[data-theme="aurora"] .hamburger {
    background:
        rgba(20,38,64,.65);

    border-color:
        rgba(79,214,255,.18);
}


/* special glow alerts */

html[data-theme="aurora"]
.dashboard-alert-bad {
    box-shadow:
        0 12px 28px rgba(255,99,118,.06),
        inset 0 1px 0 rgba(255,255,255,.02);
}

html[data-theme="aurora"]
.dashboard-alert-today {
    box-shadow:
        0 12px 28px rgba(242,187,75,.05),
        inset 0 1px 0 rgba(255,255,255,.02);
}


/* card title accents */

html[data-theme="aurora"]
.dashboard-section-head h3 {

    background:
        linear-gradient(
            90deg,
            #eaf6ff,
            #a9ddff
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}



/* =========================================================
   DATABIT DocHub - Condivisioni
   ========================================================= */

.share-options {
    display:flex;
    gap:24px;
    flex-wrap:wrap;
}

.share-check {
    display:flex;
    align-items:center;
    gap:9px;
    cursor:pointer;
}

.share-check input {
    width:auto;
}

.share-selection-grid {
    display:grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));
    gap:12px;
}

.share-selector-card {
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--panel2);
    padding:15px;
}

.share-selector-card h4 {
    margin-top:0;
}

.share-selector-card .share-check {
    margin:8px 0;
}

.share-admin-list {
    display:grid;
    gap:9px;
}

.share-admin-item {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;

    padding:13px;

    border:1px solid var(--line);
    border-radius:13px;

    background:var(--panel2);
}

.share-detail-grid {
    display:grid;
    grid-template-columns:
        minmax(300px,.8fr)
        minmax(0,1.2fr);
    gap:14px;
}

.share-qr-panel {
    text-align:center;
}

.share-qr-wrap {
    width:min(100%,360px);
    margin:0 auto 15px;

    background:#fff;

    padding:18px;

    border-radius:20px;
}

.share-qr-wrap img {
    display:block;
    width:100%;
    height:auto;
}

.share-url-box {
    overflow-wrap:anywhere;

    padding:11px;

    background:var(--panel2);

    border:1px solid var(--line);
    border-radius:10px;

    font-family:monospace;
    font-size:12px;

    text-align:left;
}


/* PUBBLICO */

.public-share-body {
    min-height:100vh;

    margin:0;

    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(53,183,255,.15),
            transparent 32%
        ),
        var(--bg);

    color:var(--text);
}

.public-share-login {
    min-height:100vh;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    padding:22px;
}

.public-share-brand {
    margin-bottom:22px;

    font-size:24px;
    font-weight:850;
    letter-spacing:-.8px;
}

.public-share-brand span {
    color:var(--accent);
}

.public-share-login-card {
    width:min(100%,420px);

    padding:28px;

    background:var(--panel);

    border:1px solid var(--line);
    border-radius:22px;

    box-shadow:
        0 24px 70px rgba(0,0,0,.22);

    text-align:center;
}

.public-share-lock {
    display:flex;
    align-items:center;
    justify-content:center;

    width:58px;
    height:58px;

    margin:0 auto 15px;

    border-radius:18px;

    background:var(--panel2);

    font-size:28px;
}

.public-share-login-card h1 {
    margin:0 0 8px;
    font-size:24px;
}

.public-share-login-card label {
    display:block;
    text-align:left;
}

.public-share-login-card input {
    text-align:center;
    font-size:24px;
    letter-spacing:8px;
}

.public-share-login-button {
    width:100%;
}

.public-share-powered {
    margin-top:18px;

    color:var(--muted);

    font-size:12px;
}


.public-share-page {
    width:min(1180px,calc(100% - 32px));

    margin:0 auto;

    padding:28px 0 48px;
}

.public-share-header {
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:15px;

    margin-bottom:20px;
}

.public-share-header h1 {
    margin:3px 0 0;
}

.public-share-header
.public-share-brand {
    margin:0;
    font-size:15px;
}

.public-share-section {
    margin-bottom:14px;

    padding:18px;

    background:var(--panel);

    border:1px solid var(--line);
    border-radius:18px;
}

.public-share-section h2 {
    margin-top:0;
}

.public-info-grid {
    display:grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));
    gap:10px;
}

.public-info-grid > div {
    padding:12px;

    background:var(--panel2);

    border-radius:12px;
}

.public-info-grid span,
.public-entity-card span {
    display:block;

    color:var(--muted);
    font-size:11px;
}

.public-info-grid strong,
.public-entity-card strong {
    display:block;
    margin-top:3px;
}

.public-entity-grid {
    display:grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));
    gap:10px;
}

.public-entity-card {
    padding:14px;

    background:var(--panel2);

    border:1px solid var(--line);
    border-radius:13px;
}

.public-entity-card h3 {
    margin:0 0 12px;
}

.public-entity-card p {
    margin:8px 0;
}

.public-document-list {
    display:grid;
    gap:7px;
}

.public-document-row {
    padding:12px;

    background:var(--panel2);

    border:1px solid var(--line);
    border-radius:12px;
}

.public-share-footer {
    padding:15px;

    text-align:center;

    color:var(--muted);

    font-size:12px;
}


@media(max-width:800px) {

    .share-selection-grid,
    .share-detail-grid,
    .public-info-grid,
    .public-entity-grid {
        grid-template-columns:1fr;
    }

    .share-admin-item {
        align-items:flex-start;
        flex-direction:column;
    }

}


@media(max-width:600px) {

    .public-share-page {
        width:min(
            100% - 18px,
            1180px
        );

        padding-top:15px;
    }

    .public-share-section {
        padding:13px;
        border-radius:15px;
    }

    .public-share-header h1 {
        font-size:22px;
    }

}


/* =========================================================
   DATABIT DocHub
   Public Share - Premium UI V2
   ========================================================= */

.share-public-body {
    min-height: 100vh;
    margin: 0;

    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(53,183,255,.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 95% 20%,
            rgba(124,92,255,.08),
            transparent 28%
        ),
        #0a101d;

    color: #eef4fc;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


.share-public-shell {
    width: min(1440px, calc(100% - 40px));
    margin: 0 auto;
}


/* =========================================================
   HERO
   ========================================================= */

.share-public-hero {
    padding: 24px 0 30px;
}


.share-public-hero-brand {
    display: flex;
    align-items: center;
    gap: 11px;

    margin-bottom: 30px;
}


.share-public-logo {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border-radius: 11px;

    background:
        linear-gradient(
            145deg,
            #36b9ff,
            #397bea
        );

    color: #fff;

    font-size: 20px;
    font-weight: 900;

    box-shadow:
        0 8px 25px
        rgba(53,183,255,.20);
}


.share-public-brand-name {
    color: #eaf4ff;
    font-weight: 850;
    letter-spacing: -.35px;
}


.share-public-brand-name span {
    color: #55c9ff;
}


.share-public-brand-subtitle {
    margin-top: 1px;

    color: #7186a3;

    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .9px;
}


.share-public-hero-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    gap: 30px;

    padding: 26px 29px;

    border:
        1px solid rgba(111,151,205,.14);

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            rgba(20,35,59,.92),
            rgba(11,23,41,.86)
        );

    box-shadow:
        0 25px 70px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.025);
}


.share-public-eyebrow {
    margin-bottom: 7px;

    color: #55c9ff;

    font-size: 10px;
    font-weight: 750;

    text-transform: uppercase;
    letter-spacing: 1.3px;
}


.share-public-hero-content h1 {
    margin: 0;

    color: #f5f9ff;

    font-size:
        clamp(28px, 4vw, 45px);

    line-height: 1.07;

    letter-spacing: -1.4px;
}


.share-public-hero-content p {
    max-width: 650px;

    margin:
        11px 0 0;

    color: #92a6c1;

    line-height: 1.6;
}


.share-public-hero-actions {
    display: flex;
    align-items: center;
    gap: 9px;

    flex-shrink: 0;
}


.share-public-secure-badge {
    display: flex;
    align-items: center;
    gap: 7px;

    padding:
        9px 12px;

    border:
        1px solid rgba(75,230,160,.18);

    border-radius: 999px;

    background:
        rgba(75,230,160,.055);

    color: #8eeab9;

    font-size: 11px;
    font-weight: 700;
}


.share-public-secure-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #4be6a0;

    box-shadow:
        0 0 10px
        rgba(75,230,160,.65);
}


.share-public-exit {
    display: inline-flex;
    align-items: center;

    padding:
        9px 14px;

    border:
        1px solid rgba(255,255,255,.09);

    border-radius: 999px;

    background:
        rgba(255,255,255,.035);

    color: #bbc9db;

    text-decoration: none;

    font-size: 11px;
    font-weight: 700;
}


.share-public-exit:hover {
    background:
        rgba(255,255,255,.075);

    color: #fff;
}


/* =========================================================
   LAYOUT
   ========================================================= */

.share-public-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        230px;

    gap: 25px;

    align-items: start;
}


.share-public-content {
    min-width: 0;
}


.share-public-section {
    scroll-margin-top: 28px;

    margin-bottom: 20px;

    padding: 24px;

    border:
        1px solid rgba(111,151,205,.13);

    border-radius: 21px;

    background:
        linear-gradient(
            145deg,
            rgba(19,33,56,.86),
            rgba(12,24,42,.79)
        );

    box-shadow:
        0 16px 45px
        rgba(0,0,0,.13),
        inset 0 1px 0
        rgba(255,255,255,.025);
}


.share-public-section-heading {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 18px;
}


.share-public-section-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    border-radius: 11px;

    background:
        linear-gradient(
            145deg,
            rgba(53,183,255,.14),
            rgba(89,107,255,.12)
        );

    border:
        1px solid rgba(84,193,255,.15);

    color: #63d0ff;

    font-weight: 850;
}


.share-public-section-kicker {
    margin-bottom: 1px;

    color: #607893;

    font-size: 9px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 1.2px;
}


.share-public-section-heading h2 {
    margin: 0;

    color: #f2f7fd;

    font-size: 21px;

    letter-spacing: -.35px;
}


.share-section-count {
    margin-left: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 29px;
    height: 29px;

    padding: 0 8px;

    border-radius: 999px;

    background:
        rgba(53,183,255,.07);

    border:
        1px solid rgba(53,183,255,.12);

    color: #7ed7ff;

    font-size: 11px;
    font-weight: 750;
}


/* =========================================================
   AZIENDA
   ========================================================= */

.share-company-card {
    padding: 18px;

    border:
        1px solid rgba(115,153,202,.11);

    border-radius: 16px;

    background:
        rgba(6,16,30,.30);
}


.share-company-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 17px;
}


.share-company-title h3 {
    margin: 0;

    color: #f5f9ff;

    font-size: 23px;
}


.share-company-title p {
    margin: 4px 0 0;
    color: #8ca2bc;
}


.share-company-badge {
    padding: 5px 9px;

    border-radius: 999px;

    background:
        rgba(53,183,255,.07);

    color: #69ceff;

    font-size: 10px;
    font-weight: 700;
}


.share-info-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0,1fr));

    gap: 8px;
}


.share-info-item {
    min-width: 0;

    padding: 12px 13px;

    border-radius: 11px;

    background:
        rgba(255,255,255,.025);

    border:
        1px solid rgba(255,255,255,.035);
}


.share-info-item span {
    display: block;

    margin-bottom: 4px;

    color: #7187a2;

    font-size: 10px;
}


.share-info-item strong {
    display: block;

    overflow-wrap: anywhere;

    color: #e7eef8;

    font-size: 13px;
    font-weight: 650;
}


.share-info-wide {
    grid-column:
        span 2;
}


/* =========================================================
   ENTITY CARDS
   ========================================================= */

.share-entity-grid {
    display: grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap: 10px;
}


.share-entity-card {
    display: flex;
    align-items: flex-start;
    gap: 13px;

    min-width: 0;

    padding: 15px;

    border:
        1px solid rgba(117,157,210,.10);

    border-radius: 15px;

    background:
        rgba(6,16,30,.28);

    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease;
}


.share-entity-card:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(53,183,255,.22);

    background:
        rgba(17,34,58,.52);
}


.share-entity-avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            rgba(53,183,255,.16),
            rgba(99,91,255,.13)
        );

    border:
        1px solid rgba(82,192,255,.13);

    color: #75d8ff;

    font-size: 13px;
    font-weight: 850;
}


.share-entity-card-content {
    min-width: 0;
    flex: 1;
}


.share-entity-type {
    margin-bottom: 2px;

    color: #647b97;

    font-size: 9px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .85px;
}


.share-entity-card h3 {
    margin: 0 0 11px;

    color: #f2f6fc;

    font-size: 16px;
}


.share-entity-details {
    display: grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap: 7px;
}


.share-entity-details > div {
    min-width: 0;

    padding: 8px;

    border-radius: 9px;

    background:
        rgba(255,255,255,.022);
}


.share-entity-details span {
    display: block;

    color: #6e849e;

    font-size: 9px;
}


.share-entity-details strong {
    display: block;

    margin-top: 2px;

    overflow-wrap: anywhere;

    color: #dce7f4;

    font-size: 11px;
    font-weight: 650;
}


.share-value-status {
    color: #65dda3 !important;
}


/* =========================================================
   DOCUMENTI
   ========================================================= */

.share-document-grid {
    display: grid;
    gap: 8px;
}


.share-document-card {
    display: grid;

    grid-template-columns:
        42px
        minmax(0,1fr)
        auto;

    gap: 12px;

    align-items: center;

    padding: 12px 13px;

    border:
        1px solid rgba(118,157,208,.09);

    border-radius: 13px;

    background:
        rgba(6,16,30,.27);
}


.share-document-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    border-radius: 10px;

    background:
        rgba(255,99,118,.075);

    border:
        1px solid rgba(255,99,118,.11);

    color: #ff8798;

    font-size: 9px;
    font-weight: 850;
}


.share-document-content {
    min-width: 0;
}


.share-document-category {
    color: #6f86a1;

    font-size: 9px;

    text-transform: uppercase;
    letter-spacing: .75px;
}


.share-document-content h3 {
    margin: 2px 0 5px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: #edf4fc;

    font-size: 14px;
}


.share-document-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;

    color: #738aa5;

    font-size: 10px;
}


.share-document-expiry.expired {
    color: #ff7c8e;
}


.share-document-available {
    padding: 5px 9px;

    border-radius: 999px;

    background:
        rgba(75,230,160,.055);

    border:
        1px solid rgba(75,230,160,.12);

    color: #72dda8;

    font-size: 9px;
    font-weight: 750;
}


/* =========================================================
   RIGHT NAVIGATION
   ========================================================= */

.share-public-nav {
    position: sticky;
    top: 24px;
}


.share-public-nav-card {
    padding: 13px;

    border:
        1px solid rgba(112,153,207,.13);

    border-radius: 18px;

    background:
        rgba(13,26,46,.80);

    box-shadow:
        0 18px 45px
        rgba(0,0,0,.16);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);
}


.share-public-nav-title {
    padding:
        4px 7px 10px;

    color: #7087a2;

    font-size: 9px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 1.1px;
}


.share-public-nav nav {
    display: grid;
    gap: 3px;
}


.share-public-nav nav a {
    display: grid;

    grid-template-columns:
        25px
        minmax(0,1fr)
        auto;

    align-items: center;

    gap: 7px;

    padding:
        8px;

    border:
        1px solid transparent;

    border-radius: 10px;

    color: #93a8c1;

    text-decoration: none;

    font-size: 11px;
    font-weight: 650;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease;
}


.share-public-nav nav a > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 25px;
    height: 25px;

    border-radius: 7px;

    background:
        rgba(255,255,255,.025);

    color: #7993af;

    font-size: 9px;
    font-weight: 850;
}


.share-public-nav nav a em {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 19px;
    height: 19px;

    padding: 0 5px;

    border-radius: 999px;

    background:
        rgba(255,255,255,.03);

    color: #697e98;

    font-size: 8px;
    font-style: normal;
}


.share-public-nav nav a:hover,
.share-public-nav nav a.active {
    background:
        linear-gradient(
            90deg,
            rgba(53,183,255,.10),
            rgba(76,110,255,.055)
        );

    border-color:
        rgba(53,183,255,.13);

    color: #ddecfa;
}


.share-public-nav nav a.active > span {
    background:
        rgba(53,183,255,.13);

    color: #6fd5ff;
}


.share-public-nav-security {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-top: 11px;

    padding: 10px 8px 3px;

    border-top:
        1px solid rgba(255,255,255,.045);
}


.share-public-nav-lock {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 25px;
    height: 25px;

    border-radius: 50%;

    background:
        rgba(75,230,160,.07);

    color: #68dda4;

    font-size: 10px;
}


.share-public-nav-security strong,
.share-public-nav-security span {
    display: block;
}


.share-public-nav-security strong {
    color: #aebed0;
    font-size: 9px;
}


.share-public-nav-security span {
    margin-top: 1px;
    color: #657a94;
    font-size: 8px;
}


/* =========================================================
   FOOTER
   ========================================================= */

.share-public-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 16px 4px 32px;

    color: #536981;

    font-size: 10px;
}


.share-public-footer-logo {
    color: #7188a4;

    font-weight: 800;
}


.share-public-footer-logo span {
    color: #4aaedc;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .share-public-layout {
        grid-template-columns:
            minmax(0,1fr)
            195px;

        gap: 14px;
    }

    .share-info-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .share-public-shell {
        width:
            min(100% - 18px, 1440px);
    }


    .share-public-hero {
        padding:
            14px 0 10px;
    }


    .share-public-hero-brand {
        margin-bottom: 12px;
    }


    .share-public-hero-content {
        align-items: flex-start;
        flex-direction: column;

        gap: 16px;

        padding: 18px;

        border-radius: 18px;
    }


    .share-public-hero-actions {
        width: 100%;

        justify-content:
            space-between;
    }


    .share-public-layout {
        display: flex;
        flex-direction: column;
    }


    /*
     * Il menu diventa una barra
     * orizzontale sticky.
     */

    .share-public-nav {
        position: sticky;
        top: 0;

        z-index: 20;

        width: 100%;

        order: -1;

        padding:
            7px 0;
    }


    .share-public-nav-card {
        padding: 5px;

        overflow-x: auto;

        border-radius: 12px;

        background:
            rgba(9,19,34,.93);
    }


    .share-public-nav-title,
    .share-public-nav-security {
        display: none;
    }


    .share-public-nav nav {
        display: flex;

        min-width:
            max-content;

        gap: 3px;
    }


    .share-public-nav nav a {
        display: flex;

        grid-template-columns: none;

        padding:
            6px 8px;

        white-space: nowrap;

        font-size: 10px;
    }


    .share-public-nav nav a > span {
        width: 22px;
        height: 22px;

        flex: 0 0 22px;
    }


    .share-public-section {
        scroll-margin-top: 70px;

        margin-bottom: 10px;

        padding: 14px;

        border-radius: 16px;
    }


    .share-info-grid,
    .share-entity-grid {
        grid-template-columns: 1fr;
    }


    .share-info-wide {
        grid-column: auto;
    }


    .share-company-card {
        padding: 13px;
    }


    .share-company-title h3 {
        font-size: 19px;
    }


    .share-entity-details {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }


    .share-document-card {
        grid-template-columns:
            38px minmax(0,1fr);
    }


    .share-document-actions {
        grid-column:
            1 / -1;

        padding-left: 50px;
    }


    .share-public-footer {
        align-items: flex-start;
        flex-direction: column;

        gap: 4px;
    }

}


@media (max-width: 420px) {

    .share-entity-details {
        grid-template-columns: 1fr;
    }


    .share-public-secure-badge {
        font-size: 9px;
    }

}



/* =========================================================
   Condivisioni - campi con slider
   ========================================================= */

.share-field-list {
    display: grid;
    gap: 6px;
}


.share-field-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    min-height: 42px;

    padding: 8px 10px;

    border-radius: 10px;

    background:
        rgba(255,255,255,.018);

    border:
        1px solid rgba(255,255,255,.025);
}


.share-field-switch-row > span {
    min-width: 0;

    color: var(--text);

    font-size: 13px;
}


.share-field-switch-row:hover {
    background:
        rgba(53,183,255,.035);

    border-color:
        rgba(53,183,255,.08);
}


/* slider */

.switch {
    position: relative;

    display: inline-flex;

    width: 42px;
    height: 23px;

    flex: 0 0 42px;

    cursor: pointer;
}


.switch input {
    position: absolute;

    opacity: 0;

    width: 0;
    height: 0;
}


.switch-slider {
    position: absolute;

    inset: 0;

    border-radius: 999px;

    background:
        rgba(110,130,155,.28);

    border:
        1px solid rgba(145,165,190,.20);

    transition:
        .18s ease;
}


.switch-slider::before {
    content: "";

    position: absolute;

    width: 17px;
    height: 17px;

    left: 2px;
    top: 2px;

    border-radius: 50%;

    background: #c8d1dc;

    box-shadow:
        0 2px 7px rgba(0,0,0,.25);

    transition:
        .18s ease;
}


.switch input:checked + .switch-slider {
    background:
        linear-gradient(
            135deg,
            #169ee7,
            #387df0
        );

    border-color:
        rgba(75,190,255,.45);

    box-shadow:
        0 0 12px
        rgba(53,183,255,.16);
}


.switch input:checked + .switch-slider::before {
    transform:
        translateX(19px);

    background: #ffffff;
}


/* righe permessi */

.switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    min-height: 42px;

    padding: 8px 10px;

    border-radius: 10px;

    background:
        rgba(255,255,255,.018);
}


.share-permissions {
    display: grid;
    gap: 6px;
}


@media(max-width:700px) {

    .share-field-switch-row,
    .switch-row {
        min-height: 46px;
    }

}


/* =========================================================
   PUBLIC SHARE - documenti raggruppati per proprietario
   ========================================================= */

.share-owner-list {
    display: grid;
    gap: 9px;
}


.share-owner-card {
    overflow: hidden;

    border:
        1px solid rgba(111,151,205,.11);

    border-radius: 15px;

    background:
        rgba(6,16,30,.28);
}


.share-owner-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    min-height: 66px;

    padding: 13px 16px;

    cursor: pointer;

    list-style: none;

    transition:
        background .15s ease,
        border-color .15s ease;
}


.share-owner-summary::-webkit-details-marker {
    display: none;
}


.share-owner-summary:hover {
    background:
        rgba(53,183,255,.035);
}


.share-owner-person {
    display: flex;
    align-items: center;
    gap: 11px;
}


.share-owner-type {
    margin-bottom: 2px;

    color: #6380a2;

    font-size: 9px;
    font-weight: 750;

    letter-spacing: .9px;
    text-transform: uppercase;
}


.share-owner-summary strong {
    color: #f1f6fc;

    font-size: 15px;
    font-weight: 750;
}


.share-owner-summary-right {
    display: flex;
    align-items: center;

    gap: 10px;
}


.share-owner-doc-count {
    padding: 5px 8px;

    border-radius: 999px;

    background:
        rgba(53,183,255,.055);

    border:
        1px solid rgba(53,183,255,.10);

    color: #72cfff;

    font-size: 9px;
    font-weight: 700;
}


.share-owner-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 26px;
    height: 26px;

    border-radius: 8px;

    background:
        rgba(255,255,255,.025);

    color: #7690ad;

    transition:
        transform .18s ease;
}


.share-owner-card[open]
.share-owner-arrow {
    transform:
        rotate(180deg);
}


.share-owner-body {
    padding:
        3px 16px 16px;

    border-top:
        1px solid rgba(255,255,255,.035);
}


.share-owner-body
.share-info-grid {
    margin-top: 13px;
}


.share-owner-documents {
    margin-top: 14px;

    padding-top: 13px;

    border-top:
        1px solid rgba(255,255,255,.045);
}


.share-owner-doc-title {
    margin-bottom: 8px;

    color: #8da5bf;

    font-size: 10px;
    font-weight: 750;

    text-transform: uppercase;
    letter-spacing: .85px;
}


.share-owner-document {
    display: grid;

    grid-template-columns:
        40px minmax(0,1fr) auto;

    align-items: center;

    gap: 11px;

    padding: 10px 11px;

    margin-top: 6px;

    border:
        1px solid rgba(115,153,202,.08);

    border-radius: 11px;

    background:
        rgba(255,255,255,.018);
}


.share-owner-document
.share-document-content strong {
    display: block;

    margin-top: 2px;

    color: #e9f1fa;

    font-size: 13px;
}


.share-owner-document
.share-document-meta {
    margin-top: 4px;
}


.share-owner-document
.expired {
    color: #ff7488;
}


.share-owner-no-docs {
    margin-top: 13px;

    padding: 10px;

    border-radius: 10px;

    background:
        rgba(255,255,255,.015);

    color: #607791;

    font-size: 11px;
}


@media(max-width:600px) {

    .share-owner-summary {
        min-height: 62px;

        padding: 11px;
    }


    .share-owner-summary-right {
        gap: 6px;
    }


    .share-owner-doc-count {
        font-size: 8px;
    }


    .share-owner-body {
        padding:
            2px 11px 11px;
    }


    .share-owner-document {
        grid-template-columns:
            36px minmax(0,1fr);

        padding: 9px;
    }

}



/* =========================================================
   Public Share - Download documenti
   ========================================================= */

.share-owner-document {
    grid-template-columns:
        40px
        minmax(0,1fr)
        auto;
}


.share-owner-document-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    padding-left: 10px;
}


.share-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 32px;

    padding:
        7px 12px;

    border:
        1px solid rgba(53,183,255,.18);

    border-radius: 9px;

    background:
        rgba(53,183,255,.07);

    color: #75d5ff;

    text-decoration: none;

    font-size: 10px;
    font-weight: 750;

    transition:
        background .15s ease,
        border-color .15s ease,
        transform .15s ease;
}


.share-download-btn:hover {
    transform:
        translateY(-1px);

    background:
        rgba(53,183,255,.13);

    border-color:
        rgba(53,183,255,.32);

    color: #a6e5ff;
}


@media(max-width:600px) {

    .share-owner-document {
        grid-template-columns:
            36px minmax(0,1fr);
    }


    .share-owner-document-actions {
        grid-column:
            1 / -1;

        padding:
            3px 0 0 47px;

        justify-content:
            flex-start;
    }

}

.share-permission-summary {
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    align-items:center;
    font-size:12px;
}

.share-permission-summary span {
    color:var(--muted);
}

.share-permission-summary strong {
    color:var(--text);
}



/* =========================================================
   Share - campi personalizzati
   ========================================================= */

.share-custom-fields-heading {
    margin:
        14px 0 6px;

    padding-top:
        10px;

    border-top:
        1px solid var(--line);

    color:
        var(--muted);

    font-size:
        11px;

    font-weight:
        750;

    text-transform:
        uppercase;

    letter-spacing:
        .7px;
}


.share-field-switch-row small {
    display:
        block;

    margin-top:
        2px;

    color:
        var(--muted);

    font-size:
        9px;
}


.share-custom-values {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap:
        8px;

    margin-top:
        13px;
}


.share-custom-values
.share-info-item small {
    display:
        block;

    margin-top:
        4px;

    color:
        #607791;

    font-size:
        8px;

    text-transform:
        uppercase;

    letter-spacing:
        .5px;
}


@media(max-width:900px) {

    .share-custom-values {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

}


@media(max-width:600px) {

    .share-custom-values {
        grid-template-columns:
            1fr;
    }

}


/* =========================================================
   Public Share - Azioni documenti
   ========================================================= */

.share-owner-document-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 6px;

    padding-left: 10px;
}


.share-document-view-btn,
.share-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 32px;

    padding: 7px 12px;

    border-radius: 9px;

    text-decoration: none;

    font-size: 10px;
    font-weight: 750;

    transition:
        background .15s ease,
        border-color .15s ease,
        transform .15s ease;
}


/* Visualizza */

.share-document-view-btn {
    border:
        1px solid rgba(135,159,190,.15);

    background:
        rgba(255,255,255,.035);

    color: #c4d3e5;
}


.share-document-view-btn:hover {
    transform:
        translateY(-1px);

    border-color:
        rgba(80,195,255,.25);

    background:
        rgba(80,195,255,.065);

    color: #eaf7ff;
}


/* Scarica */

.share-download-btn {
    border:
        1px solid rgba(53,183,255,.18);

    background:
        rgba(53,183,255,.07);

    color: #75d5ff;
}


.share-download-btn:hover {
    transform:
        translateY(-1px);

    background:
        rgba(53,183,255,.13);

    border-color:
        rgba(53,183,255,.32);

    color: #a6e5ff;
}


@media(max-width:600px) {

    .share-owner-document-actions {
        grid-column:
            1 / -1;

        padding:
            5px 0 0 47px;

        justify-content:
            flex-start;

        flex-wrap:
            wrap;
    }

}


/* =========================================================
   Condivisioni - gruppi compressi
   ========================================================= */

.share-config-group {
    margin-top: 10px;

    border: 1px solid var(--line);
    border-radius: 14px;

    background: rgba(255,255,255,.015);

    overflow: hidden;
}


.share-config-group-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    padding: 14px 16px;

    cursor: pointer;

    list-style: none;
}


.share-config-group-summary::-webkit-details-marker {
    display: none;
}


.share-config-group-summary > div {
    min-width: 0;
}


.share-config-group-summary strong {
    display: block;

    font-size: 15px;
}


.share-config-group-summary span {
    display: block;

    margin-top: 2px;

    color: var(--muted);

    font-size: 11px;
}


.share-config-group-arrow {
    display: flex !important;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    flex: 0 0 28px;

    margin: 0 !important;

    border-radius: 8px;

    background: var(--panel2);

    color: var(--muted) !important;

    transition: transform .18s ease;
}


.share-config-group[open]
.share-config-group-arrow {
    transform: rotate(180deg);
}


.share-config-group-body {
    padding: 4px 14px 14px;

    border-top: 1px solid var(--line);
}


.share-config-group:hover
.share-config-group-summary {
    background: rgba(53,183,255,.025);
}



/* =========================================================
   DATABIT DocHub - LIGHT THEME PREMIUM V1
   ========================================================= */

html[data-theme="light"] {
    --bg: #f3f6fa;
    --panel: #ffffff;
    --panel2: #eef3f9;

    --text: #182235;
    --muted: #708097;

    --accent: #3378c8;

    --ok: #25865d;
    --warn: #b97913;
    --bad: #d94d5c;

    --line: #dce4ee;
}


/* ---------------------------------------------------------
   Sfondo generale
   --------------------------------------------------------- */

html[data-theme="light"] body {
    background:
        linear-gradient(
            180deg,
            #f5f8fc 0%,
            #f2f5f9 100%
        );

    color: var(--text);
}


/* ---------------------------------------------------------
   Sidebar
   --------------------------------------------------------- */

html[data-theme="light"] .sidebar {
    background:
        linear-gradient(
            180deg,
            #edf3fa 0%,
            #e8eef6 100%
        );

    border-right: 1px solid #d3dde9;

    box-shadow:
        4px 0 18px rgba(31, 50, 78, .035);
}


html[data-theme="light"] .brand {
    color: #182235;
}


html[data-theme="light"] .brand span {
    color: var(--accent);
}


html[data-theme="light"] .nav a {
    color: #6b7b91;

    transition:
        background .16s ease,
        color .16s ease,
        transform .16s ease;
}


html[data-theme="light"] .nav a:hover {
    color: #215d9f;

    background:
        rgba(51, 120, 200, .095);

    transform: translateX(2px);
}


/* ---------------------------------------------------------
   Titoli
   --------------------------------------------------------- */

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3 {
    color: #172236;
}


html[data-theme="light"] .muted {
    color: #74839a;
}


/* ---------------------------------------------------------
   Panel e card
   --------------------------------------------------------- */

html[data-theme="light"] .card,
html[data-theme="light"] .panel {
    background:
        rgba(255,255,255,.94);

    border:
        1px solid #dce4ee;

    box-shadow:
        0 5px 18px rgba(36, 54, 78, .045);

    backdrop-filter:
        blur(8px);
}


html[data-theme="light"] .panel {
    border-radius: 17px;
}


html[data-theme="light"] .card {
    border-radius: 16px;
}


/* ---------------------------------------------------------
   Dashboard statistiche
   --------------------------------------------------------- */

html[data-theme="light"] .dashboard-stat {
    background:
        rgba(255,255,255,.82);

    border-color:
        #dbe4ef;

    box-shadow:
        0 4px 13px rgba(31, 50, 78, .035);

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease;
}


html[data-theme="light"] .dashboard-stat:hover {
    transform:
        translateY(-2px);

    border-color:
        #c8d7e8;

    box-shadow:
        0 8px 22px rgba(31, 50, 78, .075);
}


html[data-theme="light"] .dashboard-stat-icon {
    background:
        #eaf2fb;

    color:
        #3378c8;
}


/* ---------------------------------------------------------
   Scadenze
   --------------------------------------------------------- */

html[data-theme="light"] .deadline-card {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfcfe 100%
        );

    border-color:
        #e2e8f0;

    box-shadow:
        0 3px 10px rgba(31, 50, 78, .025);

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}


html[data-theme="light"] .deadline-card:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 7px 18px rgba(31, 50, 78, .055);
}


html[data-theme="light"] .deadline-meta {
    color:
        #3479c5;
}


/* ---------------------------------------------------------
   Tabelle
   --------------------------------------------------------- */

html[data-theme="light"] table {
    color:
        #253248;
}


html[data-theme="light"] th {
    color:
        #728198;

    background:
        rgba(237, 242, 248, .65);
}


html[data-theme="light"] th,
html[data-theme="light"] td {
    border-color:
        #e3e9f1;
}


html[data-theme="light"] tbody tr:hover {
    background:
        rgba(51, 120, 200, .035);
}


/* ---------------------------------------------------------
   Input
   --------------------------------------------------------- */

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
    background:
        #ffffff;

    color:
        #1e2a3c;

    border:
        1px solid #ccd7e4;

    box-shadow:
        inset 0 1px 2px rgba(30, 45, 65, .025);

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}


html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus {
    outline:
        none;

    border-color:
        #6b9bd1;

    box-shadow:
        0 0 0 3px rgba(51, 120, 200, .11);
}


html[data-theme="light"] label {
    color:
        #66778e;
}


/* ---------------------------------------------------------
   Pulsanti
   --------------------------------------------------------- */

html[data-theme="light"] .btn {
    background:
        #397dc8;

    color:
        #ffffff;

    box-shadow:
        0 3px 8px rgba(51, 120, 200, .16);

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        background .15s ease;
}


html[data-theme="light"] .btn:hover {
    background:
        #2f6fb5;

    transform:
        translateY(-1px);

    box-shadow:
        0 5px 12px rgba(51, 120, 200, .22);
}


html[data-theme="light"] .btn.secondary {
    background:
        #edf2f8;

    color:
        #25364c;

    border:
        1px solid #dce5ef;

    box-shadow:
        none;
}


html[data-theme="light"] .btn.secondary:hover {
    background:
        #e4ebf4;

    border-color:
        #cdd9e6;
}


/* ---------------------------------------------------------
   Tag / badge
   --------------------------------------------------------- */

html[data-theme="light"] .tag {
    background:
        #edf3f9;

    color:
        #607088;

    border:
        1px solid #e0e7f0;
}


/* ---------------------------------------------------------
   Impostazioni
   --------------------------------------------------------- */

html[data-theme="light"] .settings-tabs {
    border-color:
        #dce4ed;
}


html[data-theme="light"] .settings-tab {
    background:
        #ffffff;

    color:
        #5d6d84;

    border-color:
        #dce4ed;
}


html[data-theme="light"] .settings-tab:hover {
    background:
        #eef4fa;

    color:
        #2869ae;
}


html[data-theme="light"] .settings-tab.active {
    background:
        #397dc8;

    color:
        #ffffff;

    border-color:
        #397dc8;
}


/* ---------------------------------------------------------
   Login
   --------------------------------------------------------- */

html[data-theme="light"] .login-card {
    background:
        #ffffff;

    border-color:
        #dce4ee;

    box-shadow:
        0 18px 45px rgba(37, 56, 82, .10);
}


/* ---------------------------------------------------------
   Attivita recente
   --------------------------------------------------------- */

html[data-theme="light"] .activity-card {
    background:
        #fbfcfe;

    border-color:
        #e1e7ef;
}


html[data-theme="light"] .dashboard-activity-icon {
    background:
        #edf3fa;

    border:
        1px solid #e0e8f1;
}


/* ---------------------------------------------------------
   Hamburger mobile
   --------------------------------------------------------- */

html[data-theme="light"] .hamburger {
    background:
        #ffffff;

    border-color:
        #d6e0eb;
}


html[data-theme="light"] .hamburger span {
    background:
        #26364c;
}



/* =========================================================
   LIGHT THEME - REFINEMENT V2
   ========================================================= */

html[data-theme="light"] .sidebar {
    background:
        linear-gradient(
            180deg,
            #eaf1f8 0%,
            #e5edf6 100%
        );

    border-right-color:
        #ccd8e6;
}


html[data-theme="light"] .dashboard-document-item,
html[data-theme="light"] .deadline-card {
    transition:
        transform .14s ease,
        box-shadow .14s ease,
        border-color .14s ease,
        background .14s ease;
}


html[data-theme="light"] .dashboard-document-item:hover,
html[data-theme="light"] .deadline-card:hover {
    background:
        #ffffff;

    border-color:
        #ccd9e7;

    box-shadow:
        0 6px 16px rgba(31, 50, 78, .06);

    transform:
        translateY(-1px);
}


html[data-theme="light"] .btn.secondary {
    padding:
        8px 11px;

    border-radius:
        9px;

    background:
        #edf2f7;

    color:
        #33445b;
}


html[data-theme="light"] .btn.secondary:hover {
    background:
        #e4ebf3;

    color:
        #1f5f9f;
}


html[data-theme="light"] .top-user {
    color:
        #5f7087;
}


html[data-theme="light"] .dashboard-section-head {
    border-bottom-color:
        #edf1f5;
}



/* =========================================================
   DATABIT DocHub - CANTIERI CARDS V1
   ========================================================= */

.sites-toolbar {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 20px;
}

.sites-summary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.sites-summary-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;
    background: var(--panel2);

    font-size: 21px;
}

.sites-summary strong {
    display: block;
    font-size: 23px;
    line-height: 1;
}

.sites-summary span {
    color: var(--muted);
    font-size: 13px;
}

.sites-create-box {
    margin-bottom: 8px;
}

.sites-create-actions {
    margin-top: 18px;
}


.sites-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(300px, 1fr));

    gap: 16px;
}


.site-card {
    display: flex;
    flex-direction: column;

    min-width: 0;

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

    border-radius:
        16px;

    background:
        var(--panel);

    overflow:
        hidden;

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease;
}


.site-card:hover {
    transform:
        translateY(-2px);

    border-color:
        color-mix(
            in srgb,
            var(--accent) 38%,
            var(--line)
        );

    box-shadow:
        0 10px 24px rgba(0,0,0,.10);
}


.site-card-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    padding:
        17px 17px 12px;
}


.site-card-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius:
        12px;

    background:
        var(--panel2);

    font-size:
        20px;
}


.site-card-heading {
    min-width: 0;
    flex: 1;
}


.site-card-heading h3 {
    margin:
        1px 0 3px;

    font-size:
        16px;

    line-height:
        1.25;

    overflow-wrap:
        anywhere;
}


.site-card-code {
    color:
        var(--muted);

    font-size:
        12px;
}


.site-status {
    flex-shrink: 0;

    padding:
        5px 9px;

    border-radius:
        999px;

    font-size:
        11px;

    font-weight:
        700;
}


.site-status-active {
    background:
        rgba(66,211,146,.13);

    color:
        var(--ok);
}


.site-status-other {
    background:
        var(--panel2);

    color:
        var(--muted);
}


.site-card-body {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap:
        14px;

    padding:
        4px 17px 17px;
}


.site-info-row {
    min-width: 0;
}


.site-info-label {
    display:
        block;

    margin-bottom:
        4px;

    color:
        var(--muted);

    font-size:
        11px;

    text-transform:
        uppercase;

    letter-spacing:
        .04em;
}


.site-info-row strong {
    display:
        block;

    font-size:
        13px;

    line-height:
        1.35;

    overflow-wrap:
        anywhere;
}


.site-card-footer {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-top:
        auto;

    padding:
        12px 17px;

    border-top:
        1px solid var(--line);

    background:
        rgba(255,255,255,.015);

    color:
        var(--accent);

    font-size:
        13px;

    font-weight:
        700;
}


.site-card-arrow {
    font-size:
        22px;

    line-height:
        1;
}


.sites-empty {
    text-align:
        center;

    padding:
        40px 20px;
}


.sites-empty-icon {
    margin-bottom:
        10px;

    font-size:
        34px;
}


/* ---------------------------------------------------------
   LIGHT THEME
   --------------------------------------------------------- */

html[data-theme="light"] .site-card {
    background:
        #ffffff;

    border-color:
        #dce4ee;

    box-shadow:
        0 4px 14px rgba(31,50,78,.035);
}


html[data-theme="light"] .site-card:hover {
    border-color:
        #c6d6e8;

    box-shadow:
        0 9px 22px rgba(31,50,78,.075);
}


html[data-theme="light"] .site-card-icon,
html[data-theme="light"] .sites-summary-icon {
    background:
        #eaf2fb;
}


html[data-theme="light"] .site-card-footer {
    background:
        #f8fafc;

    border-top-color:
        #e5ebf2;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:700px) {

    .sites-grid {
        grid-template-columns:
            1fr;
    }

    .site-card-body {
        grid-template-columns:
            1fr;
    }

}


/* =========================================================
   CANTIERI - STATI V1
   ========================================================= */

.sites-status-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
}

.sites-filter {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 8px 11px;

    border: 1px solid var(--line);
    border-radius: 10px;

    background: var(--panel);

    color: var(--muted);

    font-size: 13px;
    font-weight: 650;
}

.sites-filter span {
    display: inline-flex;
    min-width: 22px;
    height: 22px;

    align-items: center;
    justify-content: center;

    border-radius: 999px;

    background: var(--panel2);

    font-size: 11px;
}

.sites-filter:hover,
.sites-filter.active {
    color: var(--text);
    border-color: var(--accent);
}

.sites-filter.active {
    background:
        color-mix(
            in srgb,
            var(--accent) 12%,
            var(--panel)
        );
}


.site-status-suspended {
    background:
        rgba(242,187,75,.14);

    color:
        var(--warn);
}

.site-status-closed {
    background:
        rgba(147,164,188,.14);

    color:
        var(--muted);
}


.site-status-management-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;
}

.site-status-current {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 7px;
}

.site-status-form {
    display: flex;
    align-items: center;

    gap: 8px;

    flex-shrink: 0;
}

.site-status-form select {
    width: auto;
    min-width: 135px;
}


html[data-theme="light"] .sites-filter {
    background: #ffffff;
    border-color: #dce4ee;
}

html[data-theme="light"] .sites-filter.active {
    background: #edf4fc;
    border-color: #8db3df;
    color: #255f9c;
}


@media(max-width:700px) {

    .site-status-management-head {
        align-items: stretch;
        flex-direction: column;
    }

    .site-status-form {
        width: 100%;
    }

    .site-status-form select {
        flex: 1;
        width: 100%;
    }

}


/* =========================================================
   CANTIERI - ANAGRAFICA V1
   ========================================================= */

.site-core-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 18px;
}

.site-core-head h3 {
    margin: 0 0 4px;
}

.site-core-code {
    flex-shrink: 0;

    padding: 9px 12px;

    border: 1px solid var(--line);
    border-radius: 10px;

    background: var(--panel2);
}

.site-core-code span {
    display: block;

    margin-bottom: 2px;

    color: var(--muted);

    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.site-core-code strong {
    font-size: 14px;
}

.site-core-actions {
    margin-top: 18px;
}

.site-core-readonly {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0,1fr));

    gap: 16px;
}

.site-core-readonly span {
    display: block;

    margin-bottom: 4px;

    color: var(--muted);

    font-size: 11px;

    text-transform: uppercase;
    letter-spacing: .04em;
}

.site-core-readonly strong {
    font-size: 14px;
}

html[data-theme="light"] .site-core-code {
    background: #edf3f9;
    border-color: #dce4ee;
}

@media(max-width:700px) {

    .site-core-head {
        flex-direction: column;
    }

    .site-core-code {
        width: 100%;
    }

    .site-core-readonly {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   CANTIERE DETAIL READONLY V3
   ========================================================= */

.site-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.site-detail-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.site-detail-title-row h3 {
    margin: 0;
}

.site-detail-readonly {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0,1fr));
    gap: 18px;
}

.site-detail-field {
    min-width: 0;
}

.site-detail-field span {
    display: block;
    margin-bottom: 5px;

    color: var(--muted);

    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .045em;
}

.site-detail-field strong {
    display: block;

    font-size: 14px;
    line-height: 1.4;

    overflow-wrap: anywhere;
}

.site-detail-edit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;

    margin-top: 20px;
}

html[data-theme="light"] .site-detail-card {
    background: #ffffff;
}

@media(max-width:800px) {

    .site-detail-readonly {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

}

@media(max-width:560px) {

    .site-detail-head {
        flex-direction: column;
    }

    .site-detail-readonly {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   CANTIERE PROFILE CARD V5
   ========================================================= */

.site-profile-card {
    position: relative;
    overflow: hidden;
}

.site-profile-card::before {
    content: "";
    position: absolute;
    left: -140px;
    top: -190px;

    width: 980px;
    height: 560px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(66,211,146,.13),
            rgba(66,211,146,.055) 52%,
            transparent 72%
        );

    pointer-events: none;
}

.site-profile-card > * {
    position: relative;
    z-index: 1;
}


.site-profile-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 25px;
}

.site-profile-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;
}

.site-profile-title-row h3 {
    margin: 0 0 3px;
}


.site-profile-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px;
}


.site-profile-code {
    padding: 9px 13px;

    border: 1px solid var(--line);
    border-radius: 11px;

    background: var(--panel2);
}

.site-profile-code span {
    display: block;

    margin-bottom: 2px;

    color: var(--muted);

    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.site-profile-code strong {
    color: var(--ok);

    font-size: 15px;
}


.site-profile-status {
    display: inline-flex;
    align-items: center;

    padding: 5px 10px;

    border-radius: 999px;

    font-size: 12px;
    font-weight: 750;
}

.site-profile-status.active {
    color: var(--ok);
    background: rgba(66,211,146,.12);
}

.site-profile-status.suspended {
    color: var(--warn);
    background: rgba(242,187,75,.12);
}

.site-profile-status.closed {
    color: var(--muted);
    background: rgba(147,164,188,.12);
}


.site-profile-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0,1fr));

    gap: 22px 28px;
}

.site-profile-field span {
    display: block;

    margin-bottom: 5px;

    color: var(--muted);

    font-size: 11px;
    font-weight: 650;

    text-transform: uppercase;
    letter-spacing: .045em;
}

.site-profile-field strong {
    display: block;

    font-size: 15px;
    line-height: 1.4;
}


.site-profile-form-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;

    margin-top: 20px;
}


/* ZONA ELIMINAZIONE */

.site-danger-zone {
    margin-top: 26px;

    border-top: 1px solid var(--line);

    padding-top: 12px;
}

.site-danger-zone > summary {
    cursor: pointer;

    color: var(--muted);

    font-size: 12px;
}

.site-danger-content {
    max-width: 520px;

    margin-top: 15px;
    padding: 15px;

    border: 1px solid rgba(255,99,118,.22);
    border-radius: 12px;

    background: rgba(255,99,118,.035);
}

.site-delete-button {
    color: var(--bad);
}


html[data-theme="light"] .site-profile-card::before {
    background:
        radial-gradient(
            circle,
            rgba(37,134,93,.08),
            rgba(37,134,93,.025) 52%,
            transparent 72%
        );
}


@media(max-width:850px) {

    .site-profile-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

}


@media(max-width:600px) {

    .site-profile-header {
        flex-direction: column;
    }

    .site-profile-actions {
        width: 100%;
    }

    .site-profile-grid {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   CORE FIELDS SETTINGS V1
   ========================================================= */

.core-fields-list {
    display: flex;
    flex-direction: column;
    gap: 10px;

    margin-top: 18px;
}

.core-field-row {
    padding: 13px;

    border: 1px solid var(--line);
    border-radius: 12px;

    background: var(--panel2);
}

.core-field-main {
    display: grid;

    grid-template-columns:
        minmax(170px,1.3fr)
        minmax(200px,1.5fr)
        100px
        minmax(220px,1fr)
        auto;

    align-items: end;

    gap: 12px;
}

.core-field-name {
    align-self: center;
}

.core-field-name .tag {
    margin-right: 6px;
}

.core-field-switches {
    display: flex;
    flex-wrap: wrap;

    align-items: center;

    gap: 12px;

    padding-bottom: 4px;
}


html[data-theme="light"] .core-field-row {
    background: #f7f9fc;
    border-color: #dce4ee;
}


@media(max-width:1100px) {

    .core-field-main {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


@media(max-width:650px) {

    .core-field-main {
        grid-template-columns: 1fr;
    }

}

/* CORE FIELDS V2 */

.core-field-remove {
    color: var(--bad);
}

.core-field-remove:hover {
    border-color: var(--bad);
}



/* ==========================================================
   MOBILE_SECTION_ACTIONS_V1
   Pulsanti Modifica nelle intestazioni delle sezioni
   ========================================================== */

.custom-section-summary {
    align-items: center;
}

/*
 * Qualsiasi pulsante diretto dentro una summary deve
 * rimanere allineato verticalmente e non usare il float.
 */
.custom-section-summary > .btn,
.custom-section-summary > .btn.secondary {
    float: none !important;
    flex: 0 0 auto;
    margin-top: 0;
    margin-bottom: 0;
}


/* ----------------------------------------------------------
   SMARTPHONE
   ---------------------------------------------------------- */

@media (max-width: 800px) {

    /*
     * Lascia sempre lo spazio a destra per la freccia
     * apertura/chiusura del details.
     */
    .custom-section-summary {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;

        min-height: 58px;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-right: 48px;
    }


    /*
     * Titolo sezione.
     * Può restringersi senza spingere fuori il pulsante.
     */
    .custom-section-summary > span {
        min-width: 0;
        flex: 1 1 auto;
    }


    /*
     * Modifica / Annulla compatti su smartphone.
     */
    .custom-section-summary > .btn,
    .custom-section-summary > .btn.secondary {
        float: none !important;

        width: auto !important;
        min-width: 0;

        flex: 0 0 auto;

        margin: 0 !important;
        padding: 8px 11px;

        min-height: 36px;

        border-radius: 9px;

        font-size: 14px;
        line-height: 18px;

        white-space: nowrap;
    }


    /*
     * Le summary che contengono un wrapper interno
     * (es. Scheda veicolo) devono mantenere la stessa logica.
     */
    .custom-section-summary > div {
        min-width: 0;
        flex: 1 1 auto;
    }

    .custom-section-summary > div > span {
        min-width: 0;
    }


    /*
     * Anche eventuali action-container devono restare compatti.
     */
    .vehicle-profile-actions,
    .site-profile-actions {
        align-items: center;
    }


    /*
     * Testata delle anagrafiche: evita pulsanti enormi
     * o fuori card sugli schermi stretti.
     */
    .company-profile-head {
        gap: 12px;
        align-items: center;
    }

    .company-profile-head .btn {
        width: auto;
        flex: 0 0 auto;
        white-space: nowrap;
    }
}


/* Smartphone molto stretti */
@media (max-width: 420px) {

    .custom-section-summary {
        gap: 7px;
        padding-left: 14px;
        padding-right: 42px;
    }

    .custom-section-summary > .btn,
    .custom-section-summary > .btn.secondary {
        padding: 7px 9px;
        min-height: 34px;
        font-size: 13px;
    }

}