/* MosVPN presentation primitives. All values are sourced from tokens.css. */
.mosvpn-card,
.mosvpn-panel,
body.mosvpn-shell .block,
body.mosvpn-shell .card,
body.mosvpn-shell .ant-card {
    background: var(--mos-color-surface) !important;
    border: var(--mos-border-width) solid var(--mos-color-border) !important;
    border-radius: var(--mos-radius-card) !important;
    box-shadow: var(--mos-shadow-xs) !important;
}

.mosvpn-panel {
    border-radius: var(--mos-radius-panel) !important;
    overflow: hidden;
}

.mosvpn-card__header,
.mosvpn-panel__header,
body.mosvpn-shell .mosvpn-card > .block-header,
body.mosvpn-shell .mosvpn-card > .ant-card-head {
    align-items: center;
    background: transparent !important;
    border-bottom: var(--mos-border-width) solid var(--mos-color-border) !important;
    display: flex;
    gap: var(--mos-space-4);
    justify-content: space-between;
    min-height: auto;
    padding: var(--mos-space-4) var(--mos-space-5) !important;
}

.mosvpn-card__heading,
.mosvpn-panel__heading {
    min-width: 0;
}

.mosvpn-card__title,
.mosvpn-panel__title,
.mosvpn-card__header h2,
.mosvpn-card__header h3,
.mosvpn-panel__header h2,
.mosvpn-panel__header h3 {
    color: var(--mos-color-text) !important;
    font-size: var(--mos-font-size-h2);
    font-weight: var(--mos-font-weight-bold);
    letter-spacing: var(--mos-letter-spacing-heading);
    line-height: var(--mos-line-height-heading);
    margin: 0;
    text-transform: none !important;
}

.mosvpn-card__description,
.mosvpn-panel__description {
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-small);
    line-height: var(--mos-line-height-body);
    margin: var(--mos-space-1) 0 0;
}

.mosvpn-card__body,
.mosvpn-panel__body,
body.mosvpn-shell .mosvpn-card > .block-content,
body.mosvpn-shell .mosvpn-card > .ant-card-body {
    padding: var(--mos-space-5) !important;
}

.mosvpn-ui-stat-card {
    background: var(--mos-color-surface);
    border: var(--mos-border-width) solid var(--mos-color-border);
    border-radius: var(--mos-radius-card);
    box-shadow: var(--mos-shadow-xs);
    display: flex;
    flex-direction: column;
    min-height: var(--mos-stat-card-min-height);
    overflow: hidden;
    padding: var(--mos-space-4);
    position: relative;
}

.mosvpn-ui-stat-card__top {
    align-items: flex-start;
    display: flex;
    gap: var(--mos-space-3);
    justify-content: space-between;
}

.mosvpn-ui-stat-card__label {
    color: var(--mos-color-text-muted);
    display: block;
    font-size: var(--mos-font-size-small);
    font-weight: var(--mos-font-weight-semibold);
    line-height: var(--mos-line-height-tight);
}

.mosvpn-ui-stat-card__icon {
    align-items: center;
    background: var(--mos-color-surface-muted);
    border-radius: var(--mos-radius-control);
    color: var(--mos-color-text-subtle);
    display: inline-flex;
    flex: 0 0 var(--mos-space-8);
    height: var(--mos-space-8);
    justify-content: center;
    width: var(--mos-space-8);
}

.mosvpn-ui-stat-card__value {
    color: var(--mos-color-text);
    display: block;
    font-size: var(--mos-stat-value-size);
    font-variant-numeric: var(--mos-tabular-nums);
    font-weight: var(--mos-font-weight-bold);
    letter-spacing: var(--mos-letter-spacing-display);
    line-height: var(--mos-line-height-display);
    margin-top: var(--mos-space-3);
}

.mosvpn-ui-stat-card__empty {
    color: var(--mos-color-text-subtle);
    display: block;
    font-size: var(--mos-font-size-caption);
    line-height: var(--mos-line-height-tight);
    margin-top: var(--mos-space-1);
}

.mosvpn-ui-stat-card__delta {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
    font-size: var(--mos-font-size-caption);
    font-variant-numeric: var(--mos-tabular-nums);
    font-weight: var(--mos-font-weight-semibold);
    gap: var(--mos-space-1);
    line-height: var(--mos-line-height-tight);
    margin-top: var(--mos-space-2);
}

.mosvpn-ui-stat-card__delta.is-positive { color: var(--mos-color-success-700); }
.mosvpn-ui-stat-card__delta.is-negative { color: var(--mos-color-danger-700); }
.mosvpn-ui-stat-card__delta.is-neutral { color: var(--mos-color-text-subtle); }

