/* ============================================================
   PASSWORD MANAGER
   PROFESSIONAL SECURITY UI - FINAL OVERRIDE
   Caricato DOPO style.css.
   ============================================================ */

:root {
    --pro-bg: #020b14;
    --pro-bg-2: #051725;

    --pro-panel: #071b2b;
    --pro-panel-2: #0a2235;
    --pro-panel-3: #0d2940;

    --pro-line: rgba(131, 190, 241, .14);
    --pro-line-strong: rgba(120, 190, 255, .28);

    --pro-text: #f4f8fd;
    --pro-soft: #afc1d4;
    --pro-muted: #718aa3;

    --pro-blue: #268cff;
    --pro-blue-2: #0876ef;
    --pro-cyan: #65c6ff;

    --pro-danger: #ff6670;
    --pro-success: #3bd696;

    --pro-sidebar: 212px;
}


/* ============================================================
   BODY
   ============================================================ */

html,
body {
    background: var(--pro-bg) !important;
    color: var(--pro-text);
}

body:not(.login-body) {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 52% -10%,
            rgba(34, 124, 218, .17),
            transparent 37%
        ),
        linear-gradient(
            180deg,
            #061827 0%,
            #020b14 100%
        ) !important;
}


/* ============================================================
   AUTH
   ============================================================ */

body.login-body.pm-auth-page,
body.login-body {
    min-height: 100vh !important;

    background:
        linear-gradient(
            180deg,
            rgba(0, 10, 22, .15),
            rgba(0, 9, 19, .48) 55%,
            rgba(0, 8, 16, .78)
        ),
        radial-gradient(
            circle at 50% 10%,
            rgba(35, 139, 255, .19),
            transparent 38%
        ),
        url("/static/assets/security-bg.webp"),
        linear-gradient(
            145deg,
            #0a2944,
            #020b14
        ) !important;

    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
}


.pm-auth-brand-logo {
    display: block;

    width: 94px;
    height: 94px;

    object-fit: contain;

    margin:
        0 auto
        16px;

    filter:
        drop-shadow(
            0 0 10px
            rgba(87, 188, 255, .46)
        )
        drop-shadow(
            0 0 26px
            rgba(35, 128, 255, .30)
        );
}


.pm-auth-card {
    background:
        linear-gradient(
            145deg,
            rgba(8, 31, 50, .94),
            rgba(3, 17, 29, .94)
        ) !important;

    border:
        1px solid
        rgba(132, 198, 255, .20) !important;

    box-shadow:
        0 28px 80px rgba(0,0,0,.52),
        0 0 40px rgba(24,111,206,.08) !important;
}


.pm-auth-card input {
    color: #fff !important;

    background:
        rgba(7, 27, 45, .84) !important;

    border:
        1px solid
        rgba(129, 184, 234, .24) !important;
}


/* ============================================================
   TOP BAR
   ============================================================ */

.topbar {
    height: 68px !important;

    padding:
        0 24px !important;

    background:
        rgba(3, 15, 26, .97) !important;

    border-bottom:
        1px solid
        var(--pro-line) !important;

    color:
        var(--pro-text) !important;

    box-shadow:
        0 5px 25px
        rgba(0,0,0,.15) !important;
}


.pm-main-brand,
.topbar .logo {
    display: inline-flex !important;

    align-items: center !important;

    gap: 10px !important;

    color:
        #f5f9ff !important;

    font-size:
        16px !important;

    font-weight:
        650 !important;
}


.pm-main-brand img {
    width: 34px;
    height: 34px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 0 7px
            rgba(69, 164, 255, .30)
        );
}


.user-area,
.desktop-user {
    color:
        #bccddd !important;
}


.role {
    color:
        #b9ddff !important;

    background:
        rgba(31, 112, 197, .20) !important;

    border:
        1px solid
        rgba(73, 160, 247, .25) !important;

    border-radius:
        7px !important;
}


.logout {
    color:
        #ff8b94 !important;
}


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

.layout {
    display: flex !important;

    min-height:
        calc(100vh - 68px) !important;

    background:
        transparent !important;
}


/* ============================================================
   SIDEBAR - CORREZIONE DEL BIANCO DELLO SCREENSHOT
   ============================================================ */

.sidebar {
    flex:
        0 0
        var(--pro-sidebar) !important;

    width:
        var(--pro-sidebar) !important;

    min-height:
        calc(100vh - 68px) !important;

    padding:
        22px 13px !important;

    background:
        rgba(3, 16, 27, .96) !important;

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

    color:
        var(--pro-soft) !important;
}


.sidebar nav {
    gap: 5px !important;
}


