/* style.css — dark theme, kept visually identical to the legacy single-file
   panel. Color values mirror COLORS in js/config.js — if you change one,
   change the other. */
:root{
  --bg:#0a0a0a; --panel:#131313; --border:#1e1e1e; --text:#e0e0e0; --text-dim:#555;
  --accent:#534AB7; --accent-light:#7c6ff7; --ok:#4caf50; --warn:#ff9800; --err:#e05555;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);height:100vh;overflow:hidden}
.screen{display:none;height:100vh}
.screen.active{display:flex}
#s-login{align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 0%,#1a1040 0%,#0a0a0a 70%)}
.login-card{background:#131313;border:1px solid #222;border-radius:20px;padding:2.5rem;width:380px}
.login-logo{font-size:24px;font-weight:700;color:#fff;margin-bottom:4px;letter-spacing:-0.5px}
.login-logo span{color:var(--accent-light)}
.login-sub{font-size:13px;color:#555;margin-bottom:2rem}
.field-label{font-size:11px;color:#666;text-transform:uppercase;letter-spacing:0.8px;margin-bottom:6px}
.field-input{width:100%;padding:11px 14px;background:#0d0d0d;border:1px solid #222;border-radius:10px;color:var(--text);font-size:14px;margin-bottom:1rem;outline:none}
.field-input:focus{border-color:var(--accent-light)}
.remember{display:flex;align-items:center;gap:8px;font-size:13px;color:#555;margin-bottom:1.5rem;cursor:pointer}
.remember input{accent-color:var(--accent-light)}
.btn-login{width:100%;padding:12px;background:var(--accent);color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer}
.btn-login:hover{background:#6c63d4}
.err{font-size:13px;color:var(--err);margin-top:0.75rem;min-height:18px}

#s-dashboard{flex-direction:row}
.sidebar{width:220px;background:#0f0f0f;border-right:1px solid #1a1a1a;display:flex;flex-direction:column;flex-shrink:0;padding:1.25rem 0}
.sb-logo{font-size:16px;font-weight:700;color:#fff;padding:0 1.25rem 1.5rem;display:flex;align-items:center;gap:8px}
.sb-logo .badge{background:var(--accent);border-radius:6px;padding:2px 8px;font-size:11px;font-weight:600;color:#fff}
.sb-section{font-size:10px;color:#444;text-transform:uppercase;letter-spacing:1px;padding:0 1.25rem;margin:1rem 0 0.5rem}
.sb-btn{display:flex;align-items:center;gap:10px;padding:9px 1.25rem;color:#666;font-size:13px;cursor:pointer;border:none;background:transparent;width:100%;text-align:left}
.sb-btn:hover{color:#ccc;background:#161616}
.sb-btn.active{color:#fff;background:#161616;border-left:2px solid var(--accent)}
.sb-btn .icon{font-size:16px;width:18px;text-align:center}
.sb-btn .dot{width:6px;height:6px;border-radius:50%;margin-left:auto}
.dot-green{background:var(--ok)}
.dot-yellow{background:var(--warn)}
.dot-red{background:var(--err)}
.sb-bottom{margin-top:auto;padding:1rem 1.25rem;border-top:1px solid #1a1a1a}
.sb-user{display:flex;align-items:center;gap:10px}
.sb-avatar{width:32px;height:32px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:#fff;flex-shrink:0}
.sb-uname{font-size:13px;color:#ccc}
.sb-urole{font-size:11px;color:#555}
.btn-logout{margin-top:10px;width:100%;padding:7px;border:1px solid #222;border-radius:8px;background:transparent;color:#555;font-size:12px;cursor:pointer}
.btn-logout:hover{color:var(--err);border-color:var(--err)}

.main{flex:1;overflow-y:auto;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 2rem;border-bottom:1px solid #1a1a1a;flex-shrink:0}
.page-title{font-size:20px;font-weight:600;color:#fff}
.page-sub{font-size:13px;color:#555;margin-top:2px}
.topbar-right{display:flex;align-items:center;gap:10px}
.status-pill{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;font-size:12px}
.status-pill.ok{background:#0d1a0d;border:1px solid #1a3a1a;color:var(--ok)}
.status-pill.degraded{background:#1a1000;border:1px solid #3a2500;color:var(--warn)}
.status-pill .pdot{width:6px;height:6px;border-radius:50%;animation:pulse 2s infinite}
.status-pill.ok .pdot{background:var(--ok)}
.status-pill.degraded .pdot{background:var(--warn)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}
.btn-refresh{padding:6px 12px;border:1px solid #222;border-radius:8px;background:transparent;color:#666;font-size:12px;cursor:pointer}
.btn-refresh:hover{color:#ccc;border-color:#444}

.page-body{flex:1;padding:1.75rem 2rem}
.section{display:none}
.section.active{display:block}

.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:1.75rem}
.metric-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:1.25rem;position:relative}
.metric-card[data-metric]{cursor:pointer}
.metric-card[data-metric]:hover{border-color:#3a3a5a}
.mc-label{font-size:11px;color:#555;text-transform:uppercase;letter-spacing:0.6px;margin-bottom:10px}
.mc-val{font-size:32px;font-weight:600;color:#fff;line-height:1}
.mc-sub{font-size:12px;color:#444;margin-top:6px}
.mc-trend{font-size:12px;margin-top:4px}
.trend-ok{color:var(--ok)}
.trend-warn{color:var(--warn)}
.mc-spark{width:100%;height:28px;display:block;margin-top:8px}

.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:1.75rem}
.svc-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:1.25rem;cursor:pointer}
.svc-card:hover{border-color:#2a2a2a}
.svc-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.svc-name{font-size:14px;font-weight:500;color:#fff}
.svc-badge{font-size:11px;padding:3px 8px;border-radius:20px;font-weight:500}
.badge-ok{background:#0d1a0d;color:var(--ok);border:1px solid #1a3a1a}
.badge-warn{background:#1a1000;color:var(--warn);border:1px solid #3a2500}
.badge-err{background:#1a0000;color:var(--err);border:1px solid #3a1a1a}
.svc-port{font-size:13px;color:#555;margin-bottom:6px}
.svc-detail{font-size:12px;color:#444}

.log-wrap{background:#0a0a0a;border:1px solid #1a1a1a;border-radius:12px;padding:1.25rem;margin-top:1.5rem}
.log-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;flex-wrap:wrap;gap:8px}
.log-title{font-size:13px;font-weight:500;color:#888}
.log-box{font-family:'SF Mono',Monaco,monospace;font-size:12px;color:#666;max-height:260px;overflow-y:auto;white-space:pre-wrap;line-height:1.6}

.detail-grid{display:grid;grid-template-columns:2fr 1fr;gap:1.5rem}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:1.5rem}
.panel-title{font-size:11px;font-weight:500;color:#888;margin-bottom:1.25rem;text-transform:uppercase;letter-spacing:0.5px}
.info-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid #151515;font-size:13px}
.info-row:last-child{border-bottom:none}
.ir-key{color:#555}
.ir-val{color:#ccc}
.ir-val.ok{color:var(--ok)}
.ir-val.warn{color:var(--warn)}
.actions{display:flex;gap:8px;margin-top:1.25rem;flex-wrap:wrap}
.btn-action{padding:8px 16px;border:1px solid #222;border-radius:8px;background:transparent;color:#aaa;font-size:13px;cursor:pointer}
.btn-action:hover{background:#1a1a1a;color:#fff}
.btn-action.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-action.primary:hover{background:#6c63d4}

.vpn-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.vpn-card{background:#0f0f0f;border:1px solid #1a1a1a;border-radius:10px;padding:1rem}
.vpn-proto{font-size:11px;color:#555;text-transform:uppercase;letter-spacing:0.6px;margin-bottom:4px}
.vpn-port{font-size:24px;font-weight:600;color:#fff}
.vpn-type{font-size:12px;color:#444;margin-top:4px}
.vpn-user-row{display:flex;align-items:center;padding:8px 6px;border-bottom:1px solid #151515;gap:6px}

.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}

.backup-list{max-height:160px;overflow-y:auto;font-size:11px;margin-top:6px}
.backup-item{display:flex;align-items:center;padding:4px 0;border-bottom:1px solid #151515;font-size:11px}
.backup-item:last-child{border-bottom:none}
.backup-name{color:#888;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:130px;flex-shrink:0}
.backup-size{color:#555;margin:0 6px;white-space:nowrap}
.backup-actions{margin-left:auto;display:flex;gap:4px}
.config-field{width:100%;padding:7px 10px;background:#0d0d0d;border:1px solid #222;border-radius:7px;color:var(--text);font-size:12px;margin-bottom:6px;outline:none;font-family:inherit}
.config-field:focus{border-color:var(--accent)}
.btn-mini{padding:2px 7px;border:1px solid #222;border-radius:4px;background:transparent;color:#888;font-size:10px;cursor:pointer}
.btn-mini:hover{background:#1a1a1a;color:#fff}
.btn-mini.danger:hover{background:#1a0000;color:var(--err);border-color:var(--err)}
.toast{position:fixed;bottom:20px;right:20px;background:#131313;border:1px solid #222;border-radius:10px;padding:12px 20px;font-size:13px;z-index:100;display:none;animation:fadeIn 0.3s}
.toast.show{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.docker-item{font-size:11px;color:#555;padding:6px 0;border-bottom:1px solid #151515}

/* ---- Graphs (Canvas) ------------------------------------------------- */
.graph-tooltip{position:absolute;display:none;background:#0d0d0d;border:1px solid #333;border-radius:6px;padding:4px 8px;font-size:11px;color:#ccc;pointer-events:none;z-index:5;white-space:nowrap}
.graph-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:200}
.graph-modal.show{display:flex}
.graph-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.7)}
.graph-modal-body{position:relative;background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:1.5rem;width:min(900px,92vw)}
.graph-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.graph-modal-title{font-size:16px;font-weight:600;color:#fff}
.graph-modal-close{background:transparent;border:none;color:#666;font-size:20px;cursor:pointer;line-height:1}
.graph-modal-close:hover{color:#fff}
.graph-modal-ranges{display:flex;gap:6px;margin-bottom:1rem}
.graph-modal-canvas-wrap{position:relative;width:100%;height:340px}
#graph-modal-canvas{width:100%;height:100%;display:block}

/* ---- Logs viewer ------------------------------------------------------ */
.logs-toolbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:1rem;align-items:center}
.logs-toolbar-group{display:flex;gap:6px;flex-wrap:wrap}
.logs-search-wrap{flex:1;min-width:200px}
#logs-search-input{margin:0}
.logs-autorefresh{display:flex;align-items:center;gap:6px;font-size:12px;color:#888}
.log-line{display:flex;align-items:center;gap:8px;font-family:'SF Mono',Monaco,monospace;font-size:11.5px;padding:0 4px}
.log-line:hover{background:#111}
.log-ts{color:#555;flex-shrink:0;width:78px}
.log-mod{color:#7c6ff7;flex-shrink:0;width:70px;overflow:hidden;text-overflow:ellipsis}
.log-msg{color:#aaa;overflow:hidden;text-overflow:ellipsis;flex:1}
.log-badge{flex-shrink:0;width:44px;text-align:center;border-radius:4px;font-size:10px;font-weight:600;padding:1px 0}
.log-badge-info{background:#0d1a0d;color:var(--ok)}
.log-badge-warn{background:#1a1000;color:var(--warn)}
.log-badge-error{background:#1a0000;color:var(--err)}
.logs-viewport{background:#0a0a0a;border-radius:8px}

@media(max-width:768px){
  .sidebar{width:60px}
  .sidebar .sb-logo span.badge,.sidebar .sb-section,.sidebar .sb-btn span:not(.icon),.sidebar .sb-bottom .sb-urole{display:none}
  .sb-btn{padding:9px;justify-content:center}
  .sb-bottom .sb-user{justify-content:center}
  .metrics{grid-template-columns:repeat(2,1fr)}
  .services-grid{grid-template-columns:1fr}
  .detail-grid{grid-template-columns:1fr}
  .settings-grid{grid-template-columns:1fr}
  .page-body{padding:1rem}
  .topbar{padding:1rem;flex-wrap:wrap;gap:8px}
}