.mosvpn-ui-stat-card__delta-change {
    align-items: center;
    display: inline-flex;
    gap: var(--mos-space-1);
    white-space: nowrap;
}

.mosvpn-ui-stat-card__delta-change .mosvpn-lucide {
    flex: 0 0 auto;
}

.mosvpn-ui-stat-card__delta-label {
    color: var(--mos-color-text-subtle);
    flex: 1 1 100%;
    font-weight: var(--mos-font-weight-medium);
    margin-top: var(--mos-space-1);
}

.mosvpn-ui-stat-card__sparkline {
    color: var(--mos-color-red-500);
    height: var(--mos-sparkline-height);
    margin-top: auto;
    overflow: visible;
    padding-top: var(--mos-space-2);
    width: 100%;
}

.mosvpn-ui-stat-card__sparkline path {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: var(--mos-icon-stroke);
}

.mosvpn-ui-stat-card.is-success .mosvpn-ui-stat-card__sparkline,
.mosvpn-ui-stat-card.is-success .mosvpn-ui-stat-card__icon { color: var(--mos-color-success-500); }
.mosvpn-ui-stat-card.is-warning .mosvpn-ui-stat-card__sparkline,
.mosvpn-ui-stat-card.is-warning .mosvpn-ui-stat-card__icon { color: var(--mos-color-warning-500); }
.mosvpn-ui-stat-card.is-info .mosvpn-ui-stat-card__sparkline,
.mosvpn-ui-stat-card.is-info .mosvpn-ui-stat-card__icon { color: var(--mos-color-info-500); }
.mosvpn-ui-stat-card.is-danger .mosvpn-ui-stat-card__sparkline,
.mosvpn-ui-stat-card.is-danger .mosvpn-ui-stat-card__icon { color: var(--mos-color-danger-500); }

.mosvpn-skeleton {
    animation: mosvpn-skeleton-pulse var(--mos-skeleton-duration) ease-in-out infinite;
    background: linear-gradient(90deg, var(--mos-color-surface-muted), var(--mos-color-border), var(--mos-color-surface-muted));
    background-size: var(--mos-skeleton-background-size);
    border-radius: var(--mos-radius-control);
    display: inline-block;
    min-height: var(--mos-space-4);
    width: 100%;
}

.mosvpn-skeleton--value {
    height: var(--mos-space-8);
    margin-top: var(--mos-space-3);
    max-width: var(--mos-skeleton-value-width);
}