.sidebar nav a {
    display: flex !important;

    align-items: center !important;

    min-height: 42px !important;

    gap: 11px !important;

    padding:
        10px 12px !important;

    border:
        1px solid
        transparent !important;

    border-radius:
        8px !important;

    color:
        #9eb3c8 !important;

    background:
        transparent !important;

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


.sidebar nav a:hover {
    color: #fff !important;

    background:
        rgba(24, 83, 137, .20) !important;

    border-color:
        rgba(98, 177, 249, .08) !important;
}


.sidebar nav a.active {
    color:
        #fff !important;

    background:
        linear-gradient(
            90deg,
            rgba(27, 116, 213, .56),
            rgba(15, 72, 124, .34)
        ) !important;

    border-color:
        rgba(89, 176, 255, .16) !important;

    box-shadow:
        inset 0 0 22px
        rgba(36, 132, 226, .06) !important;
}


.pm-nav-symbol {
    width: 19px;

    text-align: center;

    color: #87bfe9;

    font-size: 18px;

    line-height: 1;
}


.separator {
    border-color:
        var(--pro-line) !important;

    margin:
        15px 3px !important;
}


/* ============================================================
   CONTENT
   ============================================================ */

.content {
    flex: 1 !important;

    min-width: 0;

    padding:
        36px 34px !important;

    color:
        var(--pro-text) !important;

    background:
        transparent !important;
}


.page-header h1 {
    color: #fff !important;

    font-size:
        29px !important;

    letter-spacing:
        -.5px;
}


.page-header p {
    color:
        var(--pro-muted) !important;
}


/* ============================================================
   BUTTON
   ============================================================ */

.primary-button {
    color:
        #fff !important;

    border:
        1px solid
        rgba(112, 192, 255, .37) !important;

    background:
        linear-gradient(
            180deg,
            #339cff,
            #0977ee
        ) !important;

    box-shadow:
        0 9px 24px
        rgba(0, 107, 239, .23) !important;
}


.primary-button:hover {
    filter:
        brightness(1.09);
}


.pm-secondary-button {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        42px;

    padding:
        9px 15px;

    color:
        #bed0df;

    background:
        rgba(10, 34, 54, .75);

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

    border-radius:
        8px;
}


.pm-danger-button {
    margin-top: 12px;

    min-height:
        42px;

    padding:
        9px 15px;

    color:
        #ffb3b8;

    background:
        rgba(255, 79, 91, .08);

    border:
        1px solid
        rgba(255, 94, 104, .24);

    border-radius:
        8px;

    cursor:
        pointer;
}


/* ============================================================
   SEARCH - CORREZIONE BIANCO
   ============================================================ */

.search-box,
.search input,
.search input[type="search"] {
    color:
        #f5f9ff !important;

    background:
        rgba(7, 27, 44, .84) !important;

    border-color:
        rgba(125, 184, 234, .18) !important;
}


.search-box {
    border:
        1px solid
        rgba(125, 184, 234, .18) !important;

    border-radius:
        10px !important;

    overflow:
        hidden;
}


.search-box input {
    border:
        none !important;

    box-shadow:
        none !important;
}


.search input::placeholder {
    color:
        #708ba5 !important;
}


/* ============================================================
   VAULT
   ============================================================ */

.vault-card {
    overflow:
        hidden !important;

    background:
        linear-gradient(
            145deg,
            rgba(6, 27, 44, .95),
            rgba(3, 19, 32, .94)
        ) !important;

    border:
        1px solid
        rgba(116, 180, 234, .16) !important;

    border-radius:
        13px !important;

    box-shadow:
        0 13px 34px
        rgba(0,0,0,.15) !important;
}


.vault-card:hover {
    border-color:
        rgba(95, 183, 255, .32) !important;

    box-shadow:
        0 17px 40px
        rgba(0,0,0,.22),
        0 0 24px
        rgba(30,124,216,.06) !important;
}


.vault-card-head {
    background:
        transparent !important;
}


.entry-icon {
    color:
        #75bdff !important;

    background:
        linear-gradient(
            145deg,
            rgba(23, 82, 139, .56),
            rgba(9, 49, 86, .76)
        ) !important;

    border:
        1px solid
        rgba(92, 173, 248, .18) !important;
}


.entry-title-area h2 {
    color:
        #f5f9ff !important;
}


.entry-subtitle {
    color:
        #7f97ae !important;
}


.favorite-button,
.expand-button {
    color:
        #8fa9c0 !important;

    background:
        transparent !important;
}


/* ============================================================
   QUICK ACTIONS
   QUESTO ELIMINA LE BARRE BIANCHE DELLO SCREENSHOT
   ============================================================ */

.quick-actions {
    background:
        rgba(4, 19, 31, .84) !important;

    border-top:
        1px solid
        rgba(113, 174, 228, .10) !important;
}


.quick-actions button {
    color:
        #a9c9e4 !important;

    background:
        transparent !important;

    border-color:
        rgba(113, 174, 228, .10) !important;
}


.quick-actions button:hover {
    color:
        #fff !important;

    background:
        rgba(25, 91, 150, .18) !important;
}


.quick-actions .copy-password {
    color:
        #6abaff !important;
}


/* ============================================================
   ENTRY DETAILS
   ============================================================ */

.entry-details {
    background:
        rgba(2, 14, 24, .52) !important;

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


.detail-row {
    border-color:
        rgba(115, 174, 225, .09) !important;
}


.detail-label {
    color:
        #7891aa !important;
}


.detail-value,
.password-display,
.notes-text {
    color:
        #c8d7e5 !important;
}


.mini-button {
    color:
        #84c4ff !important;

    background:
        rgba(22, 75, 123, .18) !important;

    border:
        1px solid
        rgba(94, 174, 247, .15) !important;
}


/* ============================================================
   CATEGORIES + USERS
   ============================================================ */

.category-card,
.user-card {
    color:
        var(--pro-text) !important;

    background:
        linear-gradient(
            145deg,
            rgba(7, 28, 46, .94),
            rgba(4, 19, 32, .94)
        ) !important;

    border:
        1px solid
        rgba(115, 179, 233, .15) !important;

    box-shadow:
        0 12px 32px
        rgba(0,0,0,.14) !important;
}


.category-info h2,
.user-info h2 {
    color:
        #f5f9ff !important;
}


.user-username {
    color:
        #7f97ae !important;
}


/* ============================================================
   FORM GLOBALI / MODALI
   ============================================================ */

body:not(.login-body) input,
body:not(.login-body) select,
body:not(.login-body) textarea {
    color:
        #eef7ff !important;

    background:
        rgba(7, 27, 44, .88) !important;

    border:
        1px solid
        rgba(124, 183, 233, .19) !important;
}


body:not(.login-body) input::placeholder,
body:not(.login-body) textarea::placeholder {
    color:
        #687f96 !important;
}


body:not(.login-body) input:focus,
body:not(.login-body) select:focus,
body:not(.login-body) textarea:focus {
    border-color:
        rgba(58, 154, 245, .72) !important;

    box-shadow:
        0 0 0 3px
        rgba(40, 140, 240, .10) !important;
}


.entry-modal,
.modal,
.category-modal,
.user-modal {
    background:
        rgba(0, 7, 14, .78) !important;

    backdrop-filter:
        blur(9px);
}


.modal-content,
.entry-form,
.category-form,
.user-form {
    color:
        #eef7ff !important;
}


/* ============================================================
   AUDIT
   ============================================================ */

.pm-filter-bar {
    display:
        grid;

    grid-template-columns:
        minmax(240px, 1fr)
        minmax(180px, 260px)
        auto
        auto;

    gap:
        10px;

    margin:
        27px 0 18px;
}


.pm-filter-bar input,
.pm-filter-bar select {
    min-height:
        42px;
}


.pm-audit-panel,
.pm-settings-shell {
    overflow:
        hidden;

    background:
        linear-gradient(
            145deg,
            rgba(7, 28, 45, .90),
            rgba(3, 18, 30, .92)
        );

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

    border-radius:
        14px;

    box-shadow:
        0 16px 40px
        rgba(0,0,0,.15);
}


.pm-audit-head {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        15px;

    padding:
        16px 18px;

    border-bottom:
        1px solid
        var(--pro-line);

    color:
        #e8f4ff;
}


.pm-audit-head span {
    color:
        var(--pro-muted);

    font-size:
        12px;
}


.pm-table-scroll {
    overflow-x:
        auto;
}


.pm-audit-table {
    width:
        100%;

    border-collapse:
        collapse;
}


.pm-audit-table th {
    padding:
        12px 14px;

    color:
        #819ab2;

    font-size:
        11px;

    text-align:
        left;

    text-transform:
        uppercase;

    letter-spacing:
        .5px;

    background:
        rgba(8, 34, 55, .72);

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


.pm-audit-table td {
    padding:
        12px 14px;

    color:
        #b6c8d8;

    font-size:
        13px;

    border-bottom:
        1px solid
        rgba(113, 174, 228, .07);
}


.pm-audit-table tr:hover td {
    background:
        rgba(24, 88, 145, .08);
}


.pm-action-badge {
    display:
        inline-block;

    padding:
        4px 7px;

    color:
        #8bc9ff;

    font-size:
        11px;

    border:
        1px solid
        rgba(79, 163, 239, .17);

    border-radius:
        6px;

    background:
        rgba(27, 103, 173, .13);
}


.pm-mono {
    font-family:
        ui-monospace,
        SFMono-Regular,
        Consolas,
        monospace;
}


.pm-nowrap {
    white-space:
        nowrap;
}


.pm-audit-details {
    max-width:
        330px;

    word-break:
        break-word;
}


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

.pm-settings-tabs {
    display:
        flex;

    gap:
        29px;

    padding:
        0 24px;

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


.pm-settings-tabs span {
    position:
        relative;

    padding:
        16px 0;

    color:
        #7f98ae;

    font-size:
        13px;
}


.pm-settings-tabs span.active {
    color:
        #fff;
}


.pm-settings-tabs span.active::after {
    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        -1px;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            #268cff,
            #6ac8ff
        );
}


.pm-settings-section {
    padding:
        27px;
}


.pm-settings-section +
.pm-settings-section {
    border-top:
        1px solid
        var(--pro-line);
}


.pm-settings-title h2,
.pm-settings-section h2 {
    margin:
        0 0 6px;

    color:
        #fff;
}


.pm-settings-title p {
    margin:
        0;

    color:
        var(--pro-muted);
}


.pm-branding-grid {
    display:
        grid;

    grid-template-columns:
        250px
        minmax(300px, 1fr);

    gap:
        30px;

    align-items:
        start;

    margin-top:
        23px;
}


.pm-logo-large-preview {
    min-height:
        190px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        13px;

    padding:
        22px;

    background:
        linear-gradient(
            145deg,
            rgba(12, 44, 69, .76),
            rgba(4, 22, 36, .76)
        );

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

    border-radius:
        12px;
}


.pm-logo-large-preview img {
    width:
        105px;

    height:
        105px;

    object-fit:
        contain;

    filter:
        drop-shadow(
            0 0 15px
            rgba(48, 144, 238, .24)
        );
}


.pm-upload-box {
    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

    max-width:
        520px;

    padding:
        19px;

    margin-bottom:
        13px;

    color:
        #c7d9e8;

    cursor:
        pointer;

    background:
        rgba(7, 30, 49, .70);

    border:
        1px dashed
        rgba(101, 180, 249, .28);

    border-radius:
        10px;
}


.pm-upload-box:hover {
    border-color:
        rgba(101, 180, 249, .54);

    background:
        rgba(12, 44, 70, .75);
}


.pm-upload-box span {
    color:
        var(--pro-muted);

    font-size:
        12px;
}


.pm-upload-box input {
    margin-top:
        9px;
}


.pm-local-preview {
    margin:
        12px 0;
}


.pm-local-preview img {
    max-width:
        130px;

    max-height:
        130px;

    object-fit:
        contain;
}


.pm-system-grid {
    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(140px, 1fr));

    gap:
        12px;

    margin-top:
        17px;
}


.pm-system-grid > div {
    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

    padding:
        14px;

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

    border-radius:
        9px;

    background:
        rgba(5, 23, 38, .55);
}


.pm-system-grid span {
    color:
        var(--pro-muted);

    font-size:
        12px;
}


.pm-system-grid strong {
    color:
        #eaf6ff;
}


/* ============================================================
   MESSAGGI
   ============================================================ */

.pm-message-success,
.pm-message-error {
    margin:
        20px 0;

    padding:
        12px 15px;

    border-radius:
        9px;
}


.pm-message-success {
    color:
        #a7f2d0;

    background:
        rgba(50, 209, 142, .08);

    border:
        1px solid
        rgba(50, 209, 142, .20);
}


.pm-message-error {
    color:
        #ffc0c5;

    background:
        rgba(255, 80, 91, .08);

    border:
        1px solid
        rgba(255, 80, 91, .21);
}


.pm-empty-dark {
    padding:
        50px 25px;

    text-align:
        center;

    color:
        var(--pro-muted);
}


/* ============================================================
   MOBILE NAV ESISTENTE
   ============================================================ */

.mobile-nav {
    background:
        rgba(3, 15, 26, .98) !important;

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

    box-shadow:
        0 -10px 30px
        rgba(0,0,0,.22) !important;
}


.mobile-nav a {
    color:
        #8ea7be !important;
}


.mobile-nav a.active {
    color:
        #65b8ff !important;
}


.mobile-fab {
    color:
        #fff !important;

    background:
        linear-gradient(
            180deg,
            #339cff,
            #0878ef
        ) !important;

    box-shadow:
        0 9px 28px
        rgba(0, 107, 239, .31) !important;
}


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

@media (max-width: 760px) {

    .topbar {
        height:
            61px !important;

        padding:
            0 13px !important;
    }


    .pm-main-brand span {
        display:
            none;
    }


    .pm-main-brand img {
        width:
            35px;

        height:
            35px;
    }


    .layout {
        min-height:
            calc(100vh - 61px) !important;
    }


    .sidebar {
        display:
            none !important;
    }


    .content {
        width:
            100% !important;

        padding:
            22px 14px 92px !important;
    }


    .desktop-user {
        display:
            none !important;
    }


    .page-header h1 {
        font-size:
            25px !important;
    }


    .pm-filter-bar {
        grid-template-columns:
            1fr;
    }


    .pm-branding-grid {
        grid-template-columns:
            1fr;
    }


    .pm-logo-large-preview {
        min-height:
            160px;
    }


    .pm-settings-tabs {
        gap:
            20px;

        overflow-x:
            auto;

        white-space:
            nowrap;
    }


    .pm-system-grid {
        grid-template-columns:
            1fr 1fr;
    }


    .pm-audit-head {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

}


@media (max-width: 470px) {

    .pm-system-grid {
        grid-template-columns:
            1fr;
    }


    .user-area {
        gap:
            8px !important;
    }


    .role {
        font-size:
            10px !important;
    }

}


/* ============================================================
   FINAL FIX - USERS / CATEGORIES WHITE STRIPS
   ============================================================ */

.user-actions,
.category-actions,
.category-description,
.category-card-description,
.category-footer,
.user-card-footer {
    background:
        rgba(3, 18, 30, .88) !important;

    border-top:
        1px solid
        rgba(115, 179, 233, .11) !important;

    color:
        #9fb4c8 !important;
}


.user-actions button,
.user-actions a,
.category-actions button,
.category-actions a {
    color:
        #8fc9ff !important;

    background:
        transparent !important;

    border-color:
        rgba(115, 179, 233, .11) !important;
}


.user-actions button:hover,
.user-actions a:hover,
.category-actions button:hover,
.category-actions a:hover {
    color:
        #fff !important;

    background:
        rgba(24, 91, 151, .18) !important;
}


.user-actions .danger,
.user-actions .danger-button,
.category-actions .danger,
.category-actions .delete-button {
    color:
        #ff8189 !important;
}


/* Categorie sistema: testo descrittivo */

.category-description,
.category-card-description {
    padding:
        13px 20px !important;

    color:
        #8ea5ba !important;
}


/* ============================================================
   REMEMBER DEVICE
   ============================================================ */

.pm-remember-device {
    display:
        flex !important;

    align-items:
        flex-start;

    gap:
        11px;

    margin:
        18px 0 8px !important;

    padding:
        13px 14px;

    cursor:
        pointer;

    color:
        #d8e7f4;

    background:
        rgba(9, 35, 56, .64);

    border:
        1px solid
        rgba(105, 179, 242, .15);

    border-radius:
        9px;
}


.pm-remember-device input {
    width:
        17px !important;

    height:
        17px;

    margin:
        2px 0 0 !important;

    flex:
        0 0 17px;

    accent-color:
        #258cff;
}


.pm-remember-device span {
    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;
}


.pm-remember-device strong {
    color:
        #e8f4ff;
}


.pm-remember-device small {
    color:
        #7893ad;

    line-height:
        1.35;
}


/* ============================================================
   TRUSTED DEVICES SETTINGS
   ============================================================ */

.pm-trusted-section {
    border-top:
        1px solid
        rgba(115, 179, 233, .12);
}


.pm-security-warning {
    margin:
        18px 0;

    padding:
        11px 13px;

    color:
        #d7c692;

    background:
        rgba(194, 151, 48, .07);

    border:
        1px solid
        rgba(218, 175, 69, .16);

    border-radius:
        8px;

    font-size:
        13px;
}


.pm-trusted-list {
    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

    margin:
        18px 0;
}


.pm-trusted-device {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    padding:
        16px;

    background:
        rgba(5, 24, 39, .74);

    border:
        1px solid
        rgba(116, 180, 234, .13);

    border-radius:
        10px;
}


.pm-trusted-main {
    min-width:
        0;
}


.pm-trusted-main > strong {
    color:
        #edf7ff;
}


.pm-trusted-agent {
    margin:
        5px 0 8px;

    max-width:
        750px;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    color:
        #8ea8bf;

    font-size:
        12px;
}


.pm-trusted-meta {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px 18px;

    color:
        #6f899f;

    font-size:
        11px;
}


@media (max-width: 700px) {

    .pm-trusted-device {
        align-items:
            stretch;

        flex-direction:
            column;
    }

    .pm-trusted-agent {
        white-space:
            normal;
    }

}


/* ============================================================
   USERS + CATEGORIES
   FINAL PROFESSIONAL DARK CARDS
   ============================================================ */


/* ------------------------------------------------------------
   CARD
   ------------------------------------------------------------ */

.user-card,
.category-card {
    overflow: hidden !important;

    background:
        linear-gradient(
            180deg,
            rgba(4, 25, 41, .98),
            rgba(3, 21, 35, .98)
        ) !important;

    border:
        1px solid rgba(91, 166, 226, .18) !important;

    border-radius:
        14px !important;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, .10) !important;
}


/* ------------------------------------------------------------
   PARTE PRINCIPALE CARD
   ------------------------------------------------------------ */

.user-card-main,
.category-card-head {
    background: transparent !important;
}


/* ------------------------------------------------------------
   USER ACTION BAR
   ------------------------------------------------------------ */

.user-actions {
    display: flex !important;

    background:
        rgba(2, 17, 29, .92) !important;

    border-top:
        1px solid rgba(105, 177, 235, .13) !important;
}


.user-actions > button,
.user-actions > form {
    flex: 1 1 0 !important;

    margin: 0 !important;

    background: transparent !important;

    border: 0 !important;
}


.user-actions > form {
    display: flex !important;
}


.user-actions button {
    width: 100% !important;
    min-height: 47px !important;

    margin: 0 !important;
    padding: 0 18px !important;

    background: transparent !important;

    border: 0 !important;
    border-right:
        1px solid rgba(105, 177, 235, .10) !important;

    border-radius: 0 !important;

    color: #8fcaff !important;

    font-size: 14px !important;
    font-weight: 600 !important;

    cursor: pointer;

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


.user-actions > *:last-child button,
.user-actions > button:last-child {
    border-right: 0 !important;
}


.user-actions button:hover {
    background:
        rgba(35, 126, 207, .12) !important;

    color: #ffffff !important;
}


.user-actions button.danger-text {
    color: #ff7e89 !important;
}


.user-actions button.danger-text:hover {
    background:
        rgba(211, 54, 69, .10) !important;

    color: #ff9ba3 !important;
}


/* ------------------------------------------------------------
   CATEGORY SYSTEM DESCRIPTION
   Comune / Privato
   ------------------------------------------------------------ */

.category-system-info {
    margin: 0 !important;

    padding: 14px 20px !important;

    background:
        rgba(2, 17, 29, .92) !important;

    border-top:
        1px solid rgba(105, 177, 235, .13) !important;

    color: #8ea8bf !important;

    font-size: 13px !important;
    line-height: 1.5 !important;
}


/* ------------------------------------------------------------
   CATEGORY ACTION BAR
   ------------------------------------------------------------ */

.category-actions {
    display: flex !important;

    margin: 0 !important;

    background:
        rgba(2, 17, 29, .92) !important;

    border-top:
        1px solid rgba(105, 177, 235, .13) !important;
}


.category-actions > button,
.category-actions > form {
    flex: 1 1 0 !important;

    margin: 0 !important;

    background: transparent !important;

    border: 0 !important;
}


.category-actions > form {
    display: flex !important;
}


.category-actions button {
    width: 100% !important;
    min-height: 47px !important;

    margin: 0 !important;
    padding: 0 18px !important;

    background: transparent !important;

    border: 0 !important;
    border-right:
        1px solid rgba(105, 177, 235, .10) !important;

    border-radius: 0 !important;

    color: #8fcaff !important;

    font-size: 14px !important;
    font-weight: 600 !important;

    cursor: pointer;

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


.category-actions > *:last-child button,
.category-actions > button:last-child {
    border-right: 0 !important;
}


.category-actions button:hover {
    background:
        rgba(35, 126, 207, .12) !important;

    color: #ffffff !important;
}


.category-actions button.danger-text {
    color: #ff7e89 !important;
}


.category-actions button.danger-text:hover {
    background:
        rgba(211, 54, 69, .10) !important;

    color: #ff9ba3 !important;
}


/* ------------------------------------------------------------
   BADGES
   ------------------------------------------------------------ */

.user-badges,
.category-badges {
    gap: 8px !important;
}


.status-badge,
.user-badges .role,
.category-badges .role {
    letter-spacing: .02em;
}


/* ------------------------------------------------------------
   AVATAR / CATEGORY ICON
   ------------------------------------------------------------ */

.user-avatar,
.category-icon {
    border:
        1px solid rgba(118, 185, 239, .15) !important;

    box-shadow:
        0 6px 18px rgba(0, 0, 0, .10) !important;
}


/* ------------------------------------------------------------
   CATEGORY EDITOR
   ------------------------------------------------------------ */

.category-editor {
    background:
        rgba(2, 16, 27, .96) !important;

    border-top:
        1px solid rgba(105, 177, 235, .13) !important;
}


.category-user-option {
    background:
        rgba(7, 31, 49, .72) !important;

    border:
        1px solid rgba(105, 177, 235, .13) !important;

    border-radius: 9px !important;
}


.category-user-option:hover {
    background:
        rgba(15, 51, 78, .76) !important;

    border-color:
        rgba(74, 166, 244, .28) !important;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 700px) {

    .user-actions,
    .category-actions {
        flex-direction: column !important;
    }


    .user-actions > button,
    .user-actions > form,
    .category-actions > button,
    .category-actions > form {
        width: 100% !important;
    }


    .user-actions button,
    .category-actions button {
        min-height: 46px !important;

        border-right: 0 !important;

        border-bottom:
            1px solid rgba(105, 177, 235, .09) !important;
    }


    .user-actions > *:last-child button,
    .category-actions > *:last-child button {
        border-bottom: 0 !important;
    }


    .category-system-info {
        padding: 13px 16px !important;
    }
}


/* ============================================================
   END USERS + CATEGORIES FINAL FIX
   ============================================================ */


/* ============================================================
   GLOBAL COMPACT PASS
   Mantiene le dimensioni dei caratteri
   Riduce spazi, altezze e padding
   ============================================================ */


/* ------------------------------------------------------------
   TOPBAR
   ------------------------------------------------------------ */

.topbar {
    height: 58px !important;
    padding: 0 18px !important;
}

.pm-main-brand img {
    width: 30px !important;
    height: 30px !important;
}

.pm-main-brand,
.topbar .logo {
    gap: 8px !important;
}


/* ------------------------------------------------------------
   LAYOUT / SIDEBAR
   ------------------------------------------------------------ */

.layout {
    min-height: calc(100vh - 58px) !important;
}

.sidebar {
    min-height: calc(100vh - 58px) !important;

    padding:
        14px 10px !important;
}

.sidebar nav {
    gap: 3px !important;
}

.sidebar nav a {
    min-height: 36px !important;

    padding:
        7px 10px !important;

    gap:
        9px !important;
}

.separator {
    margin:
        10px 2px !important;
}

.pm-nav-symbol {
    width: 17px !important;
}


/* ------------------------------------------------------------
   CONTENT GENERALE
   ------------------------------------------------------------ */

.content {
    padding:
        22px 28px 30px !important;
}

.page-header {
    margin-bottom:
        14px !important;
}

.page-header h1 {
    margin:
        0 !important;
}

.page-header p {
    margin:
        3px 0 0 !important;
}


/* ------------------------------------------------------------
   BUTTON PRINCIPALI
   ------------------------------------------------------------ */

.primary-button {
    min-height:
        39px !important;

    padding:
        8px 15px !important;
}


/* ------------------------------------------------------------
   SEARCH
   ------------------------------------------------------------ */

.search {
    margin-top:
        16px !important;

    margin-bottom:
        12px !important;
}

.search-box {
    min-height:
        44px !important;
}

.search-box input {
    min-height:
        42px !important;

    padding:
        9px 12px !important;
}


/* ------------------------------------------------------------
   VAULT LIST
   ------------------------------------------------------------ */

.vault-list {
    gap:
        11px !important;
}

.vault-card {
    border-radius:
        11px !important;
}


/* ------------------------------------------------------------
   VAULT CARD HEAD
   ------------------------------------------------------------ */

.vault-card-head {
    min-height:
        72px !important;

    padding:
        10px 14px !important;
}

.entry-main {
    gap:
        10px !important;
}

.entry-icon {
    width:
        44px !important;

    height:
        44px !important;

    min-width:
        44px !important;

    border-radius:
        10px !important;
}

.entry-title-area h2 {
    margin:
        0 0 2px !important;
}

.entry-subtitle {
    line-height:
        1.25 !important;
}

.favorite-button,
.expand-button {
    width:
        31px !important;

    height:
        31px !important;
}


/* ------------------------------------------------------------
   QUICK ACTIONS
   ------------------------------------------------------------ */

.quick-actions {
    min-height:
        39px !important;
}

.quick-actions button {
    min-height:
        39px !important;

    padding:
        7px 12px !important;
}


/* ------------------------------------------------------------
   ENTRY DETAILS
   ------------------------------------------------------------ */

.entry-details {
    padding:
        0 !important;
}

.detail-row {
    padding:
        10px 14px !important;
}

.detail-actions {
    padding:
        10px 14px !important;
}


/* ------------------------------------------------------------
   USERS
   ------------------------------------------------------------ */

.users-list {
    gap:
        11px !important;
}

.user-card-main {
    min-height:
        72px !important;

    padding:
        11px 14px !important;
}

.user-avatar {
    width:
        44px !important;

    height:
        44px !important;

    min-width:
        44px !important;

    border-radius:
        10px !important;
}

.user-info h2 {
    margin:
        0 0 2px !important;
}

.user-badges {
    gap:
        6px !important;
}

.user-actions button {
    min-height:
        40px !important;

    padding:
        0 13px !important;
}


/* ------------------------------------------------------------
   CATEGORIES
   ------------------------------------------------------------ */

.category-list {
    gap:
        11px !important;
}

.category-card-head {
    min-height:
        72px !important;

    padding:
        11px 14px !important;
}

.category-icon {
    width:
        44px !important;

    height:
        44px !important;

    min-width:
        44px !important;

    border-radius:
        10px !important;
}

.category-info h2 {
    margin:
        0 0 2px !important;
}

.category-badges {
    gap:
        6px !important;
}

.category-system-info {
    padding:
        10px 14px !important;
}

.category-actions button {
    min-height:
        40px !important;

    padding:
        0 13px !important;
}

.category-editor {
    padding:
        14px !important;
}

.category-user-grid {
    gap:
        8px !important;
}

.category-user-option {
    padding:
        9px !important;
}


/* ------------------------------------------------------------
   AUDIT
   ------------------------------------------------------------ */

.pm-filter-bar {
    margin:
        16px 0 12px !important;

    gap:
        8px !important;
}

.pm-filter-bar input,
.pm-filter-bar select {
    min-height:
        39px !important;
}

.pm-audit-head {
    padding:
        12px 14px !important;
}

.pm-audit-table th {
    padding:
        9px 11px !important;
}

.pm-audit-table td {
    padding:
        9px 11px !important;
}


/* ------------------------------------------------------------
   SETTINGS
   ------------------------------------------------------------ */

.pm-settings-tabs {
    gap:
        22px !important;

    padding:
        0 18px !important;
}

.pm-settings-tabs span {
    padding:
        11px 0 !important;
}

.pm-settings-section {
    padding:
        20px !important;
}

.pm-branding-grid {
    gap:
        20px !important;

    margin-top:
        16px !important;
}

.pm-logo-large-preview {
    min-height:
        160px !important;

    padding:
        16px !important;
}

.pm-logo-large-preview img {
    width:
        88px !important;

    height:
        88px !important;
}

.pm-system-grid {
    gap:
        9px !important;

    margin-top:
        12px !important;
}

.pm-system-grid > div {
    padding:
        11px !important;
}

.pm-trusted-list {
    gap:
        8px !important;

    margin:
        12px 0 !important;
}

.pm-trusted-device {
    padding:
        12px !important;
}


/* ------------------------------------------------------------
   MODALS
   ------------------------------------------------------------ */

.modal,
.user-modal-card,
.category-modal-card,
.modal-content {
    border-radius:
        12px !important;
}

.modal-header {
    padding:
        16px 18px !important;
}

.modal form {
    padding:
        16px 18px !important;
}

.modal-actions {
    margin-top:
        16px !important;

    gap:
        8px !important;
}


/* ------------------------------------------------------------
   FORM
   ------------------------------------------------------------ */

.form-grid {
    gap:
        10px !important;
}

body:not(.login-body) input,
body:not(.login-body) select,
body:not(.login-body) textarea {
    padding:
        9px 11px !important;
}


/* ------------------------------------------------------------
   AUTH / LOGIN / 2FA
   ------------------------------------------------------------ */

.pm-auth-shell {
    padding:
        20px 14px !important;
}

.pm-brand {
    margin-bottom:
        16px !important;
}

.pm-auth-brand-logo {
    width:
        78px !important;

    height:
        78px !important;

    margin:
        0 auto 10px !important;
}

.pm-auth-card {
    padding:
        22px !important;
}

.pm-auth-heading {
    margin-bottom:
        16px !important;
}

.pm-form-group {
    margin-bottom:
        12px !important;
}

.pm-totp-layout {
    gap:
        18px !important;

    margin:
        16px 0 !important;
}

.pm-step {
    margin:
        8px 0 !important;
}

.pm-remember-device {
    margin:
        12px 0 6px !important;

    padding:
        10px 12px !important;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 760px) {

    .topbar {
        height:
            56px !important;
    }

    .layout {
        min-height:
            calc(100vh - 56px) !important;
    }

    .content {
        padding:
            18px 12px 82px !important;
    }

    .vault-card-head,
    .user-card-main,
    .category-card-head {
        min-height:
            66px !important;

        padding:
            9px 11px !important;
    }

    .entry-icon,
    .user-avatar,
    .category-icon {
        width:
            40px !important;

        height:
            40px !important;

        min-width:
            40px !important;
    }

    .quick-actions button,
    .user-actions button,
    .category-actions button {
        min-height:
            38px !important;
    }

    .pm-settings-section {
        padding:
            15px !important;
    }

}


/* ============================================================
   END GLOBAL COMPACT PASS
   ============================================================ */


/* ============================================================
   INLINE ACTIONS LAYOUT
   Azioni sulla stessa riga del contenuto principale
   ============================================================ */


/* ------------------------------------------------------------
   VAULT
   ------------------------------------------------------------ */

@media (min-width: 761px) {

    .vault-card {
        display: grid !important;

        grid-template-columns:
            minmax(320px, 1fr)
            auto !important;

        align-items:
            stretch !important;
    }


    .vault-card-head {
        min-height:
            64px !important;

        padding:
            8px 14px !important;

        border-bottom:
            0 !important;
    }


    .quick-actions {
        display:
            flex !important;

        align-items:
            stretch !important;

        min-height:
            64px !important;

        background:
            rgba(2, 17, 29, .55) !important;

        border-top:
            0 !important;

        border-left:
            1px solid rgba(105, 177, 235, .10) !important;
    }


    .quick-actions button {
        width:
            auto !important;

        min-width:
            120px !important;

        min-height:
            64px !important;

        padding:
            0 15px !important;

        white-space:
            nowrap !important;

        border-right:
            1px solid rgba(105, 177, 235, .08) !important;

        border-bottom:
            0 !important;
    }


    .quick-actions button:last-child {
        border-right:
            0 !important;
    }


    .entry-details {
        grid-column:
            1 / -1 !important;
    }

}


/* ------------------------------------------------------------
   USERS
   ------------------------------------------------------------ */

@media (min-width: 761px) {

    .user-card {
        display:
            grid !important;

        grid-template-columns:
            minmax(330px, 1fr)
            auto !important;

        align-items:
            stretch !important;
    }


    .user-card-main {
        min-height:
            64px !important;

        padding:
            8px 14px !important;
    }


    .user-actions {
        display:
            flex !important;

        align-items:
            stretch !important;

        min-height:
            64px !important;

        border-top:
            0 !important;

        border-left:
            1px solid rgba(105, 177, 235, .10) !important;

        background:
            rgba(2, 17, 29, .55) !important;
    }


    .user-actions > button,
    .user-actions > form {
        flex:
            0 0 auto !important;
    }


    .user-actions button {
        min-width:
            116px !important;

        min-height:
            64px !important;

        padding:
            0 14px !important;

        white-space:
            nowrap !important;

        border-right:
            1px solid rgba(105, 177, 235, .08) !important;

        border-bottom:
            0 !important;
    }


    .user-actions > *:last-child button,
    .user-actions > button:last-child {
        border-right:
            0 !important;
    }

}


/* ------------------------------------------------------------
   CATEGORIES
   ------------------------------------------------------------ */

@media (min-width: 761px) {

    .category-card {
        display:
            grid !important;

        grid-template-columns:
            minmax(360px, 1fr)
            auto !important;

        align-items:
            stretch !important;
    }


    .category-card-head {
        min-height:
            64px !important;

        padding:
            8px 14px !important;
    }


    .category-system-info {
        grid-column:
            1 / -1 !important;

        padding:
            8px 14px !important;
    }


    .category-actions {
        display:
            flex !important;

        align-items:
            stretch !important;

        min-height:
            64px !important;

        border-top:
            0 !important;

        border-left:
            1px solid rgba(105, 177, 235, .10) !important;

        background:
            rgba(2, 17, 29, .55) !important;
    }


    .category-actions > button,
    .category-actions > form {
        flex:
            0 0 auto !important;
    }


    .category-actions button {
        min-width:
            120px !important;

        min-height:
            64px !important;

        padding:
            0 14px !important;

        white-space:
            nowrap !important;

        border-right:
            1px solid rgba(105, 177, 235, .08) !important;

        border-bottom:
            0 !important;
    }


    .category-actions > *:last-child button,
    .category-actions > button:last-child {
        border-right:
            0 !important;
    }


    .category-editor {
        grid-column:
            1 / -1 !important;
    }

}


/* ------------------------------------------------------------
   ULTERIORE COMPATTAZIONE ELEMENTI INTERNI
   ------------------------------------------------------------ */

@media (min-width: 761px) {

    .entry-icon,
    .user-avatar,
    .category-icon {
        width:
            40px !important;

        height:
            40px !important;

        min-width:
            40px !important;
    }


    .favorite-button,
    .expand-button {
        width:
            28px !important;

        height:
            28px !important;
    }


    .user-badges,
    .category-badges {
        margin-left:
            auto !important;
    }

}


/* ------------------------------------------------------------
   MOBILE
   Torna automaticamente al layout verticale
   ------------------------------------------------------------ */

@media (max-width: 760px) {

    .vault-card,
    .user-card,
    .category-card {
        display:
            block !important;
    }


    .quick-actions,
    .user-actions,
    .category-actions {
        display:
            flex !important;

        width:
            100% !important;

        border-left:
            0 !important;

        border-top:
            1px solid rgba(105, 177, 235, .10) !important;
    }

}


/* ============================================================
   END INLINE ACTIONS
   ============================================================ */


/* ============================================================
   PROFESSIONAL ICON SYSTEM V2
   ============================================================ */

.pm-nav-symbol {
    display: inline-block !important;

    width: 18px !important;
    height: 18px !important;

    flex: 0 0 18px !important;

    font-size: 0 !important;

    background-color: currentColor !important;

    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;

    -webkit-mask-position: center !important;
    mask-position: center !important;

    -webkit-mask-size: contain !important;
    mask-size: contain !important;
}


.sidebar a[href="/vault"] .pm-nav-symbol {
    -webkit-mask-image:
        url("/static/icons/vault.svg") !important;

    mask-image:
        url("/static/icons/vault.svg") !important;
}


.sidebar a[href^="/vault?favorite"] .pm-nav-symbol {
    -webkit-mask-image:
        url("/static/icons/star.svg") !important;

    mask-image:
        url("/static/icons/star.svg") !important;
}


.sidebar a[href="/categories"] .pm-nav-symbol {
    -webkit-mask-image:
        url("/static/icons/folder.svg") !important;

    mask-image:
        url("/static/icons/folder.svg") !important;
}


.sidebar a[href="/users"] .pm-nav-symbol {
    -webkit-mask-image:
        url("/static/icons/users.svg") !important;

    mask-image:
        url("/static/icons/users.svg") !important;
}


.sidebar a[href="/audit"] .pm-nav-symbol {
    -webkit-mask-image:
        url("/static/icons/audit.svg") !important;

    mask-image:
        url("/static/icons/audit.svg") !important;
}


.sidebar a[href="/settings"] .pm-nav-symbol {
    -webkit-mask-image:
        url("/static/icons/settings.svg") !important;

    mask-image:
        url("/static/icons/settings.svg") !important;
}


/* ============================================================
   FAVORITE STAR
   ============================================================ */

.favorite-button {
    display: inline-flex !important;

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

    font-size: 0 !important;

    color: #6f879e !important;

    opacity: 1 !important;

    transition:
        color .16s ease,
        transform .16s ease,
        filter .16s ease !important;
}


.favorite-button::before {
    content: "" !important;

    width: 20px !important;
    height: 20px !important;

    display: block !important;

    background-color: currentColor !important;

    -webkit-mask-image:
        url("/static/icons/star.svg") !important;

    mask-image:
        url("/static/icons/star.svg") !important;

    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;

    -webkit-mask-position: center !important;
    mask-position: center !important;

    -webkit-mask-size: contain !important;
    mask-size: contain !important;
}


/* non preferito */

.favorite-button:not(.selected) {
    color: #647d95 !important;
}


/* preferito */

.favorite-button.selected {
    color: #ffc94d !important;

    filter:
        drop-shadow(
            0 0 6px
            rgba(255, 196, 47, .38)
        ) !important;
}


.favorite-button:hover {
    color: #ffd66d !important;

    transform:
        scale(1.08) !important;
}


/* ============================================================
   CATEGORY ICON BASE
   ============================================================ */

.category-icon {
    position: relative !important;

    font-size: 0 !important;

    color: #72bdff !important;
}


.category-icon::after {
    content: "" !important;

    display: block !important;

    width: 22px !important;
    height: 22px !important;

    margin: auto !important;

    background-color: currentColor !important;

    -webkit-mask-image:
        url("/static/icons/folder.svg");

    mask-image:
        url("/static/icons/folder.svg");

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: contain;
    mask-size: contain;
}


/* ============================================================
   QUICK ACTION ICONS
   ============================================================ */

.quick-actions button span {
    font-size: 0 !important;

    display: inline-block !important;

    width: 16px !important;
    height: 16px !important;

    margin-right: 6px !important;

    vertical-align: middle !important;

    background-color: currentColor !important;

    -webkit-mask-image:
        url("/static/icons/copy.svg") !important;

    mask-image:
        url("/static/icons/copy.svg") !important;

    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;

    -webkit-mask-position: center !important;
    mask-position: center !important;

    -webkit-mask-size: contain !important;
    mask-size: contain !important;
}


/* ============================================================
   PWA STANDALONE
   ============================================================ */

@media (display-mode: standalone) {

    html,
    body {
        overscroll-behavior: none;
    }

}


/* ============================================================
   CATEGORY ICONS - PROFESSIONAL
   ============================================================ */

.category-icon {
    display: flex !important;

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

    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;

    position: relative !important;

    font-size: 0 !important;

    color: #74bdff !important;

    background:
        linear-gradient(
            145deg,
            rgba(20, 80, 135, .56),
            rgba(7, 43, 77, .74)
        ) !important;

    border:
        1px solid rgba(91, 174, 247, .17) !important;

    border-radius:
        10px !important;
}


/* neutralizza il vecchio pseudo-elemento generico */

.category-icon::after {
    content: "" !important;

    display: block !important;

    width: 21px !important;
    height: 21px !important;

    margin: 0 !important;

    background-color: currentColor !important;

    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;

    -webkit-mask-position: center !important;
    mask-position: center !important;

    -webkit-mask-size: contain !important;
    mask-size: contain !important;
}


/* PRIVATO */

.category-icon-private {
    color: #76c2ff !important;

    background:
        linear-gradient(
            145deg,
            rgba(19, 87, 151, .62),
            rgba(6, 42, 75, .78)
        ) !important;
}

.category-icon-private::after {
    -webkit-mask-image:
        url("/static/icons/lock.svg") !important;

    mask-image:
        url("/static/icons/lock.svg") !important;
}


/* COMUNE */

.category-icon-common {
    color: #68d6c2 !important;

    background:
        linear-gradient(
            145deg,
            rgba(18, 109, 101, .52),
            rgba(5, 56, 61, .72)
        ) !important;
}

.category-icon-common::after {
    -webkit-mask-image:
        url("/static/icons/users.svg") !important;

    mask-image:
        url("/static/icons/users.svg") !important;
}


/* PERSONALIZZATE */

.category-icon-custom {
    color: #b19cff !important;

    background:
        linear-gradient(
            145deg,
            rgba(79, 60, 151, .50),
            rgba(35, 29, 82, .72)
        ) !important;
}

.category-icon-custom::after {
    -webkit-mask-image:
        url("/static/icons/folder.svg") !important;

    mask-image:
        url("/static/icons/folder.svg") !important;
}


/* ============================================================
   END CATEGORY ICONS
   ============================================================ */


/* ============================================================
   VAULT CATEGORY ICONS
   Stessa codifica visiva della pagina Categorie
   ============================================================ */

.entry-icon {
    display: flex !important;

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

    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;

    position: relative !important;

    font-size: 0 !important;

    border-radius: 10px !important;

    border:
        1px solid rgba(100, 175, 240, .16) !important;
}


.entry-icon::after {
    content: "" !important;

    display: block !important;

    width: 21px !important;
    height: 21px !important;

    background-color: currentColor !important;

    -webkit-mask-repeat:
        no-repeat !important;

    mask-repeat:
        no-repeat !important;

    -webkit-mask-position:
        center !important;

    mask-position:
        center !important;

    -webkit-mask-size:
        contain !important;

    mask-size:
        contain !important;
}


/* PRIVATO */

.entry-icon-private {
    color:
        #76c2ff !important;

    background:
        linear-gradient(
            145deg,
            rgba(19, 87, 151, .62),
            rgba(6, 42, 75, .78)
        ) !important;

    border-color:
        rgba(90, 177, 255, .20) !important;
}


.entry-icon-private::after {
    -webkit-mask-image:
        url("/static/icons/lock.svg") !important;

    mask-image:
        url("/static/icons/lock.svg") !important;
}


/* COMUNE */

.entry-icon-common {
    color:
        #68d6c2 !important;

    background:
        linear-gradient(
            145deg,
            rgba(18, 109, 101, .52),
            rgba(5, 56, 61, .72)
        ) !important;

    border-color:
        rgba(73, 209, 184, .19) !important;
}


.entry-icon-common::after {
    -webkit-mask-image:
        url("/static/icons/users.svg") !important;

    mask-image:
        url("/static/icons/users.svg") !important;
}


/* CATEGORIE PERSONALIZZATE */

.entry-icon-custom {
    color:
        #b19cff !important;

    background:
        linear-gradient(
            145deg,
            rgba(79, 60, 151, .50),
            rgba(35, 29, 82, .72)
        ) !important;

    border-color:
        rgba(165, 142, 255, .18) !important;
}


.entry-icon-custom::after {
    -webkit-mask-image:
        url("/static/icons/folder.svg") !important;

    mask-image:
        url("/static/icons/folder.svg") !important;
}


/* niente lettere/inziali residue */

.entry-icon {
    text-indent:
        -9999px !important;

    overflow:
        hidden !important;
}

.entry-icon::after {
    text-indent:
        0 !important;
}


/* ============================================================
   END VAULT CATEGORY ICONS
   ============================================================ */


/* ============================================================
   MODAL DARK THEME - DEFINITIVE OVERRIDE
   ============================================================ */

/* contenitore modale */
.modal-content,
.modal-card,
.dialog-content {
    background: #061421 !important;
    color: #eaf3fb !important;
    border: 1px solid rgba(105, 177, 235, .18) !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .55) !important;
}


/* HEADER */

.modal-header,
.modal-card-header,
.dialog-header {
    background: #081a2b !important;
    color: #f0f7ff !important;

    border-bottom:
        1px solid rgba(105, 177, 235, .13) !important;
}


.modal-header h1,
.modal-header h2,
.modal-header h3,
.modal-card-header h1,
.modal-card-header h2,
.modal-card-header h3 {
    color: #f0f7ff !important;
}


.modal-header p,
.modal-card-header p {
    color: #91a8bd !important;
}


/* X CHIUSURA */

.modal-close,
.close-modal,
.modal-header button {
    background: rgba(91, 145, 194, .10) !important;
    color: #9eb8cf !important;

    border:
        1px solid rgba(105, 177, 235, .10) !important;
}


.modal-close:hover,
.close-modal:hover,
.modal-header button:hover {
    background: rgba(91, 145, 194, .18) !important;
    color: #ffffff !important;
}


/* BODY */

.modal-body,
.modal-card-body,
.dialog-body {
    background: #04111d !important;
    color: #dce9f5 !important;
}


/* LABEL */

.modal-content label,
.modal-card label,
.dialog-content label {
    color: #afc1d2 !important;
}


/* INPUT */

.modal-content input:not([type="checkbox"]):not([type="radio"]),
.modal-content select,
.modal-content textarea,
.modal-card input:not([type="checkbox"]):not([type="radio"]),
.modal-card select,
.modal-card textarea {
    background: #092033 !important;

    color: #edf6ff !important;

    border:
        1px solid #214762 !important;

    box-shadow: none !important;
}


.modal-content input:focus,
.modal-content select:focus,
.modal-content textarea:focus,
.modal-card input:focus,
.modal-card select:focus,
.modal-card textarea:focus {
    border-color: #278ee8 !important;

    box-shadow:
        0 0 0 2px rgba(39, 142, 232, .12) !important;

    outline: none !important;
}


/* ============================================================
   PASSWORD ACTION BUTTONS
   Mostra / Generatore / Copia
   ============================================================ */

.modal-content .password-toggle,
.modal-content .generator-button,
.modal-content .copy-button,
.modal-content button[type="button"]:not(.modal-close):not(.close-modal),
.modal-card .password-toggle,
.modal-card .generator-button,
.modal-card .copy-button {
    background: #0c2438 !important;

    color: #c8d8e6 !important;

    border:
        1px solid #294b65 !important;

    box-shadow: none !important;
}


.modal-content .password-toggle:hover,
.modal-content .generator-button:hover,
.modal-content .copy-button:hover,
.modal-content button[type="button"]:not(.modal-close):not(.close-modal):hover {
    background: #12314a !important;

    color: #ffffff !important;

    border-color: #3673a1 !important;
}


/* ============================================================
   ADVANCED OPTIONS
   ============================================================ */

.modal-content details,
.modal-card details {
    background: rgba(5, 20, 33, .50) !important;

    border:
        1px solid #29465c !important;

    color: #b6c8d8 !important;
}


.modal-content summary,
.modal-card summary {
    color: #9eb4c8 !important;
}


.modal-content details[open] summary,
.modal-card details[open] summary {
    color: #dceafa !important;
}


/* ============================================================
   FAVORITE NEL FORM
   ============================================================ */

.modal-content input[type="checkbox"],
.modal-card input[type="checkbox"] {
    accent-color: #238cf0 !important;
}


.modal-content input[type="checkbox"] + label,
.modal-card input[type="checkbox"] + label {
    color: #b9cad9 !important;
}


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

.modal-footer,
.modal-card-footer,
.dialog-footer {
    background: #081a2b !important;

    border-top:
        1px solid rgba(105, 177, 235, .13) !important;
}


/* ANNULLA */

.modal-footer .secondary,
.modal-footer .btn-secondary,
.modal-footer button[type="button"],
.modal-card-footer .secondary,
.modal-card-footer .btn-secondary {
    background: #0d2234 !important;

    color: #c8d8e6 !important;

    border:
        1px solid #29465c !important;
}


/* SALVA */

.modal-footer .primary,
.modal-footer .btn-primary,
.modal-footer button[type="submit"],
.modal-card-footer .primary,
.modal-card-footer .btn-primary,
.modal-card-footer button[type="submit"] {
    background:
        linear-gradient(
            180deg,
            #2799f4,
            #087de1
        ) !important;

    color: #ffffff !important;

    border:
        1px solid #299df8 !important;

    box-shadow:
        0 5px 16px rgba(0, 126, 231, .22) !important;
}


/* ============================================================
   MODAL BACKDROP
   ============================================================ */

.modal,
.modal-overlay,
.dialog-overlay {
    backdrop-filter: blur(4px) !important;
}


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

@media (max-width: 760px) {

    .modal-content,
    .modal-card,
    .dialog-content {
        border-radius: 16px !important;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

}


/* ============================================================
   END MODAL DARK THEME
   ============================================================ */


/* ============================================================
   PASSWORD MANAGER UI FIX V12
   ============================================================ */


/* ------------------------------------------------------------
   FAVORITE: EMPTY / FILLED
   ------------------------------------------------------------ */

.favorite-button::before {
    -webkit-mask-image:
        url("/static/icons/star.svg") !important;

    mask-image:
        url("/static/icons/star.svg") !important;
}


.favorite-button:not(.selected) {
    color: #647d95 !important;
    filter: none !important;
}


.favorite-button.selected {
    color: #ffc94d !important;

    filter:
        drop-shadow(
            0 0 5px rgba(255, 201, 77, .32)
        ) !important;
}


.favorite-button.selected::before {
    -webkit-mask-image:
        url("/static/icons/star-filled.svg") !important;

    mask-image:
        url("/static/icons/star-filled.svg") !important;
}


/* ------------------------------------------------------------
   ENTRY MODAL - STRUTTURA REALE
   ------------------------------------------------------------ */

.modal-backdrop {
    backdrop-filter: blur(4px) !important;
}


.entry-modal {
    background: #04111d !important;

    color: #eaf3fb !important;

    border:
        1px solid rgba(105, 177, 235, .18) !important;

    box-shadow:
        0 24px 80px rgba(0, 0, 0, .58) !important;

    overflow: hidden !important;
}


/* HEADER */

.entry-modal > .modal-header {
    background: #081a2b !important;

    border-bottom:
        1px solid rgba(105, 177, 235, .14) !important;
}


.entry-modal > .modal-header h2 {
    color: #f2f7fc !important;
}


.entry-modal > .modal-header p {
    color: #8fa9bf !important;
}


.entry-modal .modal-close {
    background: #0d263b !important;

    color: #8fc8f4 !important;

    border:
        1px solid rgba(101, 176, 235, .15) !important;
}


.entry-modal .modal-close:hover {
    background: #15344e !important;
    color: #ffffff !important;
}


/* FORM */

.entry-modal .entry-form {
    background: #04111d !important;
    color: #dce9f5 !important;
}


.entry-modal .form-group label {
    color: #afc1d2 !important;
}


.entry-modal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.entry-modal select,
.entry-modal textarea {
    background: #092033 !important;

    color: #edf6ff !important;

    border:
        1px solid #214762 !important;

    box-shadow: none !important;
}


.entry-modal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
.entry-modal select:focus,
.entry-modal textarea:focus {
    border-color: #278ee8 !important;

    box-shadow:
        0 0 0 2px rgba(39, 142, 232, .12) !important;

    outline: none !important;
}


/* ------------------------------------------------------------
   MOSTRA
   ------------------------------------------------------------ */

.entry-modal #form-password-toggle {
    background: #0d263b !important;

    color: #83c6ff !important;

    border:
        1px solid #294b65 !important;

    box-shadow: none !important;
}


.entry-modal #form-password-toggle:hover {
    background: #15344e !important;
    color: #ffffff !important;
}


/* ------------------------------------------------------------
   GENERATORE / COPIA
   ------------------------------------------------------------ */

.entry-modal .generator-button {
    background: #0d263b !important;

    color: #b9d0e3 !important;

    border:
        1px solid #294b65 !important;

    box-shadow: none !important;
}


.entry-modal .generator-button:hover {
    background: #15344e !important;

    color: #ffffff !important;

    border-color: #39749f !important;
}


/* ------------------------------------------------------------
   GENERATOR PANEL
   ------------------------------------------------------------ */

.entry-modal .password-generator {
    background: #071827 !important;

    border:
        1px solid #24465f !important;

    color: #c8d9e7 !important;
}


.entry-modal .generator-header strong {
    color: #edf6ff !important;
}


.entry-modal .generator-presets button {
    background: #0d263b !important;

    color: #b9d0e3 !important;

    border:
        1px solid #294b65 !important;
}


.entry-modal .generator-presets button:hover {
    background: #15344e !important;
    color: #ffffff !important;
}


/* ------------------------------------------------------------
   ADVANCED
   ------------------------------------------------------------ */

.entry-modal details {
    background: #061522 !important;

    border:
        1px solid #29465c !important;

    color: #a8bdcf !important;
}


.entry-modal summary {
    color: #8fa8bd !important;
}


.entry-modal details[open] summary {
    color: #d9e8f5 !important;
}


/* ------------------------------------------------------------
   CHECKBOX / FAVORITE FORM
   ------------------------------------------------------------ */

.entry-modal input[type="checkbox"] {
    accent-color: #238cf0 !important;
}


/* ------------------------------------------------------------
   FOOTER REALE
   Il footer è dentro entry-form
   ------------------------------------------------------------ */

.entry-modal .form-actions {
    background: #081a2b !important;

    border-top:
        1px solid rgba(105, 177, 235, .14) !important;
}


.entry-modal .form-actions .secondary-button,
.entry-modal .form-actions button[type="button"] {
    background: #0d263b !important;

    color: #c6d7e5 !important;

    border:
        1px solid #294b65 !important;

    box-shadow: none !important;
}


.entry-modal .form-actions .secondary-button:hover,
.entry-modal .form-actions button[type="button"]:hover {
    background: #15344e !important;

    color: #ffffff !important;
}


.entry-modal .form-actions .primary-button,
.entry-modal .form-actions button[type="submit"] {
    background:
        linear-gradient(
            180deg,
            #2799f4,
            #087de1
        ) !important;

    color: #ffffff !important;

    border:
        1px solid #299df8 !important;

    box-shadow:
        0 5px 16px rgba(0, 126, 231, .22) !important;
}


/* ------------------------------------------------------------
   VAULT DETAIL ACTIONS - rimuove emoji visive
   ------------------------------------------------------------ */

.entry-details .secondary-button,
.entry-details .danger-button {
    box-shadow: none !important;
}


/* ============================================================
   END V12
   ============================================================ */


/* ============================================================
   UI FIX V13
   Search field + Entry modal footer
   ============================================================ */


/* ------------------------------------------------------------
   VAULT SEARCH
   ------------------------------------------------------------ */

.search {
    width: 100% !important;
}


.search-box {
    position: relative !important;

    display: flex !important;

    align-items: center !important;

    width: 100% !important;
}


/* lente */

.search-box > span:first-child {
    position: absolute !important;

    left: 15px !important;
    top: 50% !important;

    transform: translateY(-50%) !important;

    width: 18px !important;
    height: 18px !important;

    display: flex !important;

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

    color: #6f91ab !important;

    pointer-events: none !important;

    z-index: 2 !important;
}


/* input */

.search-box input[type="search"] {
    width: 100% !important;

    padding-left: 46px !important;
    padding-right: 44px !important;

    box-sizing: border-box !important;

    text-indent: 0 !important;
}


.search-box input[type="search"]::placeholder {
    color: #7893aa !important;

    opacity: 1 !important;
}


/* X pulizia ricerca */

.search-box .clear-search {
    position: absolute !important;

    right: 14px !important;
    top: 50% !important;

    transform: translateY(-50%) !important;

    z-index: 3 !important;
}


/* ------------------------------------------------------------
   ENTRY MODAL
   forza TUTTA la parte bassa in dark
   ------------------------------------------------------------ */

.entry-modal,
.entry-modal .entry-form {
    background: #04111d !important;
}


/*
   Copriamo i diversi nomi usati negli stylesheet/template
   senza modificare la struttura HTML.
*/

.entry-modal .form-actions,
.entry-modal .modal-actions,
.entry-modal .entry-actions,
.entry-modal .entry-form-actions,
.entry-modal .modal-footer,
.entry-modal .form-footer,
.entry-modal footer {
    background: #081a2b !important;

    border-top:
        1px solid rgba(105, 177, 235, .14) !important;

    color: #dce9f5 !important;
}


/* ultimo contenitore del form: elimina eventuale bianco ereditato */

.entry-modal .entry-form > div:last-child {
    border-color:
        rgba(105, 177, 235, .14) !important;
}


/* pulsante Annulla */

.entry-modal .form-actions .secondary-button,
.entry-modal .modal-actions .secondary-button,
.entry-modal .entry-actions .secondary-button,
.entry-modal .entry-form-actions .secondary-button,
.entry-modal .modal-footer .secondary-button,
.entry-modal .form-footer .secondary-button {
    background: #0d263b !important;

    color: #c7d8e6 !important;

    border:
        1px solid #294b65 !important;

    box-shadow: none !important;
}


/* Salva */

.entry-modal .form-actions .primary-button,
.entry-modal .modal-actions .primary-button,
.entry-modal .entry-actions .primary-button,
.entry-modal .entry-form-actions .primary-button,
.entry-modal .modal-footer .primary-button,
.entry-modal .form-footer .primary-button {
    background:
        linear-gradient(
            180deg,
            #2799f4,
            #087de1
        ) !important;

    color: #ffffff !important;

    border:
        1px solid #299df8 !important;
}


/* ------------------------------------------------------------
   MOBILE SEARCH
   ------------------------------------------------------------ */

@media (max-width: 760px) {

    .search-box input[type="search"] {
        padding-left: 44px !important;
        padding-right: 42px !important;
    }

    .search-box > span:first-child {
        left: 14px !important;
    }

}


/* ============================================================
   END V13
   ============================================================ */


/* ============================================================
   DARK THEME GLOBAL CLEANUP V14
   ============================================================ */

:root {
    --pm-bg: #04111d;
    --pm-bg-main: #061421;
    --pm-panel: #071b2b;
    --pm-panel-2: #0b2235;
    --pm-panel-3: #0d293f;

    --pm-border: #24465f;
    --pm-border-soft: rgba(105, 177, 235, .13);

    --pm-text: #edf6ff;
    --pm-text-soft: #b7c9d8;
    --pm-text-muted: #829bb0;

    --pm-primary: #178cf0;
    --pm-primary-hover: #2a9cff;

    --pm-danger-bg: #28151a;
    --pm-danger-bg-hover: #381a20;
    --pm-danger-border: #71313a;
    --pm-danger-text: #ff858f;
}


/* ============================================================
   ACTION ICON SYSTEM
   ============================================================ */

.pm-action-icon {
    display: inline-block !important;

    width: 16px !important;
    height: 16px !important;

    flex: 0 0 16px !important;

    margin-right: 7px !important;

    vertical-align: -3px !important;

    background-color: currentColor !important;

    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;

    -webkit-mask-position: center !important;
    mask-position: center !important;

    -webkit-mask-size: contain !important;
    mask-size: contain !important;
}


.pm-icon-edit {
    -webkit-mask-image: url("/static/icons/edit.svg") !important;
    mask-image: url("/static/icons/edit.svg") !important;
}

.pm-icon-trash {
    -webkit-mask-image: url("/static/icons/trash.svg") !important;
    mask-image: url("/static/icons/trash.svg") !important;
}

.pm-icon-copy {
    -webkit-mask-image: url("/static/icons/copy.svg") !important;
    mask-image: url("/static/icons/copy.svg") !important;
}

.pm-icon-key {
    -webkit-mask-image: url("/static/icons/key.svg") !important;
    mask-image: url("/static/icons/key.svg") !important;
}

.pm-icon-generator {
    -webkit-mask-image: url("/static/icons/generator.svg") !important;
    mask-image: url("/static/icons/generator.svg") !important;
}

.pm-icon-check {
    -webkit-mask-image: url("/static/icons/check.svg") !important;
    mask-image: url("/static/icons/check.svg") !important;
}

.pm-icon-ban {
    -webkit-mask-image: url("/static/icons/ban.svg") !important;
    mask-image: url("/static/icons/ban.svg") !important;
}


/* ============================================================
   GENERIC SECONDARY BUTTONS
   ============================================================ */

.secondary-button,
.mini-button,
.generator-button,
.btn-secondary,
button.secondary,
a.secondary-button {
    background: var(--pm-panel-2) !important;

    color: #bcd3e5 !important;

    border:
        1px solid var(--pm-border) !important;

    box-shadow: none !important;
}


.secondary-button:hover,
.mini-button:hover,
.generator-button:hover,
.btn-secondary:hover,
button.secondary:hover,
a.secondary-button:hover {
    background: var(--pm-panel-3) !important;

    color: #ffffff !important;

    border-color: #39749f !important;
}


/* ============================================================
   PRIMARY BUTTONS
   ============================================================ */

.primary-button,
.btn-primary,
button.primary,
button[type="submit"].primary-button {
    background:
        linear-gradient(
            180deg,
            #2799f4,
            #087de1
        ) !important;

    color: #ffffff !important;

    border:
        1px solid #299df8 !important;

    box-shadow:
        0 5px 16px rgba(0, 126, 231, .20) !important;
}


.primary-button:hover,
.btn-primary:hover,
button.primary:hover {
    background:
        linear-gradient(
            180deg,
            #36a4f8,
            #1388e7
        ) !important;

    color: #ffffff !important;
}


/* ============================================================
   DANGER BUTTONS
   ============================================================ */

.danger-button,
.btn-danger,
button.danger {
    background:
        var(--pm-danger-bg) !important;

    color:
        var(--pm-danger-text) !important;

    border:
        1px solid var(--pm-danger-border) !important;

    box-shadow:
        none !important;
}


.danger-button:hover,
.btn-danger:hover,
button.danger:hover {
    background:
        var(--pm-danger-bg-hover) !important;

    color:
        #ff9da5 !important;

    border-color:
        #93424c !important;
}


/* ============================================================
   VAULT DETAIL ACTIONS
   ============================================================ */

.entry-details .secondary-button {
    background: #0c2438 !important;

    color: #c0d4e5 !important;

    border:
        1px solid #294b65 !important;
}


.entry-details .danger-button {
    background: var(--pm-danger-bg) !important;

    color: var(--pm-danger-text) !important;

    border:
        1px solid var(--pm-danger-border) !important;
}


/* ============================================================
   MODAL COMPLETAMENTE DARK
   ============================================================ */

.entry-modal {
    background:
        var(--pm-bg) !important;
}


.entry-modal .entry-form {
    background:
        var(--pm-bg) !important;
}


.entry-modal .modal-header {
    background:
        #081a2b !important;
}


/*
   Il footer reale può avere nomi diversi.
   Copriamo anche l'ultimo blocco del form.
*/

.entry-modal .form-actions,
.entry-modal .modal-actions,
.entry-modal .entry-actions,
.entry-modal .entry-form-actions,
.entry-modal .modal-footer,
.entry-modal .form-footer {
    background:
        #081a2b !important;

    color:
        var(--pm-text) !important;

    border-top:
        1px solid var(--pm-border-soft) !important;
}


/* fallback per il footer attuale */

.entry-modal .entry-form > *:last-child {
    background-color:
        #081a2b !important;
}


/* CANCEL */

.entry-modal .secondary-button,
.entry-modal button[type="button"]:not(.modal-close):not(.generator-button) {
    background:
        var(--pm-panel-2) !important;

    color:
        #c6d9e8 !important;

    border:
        1px solid var(--pm-border) !important;
}


/* non alterare checkbox/radio naturalmente */

.entry-modal button[type="submit"] {
    background:
        linear-gradient(
            180deg,
            #2799f4,
            #087de1
        ) !important;

    color: #ffffff !important;

    border:
        1px solid #299df8 !important;
}


/* password tools */

.entry-modal #form-password-toggle,
.entry-modal .generator-button,
.entry-modal .generator-presets button {
    background:
        var(--pm-panel-2) !important;

    color:
        #bcd3e5 !important;

    border:
        1px solid var(--pm-border) !important;

    box-shadow:
        none !important;
}


.entry-modal #form-password-toggle:hover,
.entry-modal .generator-button:hover,
.entry-modal .generator-presets button:hover {
    background:
        var(--pm-panel-3) !important;

    color:
        #ffffff !important;
}


/* ============================================================
   USER ACTIONS
   ============================================================ */

.user-actions button {
    background:
        transparent !important;

    color:
        #b9d0e3 !important;

    border-color:
        rgba(105, 177, 235, .10) !important;
}


.user-actions button:hover {
    background:
        #0d293f !important;

    color:
        #ffffff !important;
}


/*
   pulsanti distruttivi / disattivazione
*/

.user-actions .danger-button,
.user-actions button.danger {
    color:
        var(--pm-danger-text) !important;

    background:
        var(--pm-danger-bg) !important;
}


/* ============================================================
   CATEGORY ACTIONS
   ============================================================ */

.category-actions button {
    background:
        transparent !important;

    color:
        #b9d0e3 !important;

    border-color:
        rgba(105, 177, 235, .10) !important;
}


.category-actions button:hover {
    background:
        #0d293f !important;

    color:
        #ffffff !important;
}


.category-actions .danger-button {
    color:
        var(--pm-danger-text) !important;

    background:
        var(--pm-danger-bg) !important;
}


/* ============================================================
   FORM INPUTS / SELECT / TEXTAREA
   ============================================================ */

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
    background:
        #092033 !important;

    color:
        var(--pm-text) !important;

    border:
        1px solid #214762 !important;

    box-shadow:
        none !important;
}


input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
select:focus,
textarea:focus {
    border-color:
        #278ee8 !important;

    outline:
        none !important;

    box-shadow:
        0 0 0 2px rgba(39, 142, 232, .11) !important;
}


input::placeholder,
textarea::placeholder {
    color:
        #718ca3 !important;

    opacity:
        1 !important;
}


/* ============================================================
   DROPDOWNS / OPTION
   ============================================================ */

select option {
    background:
        #092033 !important;

    color:
        #edf6ff !important;
}


/* ============================================================
   DETAILS / ACCORDION
   ============================================================ */

details {
    background:
        #061522 !important;

    border-color:
        #29465c !important;
}


summary {
    color:
        #9db2c5 !important;
}


/* ============================================================
   TABLES
   ============================================================ */

table,
thead,
tbody,
tr,
td,
th {
    border-color:
        rgba(105, 177, 235, .10) !important;
}


thead th {
    background:
        #081a2b !important;

    color:
        #9fb7cb !important;
}


tbody tr {
    background:
        #071724 !important;
}


tbody tr:hover {
    background:
        #0a2031 !important;
}


/* ============================================================
   GENERIC PANELS
   ============================================================ */

.settings-panel,
.settings-section,
.audit-panel,
.users-list,
.category-list {
    color:
        var(--pm-text-soft);
}


/* ============================================================
   REMOVE PURE WHITE SURFACES FROM APP BUTTONS
   ============================================================ */

button,
.button {
    -webkit-tap-highlight-color:
        transparent;
}


/*
   Non cambiamo il testo bianco.
   Cambiamo soltanto eventuali fondi bianchi rimasti
   sulle classi operative note.
*/

.secondary-button,
.danger-button,
.mini-button,
.generator-button,
.user-actions button,
.category-actions button,
.entry-details button {
    box-shadow:
        none !important;
}


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

@media (max-width: 760px) {

    .quick-actions,
    .user-actions,
    .category-actions {
        background:
            #071724 !important;
    }

    .quick-actions button,
    .user-actions button,
    .category-actions button {
        background:
            transparent !important;
    }

}


/* ============================================================
   END DARK CLEANUP V14
   ============================================================ */


/* ============================================================
   LIVE SEARCH V2
   ============================================================ */

.vault-card[hidden] {
    display: none !important;
}


.vault-live-search-empty {
    margin-top: 14px !important;

    padding: 24px !important;

    text-align: center !important;

    background: #071b2b !important;

    border:
        1px solid rgba(105, 177, 235, .14) !important;

    border-radius: 12px !important;

    color: #b7c9d8 !important;
}


.vault-live-search-empty strong {
    display: block !important;

    margin-bottom: 5px !important;

    color: #edf6ff !important;

    font-size: 15px !important;
}


.vault-live-search-empty span {
    color: #829bb0 !important;

    font-size: 13px !important;
}


/* ============================================================
   END LIVE SEARCH V2
   ============================================================ */

/* ============================================================
   LIVE SEARCH V3
   ============================================================ */

#vault-live-search-empty,
.vault-live-search-empty {
    display: none !important;
}

.vault-card[hidden] {
    display: none !important;
}

/* ============================================================
   END LIVE SEARCH V3
   ============================================================ */

/* ============================================================
   SEARCH V4
   ============================================================ */

.vault-card[hidden] {
    display: none !important;
}

#vault-live-search-empty,
.vault-live-search-empty,
.search-empty,
.search-empty-state {
    display: none !important;
}

/* ============================================================
   END SEARCH V4
   ============================================================ */


/* ============================================================
   DARK THEME CONSISTENCY V19
   ============================================================ */


/* ------------------------------------------------------------
   USER AVATAR
   niente più quadrati bianchi
   ------------------------------------------------------------ */

.user-avatar {
    background:
        linear-gradient(
            145deg,
            #103657,
            #09243a
        ) !important;

    color:
        #79c4ff !important;

    border:
        1px solid rgba(91, 174, 247, .22) !important;

    box-shadow:
        none !important;
}


/* avatar eventualmente usato in altri blocchi utenti */

.user-card .avatar,
.users-list .avatar {
    background:
        linear-gradient(
            145deg,
            #103657,
            #09243a
        ) !important;

    color:
        #79c4ff !important;

    border:
        1px solid rgba(91, 174, 247, .22) !important;
}


/* ------------------------------------------------------------
   USER MODAL
   ------------------------------------------------------------ */

.modal-backdrop .user-modal,
.modal-backdrop .modal-dialog,
.modal-backdrop .modal-panel,
.modal-backdrop .modal-card {
    background:
        #04111d !important;

    color:
        #edf6ff !important;

    border:
        1px solid rgba(105,177,235,.17) !important;

    box-shadow:
        0 24px 80px rgba(0,0,0,.58) !important;
}


/* Header modale */

.modal-backdrop .modal-header {
    background:
        #081a2b !important;

    color:
        #edf6ff !important;

    border-bottom:
        1px solid rgba(105,177,235,.13) !important;
}


.modal-backdrop .modal-header h1,
.modal-backdrop .modal-header h2,
.modal-backdrop .modal-header h3 {
    color:
        #edf6ff !important;
}


.modal-backdrop .modal-header p {
    color:
        #91a9bd !important;
}


/* ------------------------------------------------------------
   FOOTER MODALI
   Copriamo tutte le strutture attualmente usate
   ------------------------------------------------------------ */

.modal-backdrop .form-actions,
.modal-backdrop .modal-actions,
.modal-backdrop .modal-footer,
.modal-backdrop .form-footer,
.modal-backdrop form > .form-actions,
.modal-backdrop form > .modal-actions,
.modal-backdrop form > .modal-footer {
    background:
        #081a2b !important;

    color:
        #edf6ff !important;

    border-top:
        1px solid rgba(105,177,235,.13) !important;

    box-shadow:
        none !important;
}


/*
   Alcune vecchie modali hanno il footer come ultimo blocco
   del form senza classe sufficientemente specifica.
*/

.modal-backdrop form > div:last-child.form-actions,
.modal-backdrop form > div:last-child.modal-actions {
    background:
        #081a2b !important;
}


/* ------------------------------------------------------------
   ANNULLA
   ------------------------------------------------------------ */

.modal-backdrop .form-actions .secondary-button,
.modal-backdrop .modal-actions .secondary-button,
.modal-backdrop .modal-footer .secondary-button,
.modal-backdrop .form-footer .secondary-button,
.modal-backdrop .form-actions button[type="button"],
.modal-backdrop .modal-actions button[type="button"] {
    background:
        #0b2539 !important;

    color:
        #c5d7e6 !important;

    border:
        1px solid #294b65 !important;

    box-shadow:
        none !important;
}


.modal-backdrop .form-actions .secondary-button:hover,
.modal-backdrop .modal-actions .secondary-button:hover,
.modal-backdrop .modal-footer .secondary-button:hover {
    background:
        #11334c !important;

    color:
        #ffffff !important;

    border-color:
        #39749f !important;
}


/* ------------------------------------------------------------
   SALVA
   ------------------------------------------------------------ */

.modal-backdrop .form-actions .primary-button,
.modal-backdrop .modal-actions .primary-button,
.modal-backdrop .modal-footer .primary-button,
.modal-backdrop .form-footer .primary-button,
.modal-backdrop .form-actions button[type="submit"],
.modal-backdrop .modal-actions button[type="submit"] {
    background:
        linear-gradient(
            180deg,
            #2799f4,
            #087de1
        ) !important;

    color:
        #ffffff !important;

    border:
        1px solid #299df8 !important;

    box-shadow:
        0 5px 16px rgba(0,126,231,.20) !important;
}


/* ------------------------------------------------------------
   EMPTY STATE / NESSUN RISULTATO
   Per ora SOLO correzione grafica.
   La logica ricerca la sistemiamo separatamente.
   ------------------------------------------------------------ */

.empty-state,
.search-empty,
.search-empty-state,
.no-results,
.no-result,
.vault-empty {
    background:
        #071b2b !important;

    color:
        #b8cad9 !important;

    border:
        1px solid rgba(105,177,235,.15) !important;

    box-shadow:
        none !important;
}


.empty-state h1,
.empty-state h2,
.empty-state h3,
.search-empty h1,
.search-empty h2,
.search-empty h3,
.no-results h1,
.no-results h2,
.no-results h3 {
    color:
        #edf6ff !important;
}


.empty-state p,
.search-empty p,
.search-empty-state p,
.no-results p,
.no-result p {
    color:
        #91a8bc !important;
}


/* icona empty-state */

.empty-icon,
.empty-state .empty-icon {
    background:
        transparent !important;

    color:
        #72bdff !important;

    box-shadow:
        none !important;
}


/* ------------------------------------------------------------
   USER CARDS
   ------------------------------------------------------------ */

.user-card {
    background:
        #071b2b !important;

    border-color:
        rgba(105,177,235,.16) !important;
}


.user-card:hover {
    border-color:
        rgba(74,166,238,.30) !important;

    background:
        #082033 !important;
}


/* ------------------------------------------------------------
   MODAL INPUTS
   ------------------------------------------------------------ */

.modal-backdrop input:not([type="checkbox"]):not([type="radio"]),
.modal-backdrop select,
.modal-backdrop textarea {
    background:
        #092033 !important;

    color:
        #edf6ff !important;

    border:
        1px solid #214762 !important;

    box-shadow:
        none !important;
}


.modal-backdrop label {
    color:
        #b7c8d7 !important;
}


/* ------------------------------------------------------------
   CLOSE BUTTON
   ------------------------------------------------------------ */

.modal-backdrop .modal-close,
.modal-backdrop .close-modal {
    background:
        #0d263b !important;

    color:
        #9fc5e2 !important;

    border:
        1px solid rgba(105,177,235,.15) !important;
}


.modal-backdrop .modal-close:hover,
.modal-backdrop .close-modal:hover {
    background:
        #15344e !important;

    color:
        #ffffff !important;
}


/* ============================================================
   END DARK THEME V19
   ============================================================ */

/* ============================================================
   LIVE NO RESULTS - DARK THEME V20
   ============================================================ */

.live-no-results {
    background: #071b2b !important;

    color: #b8cad9 !important;

    border:
        1px solid rgba(105, 177, 235, .15) !important;

    box-shadow:
        none !important;

    border-radius:
        12px !important;
}


.live-no-results .icon {
    color:
        #72bdff !important;

    background:
        transparent !important;
}


.live-no-results h3 {
    color:
        #edf6ff !important;
}


.live-no-results p {
    color:
        #91a8bc !important;
}


/* ============================================================
   END LIVE NO RESULTS V20
   ============================================================ */


/* ============================================================
   VAULT DETAIL POPUP V21
   ============================================================ */


/*
 * I dettagli originali rimangono nel DOM come sorgente dati,
 * ma non devono più aprirsi dentro la card.
 */

.vault-card > .entry-details,
.vault-card .entry-details {
    display: none !important;
}


/* Backdrop */

#detail-modal {
    position: fixed !important;
    inset: 0 !important;

    z-index: 5000 !important;

    display: none;

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

    padding: 24px;

    background:
        rgba(1, 10, 18, .76) !important;

    backdrop-filter:
        blur(7px);

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


#detail-modal.open {
    display: flex !important;
}


