/*
 * SOFON ID
 * Uživatelský VPN panel
 * Stage 3A.4
 */

.home-vpn-card {
    display: grid;
    gap: 1.25rem;
}

.home-vpn-card > h2 {
    margin: 0;
}

.vpn-empty {
    padding: 1.25rem;
    border: 1px dashed var(--border, #d8dee8);
    border-radius: 1rem;
    text-align: center;
}

.vpn-empty p {
    margin: 0;
}

.vpn-user-item {
    display: grid;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--border, #d8dee8);
    border-radius: 1rem;
    background:
        var(--surface, rgba(255, 255, 255, 0.72));
}

.vpn-user-item h3 {
    margin: 0;
}

.vpn-user-item dl {
    display: grid;
    grid-template-columns:
        minmax(8rem, 0.35fr)
        minmax(0, 1fr);
    gap: 0.65rem 1rem;
    margin: 0;
}

.vpn-user-item dt {
    font-weight: 700;
    color: var(--muted, #667085);
}

.vpn-user-item dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.vpn-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.vpn-actions button {
    margin: 0;
}

.vpn-actions button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

@media (max-width: 700px) {
    .vpn-user-item dl {
        grid-template-columns: 1fr;
        gap: 0.3rem;
    }

    .vpn-user-item dd {
        margin-bottom: 0.65rem;
    }

    .vpn-actions {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .vpn-actions button {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .vpn-actions {
        grid-template-columns: 1fr;
    }
}

/* SOFON_VPN_USER_STATUS_STAGE3A_07 */

.vpn-status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: fit-content;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.2;
}

.vpn-status-dot {
    width: 0.55rem;
    height: 0.55rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 0.2rem currentColor;
}

.vpn-status-active {
    color: #157347;
    background: rgba(25, 135, 84, 0.14);
}

.vpn-status-inactive {
    color: #b42318;
    background: rgba(180, 35, 24, 0.13);
}

[data-theme="dark"] .vpn-status-active,
html.dark .vpn-status-active,
body.dark .vpn-status-active {
    color: #75e0a7;
    background: rgba(117, 224, 167, 0.14);
}

[data-theme="dark"] .vpn-status-inactive,
html.dark .vpn-status-inactive,
body.dark .vpn-status-inactive {
    color: #fda29b;
    background: rgba(253, 162, 155, 0.14);
}

/* ==========================================================
   SOFON_VPN_USER_LAYOUT_STAGE3A_08
   ========================================================== */

.home-vpn-card{
    gap:1.5rem;
}

.home-vpn-card>h2{
    margin:0;
    display:flex;
    align-items:center;
    gap:.6rem;
}

.vpn-user-item{

    position:relative;

    padding:1.6rem;

    border-radius:1.2rem;

    border:1px solid
        rgba(120,140,180,.18);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.92),
            rgba(248,250,253,.88)
        );

    box-shadow:
        0 10px 28px
        rgba(15,23,42,.06);

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

.vpn-user-item:hover{

    transform:
        translateY(-2px);

    box-shadow:
        0 16px 36px
        rgba(15,23,42,.10);
}

.vpn-user-item h3{

    margin:0 0 1.2rem 0;

    font-size:1.28rem;

    font-weight:700;
}

.vpn-user-item dl{

    display:grid;

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

    gap:
        .95rem
        1.6rem;

    margin:0;
}

.vpn-user-item dt{

    display:flex;

    align-items:center;

    font-weight:700;

    color:var(--text-muted,#667085);
}

.vpn-user-item dd{

    margin:0;

    display:flex;

    align-items:center;

    min-height:2rem;

    font-weight:500;
}

.vpn-actions{

    margin-top:1.5rem;

    display:flex;

    flex-wrap:wrap;

    gap:.75rem;
}

.vpn-actions button{

    min-width:115px;

    border-radius:.85rem;

    font-weight:600;

    transition:
        transform .15s ease,
        opacity .15s ease;
}

.vpn-actions button:hover:not(:disabled){

    transform:
        translateY(-1px);
}

.vpn-actions button:disabled{

    opacity:.55;
}

@media (max-width:900px){

    .vpn-user-item dl{

        grid-template-columns:
            1fr;
    }

    .vpn-user-item dd{

        margin-bottom:.55rem;
    }

    .vpn-actions{

        display:grid;

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

    .vpn-actions button{

        width:100%;
        min-width:0;
    }

}

@media (max-width:520px){

    .vpn-actions{

        grid-template-columns:
            1fr;
    }

}

html.dark .vpn-user-item,
body.dark .vpn-user-item,
[data-theme="dark"] .vpn-user-item{

    background:
        linear-gradient(
            180deg,
            rgba(28,37,54,.95),
            rgba(22,30,45,.95)
        );

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

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.35);
}


/*
 * SOFON_VPN_ACTIONS_CSS_STAGE3B_02
 * Uživatelské akce, QR kód a modální okno.
 */

.vpn-user-actions-stage3b {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.vpn-user-actions-stage3b button {
    min-height: 42px;
}

.vpn-user-actions-stage3b button[aria-busy="true"] {
    cursor: progress;
    opacity: 0.72;
}

html.vpn-modal-open,
html.vpn-modal-open body {
    overflow: hidden;
}

.vpn-user-modal {
    align-items: center;
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 1.25rem;
    position: fixed;
    z-index: 10000;
}

.vpn-user-modal__backdrop {
    backdrop-filter: blur(10px);
    background:
        rgba(4, 12, 22, 0.72);
    inset: 0;
    position: absolute;
}

.vpn-user-modal__panel {
    background:
        var(
            --panel,
            var(--card, #ffffff)
        );
    border:
        1px solid
        var(
            --border,
            rgba(127, 127, 127, 0.22)
        );
    border-radius: 24px;
    box-shadow:
        0 28px 80px
        rgba(0, 0, 0, 0.34);
    max-height: min(760px, calc(100vh - 2.5rem));
    max-width: 720px;
    overflow: auto;
    position: relative;
    width: 100%;
    z-index: 1;
}

.vpn-user-modal__header {
    align-items: flex-start;
    border-bottom:
        1px solid
        var(
            --border,
            rgba(127, 127, 127, 0.18)
        );
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1.35rem 1.5rem;
}

.vpn-user-modal__header h2 {
    margin: 0.15rem 0 0;
}

.vpn-user-modal__eyebrow {
    color:
        var(--muted, #6b7280);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    margin: 0;
    text-transform: uppercase;
}

.vpn-user-modal__subtitle {
    color:
        var(--muted, #6b7280);
    margin:
        0.45rem 0 0;
}

.vpn-user-modal__close {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.5rem;
    height: 42px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    width: 42px;
}

.vpn-user-modal__body {
    padding: 1.5rem;
}

.vpn-user-qr {
    align-items: center;
    display: grid;
    gap: 1.5rem;
    grid-template-columns:
        minmax(260px, 300px)
        minmax(0, 1fr);
}

.vpn-user-qr__code {
    align-items: center;
    background: #ffffff;
    border-radius: 20px;
    box-shadow:
        inset 0 0 0 1px
        rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: center;
    min-height: 312px;
    padding: 16px;
}

.vpn-user-qr__code img,
.vpn-user-qr__code canvas {
    display: block;
    height: auto;
    max-width: 100%;
}

.vpn-user-qr__content {
    min-width: 0;
}

.vpn-user-qr__content > strong {
    display: block;
    font-size: 1.08rem;
    margin-bottom: 0.65rem;
}

.vpn-user-qr__content p {
    line-height: 1.6;
}

.vpn-user-qr__warning {
    background:
        rgba(245, 158, 11, 0.12);
    border:
        1px solid
        rgba(245, 158, 11, 0.28);
    border-radius: 14px;
    padding: 0.85rem 0.95rem;
}

@media (max-width: 700px) {
    .vpn-user-modal {
        align-items: flex-end;
        padding: 0;
    }

    .vpn-user-modal__panel {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        max-height: 92vh;
        max-width: none;
    }

    .vpn-user-qr {
        grid-template-columns: 1fr;
    }

    .vpn-user-qr__code {
        margin: 0 auto;
        max-width: 312px;
        width: 100%;
    }
}

@media (max-width: 520px) {
    .vpn-user-actions-stage3b {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .vpn-user-actions-stage3b button {
        width: 100%;
    }

    .vpn-user-modal__header,
    .vpn-user-modal__body {
        padding:
            1.1rem;
    }
}

@media (max-width: 380px) {
    .vpn-user-actions-stage3b {
        grid-template-columns: 1fr;
    }
}


/*
 * SOFON_VPN_ACTIONS_CSS_STAGE3B_03
 * Finální sada uživatelských VPN akcí.
 */

[data-vpn-action="copy"],
[data-vpn-action="open"],
[data-vpn-action="download"] {
    min-height: 42px;
}

[data-vpn-action][aria-busy="true"] {
    cursor: progress;
    opacity: 0.72;
}

@media (max-width: 520px) {
    .vpn-user-actions,
    .vpn-actions,
    .vpn-profile-actions {
        align-items: stretch;
    }

    [data-vpn-action="copy"],
    [data-vpn-action="open"],
    [data-vpn-action="download"] {
        flex: 1 1 100%;
    }
}


/*
 * SOFON_VPN_QR_CSS_STAGE3B_03A
 * QR modální okno uživatelského VPN profilu.
 */

html.vpn-qr-modal-open,
html.vpn-qr-modal-open body {
    overflow: hidden;
}

[data-vpn-action="qr"] {
    min-height: 42px;
}

.vpn-user-qr-modal {
    align-items: center;
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 1.25rem;
    position: fixed;
    z-index: 10000;
}

.vpn-user-qr-modal__backdrop {
    backdrop-filter: blur(10px);
    background:
        rgba(4, 12, 22, 0.72);
    inset: 0;
    position: absolute;
}

.vpn-user-qr-modal__panel {
    background:
        var(
            --panel,
            var(--card, #ffffff)
        );
    border:
        1px solid
        var(
            --border,
            rgba(127, 127, 127, 0.22)
        );
    border-radius: 24px;
    box-shadow:
        0 28px 80px
        rgba(0, 0, 0, 0.34);
    max-height:
        min(
            760px,
            calc(100vh - 2.5rem)
        );
    max-width: 720px;
    overflow: auto;
    position: relative;
    width: 100%;
    z-index: 1;
}

.vpn-user-qr-modal__header {
    align-items: flex-start;
    border-bottom:
        1px solid
        var(
            --border,
            rgba(127, 127, 127, 0.18)
        );
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1.35rem 1.5rem;
}

.vpn-user-qr-modal__header h2 {
    margin: 0.15rem 0 0;
}

.vpn-user-qr-modal__eyebrow {
    color:
        var(--muted, #6b7280);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    margin: 0;
    text-transform: uppercase;
}

.vpn-user-qr-modal__subtitle {
    color:
        var(--muted, #6b7280);
    margin: 0.45rem 0 0;
}

.vpn-user-qr-modal__close {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.5rem;
    height: 42px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    width: 42px;
}

.vpn-user-qr-modal__body {
    padding: 1.5rem;
}

.vpn-user-qr-view {
    align-items: center;
    display: grid;
    gap: 1.5rem;
    grid-template-columns:
        minmax(260px, 300px)
        minmax(0, 1fr);
}

.vpn-user-qr-view__code {
    align-items: center;
    background: #ffffff;
    border-radius: 20px;
    box-shadow:
        inset 0 0 0 1px
        rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: center;
    min-height: 312px;
    padding: 16px;
}

.vpn-user-qr-view__code img,
.vpn-user-qr-view__code canvas {
    display: block;
    height: auto;
    max-width: 100%;
}

.vpn-user-qr-view__content {
    min-width: 0;
}

.vpn-user-qr-view__content > strong {
    display: block;
    font-size: 1.08rem;
    margin-bottom: 0.65rem;
}

.vpn-user-qr-view__content p {
    line-height: 1.6;
}

.vpn-user-qr-view__warning {
    background:
        rgba(245, 158, 11, 0.12);
    border:
        1px solid
        rgba(245, 158, 11, 0.28);
    border-radius: 14px;
    padding: 0.85rem 0.95rem;
}

@media (max-width: 700px) {
    .vpn-user-qr-modal {
        align-items: flex-end;
        padding: 0;
    }

    .vpn-user-qr-modal__panel {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        max-height: 92vh;
        max-width: none;
    }

    .vpn-user-qr-view {
        grid-template-columns: 1fr;
    }

    .vpn-user-qr-view__code {
        margin: 0 auto;
        max-width: 312px;
        width: 100%;
    }
}

@media (max-width: 520px) {
    [data-vpn-action="qr"] {
        flex: 1 1 100%;
    }

    .vpn-user-qr-modal__header,
    .vpn-user-qr-modal__body {
        padding: 1.1rem;
    }
}
/*
 * SOFON_VPN_TRANSFER_CSS_STAGE3C_01B
 * Přenos dat za posledních 30 dní.
 */

.vpn-transfer-stat {
    display: grid;
    grid-template-columns:
        auto minmax(0, 1fr);
    align-items: center;
    gap: .85rem;
    padding: .9rem 1rem;
    border: 1px solid
        rgba(75, 140, 255, .2);
    border-radius: .9rem;
    background:
        linear-gradient(
            135deg,
            rgba(66, 201, 167, .09),
            rgba(75, 140, 255, .09)
        );
}

.vpn-transfer-stat__icon {
    display: grid;
    width: 2.45rem;
    height: 2.45rem;
    place-items: center;
    border-radius: .78rem;
    background:
        linear-gradient(
            135deg,
            rgba(66, 201, 167, .2),
            rgba(75, 140, 255, .2)
        );
    font-size: 1.15rem;
    font-weight: 900;
}

.vpn-transfer-stat__content {
    display: grid;
    min-width: 0;
    gap: .08rem;
}

.vpn-transfer-stat__label,
.vpn-transfer-stat__period {
    color:
        var(
            --page-muted,
            var(--muted, #667085)
        );
}

.vpn-transfer-stat__label {
    font-size: .74rem;
    font-weight: 750;
}

.vpn-transfer-stat__value {
    overflow: hidden;
    font-size: 1.32rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vpn-transfer-stat__period {
    font-size: .75rem;
}

.vpn-transfer-stat.is-loading {
    opacity: .68;
}

.vpn-transfer-stat.is-loading
.vpn-transfer-stat__value {
    animation:
        sofon-vpn-transfer-pulse
        1.3s ease-in-out infinite;
}

.vpn-transfer-stat.is-unavailable {
    border-color:
        rgba(209, 145, 43, .3);
    background:
        rgba(209, 145, 43, .08);
}

.vpn-transfer-stat.is-unavailable
.vpn-transfer-stat__value {
    font-size: .95rem;
}

@keyframes sofon-vpn-transfer-pulse {
    0%,
    100% {
        opacity: .5;
    }

    50% {
        opacity: 1;
    }
}

@media (max-width: 520px) {
    .vpn-transfer-stat {
        padding: .82rem;
    }

    .vpn-transfer-stat__value {
        font-size: 1.18rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vpn-transfer-stat.is-loading
    .vpn-transfer-stat__value {
        animation: none;
    }
}

/* SOFON_VPN_LIMIT_USER_CSS_STAGE3C_02B */
.vpn-usage {
    --vpn-usage-accent: #2aa876;
    --vpn-usage-soft: rgba(42, 168, 118, 0.12);
    display: grid;
    gap: 0.85rem;
    margin: 1.1rem 0;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--vpn-usage-accent) 28%, var(--border, rgba(127,127,127,.2)));
    border-radius: 16px;
    background: linear-gradient(135deg, var(--vpn-usage-soft), transparent 70%);
}

.vpn-usage[data-state="loading"],
.vpn-usage[data-state="unavailable"] {
    --vpn-usage-accent: #7c8795;
    --vpn-usage-soft: rgba(124, 135, 149, 0.10);
}
.vpn-usage[data-state="unlimited"] {
    --vpn-usage-accent: #3878d8;
    --vpn-usage-soft: rgba(56, 120, 216, 0.11);
}
.vpn-usage[data-state="warning"] {
    --vpn-usage-accent: #d88b16;
    --vpn-usage-soft: rgba(216, 139, 22, 0.13);
}
.vpn-usage[data-state="critical"] {
    --vpn-usage-accent: #d45b3e;
    --vpn-usage-soft: rgba(212, 91, 62, 0.13);
}
.vpn-usage[data-state="exceeded"] {
    --vpn-usage-accent: #bd3646;
    --vpn-usage-soft: rgba(189, 54, 70, 0.15);
}

.vpn-usage__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.vpn-usage__label {
    display: block;
    margin-bottom: .2rem;
    color: var(--muted, #6b7280);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.vpn-usage__summary {
    display: block;
    color: var(--text, #172033);
    font-size: 1.05rem;
}
.vpn-usage__badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.9rem;
    padding: .3rem .65rem;
    border: 1px solid color-mix(in srgb, var(--vpn-usage-accent) 38%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--vpn-usage-accent) 12%, transparent);
    color: var(--vpn-usage-accent);
    font-size: .75rem;
    font-weight: 800;
}
.vpn-usage__progress {
    overflow: hidden;
    height: .68rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vpn-usage-accent) 12%, rgba(127,127,127,.16));
    box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
}
.vpn-usage__progress[hidden] { display: none; }
.vpn-usage__progress-bar {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--vpn-usage-accent);
    transition: width .45s ease, background-color .25s ease;
}
.vpn-usage__details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
    margin: 0;
}
.vpn-usage__details > div {
    min-width: 0;
    padding: .65rem .7rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--panel, #fff) 78%, transparent);
}
.vpn-usage__details dt {
    margin: 0 0 .18rem;
    color: var(--muted, #6b7280);
    font-size: .72rem;
    font-weight: 700;
}
.vpn-usage__details dd {
    overflow-wrap: anywhere;
    margin: 0;
    color: var(--text, #172033);
    font-size: .88rem;
    font-weight: 750;
}
.vpn-usage__period {
    margin: 0;
    color: var(--muted, #6b7280);
    font-size: .76rem;
}
.vpn-usage[data-state="loading"] .vpn-usage__summary,
.vpn-usage[data-state="loading"] .vpn-usage__details dd {
    animation: vpn-usage-pulse 1.35s ease-in-out infinite;
}
@keyframes vpn-usage-pulse {
    0%, 100% { opacity: .55; }
    50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .vpn-usage__progress-bar { transition: none; }
    .vpn-usage[data-state="loading"] .vpn-usage__summary,
    .vpn-usage[data-state="loading"] .vpn-usage__details dd { animation: none; }
}
@media (max-width: 620px) {
    .vpn-usage__heading { align-items: stretch; flex-direction: column; }
    .vpn-usage__badge { align-self: flex-start; }
    .vpn-usage__details { grid-template-columns: 1fr; }
}