@keyframes mosvpn-skeleton-pulse {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

[data-mosvpn-icon="loader"] svg {
    animation: mosvpn-icon-spin var(--mos-skeleton-duration) linear infinite;
}

@keyframes mosvpn-icon-spin {
    to { transform: rotate(360deg); }
}

.mosvpn-button,
body.mosvpn-shell .mosvpn-btn,
body.mosvpn-shell .btn,
body.mosvpn-shell .ant-btn {
    align-items: center;
    border-radius: var(--mos-radius-control) !important;
    box-shadow: none !important;
    display: inline-flex;
    font-size: var(--mos-font-size-small);
    font-weight: var(--mos-font-weight-semibold);
    gap: var(--mos-space-2);
    justify-content: center;
    min-height: var(--mos-control-height-md);
    padding: 0 var(--mos-space-4);
    transition: background-color var(--mos-motion-fast), border-color var(--mos-motion-fast), color var(--mos-motion-fast), opacity var(--mos-motion-fast);
}

.mosvpn-button--sm { min-height: var(--mos-control-height-xs); padding: 0 var(--mos-space-3); }
.mosvpn-button--md { min-height: var(--mos-control-height-md); }
.mosvpn-button--lg { min-height: var(--mos-control-height-lg); padding: 0 var(--mos-space-6); }

.mosvpn-button--primary,
body.mosvpn-shell .mosvpn-btn-primary,
body.mosvpn-shell .btn-primary,
body.mosvpn-shell .ant-btn-primary {
    background: var(--mos-color-red-500) !important;
    border: var(--mos-border-width) solid var(--mos-color-red-500) !important;
    color: var(--mos-color-neutral-0) !important;
}

.mosvpn-button--primary:hover,
body.mosvpn-shell .mosvpn-btn-primary:hover,
body.mosvpn-shell .btn-primary:hover,
body.mosvpn-shell .ant-btn-primary:hover {
    background: var(--mos-color-red-600) !important;
    border-color: var(--mos-color-red-600) !important;
}

.mosvpn-button--secondary,
body.mosvpn-shell .mosvpn-btn-light,
body.mosvpn-shell .mosvpn-btn-ghost,
body.mosvpn-shell .btn-secondary,
body.mosvpn-shell .ant-btn:not(.ant-btn-primary) {
    background: var(--mos-color-surface) !important;
    border: var(--mos-border-width) solid var(--mos-color-border) !important;
    color: var(--mos-color-text) !important;
}

.mosvpn-button--secondary:hover,
body.mosvpn-shell .mosvpn-btn-light:hover,
body.mosvpn-shell .mosvpn-btn-ghost:hover,
body.mosvpn-shell .btn-secondary:hover {
    background: var(--mos-color-surface-muted) !important;
    border-color: var(--mos-color-border-strong) !important;
}

.mosvpn-button--ghost {
    background: transparent !important;
    border: var(--mos-border-width) solid transparent !important;
    color: var(--mos-color-text-muted) !important;
}

.mosvpn-button--ghost:hover { background: var(--mos-color-surface-muted) !important; color: var(--mos-color-text) !important; }

.mosvpn-button--danger,
body.mosvpn-shell .mosvpn-btn-danger,
body.mosvpn-shell .btn-danger {
    background: var(--mos-color-danger-50) !important;
    border: var(--mos-border-width) solid var(--mos-color-danger-border) !important;
    color: var(--mos-color-danger-700) !important;
}

.mosvpn-button--danger:hover,
body.mosvpn-shell .mosvpn-btn-danger:hover,
body.mosvpn-shell .btn-danger:hover {
    background: var(--mos-color-danger-border) !important;
}

.mosvpn-button:disabled,
.mosvpn-button[aria-disabled="true"],
.mosvpn-button[aria-busy="true"],
body.mosvpn-shell button:disabled {
    cursor: not-allowed !important;
    opacity: var(--mos-disabled-opacity);
}

.mosvpn-badge,
body.mosvpn-shell .badge {
    align-items: center;
    background: var(--mos-color-surface-muted);
    border: var(--mos-border-width) solid var(--mos-color-border);
    border-radius: var(--mos-radius-pill) !important;
    color: var(--mos-color-text-muted);
    display: inline-flex;
    font-size: var(--mos-font-size-caption);
    font-weight: var(--mos-font-weight-bold);
    gap: var(--mos-space-1);
    line-height: var(--mos-line-height-tight);
    min-height: var(--mos-space-6);
    padding: 0 var(--mos-space-2);
    text-transform: none;
}

.mosvpn-badge--success,
.mosvpn-badge-active { background: var(--mos-color-success-50) !important; border-color: var(--mos-color-success-border) !important; color: var(--mos-color-success-700) !important; }
.mosvpn-badge--warning,
.mosvpn-badge-pending { background: var(--mos-color-warning-50) !important; border-color: var(--mos-color-warning-border) !important; color: var(--mos-color-warning-700) !important; }
.mosvpn-badge--danger,
.mosvpn-badge-disabled { background: var(--mos-color-danger-50) !important; border-color: var(--mos-color-danger-border) !important; color: var(--mos-color-danger-700) !important; }
.mosvpn-badge--info { background: var(--mos-color-info-50) !important; border-color: var(--mos-color-info-border) !important; color: var(--mos-color-info-700) !important; }

.mosvpn-alert,
body.mosvpn-shell .alert {
    align-items: flex-start;
    background: var(--mos-color-info-50) !important;
    border: var(--mos-border-width) solid var(--mos-color-info-border) !important;
    border-left: var(--mos-active-indicator-width) solid var(--mos-color-info-500) !important;
    border-radius: var(--mos-radius-control) !important;
    box-shadow: none !important;
    color: var(--mos-color-info-700) !important;
    display: flex;
    font-size: var(--mos-font-size-small);
    gap: var(--mos-space-3);
    padding: var(--mos-space-3) var(--mos-space-4) !important;
}

.mosvpn-alert--success,
body.mosvpn-shell .alert-success { background: var(--mos-color-success-50) !important; border-color: var(--mos-color-success-border) !important; border-left-color: var(--mos-color-success-500) !important; color: var(--mos-color-success-700) !important; }
.mosvpn-alert--warning,
body.mosvpn-shell .alert-warning { background: var(--mos-color-warning-50) !important; border-color: var(--mos-color-warning-border) !important; border-left-color: var(--mos-color-warning-500) !important; color: var(--mos-color-warning-700) !important; }
.mosvpn-alert--danger,
body.mosvpn-shell .alert-danger { background: var(--mos-color-danger-50) !important; border-color: var(--mos-color-danger-border) !important; border-left-color: var(--mos-color-danger-500) !important; color: var(--mos-color-danger-700) !important; }

.mosvpn-alert__dismiss {
    background: transparent;
    border: 0;
    color: currentColor;
    flex: 0 0 var(--mos-space-6);
    height: var(--mos-space-6);
    margin-left: auto;
    padding: 0;
}

.mosvpn-data-table,
body.mosvpn-shell .table,
body.mosvpn-shell .ant-table table {
    border-collapse: separate;
    border-spacing: 0;
    color: var(--mos-color-text-muted);
    font-size: var(--mos-font-size-small);
    width: 100%;
}

.mosvpn-data-table thead th,
body.mosvpn-shell .table thead th,
body.mosvpn-shell .ant-table-thead > tr > th {
    background: var(--mos-color-surface-muted) !important;
    border-bottom: var(--mos-border-width) solid var(--mos-color-border) !important;
    color: var(--mos-color-text-muted) !important;
    font-size: var(--mos-font-size-caption);
    font-weight: var(--mos-font-weight-bold);
    letter-spacing: var(--mos-letter-spacing-caption);
    position: sticky;
    text-transform: none !important;
    top: 0;
    z-index: 1;
}

.mosvpn-data-table tbody tr:nth-child(even) td,
body.mosvpn-shell .table tbody tr:nth-child(even) td,
body.mosvpn-shell .ant-table-tbody > tr:nth-child(even) > td {
    background: color-mix(in srgb, var(--mos-color-surface-muted) 42%, transparent);
}

.mosvpn-data-table tbody tr:hover td,
body.mosvpn-shell .table-hover tbody tr:hover td,
body.mosvpn-shell .ant-table-tbody > tr:hover > td {
    background: var(--mos-color-red-50) !important;
}

.mosvpn-data-table td,
.mosvpn-data-table th {
    border-color: var(--mos-color-border) !important;
    padding: var(--mos-space-3) var(--mos-space-4);
}

.mosvpn-pagination,
body.mosvpn-shell .ant-pagination {
    align-items: center;
    display: flex;
    gap: var(--mos-space-2);
    justify-content: flex-end;
    margin: var(--mos-space-4) 0 0;
}

.mosvpn-empty-state {
    align-items: center;
    color: var(--mos-color-text-muted);
    display: flex;
    flex-direction: column;
    gap: var(--mos-space-3);
    justify-content: center;
    min-height: var(--mos-empty-state-min-height);
    padding: var(--mos-space-8) var(--mos-space-6);
    text-align: center;
}

.mosvpn-empty-state__icon {
    align-items: center;
    background: var(--mos-color-surface-muted);
    border-radius: var(--mos-radius-card);
    color: var(--mos-color-text-subtle);
    display: inline-flex;
    height: var(--mos-space-12);
    justify-content: center;
    width: var(--mos-space-12);
}

.mosvpn-empty-state h3 { color: var(--mos-color-text); font-size: var(--mos-font-size-body); margin: 0; text-transform: none !important; }
.mosvpn-empty-state p { color: var(--mos-color-text-muted); font-size: var(--mos-font-size-small); margin: 0; max-width: var(--mos-empty-copy-max-width); }

.mosvpn-modal,
body.mosvpn-shell .modal-content,
body.mosvpn-shell .ant-modal-content {
    background: var(--mos-color-surface) !important;
    border: var(--mos-border-width) solid var(--mos-color-border) !important;
    border-radius: var(--mos-radius-panel) !important;
    box-shadow: var(--mos-shadow-md) !important;
}

.mosvpn-tabs,
body.mosvpn-shell .ant-tabs-nav {
    border-bottom: var(--mos-border-width) solid var(--mos-color-border);
    display: flex;
    gap: var(--mos-space-4);
}

.mosvpn-tabs__item,
body.mosvpn-shell .ant-tabs-tab {
    color: var(--mos-color-text-muted) !important;
    font-size: var(--mos-font-size-small);
    padding: var(--mos-space-3) var(--mos-space-1) !important;
}

.mosvpn-tabs__item.is-active,
body.mosvpn-shell .ant-tabs-tab-active {
    color: var(--mos-color-red-700) !important;
    font-weight: var(--mos-font-weight-semibold);
}

.mosvpn-toast,
body.mosvpn-shell .ant-message-notice-content {
    background: var(--mos-color-surface) !important;
    border: var(--mos-border-width) solid var(--mos-color-border) !important;
    border-radius: var(--mos-radius-card) !important;
    box-shadow: var(--mos-shadow-sm) !important;
    color: var(--mos-color-text) !important;
}

body.mosvpn-shell #page-header .btn {
    min-height: var(--mos-control-height-sm);
    padding: 0 var(--mos-space-3);
}

@media (max-width: 1023.98px) {
    .mosvpn-card__header,
    .mosvpn-panel__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .mosvpn-card__body,
    .mosvpn-panel__body,
    body.mosvpn-shell .mosvpn-card > .block-content,
    body.mosvpn-shell .mosvpn-card > .ant-card-body {
        padding: var(--mos-space-4) !important;
    }
}