/* Finestra */

.detail-modal-panel {
    width:
        min(720px, 100%);

    max-height:
        calc(100vh - 48px);

    overflow: hidden;

    display: flex;
    flex-direction: column;

    background:
        #04131f;

    color:
        #edf6ff;

    border:
        1px solid rgba(
            93,
            174,
            235,
            .20
        );

    border-radius:
        15px;

    box-shadow:
        0 28px 90px
        rgba(0, 0, 0, .58);

    animation:
        pmDetailPopupIn
        .16s ease-out;
}


@keyframes pmDetailPopupIn {

    from {
        opacity: 0;
        transform:
            translateY(8px)
            scale(.985);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}


/* Header */

.detail-modal-header {
    min-height: 78px;

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

    gap: 20px;

    padding:
        16px 20px;

    background:
        #081d2e;

    border-bottom:
        1px solid
        rgba(105,177,235,.14);
}


.detail-modal-heading {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 13px;
}


.detail-modal-icon {
    width: 42px;
    height: 42px;

    flex:
        0 0 42px;

    border-radius:
        11px;

    background:
        #0c3556;

    border:
        1px solid
        rgba(86,181,255,.28);

    position: relative;
}


/* piccolo lucchetto professionale */

.detail-modal-icon::before {
    content: "";

    position: absolute;

    width: 13px;
    height: 11px;

    left: 13px;
    top: 18px;

    border:
        2px solid #79c9ff;

    border-radius:
        3px;
}


.detail-modal-icon::after {
    content: "";

    position: absolute;

    width: 9px;
    height: 8px;

    left: 15px;
    top: 11px;

    border:
        2px solid #79c9ff;

    border-bottom: 0;

    border-radius:
        7px 7px 0 0;
}


.detail-modal-header h2 {
    margin: 0;

    font-size: 20px;
    line-height: 1.2;

    color:
        #f3f8fc;
}


.detail-modal-header p {
    margin:
        4px 0 0;

    font-size: 13px;

    color:
        #7f9bb0;
}


/* close */

.detail-modal-header .modal-close {
    width: 40px;
    height: 40px;

    flex:
        0 0 40px;

    display: grid;
    place-items: center;

    padding: 0;

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

    cursor: pointer;

    background:
        #0c263b !important;

    color:
        #a8c7dc !important;

    border:
        1px solid
        rgba(105,177,235,.17) !important;

    border-radius:
        10px;
}


.detail-modal-header .modal-close:hover {
    background:
        #133550 !important;

    color:
        #fff !important;
}


/* Corpo */

.detail-modal-body {
    overflow-y: auto;

    padding:
        6px 20px 18px;

    background:
        #04131f;
}


/*
 * Il contenuto copiato deriva da .entry-details.
 * Lo mostriamo soltanto dentro la modale.
 */

.detail-modal-body .detail-row {
    min-height: 66px;

    display: grid;

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

    align-items: center;

    gap: 18px;

    padding:
        12px 2px;

    border-bottom:
        1px solid
        rgba(105,177,235,.10);
}


.detail-modal-body .detail-label {
    font-size: 12px;

    font-weight: 700;

    letter-spacing:
        .055em;

    text-transform:
        uppercase;

    color:
        #718da3;
}


.detail-modal-body .detail-value {
    min-width: 0;

    display: flex;
    align-items: center;

    justify-content:
        space-between;

    gap: 12px;

    color:
        #dce9f3;
}


.detail-modal-body .password-row {
    justify-content:
        flex-start;
}


.detail-modal-body .password-display {
    min-width: 0;

    flex: 1;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;

    color:
        #dce9f3;

    overflow-wrap:
        anywhere;
}


.detail-modal-body .break-text,
.detail-modal-body .notes-text {
    overflow-wrap:
        anywhere;
}


.detail-modal-body .detail-notes {
    align-items: start;
}


.detail-modal-body .detail-notes
.notes-text {
    padding-top: 1px;

    white-space:
        pre-wrap;

    line-height:
        1.55;

    color:
        #c6d6e2;
}


/* Pulsanti piccoli */

.detail-modal-body .mini-button {
    min-height: 34px;

    padding:
        6px 12px;

    background:
        #09273d !important;

    color:
        #78c5ff !important;

    border:
        1px solid
        #194a6d !important;

    border-radius:
        8px;

    box-shadow:
        none !important;
}


.detail-modal-body .mini-button:hover {
    background:
        #103652 !important;

    border-color:
        #286d9c !important;

    color:
        #a7dcff !important;
}


/* Modifica / elimina */

.detail-modal-body .detail-actions {
    display: flex;

    justify-content:
        flex-end;

    gap: 10px;

    padding-top:
        18px;
}


.detail-modal-body
.detail-actions
.secondary-button {
    background:
        #0b293f !important;

    color:
        #c6d8e6 !important;

    border:
        1px solid
        #28506d !important;

    box-shadow:
        none !important;
}


.detail-modal-body
.detail-actions
.danger-button {
    background:
        rgba(183, 43, 58, .13) !important;

    color:
        #ff8f9a !important;

    border:
        1px solid
        rgba(232, 73, 89, .38) !important;

    box-shadow:
        none !important;
}


/*
 * Titolo e freccia indicano chiaramente
 * che sono cliccabili.
 */

.vault-card .entry-main,
.vault-card .expand-button {
    cursor: pointer;
}


.vault-card .entry-title-area h2 {
    transition:
        color .15s ease;
}


.vault-card .entry-main:hover
.entry-title-area h2 {
    color:
        #75c5ff;
}


/* Mobile */

@media (max-width: 700px) {

    #detail-modal {
        padding: 12px;
        align-items: flex-end;
    }


    .detail-modal-panel {
        width: 100%;

        max-height:
            calc(100dvh - 24px);

        border-radius:
            15px 15px 10px 10px;
    }


    .detail-modal-header {
        min-height: 70px;

        padding:
            14px 15px;
    }


    .detail-modal-body {
        padding:
            4px 15px 16px;
    }


    .detail-modal-body .detail-row {
        grid-template-columns:
            1fr;

        gap: 7px;

        min-height: 0;

        padding:
            13px 0;
    }


    .detail-modal-body .detail-value {
        width: 100%;
    }


    .detail-modal-body
    .detail-actions {
        display: grid;

        grid-template-columns:
            1fr 1fr;
    }


    .detail-modal-body
    .detail-actions button {
        width: 100%;
    }

}


