/* VPN Portal — Design System */

:root {
  --primary:       #2563EB;
  --primary-h:     #1D4ED8;
  --primary-muted: rgba(37,99,235,.12);
  --sidebar-bg:    #0F172A;
  --sidebar-text:  #94A3B8;
  --sidebar-hover: rgba(255,255,255,.06);
  --sidebar-act:   rgba(255,255,255,.10);
  --sidebar-bdr:   rgba(255,255,255,.07);
  --surface:       #FFFFFF;
  --surface-2:     #F8FAFC;
  --surface-3:     #F1F5F9;
  --border:        #E2E8F0;
  --text:          #0F172A;
  --text-2:        #475569;
  --text-muted:    #94A3B8;
  --success:       #059669;
  --warning:       #D97706;
  --danger:        #DC2626;
  --info:          #0EA5E9;
  --radius:        6px;
  --radius-lg:     10px;
  --shadow-sm:     0 1px 3px rgba(0,0,0,.08);
  --shadow:        0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:     0 8px 32px rgba(0,0,0,.18);
  --font:          'IBM Plex Sans', system-ui, sans-serif;
  --mono:          'IBM Plex Mono', 'Courier New', monospace;
  --sidebar-w:     240px;
  --topbar-h:      56px;
  --ease:          .18s ease;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:14px; -webkit-text-size-adjust:100%; }
body { font-family:var(--font); color:var(--text); background:var(--surface-2); line-height:1.5; }
a    { color:var(--primary); text-decoration:none; }
a:hover { text-decoration:underline; }
code,pre,.mono { font-family:var(--mono); }
svg  { display:block; }
input,button,select,textarea { font-family:inherit; }
button { cursor:pointer; }

/* ── Login ──────────────────────────────────────────────── */
body.login-body { background:var(--sidebar-bg); }

.login-page {
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr 1fr;
}

