/* ============ VoltaVPN app components (Voltage tokens) ============ */

/* --- Compat utility shim (replaces the Bootstrap utilities we use) --- */
.d-none{display:none!important}.d-block{display:block!important}.d-inline{display:inline!important}
.d-inline-block{display:inline-block!important}.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}
.flex-wrap{flex-wrap:wrap}.flex-column{flex-direction:column}
.align-items-center{align-items:center}.align-items-start{align-items:flex-start}
.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-end{justify-content:flex-end}
.text-center{text-align:center}.text-end{text-align:right}.text-start{text-align:left}
.w-100{width:100%}.h-100{height:100%}.mx-auto{margin-left:auto;margin-right:auto}
.gap-1{gap:var(--space-xs)}.gap-2{gap:var(--space-sm)}.gap-3{gap:var(--space-md)}.gap-4{gap:var(--space-lg)}
.small,.text-sm{font-size:var(--fs-sm)}.fs-1{font-size:var(--fs-5xl)}.fs-2{font-size:var(--fs-4xl)}.fw-semibold{font-weight:var(--fw-semibold)}.fw-bold{font-weight:var(--fw-bold)}
.m-0{margin:0}.mt-0{margin-top:0}.mb-0{margin-bottom:0!important}
.mt-1{margin-top:var(--space-xs)}.mt-2{margin-top:var(--space-sm)}.mt-3{margin-top:var(--space-md)}.mt-4{margin-top:var(--space-lg)}.mt-5{margin-top:var(--space-2xl)}
.mb-1{margin-bottom:var(--space-xs)}.mb-2{margin-bottom:var(--space-sm)}.mb-3{margin-bottom:var(--space-md)}.mb-4{margin-bottom:var(--space-lg)}.mb-5{margin-bottom:var(--space-2xl)}
.me-1{margin-right:var(--space-xs)}.me-2{margin-right:var(--space-sm)}.me-3{margin-right:var(--space-md)}
.ms-1{margin-left:var(--space-xs)}.ms-2{margin-left:var(--space-sm)}.ms-3{margin-left:var(--space-md)}
.p-0{padding:0!important}.py-3{padding-top:var(--space-md);padding-bottom:var(--space-md)}.py-4{padding-top:var(--space-lg);padding-bottom:var(--space-lg)}.py-5{padding-top:var(--space-2xl);padding-bottom:var(--space-2xl)}
.p-3{padding:var(--space-md)}.p-4{padding:var(--space-lg)}

/* --- Card sub-structure (the marketing .card has no header/body/footer) --- */
.card__header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-lg) var(--space-xl);border-bottom:1px solid var(--volt-border);font-family:var(--font-display);font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--volt-white)}
.card__body{padding:var(--space-xl)}
.card__footer{padding:var(--space-lg) var(--space-xl);border-top:1px solid var(--volt-border)}
.card--flush .card__body,.card.p-0{padding:0}

/* --- Tables --- */
.table-wrap{overflow-x:auto;border-radius:var(--radius-md)}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:12px var(--space-md);text-align:left;font-size:var(--fs-sm);border-bottom:1px solid var(--volt-border)}
.table th{color:var(--volt-muted);font-weight:var(--fw-semibold);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap}
.table td{color:var(--volt-text);vertical-align:middle}
.table tbody tr:last-child td{border-bottom:none}
.table tbody tr:hover td{background:var(--volt-amber-light)}
.table code{font-family:var(--font-mono);font-size:0.85em;color:var(--volt-blue);background:var(--volt-blue-light);padding:2px 6px;border-radius:var(--radius-sm)}

/* --- Badges --- */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--radius-full);font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:0.02em;text-transform:uppercase}
.badge--success{background:rgba(16,185,129,.12);color:var(--volt-success)}
.badge--warning{background:rgba(245,158,11,.12);color:var(--volt-warning)}
.badge--error{background:rgba(239,68,68,.12);color:var(--volt-error)}
.badge--info{background:var(--volt-amber-light);color:var(--volt-amber)}
.badge--neutral{background:rgba(148,163,184,.12);color:var(--volt-muted)}
.badge--accent{background:var(--volt-amber-light);color:var(--volt-amber)}