/* ============================================================
   END VAULT DETAIL POPUP V21
   ============================================================ */


/* ============================================================
   PASSWORD GENERATOR - DARK PROFESSIONAL V22
   ============================================================ */


/* ------------------------------------------------------------
   GENERATOR CONTAINER
   ------------------------------------------------------------ */

.entry-modal .password-generator {
    margin-top: 16px !important;

    padding: 18px !important;

    background:
        #071b2b !important;

    color:
        #dce9f5 !important;

    border:
        1px solid rgba(105,177,235,.18) !important;

    border-radius:
        12px !important;

    box-shadow:
        none !important;
}


/* ------------------------------------------------------------
   HEADER
   ------------------------------------------------------------ */

.entry-modal .generator-header {
    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    gap: 16px !important;

    margin-bottom:
        18px !important;
}


.entry-modal .generator-header strong {
    color:
        #edf6ff !important;

    font-size:
        15px !important;

    font-weight:
        700 !important;
}


.entry-modal .generator-header #length-value {
    color:
        #409cff !important;

    font-weight:
        700 !important;
}


/* ------------------------------------------------------------
   RANGE / SLIDER
   ------------------------------------------------------------ */

.entry-modal .length-control {
    margin:
        4px 4px 20px !important;
}


.entry-modal #password-length {
    width:
        100% !important;

    height:
        6px !important;

    padding:
        0 !important;

    background:
        transparent !important;

    border:
        0 !important;

    box-shadow:
        none !important;

    accent-color:
        #1f91f2 !important;

    cursor:
        pointer !important;
}