.login-branding {
  background:var(--sidebar-bg);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:48px; position:relative; overflow:hidden; color:var(--sidebar-text);
}
.login-branding::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(circle at 25% 25%,rgba(37,99,235,.2) 0%,transparent 55%),
              radial-gradient(circle at 75% 75%,rgba(14,165,233,.12) 0%,transparent 45%);
}
.login-branding::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(148,163,184,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(148,163,184,.04) 1px,transparent 1px);
  background-size:40px 40px;
}
.login-branding-inner { position:relative; z-index:1; }
.login-logo { display:flex; align-items:center; gap:12px; margin-bottom:56px; }
.login-logo svg { width:42px; height:42px; color:var(--primary); flex-shrink:0; }
.login-logo-text { font-size:1.25rem; color:#CBD5E1; letter-spacing:-.01em; }
.login-logo-text strong { color:#F1F5F9; font-weight:700; }
.login-tagline h1 { font-size:2rem; font-weight:700; color:#F1F5F9; letter-spacing:-.03em; line-height:1.2; margin-bottom:14px; }
.login-tagline p  { color:#64748B; font-size:.925rem; line-height:1.65; max-width:320px; margin-bottom:36px; }
.login-features { display:flex; flex-direction:column; gap:10px; }
.login-feature { display:flex; align-items:center; gap:12px; font-size:.85rem; color:#475569; }
.login-feature-icon { width:28px; height:28px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:var(--radius); flex-shrink:0; }
.login-branding-footer { position:relative; z-index:1; }

.login-form-panel { background:var(--surface); display:flex; flex-direction:column; justify-content:center; align-items:center; padding:48px; }
.login-form-wrap  { width:100%; max-width:380px; flex:1; display:flex; flex-direction:column; justify-content:center; }
.login-step       { display:none; flex-direction:column; }
.login-step.active{ display:flex; }
.login-form-header { margin-bottom:28px; }
.login-form-header h2 { font-size:1.5rem; font-weight:700; margin-bottom:4px; }
.login-form-header p  { color:var(--text-2); font-size:.875rem; }
.btn-back { display:inline-flex; align-items:center; gap:6px; background:none; border:none; color:var(--text-muted); font-size:.8rem; padding:0; margin-bottom:16px; transition:color var(--ease); }
.btn-back svg { width:14px; height:14px; } .btn-back:hover { color:var(--text); }
.input-password-wrap { position:relative; }
.input-password-wrap .form-control { padding-right:42px; }
.btn-show-password { position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--text-muted); padding:4px; display:flex; align-items:center; }
.btn-show-password svg { width:16px; height:16px; }
.otp-input-group { display:flex; align-items:center; gap:6px; margin:8px 0; }
.otp-input { width:44px; height:52px; text-align:center; font-family:var(--mono); font-size:1.4rem; font-weight:600; border:1.5px solid var(--border); border-radius:var(--radius); background:var(--surface-2); color:var(--text); outline:none; transition:border-color var(--ease),box-shadow var(--ease); -moz-appearance:textfield; }
.otp-input::-webkit-inner-spin-button,.otp-input::-webkit-outer-spin-button { -webkit-appearance:none; }
.otp-input:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-muted); background:var(--surface); }
.otp-separator { color:var(--text-muted); font-size:1rem; padding:0 2px; user-select:none; }
.login-hint { font-family:var(--mono); font-size:.72rem; color:var(--text-muted); text-align:center; margin-top:12px; }
.login-footer-note { font-size:.75rem; color:var(--text-muted); text-align:center; margin-top:32px; }
.btn-spinner .spinner-icon { width:16px; height:16px; animation:spin .8s linear infinite; }

/* ── Forms ───────────────────────────────────────────────── */
.form-group { margin-bottom:16px; }
.form-label { display:block; font-size:.75rem; font-weight:600; color:var(--text-2); margin-bottom:6px; letter-spacing:.04em; text-transform:uppercase; }
.form-control { width:100%; padding:9px 13px; border:1.5px solid var(--border); border-radius:var(--radius); font-size:.9rem; color:var(--text); background:var(--surface); outline:none; transition:border-color var(--ease),box-shadow var(--ease); }
.form-control:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-muted); }
.form-control.mono  { font-family:var(--mono); letter-spacing:.08em; }
select.form-control { cursor:pointer; }
textarea.form-control { resize:vertical; min-height:80px; }
.form-hint { font-size:.78rem; color:var(--text-muted); margin-top:4px; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border:none; border-radius:var(--radius); font-size:.875rem; font-weight:600; line-height:1; white-space:nowrap; text-decoration:none; transition:all var(--ease); }
.btn:hover { text-decoration:none; }
.btn:disabled { opacity:.5; cursor:not-allowed; pointer-events:none; }
.btn svg { width:15px; height:15px; flex-shrink:0; }
.btn-primary   { background:var(--primary);  color:#fff; }
.btn-primary:hover  { background:var(--primary-h); color:#fff; }
.btn-secondary { background:var(--surface-3); color:var(--text); border:1px solid var(--border); }
.btn-secondary:hover { background:var(--border); }
.btn-danger  { background:#FEE2E2; color:var(--danger); }
.btn-danger:hover  { background:var(--danger); color:#fff; }
.btn-ghost   { background:transparent; color:var(--text-2); }
.btn-ghost:hover   { background:var(--surface-3); color:var(--text); }
.btn-success { background:#DCFCE7; color:var(--success); }
.btn-success:hover { background:var(--success); color:#fff; }
.btn-warning { background:#FEF3C7; color:#92400E; }
.btn-warning:hover { background:#F59E0B; color:#fff; }
.btn-full  { width:100%; justify-content:center; }
.btn-sm    { padding:5px 11px; font-size:.8rem; }
.btn-icon  { padding:7px; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── App layout ──────────────────────────────────────────── */
body.app-body { background:var(--surface-2); overflow:hidden; height:100vh; height:calc(var(--real-vh,1vh)*100); height:100dvh; }
.app-layout { display:flex; height:100vh; height:calc(var(--real-vh,1vh)*100); height:100dvh; overflow:hidden; }

/* Sidebar */
.sidebar { width:var(--sidebar-w); flex-shrink:0; background:var(--sidebar-bg); border-right:1px solid var(--sidebar-bdr); display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden; transition:transform var(--ease); }
.sidebar-header { padding:0 16px; border-bottom:1px solid var(--sidebar-bdr); min-height:var(--topbar-h); display:flex; align-items:center; flex-shrink:0; }
.sidebar-logo { display:flex; align-items:center; gap:10px; width:100%; }
.sidebar-logo img { max-height:30px; max-width:110px; object-fit:contain; filter:brightness(0) invert(1); }
.logo-default { display:flex; align-items:center; gap:8px; color:#F1F5F9; font-weight:700; font-size:.95rem; }
.logo-default svg { color:var(--primary); width:22px; height:22px; }
.sidebar-nav { flex:1; padding:12px 0; overflow-y:auto; }
.sidebar-section { padding:16px 14px 4px; font-size:.65rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#334155; }
.sidebar-item { display:flex; align-items:center; gap:10px; padding:9px 16px; color:var(--sidebar-text); background:transparent; border:none; width:100%; text-align:left; font-size:.875rem; font-weight:500; position:relative; transition:background var(--ease),color var(--ease); }
.sidebar-item:hover { background:var(--sidebar-hover); color:#CBD5E1; }
.sidebar-item.active { background:var(--sidebar-act); color:#F8FAFC; }
.sidebar-item.active::before { content:''; position:absolute; left:0; top:6px; bottom:6px; width:3px; background:var(--primary); border-radius:0 2px 2px 0; }
.sidebar-item svg { width:16px; height:16px; flex-shrink:0; opacity:.7; }
.sidebar-item.active svg { opacity:1; color:#60A5FA; }
.sidebar-item > span { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-footer { padding:14px; border-top:1px solid var(--sidebar-bdr); flex-shrink:0; }
.sidebar-user .user-name { color:#64748B; font-size:.8rem; font-weight:600; }
.sidebar-user .user-role { color:#334155; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; }

/* Main */
.app-main { flex:1; display:flex; flex-direction:column; min-width:0; overflow:hidden; }

/* Topbar */
.topbar { height:var(--topbar-h); flex-shrink:0; background:var(--surface); border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 20px; gap:12px; z-index:100; }
.topbar-left  { display:flex; align-items:center; gap:12px; flex:1; min-width:0; }
.topbar-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.btn-sidebar-toggle { width:32px; height:32px; border:none; background:transparent; border-radius:var(--radius); color:var(--text-2); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all var(--ease); }
.btn-sidebar-toggle svg { width:18px; height:18px; }
.btn-sidebar-toggle:hover { background:var(--surface-3); color:var(--text); }
.topbar-breadcrumb { font-weight:600; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar-user-menu { position:relative; }
.topbar-user-btn { display:flex; align-items:center; gap:8px; padding:5px 10px; background:var(--surface-3); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); font-size:.85rem; font-weight:500; transition:all var(--ease); }
.topbar-user-btn:hover { background:var(--border); }
.topbar-avatar { width:26px; height:26px; background:var(--primary); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:.72rem; flex-shrink:0; }
.topbar-username { max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-dropdown { position:absolute; top:calc(100% + 6px); right:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow); min-width:180px; z-index:200; overflow:hidden; }
.dropdown-item { display:flex; align-items:center; gap:10px; padding:10px 14px; width:100%; background:transparent; border:none; font-size:.875rem; color:var(--text); text-align:left; transition:background var(--ease); }
.dropdown-item svg { width:15px; height:15px; color:var(--text-muted); flex-shrink:0; }
.dropdown-item:hover { background:var(--surface-2); }
.dropdown-item-danger { color:var(--danger); }
.dropdown-item-danger svg { color:var(--danger); }
.dropdown-item-danger:hover { background:#FEE2E2; }
.dropdown-divider { height:1px; background:var(--border); margin:4px 0; }

/* Page content */
.page-content { flex:1; overflow-y:auto; padding:28px; min-width:0; }
.page-loading  { display:flex; align-items:center; justify-content:center; height:200px; }
.spinner { width:28px; height:28px; border:3px solid var(--border); border-top-color:var(--primary); border-radius:50%; animation:spin .7s linear infinite; }
.page-header { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:24px; }
.page-title    { font-size:1.3rem; font-weight:700; letter-spacing:-.02em; }
.page-subtitle { font-size:.85rem; color:var(--text-2); margin-top:2px; }
.page-actions  { display:flex; gap:8px; flex-wrap:wrap; }

/* Cards */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.card-header { padding:14px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.card-title  { font-size:.9rem; font-weight:700; }
.card-body   { padding:20px; }
.mb-4 { margin-bottom:24px; }

/* Stat cards */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(185px,1fr)); gap:16px; margin-bottom:24px; }
.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; position:relative; overflow:hidden; transition:box-shadow var(--ease); }
.stat-card:hover { box-shadow:var(--shadow); }
.stat-card::after { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--primary); border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
.stat-card.green::after { background:var(--success); }
.stat-card.amber::after { background:var(--warning); }
.stat-card.red::after   { background:var(--danger); }
.stat-card.blue::after  { background:var(--info); }
.stat-label { font-size:.7rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted); margin-bottom:8px; }
.stat-value { font-size:2rem; font-weight:700; font-family:var(--mono); line-height:1; }

/* Table */
.table-wrapper { overflow-x:auto; border-radius:var(--radius-lg); border:1px solid var(--border); }
table { width:100%; border-collapse:collapse; font-size:.875rem; }
thead th { background:var(--surface-3); padding:10px 16px; text-align:left; font-size:.7rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted); border-bottom:1px solid var(--border); white-space:nowrap; }
tbody tr { border-bottom:1px solid var(--border); transition:background var(--ease); }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:var(--surface-2); }
tbody td { padding:11px 16px; vertical-align:middle; }
.td-mono    { font-family:var(--mono); font-size:.8rem; color:var(--text-2); }
.td-actions { white-space:nowrap; display:flex; gap:4px; align-items:center; }

/* Badges */
.badge { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:100px; font-size:.7rem; font-weight:700; white-space:nowrap; }
.badge-primary { background:var(--primary-muted); color:var(--primary); }
.badge-success { background:#DCFCE7; color:#166534; }
.badge-warning { background:#FEF9C3; color:#854D0E; }
.badge-danger  { background:#FEE2E2; color:#991B1B; }
.badge-info    { background:#E0F2FE; color:#075985; }
.badge-neutral { background:var(--surface-3); color:var(--text-2); }

/* Modal */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); z-index:1000; display:flex; align-items:center; justify-content:center; padding:16px; animation:fadeIn .15s ease; }
@keyframes fadeIn { from { opacity:0; } }
.modal-container { background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); width:100%; max-width:580px; height:auto; max-height:92vh; display:flex; flex-direction:column; overflow:hidden; animation:slideUp .2s ease; }
@keyframes slideUp { from { opacity:0; transform:translateY(16px); } }
.modal-container.modal-lg { max-width:780px; }
.modal-container.modal-xl { max-width:960px; }
.modal-container.modal-sm { max-width:420px; }
/* Approval popup: taller to avoid scrollbars on normal content */
.modal-container.modal-approve { max-width:640px; }
.modal-header { padding:18px 22px 14px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-shrink:0; background:var(--surface); z-index:1; border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
.modal-title  { font-size:1rem; font-weight:700; }
.modal-close  { width:28px; height:28px; border:none; background:var(--surface-3); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; color:var(--text-2); font-size:.8rem; flex-shrink:0; transition:all var(--ease); }
.modal-close:hover { background:var(--danger); color:#fff; }
.modal-body   { padding:22px; overflow-y:auto; flex:1; min-height:0; }
.modal-footer { padding:14px 22px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px; flex-shrink:0; }

/* Alerts */
.alert { padding:11px 14px; border-radius:var(--radius); font-size:.875rem; border:1px solid; margin-bottom:16px; line-height:1.5; }
.alert-error   { background:#FEE2E2; border-color:#FECACA; color:#991B1B; }
.alert-success { background:#DCFCE7; border-color:#BBF7D0; color:#166534; }
.alert-warning { background:#FEF9C3; border-color:#FEF08A; color:#854D0E; }
.alert-info    { background:#E0F2FE; border-color:#BAE6FD; color:#075985; }

/* Toasts */
.toast-container { position:fixed; bottom:24px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:8px; max-width:360px; }
.toast { display:flex; align-items:flex-start; gap:10px; padding:12px 14px; background:#1E293B; color:#F1F5F9; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); border-left:3px solid var(--primary); font-size:.875rem; animation:slideInRight .22s ease; }
@keyframes slideInRight { from { opacity:0; transform:translateX(16px); } }
.toast.success { border-color:var(--success); }
.toast.error   { border-color:var(--danger); }
.toast.warning { border-color:var(--warning); }
.toast-msg   { flex:1; line-height:1.4; }
.toast-close { background:transparent; border:none; color:#475569; font-size:.85rem; padding:2px; flex-shrink:0; line-height:1; }

/* Config block */
.config-block { background:#0F172A; border:1px solid #1E293B; border-radius:var(--radius-lg); padding:16px 18px; font-family:var(--mono); font-size:.78rem; color:#94A3B8; white-space:pre; overflow-x:auto; line-height:1.7; max-height:360px; overflow-y:auto; }

/* QR */
.qr-container { display:flex; flex-direction:column; align-items:center; gap:14px; padding:20px; background:var(--surface-2); border-radius:var(--radius-lg); border:1px solid var(--border); }
.secret-display { font-family:var(--mono); font-size:1rem; letter-spacing:.15em; color:var(--primary); background:var(--primary-muted); padding:8px 14px; border-radius:var(--radius); user-select:all; word-break:break-all; }

/* Search */
.search-bar { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; align-items:center; }
.search-input-wrap { position:relative; flex:1; min-width:180px; }
.search-input-wrap svg { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--text-muted); width:14px; height:14px; pointer-events:none; }
.search-input-wrap input { width:100%; padding:8px 12px 8px 34px; border:1.5px solid var(--border); border-radius:var(--radius); font-size:.875rem; outline:none; background:var(--surface); color:var(--text); transition:border-color var(--ease); }
.search-input-wrap input:focus { border-color:var(--primary); }

/* Empty state */
.empty-state { text-align:center; padding:48px 24px; color:var(--text-muted); }
.empty-icon  { font-size:2.5rem; margin-bottom:12px; opacity:.35; }
.empty-state h3 { font-size:.95rem; font-weight:600; color:var(--text-2); margin-bottom:6px; }

/* Utility */
.flex            { display:flex; }
.items-center    { align-items:center; }
.justify-between { justify-content:space-between; }
.gap-2 { gap:8px; } .gap-3 { gap:12px; }
.mt-2 { margin-top:8px; } .mt-4 { margin-top:16px; }
.mb-2 { margin-bottom:8px; } .mb-3 { margin-bottom:12px; }
.text-sm   { font-size:.8rem; }
.text-muted{ color:var(--text-muted); }
.font-mono { font-family:var(--mono); }
.font-bold { font-weight:700; }
.text-danger { color:var(--danger); }
.w-full  { width:100%; }
.hidden  { display:none !important; }
.divider { border:none; border-top:1px solid var(--border); margin:20px 0; }

/* Responsive */
@media (max-width:768px) {
  .login-page { grid-template-columns:1fr; }
  .login-branding { display:none; }
  .login-form-panel { padding:32px 24px; }
  .sidebar { position:fixed; left:0; top:0; height:100vh; height:calc(var(--real-vh,1vh)*100); height:100dvh; z-index:300; transform:translateX(-100%); transition:transform .25s ease; box-shadow:var(--shadow-lg); }
  .sidebar.open { transform:translateX(0); }
  .page-content { padding:16px; }
  .stats-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:480px) {
  .stats-grid { grid-template-columns:1fr; }
  .page-header { flex-direction:column; }
  .topbar-username { display:none; }
}

/* User pill checkboxes (horizontal wrap layout) */
.user-pill { display:inline-flex; align-items:center; gap:5px; padding:4px 10px;
  border:1.5px solid var(--border); border-radius:100px; cursor:pointer;
  font-size:.8rem; background:var(--surface-2); white-space:nowrap;
  user-select:none; transition:background var(--ease), border-color var(--ease); }
.user-pill:hover { background:var(--surface-3); border-color:var(--primary); }
.user-pill:has(input:checked) { background:var(--primary-muted); border-color:var(--primary); }
.user-pill input[type=checkbox] { accent-color:var(--primary); }
/* Proxy links popup — scrollable table with sticky header */
.proxy-links-scroll-wrap { max-height:52vh; overflow-y:auto; border:1px solid var(--border); border-radius:var(--radius-lg); }
.proxy-links-scroll-wrap .table-wrapper { border:none; border-radius:0; overflow-x:auto; }
.proxy-links-scroll-wrap thead th { position:sticky; top:0; background:var(--surface-2); z-index:1; }