/* --- Alerts (flash) --- */
.alert{position:relative;display:flex;align-items:flex-start;gap:var(--space-sm);padding:var(--space-md) var(--space-lg);border:1px solid;border-radius:var(--radius-md);font-size:var(--fs-sm);margin-bottom:var(--space-md)}
.alert--success{background:rgba(16,185,129,.08);border-color:rgba(16,185,129,.25);color:var(--volt-success)}
.alert--info{background:var(--volt-amber-light);border-color:rgba(59,130,246,.25);color:var(--volt-amber)}
.alert--warning{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.25);color:var(--volt-warning)}
.alert--danger,.alert--error{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.25);color:var(--volt-error)}
.alert__close{margin-left:auto;background:none;border:none;color:inherit;opacity:.7;cursor:pointer;font-size:1rem;line-height:1}
.alert__close:hover{opacity:1}

/* --- Buttons: danger outline + group --- */
.btn--outline-danger{background:transparent;border:1px solid rgba(239,68,68,.4);color:var(--volt-error)}
.btn--outline-danger:hover{background:var(--volt-error);color:var(--volt-white);border-color:var(--volt-error)}
.btn-group{display:inline-flex;gap:var(--space-xs)}

/* --- Forms: checkbox/radio --- */
.form-check{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-md)}
.form-check__input{width:18px;height:18px;accent-color:var(--volt-amber);background:var(--volt-deep);border:1px solid var(--volt-border);border-radius:var(--radius-sm);cursor:pointer}
.form-check__label{font-size:var(--fs-sm);color:var(--volt-text);cursor:pointer}

/* --- Auth panel (base <main> already clears the fixed nav) --- */
.auth-panel{max-width:440px;margin:var(--space-3xl) auto}

/* --- Dashboard stat card --- */
.stat-card{text-align:center}
.stat-icon{width:48px;height:48px;border-radius:var(--radius-md);display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-xl);margin-bottom:var(--space-md)}
.stat-icon.icon-amber{background:var(--volt-amber-light);color:var(--volt-amber)}
.stat-icon.icon-blue{background:var(--volt-blue-light);color:var(--volt-blue)}
.stat-icon.icon-green{background:rgba(16,185,129,.1);color:var(--volt-success)}
.stat-value{font-family:var(--font-display);font-size:var(--fs-3xl);font-weight:var(--fw-bold);color:var(--volt-white);line-height:1.1}
.stat-label{font-size:var(--fs-xs);color:var(--volt-muted);text-transform:uppercase;letter-spacing:0.08em;margin-top:var(--space-xs)}

/* --- Empty state --- */
.empty-state{text-align:center;padding:var(--space-4xl) var(--space-lg);color:var(--volt-muted)}
.empty-state i{font-size:var(--fs-5xl);color:var(--volt-elevated);display:block;margin-bottom:var(--space-md)}

/* --- Progress --- */
.progress{height:8px;background:var(--volt-elevated);border-radius:var(--radius-full);overflow:hidden}
.progress__bar{height:100%;background:var(--volt-amber);border-radius:var(--radius-full);transition:width var(--t-slow) var(--ease-out)}
.progress__bar.is-warn{background:var(--volt-warning)}.progress__bar.is-danger{background:var(--volt-error)}

/* --- Code / config block --- */
.code-block{position:relative;background:var(--volt-deep);border:1px solid var(--volt-border);border-radius:var(--radius-md);padding:var(--space-lg);font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--volt-text);white-space:pre-wrap;word-break:break-all;overflow-x:auto}
.copy-btn{position:absolute;top:var(--space-sm);right:var(--space-sm)}

/* --- User dropdown (nav) --- */
.nav-dropdown{position:relative}
.nav-dropdown__menu{position:absolute;right:0;top:calc(100% + 8px);min-width:200px;background:var(--volt-elevated);border:1px solid var(--volt-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:var(--space-xs);opacity:0;visibility:hidden;transform:translateY(4px);transition:all var(--t-fast);z-index:1100}
.nav-dropdown.is-open .nav-dropdown__menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dropdown__item{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);color:var(--volt-text);font-size:var(--fs-sm)}
.nav-dropdown__item:hover{background:var(--volt-amber-light);color:var(--volt-white)}
.nav-dropdown__divider{border:none;border-top:1px solid var(--volt-border);margin:var(--space-xs) 0}