.entry-modal #password-length::-webkit-slider-runnable-track {
    height:
        6px !important;

    background:
        #19364d !important;

    border-radius:
        999px !important;
}


.entry-modal #password-length::-webkit-slider-thumb {
    -webkit-appearance:
        none !important;

    width:
        18px !important;

    height:
        18px !important;

    margin-top:
        -6px !important;

    border-radius:
        50% !important;

    background:
        #1e91f2 !important;

    border:
        2px solid #72c2ff !important;

    box-shadow:
        0 0 0 3px
        rgba(30,145,242,.12) !important;
}


.entry-modal #password-length::-moz-range-track {
    height:
        6px !important;

    background:
        #19364d !important;

    border-radius:
        999px !important;
}


.entry-modal #password-length::-moz-range-thumb {
    width:
        18px !important;

    height:
        18px !important;

    border-radius:
        50% !important;

    background:
        #1e91f2 !important;

    border:
        2px solid #72c2ff !important;
}


/* ------------------------------------------------------------
   OPTION GRID
   ------------------------------------------------------------ */

.entry-modal .generator-options {
    display: grid !important;

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

    gap:
        10px !important;

    margin-bottom:
        14px !important;
}


/* ultima opzione larga */

.entry-modal .generator-options > label:last-child {
    grid-column:
        1 / -1 !important;
}


