/*
 * VPN SERVER application UI
 * Local presentation layer for Bootstrap 5.
 * The design intentionally uses a restrained enterprise visual system:
 * clear hierarchy, compact controls, predictable spacing and usable tables.
 */
:root {
    --vpn-navy-950: color-mix(in srgb, var(--vpn-theme-dark) 88%, #000 12%);
    --vpn-navy-900: var(--vpn-theme-dark);
    --vpn-navy-800: color-mix(in srgb, var(--vpn-theme-dark) 82%, var(--vpn-theme-primary) 18%);
    --vpn-blue: var(--vpn-theme-primary);
    --vpn-blue-hover: var(--vpn-theme-primary-hover);
    --vpn-cyan: var(--vpn-theme-secondary);
    --vpn-green: #177245;
    --vpn-amber: var(--vpn-theme-accent);
    --vpn-red: #b42318;
    --vpn-ink: var(--vpn-theme-text);
    --vpn-muted: #66727e;
    --vpn-border: color-mix(in srgb, var(--vpn-theme-primary) 14%, #dbe2e8 86%);
    --vpn-border-strong: color-mix(in srgb, var(--vpn-theme-primary) 24%, #c6d0d9 76%);
    --vpn-surface: var(--vpn-theme-surface);
    --vpn-surface-soft: color-mix(in srgb, var(--vpn-theme-page) 70%, #fff 30%);
    --vpn-surface-blue: color-mix(in srgb, var(--vpn-theme-primary) 6%, #fff 94%);
    --vpn-page: var(--vpn-theme-page);
    --vpn-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --vpn-shadow-md: 0 8px 24px rgba(16, 24, 40, .07);
    --vpn-radius: .65rem;
    --vpn-radius-sm: .45rem;
    --vpn-content: 1180px;
}

html { min-width: 320px; }
body {
    min-height: 100vh;
    margin: 0;
    background: var(--vpn-page);
    color: var(--vpn-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: .925rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
a { color: var(--vpn-blue); }
a:hover { color: var(--vpn-blue-hover); }

.vpn-skip-link { position: fixed; z-index: 2000; left: 1rem; top: .75rem; padding: .55rem .8rem; background: #fff; border-radius: .4rem; box-shadow: var(--vpn-shadow-md); }
.vpn-main { min-height: calc(100vh - 126px); }
.vpn-page-container { width: 100%; max-width: var(--vpn-content); margin: 0 auto; padding: 1.5rem 0 2.25rem; }

/* Navigation */
.vpn-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    min-height: 68px;
    background: var(--vpn-theme-dark);
    border-bottom: 1px solid color-mix(in srgb, var(--vpn-theme-dark) 80%, #fff 20%);
    box-shadow: 0 1px 4px rgba(16, 24, 40, .04);
}
.vpn-navbar-container { min-height: 68px; }
.vpn-brand { display: inline-flex; align-items: center; gap: .7rem; min-width: 0; padding: .25rem 0; color: #fff; }
.vpn-brand:hover { color: #fff; }
.vpn-brand-icon { display: inline-grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: .55rem; background: var(--vpn-theme-primary); color: #fff; font-size: 1.05rem; }
.vpn-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.vpn-brand-name { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .94rem; font-weight: 700; letter-spacing: -.01em; }
.vpn-brand-description { margin-top: .22rem; color: rgba(255,255,255,.68); font-size: .68rem; font-weight: 600; letter-spacing: .035em; text-transform: uppercase; }
.vpn-nav-links { align-self: stretch; margin-left: 1.25rem; }
.vpn-nav-links .nav-item { display: flex; align-items: stretch; }
.vpn-nav-links .nav-link { position: relative; display: inline-flex; align-items: center; gap: .45rem; min-height: 68px; padding: 0 .7rem; color: rgba(255,255,255,.78); font-size: .83rem; font-weight: 600; }
.vpn-nav-links .nav-link::after { content: ""; position: absolute; left: .7rem; right: .7rem; bottom: 0; height: 2px; background: var(--vpn-blue); transform: scaleX(0); transform-origin: center; transition: transform .15s ease; }
.vpn-nav-links .nav-link:hover { color: #fff; }
.vpn-nav-links .nav-link.active { color: #fff; }
.vpn-nav-links .nav-link.active::after { transform: scaleX(1); }
.vpn-navbar-toggler { border: 1px solid rgba(255,255,255,.35); border-radius: .45rem; padding: .42rem .55rem; color: #fff; }
.vpn-navbar-toggler .navbar-toggler-icon { filter: brightness(0) invert(1); }
.vpn-navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(29, 95, 145, .14); }
.vpn-user-menu { display: flex; align-items: center; gap: .7rem; padding-left: 1rem; }
.vpn-user-info { display: flex; align-items: center; gap: .5rem; max-width: 190px; min-width: 0; color: #fff; }
.vpn-user-avatar { display: inline-grid; place-items: center; flex: 0 0 31px; width: 31px; height: 31px; border: 1px solid rgba(255,255,255,.42); border-radius: 50%; background: rgba(255,255,255,.10); color: #fff; }
.vpn-user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff !important; font-size: .78rem; font-weight: 650; }
.vpn-logout-form { margin: 0; }
.vpn-logout-button { display: inline-flex; align-items: center; gap: .38rem; padding: .42rem .65rem; border: 1px solid var(--vpn-border); border-radius: .4rem; background: #fff; color: #596671; font-size: .78rem; font-weight: 600; }
.vpn-logout-button:hover { border-color: #b8c3cc; background: var(--vpn-surface-soft); color: var(--vpn-red); }

/* Messages */
.vpn-message-stack { margin-bottom: 1rem; }
.vpn-alert { display: flex; align-items: flex-start; gap: .7rem; border-width: 1px; border-radius: var(--vpn-radius-sm); padding: .75rem .85rem; box-shadow: none; }
.vpn-alert > i { flex: 0 0 auto; margin-top: .1rem; }
.alert-danger { --bs-alert-color: #842029; --bs-alert-bg: #fce8e8; --bs-alert-border-color: #f3b8b8; }
.alert-warning { --bs-alert-color: #795500; --bs-alert-bg: #fff5d9; --bs-alert-border-color: #f0d38a; }
.alert-success { --bs-alert-color: #17633d; --bs-alert-bg: #e7f5ec; --bs-alert-border-color: #abd8bc; }
.alert-info { --bs-alert-color: #18556f; --bs-alert-bg: #e9f5fa; --bs-alert-border-color: #acd7e7; }

/* Common page elements */
.portal-page, .profile-page, .admin-dashboard, .certificates-page, .certificate-action-page { width: 100%; }
.portal-header, .profile-header, .page-heading-bar { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.35rem; }
.portal-header-content h1, .profile-header h2, .page-heading-bar h2 { margin: 0 0 .3rem; color: var(--vpn-navy-900); font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; }
.portal-header p, .profile-header p, .page-heading-bar p { color: var(--vpn-muted); margin: 0; font-size: .86rem; }
.portal-status { display: inline-flex; align-items: center; gap: .42rem; flex: 0 0 auto; padding: .42rem .65rem; border: 1px solid var(--vpn-border); border-radius: 999px; background: #fff; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.portal-status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.portal-status.enabled { color: var(--vpn-green); }
.portal-status.disabled { color: var(--vpn-red); }
.portal-welcome { margin-bottom: 1.2rem; padding: 1.15rem 1.2rem; border: 1px solid var(--vpn-border); border-left: 3px solid var(--vpn-blue); border-radius: var(--vpn-radius); background: #fff; box-shadow: var(--vpn-shadow-sm); }
.portal-welcome h2 { margin: 0 0 .35rem; color: var(--vpn-navy-900); font-size: 1.05rem; font-weight: 700; }
.portal-welcome p { max-width: 780px; margin: 0; color: var(--vpn-muted); font-size: .84rem; }

.card, .portal-card, .profile-card, .certificate-action-card { border: 1px solid var(--vpn-border) !important; border-radius: var(--vpn-radius) !important; box-shadow: var(--vpn-shadow-sm) !important; background: #fff; }
.card-header, .portal-card-header { border-bottom: 1px solid var(--vpn-border); background: #fff; }
.portal-card-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.15rem; }
.portal-card-title { margin: 0; color: var(--vpn-navy-900); font-size: .98rem; font-weight: 700; }
.portal-card-title i { margin-right: .35rem; color: var(--vpn-blue); }
.portal-card-subtitle { margin: .25rem 0 0; color: var(--vpn-muted); font-size: .77rem; }
.portal-card-body { padding: 1.15rem; }

.summary-card { height: 100%; border: 1px solid var(--vpn-border); border-radius: var(--vpn-radius); background: #fff; box-shadow: var(--vpn-shadow-sm); }
.summary-card-content { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; min-height: 116px; padding: 1rem 1.05rem; }
.summary-label { margin: 0 0 .28rem; color: #74808b; font-size: .69rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.summary-value { margin: 0; color: var(--vpn-navy-900); font-size: 1rem; font-weight: 700; line-height: 1.3; word-break: break-word; }
.summary-description { display: block; margin-top: .35rem; color: #8a959f; font-size: .72rem; }
/* Professional icon system */
.summary-icon,
.certificate-summary-icon {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 1rem;
    line-height: 1;
    isolation: isolate;
    overflow: hidden;
    box-shadow:
        0 5px 12px rgba(16, 24, 40, .10),
        inset 0 1px 0 rgba(255,255,255,.72);
    transition: transform .16s ease, box-shadow .16s ease;
}

.summary-icon::after,
.certificate-summary-icon::after {
    content: "";
    position: absolute;
    inset: 5px;
    z-index: -1;
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 8px;
    pointer-events: none;
}

.summary-icon > .bi,
.certificate-summary-icon > .bi {
    position: relative;
    z-index: 1;
    font-size: 1.08rem;
    line-height: 1;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.08));
}

.summary-icon:hover,
.certificate-summary-icon:hover {
    transform: translateY(-1px);
    box-shadow:
        0 8px 16px rgba(16, 24, 40, .13),
        inset 0 1px 0 rgba(255,255,255,.78);
}

.summary-icon.tone-primary,
.certificate-summary-icon.tone-primary {
    color: #075985;
    background: linear-gradient(145deg, #e9f4fb 0%, #d9ecf8 100%);
    border-color: #b9d9ea;
}

.summary-icon.tone-success,
.certificate-summary-icon.tone-success {
    color: #166534;
    background: linear-gradient(145deg, #eaf8ef 0%, #d9f0e1 100%);
    border-color: #b8ddc4;
}

.summary-icon.tone-info,
.certificate-summary-icon.tone-info {
    color: #155e75;
    background: linear-gradient(145deg, #e7f7fa 0%, #d4eef3 100%);
    border-color: #b3dce5;
}

.summary-icon.tone-warning,
.certificate-summary-icon.tone-warning {
    color: #8a5a00;
    background: linear-gradient(145deg, #fff7df 0%, #ffefbd 100%);
    border-color: #ead38c;
}

.summary-icon.tone-danger,
.certificate-summary-icon.tone-danger {
    color: #991b1b;
    background: linear-gradient(145deg, #fff0f0 0%, #fbe0e0 100%);
    border-color: #e8b9b9;
}

.summary-icon.tone-secondary,
.certificate-summary-icon.tone-secondary {
    color: #475569;
    background: linear-gradient(145deg, #f5f7f9 0%, #e9edf1 100%);
    border-color: #d2d9df;
}


/* Forms */
.form-label { margin-bottom: .42rem; color: #34414d; font-size: .78rem; font-weight: 650; }
.form-control, .form-select { min-height: 40px; border-color: var(--vpn-border-strong); border-radius: .45rem; color: var(--vpn-ink); background-color: #fff; font-size: .84rem; }
.form-control::placeholder { color: #9aa4ad; }
.form-control:focus, .form-select:focus { border-color: #5c93b8; box-shadow: 0 0 0 .2rem rgba(29, 95, 145, .12); }
.form-control.is-invalid { border-color: #d92d20; background-image: none; }
.form-control.is-invalid:focus { border-color: #b42318; box-shadow: 0 0 0 .2rem rgba(180, 35, 24, .1); }
.btn { border-radius: .45rem; font-weight: 650; font-size: .81rem; }
.btn-primary { --bs-btn-bg: var(--vpn-blue); --bs-btn-border-color: var(--vpn-blue); --bs-btn-hover-bg: var(--vpn-blue-hover); --bs-btn-hover-border-color: var(--vpn-blue-hover); --bs-btn-active-bg: var(--vpn-blue-hover); --bs-btn-active-border-color: var(--vpn-blue-hover); }
.btn-outline-secondary { --bs-btn-color: #53616d; --bs-btn-border-color: #c8d0d7; --bs-btn-hover-color: #273541; --bs-btn-hover-bg: #f3f5f7; --bs-btn-hover-border-color: #b7c1ca; }
.btn-outline-danger { --bs-btn-color: #b42318; --bs-btn-border-color: #efb1ac; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #b42318; --bs-btn-hover-border-color: #b42318; }

/* Tables: one consistent system across the application */
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--vpn-border); border-radius: .55rem; background: #fff; }
.table-responsive > .table { margin-bottom: 0; }
.table { --bs-table-bg: #fff; --bs-table-striped-bg: #fafbfc; --bs-table-hover-bg: #f5f8fa; width: 100%; margin-bottom: 0; color: #34414d; font-size: .78rem; vertical-align: middle; }
.table thead th { padding: .72rem .8rem; border-bottom: 1px solid var(--vpn-border-strong); background: #f7f9fb !important; color: #596672; font-size: .68rem; font-weight: 750; letter-spacing: .045em; text-transform: uppercase; white-space: nowrap; }
.table tbody td, .table tbody th { padding: .72rem .8rem; border-color: #edf0f2; }
.table tbody tr:last-child td, .table tbody tr:last-child th { border-bottom: 0; }
.table code { color: #475563; font-size: .73rem; word-break: break-word; }
.profile-table { min-width: 600px; }
.profile-table th { width: 34%; color: #687681 !important; font-weight: 600; background: #fbfcfd; }
.profile-table td { color: #273541; }
.admin-dashboard .table, .certificates-page .table { min-width: 760px; }

/* Dashboard */
.admin-dashboard .card-body, .certificates-page .card-body { padding: 1.1rem; }
.admin-dashboard .summary-value, .certificates-page .summary-value { font-size: 1.35rem; }
.admin-dashboard .table .badge, .certificates-page .table .badge { font-size: .67rem; font-weight: 700; }
.dashboard-pagination { margin-top: .85rem; }
.dashboard-pagination .pagination { margin: 0; }
.dashboard-pagination .page-link { min-width: 34px; text-align: center; border-color: var(--vpn-border); color: #53616d; font-size: .76rem; }
.dashboard-pagination .page-item.active .page-link { background: var(--vpn-blue); border-color: var(--vpn-blue); color: #fff; }
.dashboard-pagination .page-item.disabled .page-link { color: #a2abb3; background: #f7f8f9; }

/* Certificate management */
.certificates-page .badge { font-weight: 700; }
/* Certificate user avatar styling is defined in the responsive avatar system below. */
.certificate-empty-state { padding: 3rem 1rem; text-align: center; color: var(--vpn-muted); }
.certificate-empty-state-icon { margin-bottom: .75rem; color: #9ba7b1; font-size: 2rem; }

/* Profile */
.profile-card { margin-bottom: 1rem; }
.profile-actions { display: flex; justify-content: flex-start; margin-top: 1rem; }

/* Certificate action / access denied / errors */
.certificate-action-page, .access-denied-wrapper { padding-top: 2rem; }
.certificate-action-card { max-width: 720px; margin: 0 auto; }
.certificate-action-card .card-body { padding: 2rem; }
.certificate-success-icon { margin-bottom: .8rem; font-size: 2.6rem; }
.certificate-action-title { margin: 0 0 .5rem; color: var(--vpn-navy-900); font-size: 1.25rem; font-weight: 700; }
.certificate-action-message { max-width: 580px; margin: 0 auto 1.35rem; color: var(--vpn-muted); }
.certificate-action-buttons { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem; }
.access-denied-card { max-width: 600px; margin: 2rem auto 0; border: 1px solid var(--vpn-border); border-radius: var(--vpn-radius); background: #fff; box-shadow: var(--vpn-shadow-md); }
.access-denied-body { padding: 2.2rem; text-align: center; }
.denied-icon { display: inline-grid; place-items: center; width: 54px; height: 54px; margin-bottom: .8rem; border-radius: 50%; background: #fdf0ef; color: var(--vpn-red); font-size: 1.5rem; }
.denied-title { margin: 0 0 .45rem; color: var(--vpn-navy-900); font-size: 1.35rem; font-weight: 700; }
.denied-message { margin: 0 auto .55rem; color: #3e4b57; }
.denied-help { max-width: 460px; margin: 0 auto 1.25rem; color: var(--vpn-muted); font-size: .82rem; }
.logout-btn { min-width: 100px; }
.error-page { min-height: 55vh; }
.error-page-icon { font-size: 2.8rem; }

/* Login */
.login-page { min-height: calc(100vh - 170px); display: flex; align-items: center; justify-content: center; padding: 2.2rem 0; }
.login-shell { width: 100%; max-width: 400px; }
.login-card { overflow: hidden; border: 1px solid var(--vpn-border); border-radius: .75rem; background: #fff; box-shadow: 0 12px 32px rgba(16, 24, 40, .08); }
.login-card-header { padding: 1.4rem 1.5rem 1rem; text-align: center; border-bottom: 1px solid #edf0f2; }
.login-logo-wrapper { display: inline-grid; place-items: center; width: 50px; height: 50px; margin-bottom: .65rem; border: 1px solid #d7e2ea; border-radius: .7rem; background: #f3f7fa; }
.login-logo { width: 38px; height: 38px; object-fit: contain; }
.login-heading .login-eyebrow { margin: 0 0 .25rem; color: #72808c; font-size: .65rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.login-heading h1 { margin: 0; color: var(--vpn-navy-900); font-size: 1.4rem; font-weight: 750; letter-spacing: -.02em; }
.login-heading > p:last-child { margin: .3rem 0 0; color: var(--vpn-muted); font-size: .82rem; }
.login-card-body { padding: 1.25rem 1.5rem 1.4rem; }
.login-alert { margin-bottom: 1rem; }
.login-alert > div { display: flex; flex-direction: column; gap: .12rem; }
.login-alert span { font-size: .77rem; }
.login-form { display: grid; gap: .85rem; }
.field-group { display: grid; gap: .42rem; }
.input-wrapper { position: relative; }
.input-wrapper .form-control { padding-left: 2.55rem; padding-right: .8rem; }
.input-wrapper .input-icon { position: absolute; z-index: 2; left: .82rem; top: 50%; transform: translateY(-50%); color: #7d8994; pointer-events: none; }
.password-wrapper .form-control { padding-right: 2.65rem; }
.password-toggle { position: absolute; z-index: 3; top: 50%; right: .35rem; transform: translateY(-50%); display: inline-grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: .35rem; background: transparent; color: #687681; }
.password-toggle:hover { background: #f2f4f6; color: var(--vpn-navy-900); }
.password-toggle:focus-visible { outline: 2px solid rgba(29, 95, 145, .35); outline-offset: 1px; }
.field-error { color: var(--vpn-red); font-size: .72rem; line-height: 1.35; }
.security-note { display: flex; align-items: flex-start; gap: .5rem; margin-top: .05rem; padding: .7rem .75rem; border: 1px solid #dce7ed; border-radius: .45rem; background: #f5f9fb; color: #52616d; font-size: .72rem; }
.security-note i { color: var(--vpn-blue); margin-top: .05rem; }
.login-submit { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; width: 100%; min-height: 43px; margin-top: .15rem; border: 1px solid var(--vpn-blue); border-radius: .45rem; background: var(--vpn-blue); color: #fff; font-size: .83rem; font-weight: 700; transition: background .15s ease, border-color .15s ease; }
.login-submit:hover:not(:disabled) { background: var(--vpn-blue-hover); border-color: var(--vpn-blue-hover); }
.login-submit:disabled { cursor: not-allowed; opacity: .7; }
.login-submit .spinner-border { width: .9rem; height: .9rem; border-width: .13em; }
.lockout-countdown { font-variant-numeric: tabular-nums; }

/* Session warning */
.session-timeout-notice { position: fixed; z-index: 1055; right: 1.1rem; bottom: 1.1rem; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .85rem; width: min(620px, calc(100vw - 2rem)); padding: .85rem 1rem; border: 1px solid #e3c46e; border-radius: .65rem; background: #fffdf5; box-shadow: 0 14px 36px rgba(16, 24, 40, .14); }
.session-timeout-notice[hidden] { display: none; }
.session-timeout-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff1c7; color: var(--vpn-amber); }
.session-timeout-copy h2 { margin: 0 0 .15rem; color: #574100; font-size: .86rem; font-weight: 750; }
.session-timeout-copy p { margin: 0; color: #6d5a24; font-size: .73rem; }
.session-timeout-actions { display: flex; align-items: center; gap: .45rem; }
.session-timeout-actions form { margin: 0; }

/* Footer */
.vpn-footer { border-top: 1px solid color-mix(in srgb, var(--vpn-theme-dark) 78%, #fff 22%); background: var(--vpn-theme-dark); }
.vpn-footer-inner { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.vpn-footer-text { color: rgba(255,255,255,.78); font-size: .72rem; }
.vpn-footer-text a { color: #fff; font-weight: 650; text-decoration: none; }
.vpn-footer-text a:hover { text-decoration: underline; }
.vpn-footer-link { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; color: #fff; text-decoration: none; }
.vpn-footer-link:hover { background: var(--vpn-theme-primary); border-color: var(--vpn-theme-primary); color: #fff; }

/* Existing application utility classes */
.vpn-tiny-icon { font-size: .7rem; }
.vpn-download-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 40px;
    padding: .58rem .9rem;
    border: 1px solid var(--vpn-blue);
    border-radius: .45rem;
    background: var(--vpn-blue);
    color: #fff !important;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none !important;
    white-space: nowrap;
    box-shadow: 0 2px 5px color-mix(in srgb, var(--vpn-blue) 20%, transparent);
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.vpn-download-button:hover {
    background: var(--vpn-blue-hover);
    border-color: var(--vpn-blue-hover);
    color: #fff !important;
}
.vpn-download-button:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--vpn-blue) 45%, transparent);
    outline-offset: 2px;
}
.vpn-download-button.disabled,
.vpn-download-button[aria-disabled="true"] {
    background: #e7ebef;
    border-color: #d4dbe1;
    color: #697783 !important;
    box-shadow: none;
    cursor: not-allowed;
}
.config-action { padding: 1rem; border: 1px solid var(--vpn-border); border-radius: .55rem; background: var(--vpn-surface-soft); }
.config-description { color: var(--vpn-muted); font-size: .77rem; }
.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--vpn-border); border-radius: .55rem; overflow: hidden; }
.info-item { padding: .9rem 1rem; border-bottom: 1px solid var(--vpn-border); }
.info-item:nth-child(odd) { border-right: 1px solid var(--vpn-border); }
.info-item:nth-last-child(-n+2) { border-bottom: 0; }
.info-label { margin-bottom: .25rem; color: #77848f; font-size: .67rem; font-weight: 750; letter-spacing: .045em; text-transform: uppercase; }
.info-value { color: #2e3b46; font-size: .83rem; font-weight: 600; word-break: break-word; }
.info-value.success { color: var(--vpn-green); }
.info-value.muted { color: var(--vpn-muted); }
.access-table { min-width: 560px; }
.access-table .access-status-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: .5rem; border-radius: .45rem; background: var(--vpn-surface-blue); color: var(--vpn-blue); }
.access-table .access-status-icon.success { background: #edf8f1; color: var(--vpn-green); }
.access-table .access-status-icon.info { background: #e9f5fa; color: #18556f; }
.access-table .access-value { color: #24313d; font-weight: 650; }
.access-table .access-value.success { color: var(--vpn-green); }
.profile-config-table { min-width: 680px; }
.profile-config-table th { width: 34%; color: #596672 !important; font-weight: 650; background: #f7f9fb !important; }
.profile-config-table td { color: #24313d; font-weight: 600; }
.profile-config-table code { color: #263b4a; font-weight: 650; }
.protocol-badge { display: inline-flex; align-items: center; padding: .22rem .45rem; border-radius: .35rem; background: #eef4f8; color: var(--vpn-blue); font-size: .66rem; font-weight: 750; text-transform: uppercase; }

@media (max-width: 991.98px) {
    .vpn-navbar { position: relative; }
    .vpn-nav-links { margin-left: 0; }
    .vpn-nav-links .nav-item { display: block; }
    .vpn-nav-links .nav-link { min-height: 42px; padding: .65rem .2rem; }
    .vpn-nav-links .nav-link::after { left: 0; right: auto; bottom: .15rem; width: 24px; height: 2px; }
    .vpn-user-menu { align-items: stretch; flex-direction: column; gap: .45rem; padding: .65rem 0 .8rem; border-top: 1px solid var(--vpn-border); }
    .vpn-user-info { max-width: none; }
    .vpn-logout-button { width: 100%; justify-content: center; }
    .vpn-page-container { padding-top: 1.2rem; }
}

@media (max-width: 767.98px) {
    .vpn-main .container { padding-left: .9rem; padding-right: .9rem; }
    .vpn-navbar .container { padding-left: .9rem; padding-right: .9rem; }
    .vpn-page-container { padding-bottom: 1.5rem; }
    .portal-header, .profile-header, .page-heading-bar { flex-direction: column; align-items: stretch; }
    .portal-header h1, .profile-header h2, .page-heading-bar h2 { font-size: 1.25rem; }
    .portal-status { align-self: flex-start; }
    .portal-card-header { align-items: flex-start; flex-direction: column; }
    .info-grid { grid-template-columns: 1fr; }
    .info-item:nth-child(odd) { border-right: 0; }
    .info-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--vpn-border); }
    .info-item:last-child { border-bottom: 0; }
    .login-page { min-height: auto; padding: 1rem 0 2rem; }
    .login-card-header { padding: 1.35rem 1.2rem 1rem; }
    .login-card-body { padding: 1.2rem; }
    .session-timeout-notice { grid-template-columns: auto 1fr; }
    .session-timeout-actions { grid-column: 1 / -1; justify-content: flex-end; }
    .vpn-footer-inner { min-height: 54px; }
}

@media (max-width: 575.98px) {
    .vpn-brand-description { display: none; }
    .vpn-brand-name { max-width: 190px; }
    .vpn-brand-icon { width: 35px; height: 35px; flex-basis: 35px; }
    .vpn-page-container { padding-top: .9rem; }
    .summary-card-content { min-height: 100px; padding: .85rem; }
    .table thead th, .table tbody td, .table tbody th { padding: .65rem .7rem; }
    .profile-table { min-width: 540px; }
    .admin-dashboard .table, .certificates-page .table { min-width: 700px; }
    .login-shell { max-width: none; }
    .login-card { border-radius: .6rem; }
    .login-card-header { padding: 1.2rem 1rem .95rem; }
    .login-card-body { padding: 1rem; }
    .certificate-action-card .card-body, .access-denied-body { padding: 1.4rem 1rem; }
    .certificate-action-buttons { flex-direction: column; }
    .certificate-action-buttons .btn { width: 100%; }
    .vpn-footer-text { font-size: .68rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Environment-driven theme bridge */
.btn-primary,
.btn-primary:visited {
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus {
    color: #fff !important;
}
.btn-success { --bs-btn-bg: var(--vpn-green); --bs-btn-border-color: var(--vpn-green); }
.text-primary { color: var(--vpn-blue) !important; }
.bg-primary { background-color: var(--vpn-blue) !important; }
.border-primary { border-color: var(--vpn-blue) !important; }

@media (max-width: 575.98px) {
    .config-action { padding: .8rem; }
    .vpn-download-button { width: 100%; }
    .login-shell { max-width: 390px; }
    .login-card-header { padding-left: 1.2rem; padding-right: 1.2rem; }
    .login-card-body { padding-left: 1.2rem; padding-right: 1.2rem; }
}

/* ========================= ICON RENDERING =================== */

/*
 * Application-wide Bootstrap Icons standard.
 * Keep the icon font rendering identical on every page and in
 * every component. Context-specific colors remain controlled by
 * the existing component classes below this block.
 */
.bi,
.bi::before,
[class^="bi-"],
[class^="bi-"]::before,
[class*=" bi-"],
[class*=" bi-"]::before {
    font-family: bootstrap-icons !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 1 !important;
    vertical-align: -.125em;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Keep icon pseudo-elements from being altered by surrounding text rules. */
.bi::before,
[class^="bi-"]::before,
[class*=" bi-"]::before {
    display: inline-block;
}

/* User/session avatars */
.vpn-avatar-36,
.certificate-user-avatar {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    aspect-ratio: 1 / 1;
    border: 1px solid #b9d9ea;
    border-radius: 50% !important;
    background: linear-gradient(145deg, #edf7fc 0%, #dceef8 100%);
    color: #075985;
    box-shadow:
        0 3px 8px rgba(16,24,40,.09),
        inset 0 1px 0 rgba(255,255,255,.78);
    overflow: hidden;
    vertical-align: middle;
}

.vpn-avatar-36::after,
.certificate-user-avatar::after {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(255,255,255,.58);
    border-radius: 50%;
    pointer-events: none;
}

.vpn-avatar-36 > .bi,
.certificate-user-avatar > .bi {
    position: relative;
    z-index: 1;
    color: currentColor !important;
    font-size: .9rem;
    line-height: 1;
}

@media (max-width: 575.98px) {
    .summary-icon,
    .certificate-summary-icon {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        min-width: 42px;
        border-radius: 11px;
    }

    .vpn-avatar-36,
    .certificate-user-avatar {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
        min-width: 34px;
        min-height: 34px;
    }
}



/* ==========================================================================
   Production UI refinement
   Compatibility layer: presentation-only overrides for the existing markup.
   No routes, templates' data bindings, JavaScript behavior, or business rules
   are changed by this section.
   ========================================================================== */

:root {
    --vpn-content: 1220px;
    --vpn-radius: .5rem;
    --vpn-radius-sm: .35rem;
    --vpn-border: color-mix(in srgb, var(--vpn-theme-primary) 10%, #d8e0e6 90%);
    --vpn-border-strong: color-mix(in srgb, var(--vpn-theme-primary) 18%, #c2ccd4 82%);
    --vpn-shadow-sm: 0 1px 2px rgba(15, 23, 42, .045);
    --vpn-shadow-md: 0 8px 22px rgba(15, 23, 42, .075);
    --vpn-muted: #65727d;
    --vpn-ink: #263542;
    --vpn-heading: #17364e;
}

html {
    scroll-behavior: smooth;
}

body {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--vpn-page) 88%, #fff 12%) 0, var(--vpn-page) 180px);
    color: var(--vpn-ink);
    font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: .9rem;
    line-height: 1.55;
    letter-spacing: .002em;
}

a {
    text-underline-offset: 2px;
}

.vpn-skip-link {
    border: 1px solid var(--vpn-border-strong);
    border-radius: .3rem;
    box-shadow: var(--vpn-shadow-md);
}

/* Navigation: compact enterprise header */
.vpn-navbar {
    min-height: 60px;
    background: var(--vpn-theme-dark);
    border-bottom: 1px solid rgba(255,255,255,.09);
    box-shadow: 0 2px 8px rgba(15,23,42,.08);
}

.vpn-navbar-container {
    min-height: 60px;
}

.vpn-brand {
    gap: .6rem;
    padding: .2rem 0;
}

.vpn-brand-icon {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: .4rem;
    background: color-mix(in srgb, var(--vpn-theme-primary) 88%, #fff 12%);
    font-size: .92rem;
}

.vpn-brand-name {
    max-width: 270px;
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .005em;
}

.vpn-brand-description {
    margin-top: .16rem;
    font-size: .61rem;
    letter-spacing: .065em;
    font-weight: 600;
    opacity: .78;
}

.vpn-nav-links {
    margin-left: 1.1rem;
}

.vpn-nav-links .nav-link {
    min-height: 60px;
    padding: 0 .65rem;
    gap: .42rem;
    font-size: .78rem;
    font-weight: 600;
}

.vpn-nav-links .nav-link::after {
    left: .65rem;
    right: .65rem;
    height: 2px;
}

.vpn-user-menu {
    gap: .55rem;
    padding-left: .8rem;
}

.vpn-user-info {
    gap: .45rem;
    max-width: 175px;
}

.vpn-user-avatar {
    flex-basis: 29px;
    width: 29px;
    height: 29px;
    background: transparent;
    border-color: rgba(255,255,255,.28);
}

.vpn-user-name {
    font-size: .75rem;
}

.vpn-logout-button {
    min-height: 34px;
    padding: .35rem .62rem;
    border-radius: .35rem;
    font-size: .75rem;
    box-shadow: none;
}

/* Page frame and hierarchy */
.vpn-main {
    min-height: calc(100vh - 118px);
}

.vpn-page-container {
    max-width: var(--vpn-content);
    padding: 1.6rem 0 2.5rem;
}

.portal-header,
.profile-header,
.page-heading-bar {
    margin-bottom: 1.25rem;
}

.portal-header-content h1,
.profile-header h2,
.page-heading-bar h2 {
    color: var(--vpn-heading);
    font-size: 1.3rem;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.015em;
}

.portal-header p,
.profile-header p,
.page-heading-bar p {
    font-size: .82rem;
    line-height: 1.45;
}

.portal-status {
    padding: .35rem .6rem;
    border-radius: .35rem;
    background: #fff;
    font-size: .7rem;
    font-weight: 700;
}

.portal-status-dot {
    width: 6px;
    height: 6px;
}

/* Messages */
.vpn-message-stack {
    margin-bottom: 1.1rem;
}

.vpn-alert {
    min-height: 42px;
    padding: .68rem .78rem;
    border-radius: .35rem;
    font-size: .79rem;
}

/* Cards and panels */
.card,
.portal-card,
.profile-card,
.certificate-action-card {
    border-radius: .5rem !important;
    border-color: var(--vpn-border) !important;
    box-shadow: var(--vpn-shadow-sm) !important;
}

.card-header,
.portal-card-header {
    border-color: var(--vpn-border);
}

.portal-card-header {
    min-height: 64px;
    padding: .85rem 1rem;
}

.portal-card-title {
    font-size: .91rem;
    font-weight: 700;
    letter-spacing: .002em;
}

.portal-card-title i {
    margin-right: .3rem;
}

.portal-card-subtitle {
    margin-top: .18rem;
    font-size: .73rem;
}

.portal-card-body {
    padding: 1rem;
}

.portal-welcome {
    margin-bottom: 1rem;
    padding: 1rem 1.1rem;
    border-left-width: 2px;
    border-radius: .45rem;
    box-shadow: var(--vpn-shadow-sm);
}

.portal-welcome h2 {
    font-size: .98rem;
}

.portal-welcome p {
    font-size: .8rem;
}

/* Summary cards: flat, precise, no decorative gradients */
.summary-card {
    border-radius: .45rem;
    border-color: var(--vpn-border);
    box-shadow: var(--vpn-shadow-sm);
}

.summary-card-content {
    min-height: 108px;
    padding: .95rem 1rem;
}

.summary-label {
    margin-bottom: .25rem;
    color: #71808c;
    font-size: .64rem;
    letter-spacing: .055em;
}

.summary-value {
    color: var(--vpn-heading);
    font-size: .96rem;
    font-weight: 700;
}

.summary-description {
    margin-top: .25rem;
    font-size: .7rem;
}

.summary-icon,
.certificate-summary-icon {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
    min-width: 38px;
    border: 0 !important;
    border-radius: .25rem;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--vpn-blue);
    overflow: visible;
}

.summary-icon::after,
.certificate-summary-icon::after {
    display: none;
}

.summary-icon > .bi,
.certificate-summary-icon > .bi {
    font-size: 1.18rem;
    filter: none;
}

.summary-icon:hover,
.certificate-summary-icon:hover {
    transform: none;
    box-shadow: none !important;
}

.summary-icon.tone-primary,
.certificate-summary-icon.tone-primary { color: var(--vpn-blue); }
.summary-icon.tone-success,
.certificate-summary-icon.tone-success { color: var(--vpn-green); }
.summary-icon.tone-info,
.certificate-summary-icon.tone-info { color: var(--vpn-cyan); }
.summary-icon.tone-warning,
.certificate-summary-icon.tone-warning { color: #986d00; }
.summary-icon.tone-danger,
.certificate-summary-icon.tone-danger { color: var(--vpn-red); }
.summary-icon.tone-secondary,
.certificate-summary-icon.tone-secondary { color: #64748b; }

/* Controls */
.form-label {
    margin-bottom: .36rem;
    color: #344552;
    font-size: .75rem;
    font-weight: 650;
}

.form-control,
.form-select {
    min-height: 39px;
    padding: .5rem .68rem;
    border-color: var(--vpn-border-strong);
    border-radius: .35rem;
    font-size: .8rem;
    line-height: 1.35;
}

.form-control:focus,
.form-select:focus {
    border-color: color-mix(in srgb, var(--vpn-blue) 70%, #fff 30%);
    box-shadow: 0 0 0 .17rem color-mix(in srgb, var(--vpn-blue) 13%, transparent);
}

.btn {
    min-height: 37px;
    padding: .48rem .72rem;
    border-radius: .35rem;
    font-size: .77rem;
    font-weight: 650;
    line-height: 1.25;
    box-shadow: none;
}

.btn-sm {
    min-height: 32px;
    padding: .36rem .58rem;
    font-size: .72rem;
}

.btn-primary {
    box-shadow: 0 1px 2px color-mix(in srgb, var(--vpn-blue) 18%, transparent);
}

.btn-primary:hover {
    box-shadow: 0 2px 5px color-mix(in srgb, var(--vpn-blue) 18%, transparent);
}

.btn:focus-visible,
.btn-primary:focus-visible,
.btn-outline-secondary:focus-visible,
.btn-outline-danger:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--vpn-blue) 55%, transparent);
    outline-offset: 2px;
}

/* Tables: dense enough for enterprise data, still readable */
.table-responsive {
    border: 1px solid var(--vpn-border);
    border-radius: .4rem;
}

.table {
    font-size: .76rem;
}

.table thead th {
    padding: .65rem .72rem;
    background: #f5f7f9 !important;
    color: #566572;
    font-size: .63rem;
    font-weight: 750;
    letter-spacing: .055em;
}

.table tbody td,
.table tbody th {
    padding: .67rem .72rem;
    border-color: #edf0f3;
}

.table tbody tr {
    transition: background-color .12s ease;
}

.table tbody tr:hover {
    --bs-table-hover-bg: #f7fafc;
}

.table code {
    padding: .1rem .28rem;
    border: 1px solid #e7ebee;
    border-radius: .2rem;
    background: #f8fafb;
    color: #42515e;
    font-size: .69rem;
}

.profile-table {
    min-width: 560px;
}

.profile-table th {
    background: #fafbfc;
}

/* Data page headers and dashboard panels */
.admin-dashboard .card-body,
.certificates-page .card-body {
    padding: 1rem;
}

.admin-dashboard .table,
.certificates-page .table {
    min-width: 760px;
}

.admin-dashboard .table .badge,
.certificates-page .table .badge {
    font-size: .63rem;
}

.dashboard-pagination .page-link {
    min-width: 32px;
    padding: .36rem .55rem;
    border-radius: .3rem;
    font-size: .72rem;
}

.dashboard-pagination .page-item + .page-item {
    margin-left: .18rem;
}

.dashboard-pagination .page-item:first-child .page-link,
.dashboard-pagination .page-item:last-child .page-link {
    border-radius: .3rem;
}

/* Status and identity icons: consistent, flat treatment */
.vpn-avatar-36,
.certificate-user-avatar {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border: 1px solid #cbd9e2;
    border-radius: 50% !important;
    background: #f4f8fa;
    color: var(--vpn-blue);
    box-shadow: none;
}

.vpn-avatar-36::after,
.certificate-user-avatar::after {
    display: none;
}

.vpn-avatar-36 > .bi,
.certificate-user-avatar > .bi {
    font-size: .82rem;
}

/* VPN configuration and information */
.config-action {
    padding: .8rem;
    border: 1px solid var(--vpn-border);
    border-radius: .4rem;
    background: #f8fafb;
}

.config-description {
    font-size: .76rem;
    line-height: 1.55;
}

.vpn-download-button {
    min-height: 39px;
    padding: .52rem .78rem;
    border-radius: .35rem;
    box-shadow: none;
    font-size: .76rem;
}

.info-grid {
    border-radius: .4rem;
}

.info-item {
    padding: .82rem .9rem;
}

.info-label {
    margin-bottom: .2rem;
    font-size: .62rem;
}

.info-value {
    font-size: .79rem;
}

.access-table {
    min-width: 520px;
}

.access-table .access-status-icon {
    width: 27px;
    height: 27px;
    margin-right: .45rem;
    border-radius: .3rem;
    background: #f1f6f9;
}

.access-table .access-status-icon.success {
    background: #f0f7f3;
}

.access-table .access-status-icon.info {
    background: #f0f7f9;
}

/* Profile and utility states */
.profile-card {
    margin-bottom: .9rem;
}

.profile-actions {
    margin-top: .85rem;
}

.certificate-empty-state {
    padding: 2.7rem 1rem;
}

.certificate-empty-state-icon {
    margin-bottom: .65rem;
    font-size: 1.8rem;
}

.certificate-action-page,
.access-denied-wrapper {
    padding-top: 1.25rem;
}

.certificate-action-card .card-body {
    padding: 1.75rem;
}

.certificate-success-icon {
    margin-bottom: .65rem;
    font-size: 2.25rem;
}

.certificate-action-title {
    font-size: 1.15rem;
}

.access-denied-card {
    border-radius: .5rem;
    box-shadow: var(--vpn-shadow-md);
}

.access-denied-body {
    padding: 1.8rem;
}

.denied-icon {
    width: 48px;
    height: 48px;
    border-radius: .4rem;
    background: #fbefee;
    font-size: 1.25rem;
}

/* Authentication page */
.login-page {
    min-height: calc(100vh - 165px);
    padding: 1.75rem 0 2.25rem;
}

.login-shell {
    max-width: 390px;
}

.login-card {
    border-radius: .5rem;
    box-shadow: 0 10px 28px rgba(15,23,42,.075);
}

.login-card-header {
    padding: 1.25rem 1.4rem .95rem;
}

.login-logo-wrapper {
    width: 44px;
    height: 44px;
    margin-bottom: .55rem;
    border-radius: .4rem;
    background: #f6f8fa;
}

.login-logo {
    width: 34px;
    height: 34px;
}

.login-heading .login-eyebrow {
    margin-bottom: .2rem;
    font-size: .6rem;
    letter-spacing: .09em;
}

.login-heading h1 {
    font-size: 1.3rem;
}

.login-heading > p:last-child {
    margin-top: .22rem;
    font-size: .77rem;
}

.login-card-body {
    padding: 1.15rem 1.4rem 1.3rem;
}

.login-form {
    gap: .75rem;
}

.field-group {
    gap: .36rem;
}

.input-wrapper .form-control {
    padding-left: 2.4rem;
}

.input-wrapper .input-icon {
    left: .76rem;
    color: #71808b;
}

.password-wrapper .form-control {
    padding-right: 2.45rem;
}

.password-toggle {
    width: 31px;
    height: 31px;
    right: .32rem;
    border-radius: .3rem;
}

.security-note {
    margin-top: .02rem;
    padding: .62rem .7rem;
    border-radius: .35rem;
    background: #f7f9fa;
    font-size: .69rem;
}

.login-submit {
    min-height: 41px;
    margin-top: .1rem;
    border-radius: .35rem;
    font-size: .78rem;
}

/* Session notice */
.session-timeout-notice {
    right: 1rem;
    bottom: 1rem;
    width: min(600px, calc(100vw - 2rem));
    padding: .78rem .9rem;
    border-radius: .45rem;
    box-shadow: 0 10px 26px rgba(15,23,42,.12);
}

.session-timeout-icon {
    width: 34px;
    height: 34px;
    border-radius: .35rem;
    background: #fff7dc;
}

/* Footer */
.vpn-footer {
    border-top-color: rgba(255,255,255,.1);
}

.vpn-footer-inner {
    min-height: 54px;
}

.vpn-footer-text {
    font-size: .68rem;
}

.vpn-footer-link {
    width: 30px;
    height: 30px;
    border-radius: .35rem;
}

/* Motion remains present, but restrained */
.vpn-brand-icon,
.vpn-nav-links .nav-link,
.btn,
.vpn-download-button,
.vpn-logout-button,
.password-toggle,
.table tbody tr {
    transition-duration: .14s;
}

/* Responsive behavior */
@media (max-width: 991.98px) {
    .vpn-navbar {
        position: relative;
    }

    .vpn-nav-links {
        margin-left: 0;
        padding: .35rem 0;
    }

    .vpn-nav-links .nav-link {
        min-height: 40px;
        padding: .55rem .15rem;
        border-radius: .25rem;
    }

    .vpn-nav-links .nav-link::after {
        left: 0;
        right: auto;
        bottom: .2rem;
        width: 20px;
    }

    .vpn-nav-links .nav-link:hover {
        background: rgba(255,255,255,.045);
    }

    .vpn-user-menu {
        align-items: stretch;
        padding: .65rem 0 .75rem;
        border-top-color: rgba(255,255,255,.12);
    }

    .vpn-logout-button {
        width: auto;
        justify-content: center;
    }

    .vpn-page-container {
        padding-top: 1.25rem;
    }
}

@media (max-width: 767.98px) {
    .vpn-main .container,
    .vpn-navbar .container,
    .vpn-footer .container {
        padding-left: .85rem;
        padding-right: .85rem;
    }

    .vpn-page-container {
        padding-top: 1rem;
        padding-bottom: 1.6rem;
    }

    .portal-header,
    .profile-header,
    .page-heading-bar {
        flex-direction: column;
        align-items: stretch;
        gap: .65rem;
    }

    .portal-header-content h1,
    .profile-header h2,
    .page-heading-bar h2 {
        font-size: 1.18rem;
    }

    .portal-status {
        align-self: flex-start;
    }

    .portal-card-header {
        align-items: flex-start;
        flex-direction: column;
        gap: .45rem;
    }

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

    .info-item:nth-child(odd) {
        border-right: 0;
    }

    .info-item:nth-last-child(-n+2) {
        border-bottom: 1px solid var(--vpn-border);
    }

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

    .config-action {
        margin-top: .8rem;
    }

    .login-page {
        min-height: auto;
        padding: .85rem 0 1.75rem;
    }

    .login-shell {
        max-width: 390px;
    }

    .session-timeout-notice {
        grid-template-columns: auto 1fr;
    }

    .session-timeout-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

@media (max-width: 575.98px) {
    .vpn-brand-description {
        display: none;
    }

    .vpn-brand-name {
        max-width: 190px;
    }

    .vpn-brand-icon {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
    }

    .vpn-navbar-container {
        min-height: 56px;
    }

    .vpn-navbar {
        min-height: 56px;
    }

    .summary-card-content {
        min-height: 94px;
        padding: .8rem .85rem;
    }

    .summary-icon,
    .certificate-summary-icon {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
        min-width: 36px;
    }

    .table thead th,
    .table tbody td,
    .table tbody th {
        padding: .6rem .65rem;
    }

    .admin-dashboard .table,
    .certificates-page .table {
        min-width: 700px;
    }

    .profile-table {
        min-width: 520px;
    }

    .login-card {
        border-radius: .45rem;
    }

    .login-card-header {
        padding: 1.1rem 1.1rem .85rem;
    }

    .login-card-body {
        padding: 1rem 1.1rem 1.15rem;
    }

    .certificate-action-card .card-body,
    .access-denied-body {
        padding: 1.35rem 1rem;
    }

    .certificate-action-buttons {
        flex-direction: column;
    }

    .certificate-action-buttons .btn {
        width: 100%;
    }

    .vpn-footer-inner {
        min-height: 52px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}