/* --- Modal (vanilla) --- */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:2000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;padding:var(--space-lg)}
.modal-overlay.is-open{opacity:1;visibility:visible}
.modal{background:var(--volt-surface);border:1px solid var(--volt-border);border-radius:var(--radius-lg);width:100%;max-width:480px;box-shadow:var(--shadow-lg);transform:scale(.96);transition:transform .25s var(--ease-out);max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
.modal-overlay.is-open .modal{transform:scale(1)}
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-lg) var(--space-xl);border-bottom:1px solid var(--volt-border);flex-shrink:0}
.modal__title{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--volt-white)}
.modal__close{background:none;border:none;color:var(--volt-muted);font-size:var(--fs-xl);cursor:pointer}
.modal__close:hover{color:var(--volt-white)}
.modal__body{padding:var(--space-xl);text-align:center;overflow-y:auto;flex:1 1 auto}

/* --- Pagination --- */
.pagination{display:flex;justify-content:center;gap:var(--space-xs);list-style:none;padding:0;margin:var(--space-xl) 0 0}
.page-item .page-link{display:flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 var(--space-sm);background:var(--volt-surface);border:1px solid var(--volt-border);border-radius:var(--radius-sm);color:var(--volt-text);font-size:var(--fs-sm)}
.page-item .page-link:hover{border-color:var(--volt-amber);color:var(--volt-amber)}
.page-item.active .page-link{background:var(--volt-amber);border-color:var(--volt-amber);color:var(--volt-white)}
.page-item.disabled .page-link{opacity:.4;pointer-events:none}

/* --- Extra utilities (complete the shim) --- */
.fw-medium{font-weight:var(--fw-medium)}
.opacity-50{opacity:.5}.opacity-75{opacity:.75}

/* --- Pricing cards (public/pricing + billing/plans) --- */
.card--accent{border-color:var(--volt-border-hover)}
.price{font-family:var(--font-display);font-size:var(--fs-5xl);font-weight:var(--fw-bold);color:var(--volt-white);line-height:1}
.price-interval{font-size:var(--fs-sm);color:var(--volt-muted)}
.feature-list{list-style:none;padding:0;margin:0;text-align:left}
.feature-list li{display:flex;align-items:flex-start;gap:var(--space-sm);padding:var(--space-xs) 0;color:var(--volt-text);font-size:var(--fs-sm)}
.feature-list li i{color:var(--volt-amber);margin-top:3px;flex-shrink:0}

/* --- Error pages (403/404/500) --- */
.error-section{text-align:center}
.error-code{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:clamp(5rem,18vw,9rem);line-height:var(--lh-tight);margin-bottom:var(--space-md)}
.error-body{max-width:32rem;margin-left:auto;margin-right:auto}

/* --- Metric boxes (analytics, etc.) --- */
.metric-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-sm);margin-bottom:var(--space-md)}
.metric-grid--3{grid-template-columns:repeat(3,1fr)}
.metric-box{background:var(--volt-elevated);border:1px solid var(--volt-border);border-radius:var(--radius-md);padding:var(--space-md);text-align:center}
.metric-box--accent{background:var(--volt-amber-light);border-color:var(--volt-border-hover)}
.metric-box__label{font-size:var(--fs-xs);color:var(--volt-muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:var(--space-xs)}
.metric-box__value{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--volt-white);line-height:1.1}
.metric-box__value .unit{font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--volt-muted)}
.chart-card__canvas{padding:var(--space-lg)}
@media (max-width:480px){.metric-grid--3{grid-template-columns:repeat(2,1fr)}}

/* --- Stats band: 3-up variant (overrides the default 4-col at >=640) --- */
@media (min-width:640px){.stats__grid--3{grid-template-columns:repeat(3,1fr)}}