/* ------------------------------------------------------------
   OPTION CARD
   ------------------------------------------------------------ */

.entry-modal .generator-options label {
    min-height:
        48px !important;

    display:
        flex !important;

    align-items:
        center !important;

    gap:
        11px !important;

    padding:
        10px 13px !important;

    margin:
        0 !important;

    background:
        #092237 !important;

    color:
        #c6d7e5 !important;

    border:
        1px solid #24465f !important;

    border-radius:
        9px !important;

    box-shadow:
        none !important;

    cursor:
        pointer !important;

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


.entry-modal .generator-options label:hover {
    background:
        #0d2b43 !important;

    border-color:
        #326888 !important;
}


/* ------------------------------------------------------------
   CHECKBOX
   ------------------------------------------------------------ */

.entry-modal .generator-options input[type="checkbox"] {
    appearance:
        none !important;

    -webkit-appearance:
        none !important;

    width:
        19px !important;

    height:
        19px !important;

    min-width:
        19px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    position:
        relative !important;

    background:
        #071725 !important;

    border:
        1px solid #3b617c !important;

    border-radius:
        5px !important;

    box-shadow:
        none !important;

    cursor:
        pointer !important;
}


.entry-modal .generator-options input[type="checkbox"]:checked {
    background:
        #1d91f2 !important;

    border-color:
        #50adfa !important;
}


.entry-modal .generator-options input[type="checkbox"]:checked::after {
    content:
        "" !important;

    position:
        absolute !important;

    left:
        5px !important;

    top:
        2px !important;

    width:
        5px !important;

    height:
        10px !important;

    border:
        solid white !important;

    border-width:
        0 2px 2px 0 !important;

    transform:
        rotate(45deg) !important;
}


/* ------------------------------------------------------------
   OPTION TEXT
   ------------------------------------------------------------ */

.entry-modal .generator-options label > span {
    color:
        #c6d7e5 !important;

    line-height:
        1.15 !important;
}


.entry-modal .generator-options small {
    display:
        block !important;

    margin-top:
        3px !important;

    color:
        #7892a8 !important;

    font-size:
        11px !important;
}


/* ------------------------------------------------------------
   PRESET BUTTONS
   ------------------------------------------------------------ */

.entry-modal .generator-presets {
    display:
        grid !important;

    grid-template-columns:
        repeat(4, 1fr) !important;

    gap:
        10px !important;

    margin-top:
        12px !important;
}


.entry-modal .generator-presets button {
    min-height:
        42px !important;

    padding:
        8px 12px !important;

    background:
        #092237 !important;

    color:
        #bfd3e4 !important;

    border:
        1px solid #24465f !important;

    border-radius:
        8px !important;

    box-shadow:
        none !important;
}


.entry-modal .generator-presets button:hover {
    background:
        #0d2b43 !important;

    color:
        #ffffff !important;

    border-color:
        #36769e !important;
}


/* ------------------------------------------------------------
   GENERATOR BUTTONS ABOVE PANEL
   ------------------------------------------------------------ */

.entry-modal .password-tool-buttons {
    display:
        flex !important;

    align-items:
        center !important;

    gap:
        8px !important;
}


.entry-modal .password-tool-buttons .generator-button {
    min-height:
        38px !important;

    padding:
        8px 12px !important;

    background:
        #092237 !important;

    color:
        #bfd3e4 !important;

    border:
        1px solid #24465f !important;

    border-radius:
        8px !important;
}


/* ------------------------------------------------------------
   SCROLL / FOOTER SPACE
   ------------------------------------------------------------ */

.entry-modal .entry-form {
    overflow-y:
        auto !important;

    max-height:
        calc(100vh - 150px) !important;
}


.entry-modal .password-generator.open {
    margin-bottom:
        14px !important;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 700px) {

    .entry-modal .password-generator {
        padding:
            14px !important;
    }


    .entry-modal .generator-options {
        grid-template-columns:
            1fr !important;
    }


    .entry-modal .generator-options > label:last-child {
        grid-column:
            auto !important;
    }


    .entry-modal .generator-presets {
        grid-template-columns:
            repeat(2, 1fr) !important;
    }


    .entry-modal .password-tool-buttons {
        width:
            100% !important;
    }


    .entry-modal .password-tool-buttons
    .generator-button {
        flex:
            1 !important;
    }

}


/* ============================================================
   END PASSWORD GENERATOR V22
   ============================================================ */


/* ============================================================
   VAULT ACTION BUTTONS + FIXED ALIGNMENT V23
   ============================================================ */


/* ------------------------------------------------------------
   CARD LAYOUT DESKTOP
   ------------------------------------------------------------ */

@media (min-width: 901px) {

    .vault-card {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            auto !important;

        align-items:
            stretch !important;
    }


    .vault-card-head {
        min-width:
            0 !important;

        display: grid !important;

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

        align-items:
            center !important;

        gap:
            12px !important;
    }


    .entry-main {
        min-width:
            0 !important;
    }


    .entry-title-area {
        min-width:
            0 !important;
    }


    .entry-title-area h2,
    .entry-subtitle {
        overflow:
            hidden !important;

        text-overflow:
            ellipsis !important;

        white-space:
            nowrap !important;
    }


    .expand-button {
        width:
            36px !important;

        min-width:
            36px !important;

        justify-self:
            end !important;
    }


    /* area azioni sempre identica */

    .quick-actions {
        display:
            grid !important;

        grid-auto-flow:
            column !important;

        grid-auto-columns:
            170px !important;

        align-items:
            stretch !important;

        min-height:
            100% !important;

        background:
            #061725 !important;

        border-left:
            1px solid rgba(105,177,235,.10) !important;
    }


    .quick-actions button {
        width:
            170px !important;

        min-width:
            170px !important;

        height:
            100% !important;

        min-height:
            64px !important;

        display:
            inline-flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        gap:
            8px !important;

        padding:
            0 14px !important;

        margin:
            0 !important;

        background:
            #0a2235 !important;

        color:
            #bcd2e3 !important;

        border:
            0 !important;

        border-left:
            1px solid rgba(105,177,235,.10) !important;

        border-radius:
            0 !important;

        box-shadow:
            none !important;

        white-space:
            nowrap !important;

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


    .quick-actions button:first-child {
        border-left:
            0 !important;
    }


    .quick-actions button:hover {
        background:
            #10314a !important;

        color:
            #ffffff !important;
    }


    .quick-actions .copy-password {
        color:
            #79c8ff !important;
    }


    .quick-actions .copy-password:hover {
        color:
            #b4e2ff !important;
    }

}


/* ------------------------------------------------------------
   ACTION ICONS
   ------------------------------------------------------------ */

.quick-actions button span {
    width:
        16px !important;

    height:
        16px !important;

    min-width:
        16px !important;

    margin:
        0 !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    color:
        currentColor !important;
}


/* ------------------------------------------------------------
   OPTIONAL URL ACTION
   se assente, le altre colonne restano identiche
   ------------------------------------------------------------ */

.quick-actions button:last-child {
    border-right:
        0 !important;
}


/* ------------------------------------------------------------
   MOBILE / TABLET
   ------------------------------------------------------------ */

@media (max-width: 900px) {

    .vault-card {
        display:
            block !important;
    }


    .quick-actions {
        display:
            grid !important;

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

        width:
            100% !important;

        background:
            #061725 !important;

        border-left:
            0 !important;

        border-top:
            1px solid rgba(105,177,235,.10) !important;
    }


    .quick-actions button {
        width:
            100% !important;

        min-width:
            0 !important;

        min-height:
            48px !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        gap:
            7px !important;

        background:
            #0a2235 !important;

        color:
            #bcd2e3 !important;

        border:
            0 !important;

        border-left:
            1px solid rgba(105,177,235,.10) !important;

        border-radius:
            0 !important;

        box-shadow:
            none !important;
    }


    .quick-actions button:first-child {
        border-left:
            0 !important;
    }

}


/* ------------------------------------------------------------
   SMALL MOBILE
   ------------------------------------------------------------ */

@media (max-width: 560px) {

    .quick-actions {
        grid-template-columns:
            1fr !important;
    }


    .quick-actions button {
        min-height:
            44px !important;

        border-left:
            0 !important;

        border-top:
            1px solid rgba(105,177,235,.08) !important;
    }


    .quick-actions button:first-child {
        border-top:
            0 !important;
    }

}


/* ============================================================
   END VAULT ACTION BUTTONS V23
   ============================================================ */


/* ============================================================
   VAULT ACTION BUTTON SIZE V24
   ============================================================ */

@media (min-width: 901px) {

    /*
     * Riduce la larghezza dell'area azioni
     * mantenendo tutte le colonne perfettamente uguali.
     */

    .quick-actions {
        grid-auto-columns:
            145px !important;

        min-height:
            54px !important;
    }


    .quick-actions button {
        width:
            145px !important;

        min-width:
            145px !important;

        min-height:
            54px !important;

        height:
            54px !important;

        padding:
            0 11px !important;

        font-size:
            15.5px !important;

        font-weight:
            600 !important;

        letter-spacing:
            .005em !important;

        gap:
            8px !important;
    }


    /*
     * Riduciamo anche leggermente l'altezza
     * complessiva della card.
     */

    .vault-card-head {
        min-height:
            54px !important;
    }


    /*
     * Icone un po' più leggibili rispetto
     * alla nuova dimensione del testo.
     */

    .quick-actions button span,
    .quick-actions button .pm-nav-symbol,
    .quick-actions button .pm-action-icon {
        width:
            17px !important;

        height:
            17px !important;

        min-width:
            17px !important;
    }

}


/* ------------------------------------------------------------
   TABLET
   ------------------------------------------------------------ */

@media (min-width: 561px) and (max-width: 900px) {

    .quick-actions button {
        min-height:
            48px !important;

        font-size:
            14.5px !important;

        font-weight:
            600 !important;
    }

}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 560px) {

    .quick-actions button {
        min-height:
            42px !important;

        font-size:
            14px !important;

        font-weight:
            600 !important;
    }

}


/* ============================================================
   END VAULT ACTION SIZE V24
   ============================================================ */


/* ============================================================
   MOBILE SEARCH BORDER FIX V25
   ============================================================ */

@media (max-width: 700px) {

    .search-box {
        background: transparent !important;

        border: 0 !important;

        outline: 0 !important;

        box-shadow: none !important;
    }


    .search-box input[type="search"] {
        -webkit-appearance: none !important;
        appearance: none !important;

        background: #092033 !important;

        color: #edf6ff !important;

        border:
            1px solid #214762 !important;

        outline:
            0 !important;

        box-shadow:
            none !important;

        -webkit-box-shadow:
            none !important;
    }


    .search-box input[type="search"]:focus,
    .search-box input[type="search"]:focus-visible {
        outline:
            0 !important;

        border-color:
            #278ee8 !important;

        box-shadow:
            0 0 0 2px rgba(39,142,232,.12) !important;

        -webkit-box-shadow:
            0 0 0 2px rgba(39,142,232,.12) !important;
    }


    /*
     * Safari / iOS può aggiungere decorazioni proprie
     * al campo search.
     */

    .search-box input[type="search"]::-webkit-search-decoration,
    .search-box input[type="search"]::-webkit-search-cancel-button,
    .search-box input[type="search"]::-webkit-search-results-button,
    .search-box input[type="search"]::-webkit-search-results-decoration {
        -webkit-appearance:
            none !important;

        appearance:
            none !important;
    }

}


/* ============================================================
   END MOBILE SEARCH BORDER FIX V25
   ============================================================ */


/* ============================================================
   MOBILE SEARCH CONTAINER FIX V26
   neutralizza il vecchio background chiaro di style.css
   ============================================================ */

@media (max-width: 760px) {

    /* FORM ESTERNO */
    form.search,
    .search {
        width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding: 0 !important;

        background: transparent !important;

        border: 0 !important;
        outline: 0 !important;

        box-shadow: none !important;
        -webkit-box-shadow: none !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }


    /* CONTENITORE INTERMEDIO */
    form.search .search-box,
    .search .search-box {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;

        border: 0 !important;
        outline: 0 !important;

        box-shadow: none !important;
        -webkit-box-shadow: none !important;
    }


    /* CAMPO REALE */
    form.search .search-box input[type="search"] {
        width: 100% !important;

        -webkit-appearance: none !important;
        appearance: none !important;

        background: #092033 !important;
        color: #edf6ff !important;

        border: 1px solid #214762 !important;
        border-radius: 9px !important;

        outline: none !important;

        box-shadow: none !important;
        -webkit-box-shadow: none !important;

        padding-left: 44px !important;
        padding-right: 42px !important;
    }


    form.search .search-box input[type="search"]:focus,
    form.search .search-box input[type="search"]:focus-visible {
        background: #092033 !important;

        border-color: #278ee8 !important;

        outline: none !important;

        box-shadow:
            0 0 0 2px rgba(39,142,232,.12) !important;

        -webkit-box-shadow:
            0 0 0 2px rgba(39,142,232,.12) !important;
    }


    /* nessun pseudo-elemento bianco */
    form.search::before,
    form.search::after,
    form.search .search-box::before,
    form.search .search-box::after {
        content: none !important;
        display: none !important;
    }

}


/* ============================================================
   END MOBILE SEARCH CONTAINER FIX V26
   ============================================================ */

/* ==========================================================
   PASSWORDLESS PASSKEY LOGIN
   ========================================================== */

.pm-passkey-primary {
    margin-bottom: 22px;
}

.pm-passkey-main {
    min-height: 58px;
    font-size: 1.05rem;
    font-weight: 700;
}

.pm-passkey-symbol {
    font-size: 1.25rem;
    margin-right: 8px;
}

.pm-passkey-hint {
    text-align: center;
    margin-top: 9px;
    font-size: .82rem;
    opacity: .68;
}

.pm-auth-separator {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 23px 0;
    font-size: .78rem;
    opacity: .62;
    text-align: center;
}

.pm-auth-separator::before,
.pm-auth-separator::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(150, 180, 210, .22);
}

.pm-auth-separator span {
    white-space: nowrap;
}

@media (max-width: 480px) {
    .pm-auth-separator span {
        white-space: normal;
    }
}

/* ==========================================================
   SETTINGS - SECURITY ACCOUNT LINK
   ========================================================== */

.pm-settings-security-link {
    display: flex;
    align-items: center;
    gap: 14px;

    width: 100%;
    box-sizing: border-box;

    margin-bottom: 16px;
    padding: 15px 17px;

    text-decoration: none;

    border: 1px solid rgba(86, 166, 255, .28);
    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            rgba(24, 105, 190, .15),
            rgba(4, 24, 42, .45)
        );

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

.pm-settings-security-link:hover {
    border-color: rgba(86, 166, 255, .55);
    background:
        linear-gradient(
            135deg,
            rgba(24, 105, 190, .24),
            rgba(4, 24, 42, .55)
        );
}

.pm-settings-security-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    border-radius: 11px;

    background: rgba(43, 142, 255, .16);

    font-size: 1.3rem;
}

.pm-settings-security-text {
    display: flex;
    flex-direction: column;
    gap: 3px;

    flex: 1;
    min-width: 0;
}

.pm-settings-security-text strong {
    color: #f3f7fb;
    font-size: .96rem;
}

.pm-settings-security-text small {
    color: rgba(210, 225, 240, .62);
    font-size: .78rem;
}

.pm-settings-security-arrow {
    color: #58aaff;
    font-size: 1.2rem;
    font-weight: 700;
}

@media (max-width: 640px) {

    .pm-settings-security-link {
        padding: 14px;
    }

}