/* SSHFS Web Manager — Application Stylesheet
   Design system derived from NEO SSH-Win Manager website (site.css + app-sim.css) */

/* ============================================================ CSS Variables ============================================================ */
:root {
  --accent: #00b4d8; --accent-2: #0077b6;
  --accent-soft: rgba(0,180,216,0.12); --accent-border: rgba(0,180,216,0.35);
  --ok: #00d464; --warn: #f59e0b; --err: #ef4444;
  --mono: "JetBrains Mono","Fira Code",ui-monospace,monospace;
  --sans: "Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --radius: 14px; --radius-sm: 10px; --radius-lg: 18px;
}
:root, [data-theme="dark"] {
  --bg-0:#0a0a0f; --bg-1:#0d0d12; --bg-2:#0f0f1a; --bg-3:#14141f; --bg-4:#1a1a2e;
  --border:#1e1e30; --border-strong:#2a2a4a;
  --text:#e4eaf0; --text-2:#c8d6e5; --text-3:#8b949e; --text-4:#556070;
  --shadow-card:0 1px 0 rgba(255,255,255,.02) inset, 0 24px 60px -30px rgba(0,0,0,.7);
}
[data-theme="light"] {
  --bg-0:#e4e8ef; --bg-1:#f0f2f5; --bg-2:#f8fafc; --bg-3:#fff; --bg-4:#eef2f7;
  --border:#d0d8e4; --border-strong:#a8c0d8;
  --text:#1a2332; --text-2:#2a3a4a; --text-3:#4a5a6a; --text-4:#6a7a8a;
  --accent:#0077b6; --accent-2:#00b4d8;
  --accent-soft:rgba(0,119,182,.10); --accent-border:rgba(0,119,182,.35);
  --shadow-card:0 1px 2px rgba(15,23,42,.04), 0 12px 40px -20px rgba(15,23,42,.18);
}

/* ============================================================ Reset ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg-1);color:var(--text-2);font-family:var(--sans);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;padding:0}
input,select,textarea{font:inherit}
svg{display:block}

/* ============================================================ App Shell ============================================================ */
.app-shell { display:grid; grid-template-columns:60px 1fr; min-height:100vh; overflow:hidden; }
.app-main { min-width:0; min-height:100vh; overflow:hidden; display:flex; flex-direction:column; }

/* ============================================================ Sidebar ============================================================ */
.app-sidebar {
  display:flex; flex-direction:column; align-items:center;
  padding:12px 8px; gap:6px; border-right:1px solid var(--border);
  background:color-mix(in oklab, var(--bg-1) 94%, var(--bg-4));
  position:sticky; top:0; height:100vh;
}
.sidebar-logo { width:42px; height:42px; display:grid; place-items:center; margin-bottom:8px; }
.sidebar-nav { display:flex; flex-direction:column; gap:6px; flex:1; }
.sidebar-bottom { display:flex; flex-direction:column; gap:6px; }
.sidebar-btn {
  width:42px; height:42px; display:grid; place-items:center;
  border-radius:var(--radius-sm); border:1px solid var(--border);
  background:var(--bg-3); color:var(--text-3);
  transition:all .16s ease;
}
.sidebar-btn svg { width:18px; height:18px; }
.sidebar-btn:hover { color:var(--text); border-color:var(--border-strong); transform:translateY(-1px); }
.sidebar-btn.is-active { background:var(--accent-soft); border-color:var(--accent-border); color:var(--accent); }
.sidebar-btn.is-danger:hover { color:var(--err); border-color:rgba(239,68,68,.4); }

/* ============================================================ Views ============================================================ */
.view { display:flex; flex-direction:column; height:100vh; overflow:hidden; }
.view-header {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 20px; border-bottom:1px solid var(--border);
  background:color-mix(in oklab, var(--bg-2) 96%, transparent);
  flex-shrink:0;
}
.view-title { margin:0; font-size:15px; font-weight:600; color:var(--text); }
.view-actions { display:flex; align-items:center; gap:8px; }
.view-body { flex:1; overflow:auto; padding:16px 20px; display:flex; flex-direction:column; gap:12px; }

/* ============================================================ Buttons ============================================================ */
.btn {
  display:inline-flex; align-items:center; gap:6px; padding:7px 14px;
  border-radius:var(--radius-sm); border:1px solid var(--border);
  background:var(--bg-3); color:var(--text-2); font-size:13px; font-weight:500;
  transition:all .15s ease; white-space:nowrap;
}
.btn:hover { border-color:var(--border-strong); color:var(--text); transform:translateY(-1px); }
.btn svg { width:15px; height:15px; }
.btn-primary { background:var(--accent-soft); border-color:var(--accent-border); color:var(--accent); }
.btn-primary:hover { background:rgba(0,180,216,.2); }
.btn-danger { color:var(--err); border-color:rgba(239,68,68,.3); background:rgba(239,68,68,.06); }
.btn-danger:hover { background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.5); }
.btn-sm { padding:5px 10px; font-size:12px; }
.btn-block { width:100%; justify-content:center; }
.btn-icon { width:32px; height:32px; padding:0; display:grid; place-items:center; border-radius:var(--radius-sm); }
.btn-icon svg { width:15px; height:15px; }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }

/* ============================================================ Connection Card ============================================================ */
.conn-card {
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  border-radius:var(--radius); border:1px solid var(--border);
  background:color-mix(in oklab, var(--bg-3) 96%, transparent);
  box-shadow:var(--shadow-card); cursor:pointer;
  transition:all .16s ease;
}
.conn-card:hover { transform:translateY(-1px); border-color:var(--border-strong); }
.conn-card.is-selected { border-color:var(--accent-border); background:color-mix(in oklab, var(--bg-3) 86%, var(--accent-soft)); }
.conn-card.is-mounted { border-color:rgba(0,180,216,.48); background:#10202a; box-shadow:0 18px 40px -30px rgba(0,180,216,.35); }
.conn-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:10px; border:1px solid var(--border); background:var(--bg-4); color:var(--text-3); flex-shrink:0; }
.conn-icon svg { width:18px; height:18px; }
.conn-card.is-mounted .conn-icon { color:var(--accent); border-color:var(--accent-border); }
.conn-meta { flex:1; min-width:0; }
.conn-name { font-size:13px; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conn-host { font-family:var(--mono); font-size:11px; color:var(--text-4); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conn-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.mount-chip {
  padding:4px 10px; border-radius:8px; font-family:var(--mono); font-size:11px; font-weight:700;
  border:1px solid var(--accent-border); background:var(--bg-4); color:var(--accent);
}
.conn-card.is-mounted .mount-chip { background:rgba(0,212,100,.1); color:var(--ok); border-color:rgba(0,212,100,.42); }
.loading-pill { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; border:1px solid var(--accent-border); background:var(--accent-soft); color:var(--accent); font-family:var(--mono); font-size:11px; }
.spinner { width:11px; height:11px; border:2px solid rgba(0,180,216,.2); border-top-color:currentColor; border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ============================================================ Detail Panel ============================================================ */
.detail-panel { display:flex; flex-direction:column; height:100%; overflow:hidden; }
.detail-body { flex:1; overflow-y:auto; padding:18px; }
.detail-section { margin-bottom:20px; }
.detail-section-title { font-size:11px; font-weight:700; color:var(--text-4); text-transform:uppercase; letter-spacing:.06em; margin:0 0 10px; }
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.info-item { background:var(--bg-3); border:1px solid var(--border); border-radius:10px; padding:10px 12px; }
.info-label { font-size:11px; color:var(--text-4); margin-bottom:3px; }
.info-value { font-family:var(--mono); font-size:12px; color:var(--text-2); word-break:break-all; }
.info-bar { height:4px; border-radius:999px; background:var(--border); margin-top:6px; overflow:hidden; }
.info-bar-fill { height:100%; border-radius:999px; background:var(--accent); transition:width .4s ease; }
.info-bar-fill.warn { background:var(--warn); }
.info-bar-fill.err { background:var(--err); }

/* ============================================================ Home Layout ============================================================ */
.home-view { display:grid; grid-template-columns:minmax(300px,380px) 1px 1fr; height:100vh; overflow:hidden; }
.list-panel { display:flex; flex-direction:column; border-right:1px solid var(--border); min-width:0; }
.list-panel-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:14px 16px; border-bottom:1px solid var(--border); }
.list-panel-head h2 { margin:0; font-size:14px; font-weight:600; color:var(--text); }
.list-body { flex:1; overflow-y:auto; padding:10px; display:flex; flex-direction:column; gap:8px; }
.right-panel { display:flex; flex-direction:column; min-width:0; background:color-mix(in oklab, var(--bg-2) 96%, transparent); }

/* ============================================================ Status Bar ============================================================ */
.status-bar { padding:6px 20px; border-top:1px solid var(--border); background:var(--bg-1); font-family:var(--mono); font-size:11px; color:var(--text-4); display:flex; align-items:center; gap:12px; }
.status-dot { width:6px; height:6px; border-radius:50%; background:var(--ok); }

/* ============================================================ Modal ============================================================ */
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.65); display:grid; place-items:center; z-index:1000; padding:20px; }
.modal { background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-lg); width:100%; max-width:540px; max-height:90vh; display:flex; flex-direction:column; box-shadow:0 40px 100px -30px rgba(0,0,0,.8); }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--border); }
.modal-title { margin:0; font-size:15px; font-weight:600; color:var(--text); }
.modal-body { flex:1; overflow-y:auto; padding:20px; }
.modal-footer { display:flex; justify-content:flex-end; gap:8px; padding:14px 20px; border-top:1px solid var(--border); }
.modal-close { display:grid; place-items:center; width:28px; height:28px; border-radius:8px; color:var(--text-3); }
.modal-close:hover { background:var(--bg-4); color:var(--text); }

/* ============================================================ Forms ============================================================ */
.form-field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.form-field label { font-size:12px; font-weight:600; color:var(--text-3); text-transform:uppercase; letter-spacing:.04em; }
.form-field input, .form-field select, .form-field textarea {
  background:var(--bg-3); border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text); padding:8px 12px; font-size:13px; font-family:var(--sans);
  transition:border-color .15s ease; outline:none;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color:var(--accent-border); box-shadow:0 0 0 2px var(--accent-soft); }
.form-field input::placeholder { color:var(--text-4); }
.form-field textarea { resize:vertical; min-height:80px; font-family:var(--mono); font-size:12px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-section-title { font-size:11px; font-weight:700; color:var(--text-4); text-transform:uppercase; letter-spacing:.06em; margin:16px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--border); }
.radio-group { display:flex; gap:8px; flex-wrap:wrap; }
.radio-btn { display:flex; align-items:center; gap:6px; padding:6px 12px; border-radius:8px; border:1px solid var(--border); background:var(--bg-3); cursor:pointer; font-size:12px; color:var(--text-2); transition:all .15s; }
.radio-btn.is-active { border-color:var(--accent-border); background:var(--accent-soft); color:var(--accent); }
.form-hint { font-size:11px; color:var(--text-4); margin-top:-8px; margin-bottom:4px; }
.toggle-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.toggle-row:last-child { border-bottom:none; }
.toggle-label { font-size:13px; color:var(--text-2); }
.toggle { position:relative; width:38px; height:22px; flex-shrink:0; }
.toggle input { opacity:0; width:0; height:0; position:absolute; }
.toggle-track { position:absolute; inset:0; border-radius:999px; background:var(--bg-4); border:1px solid var(--border); transition:.2s; cursor:pointer; }
.toggle input:checked + .toggle-track { background:var(--accent-soft); border-color:var(--accent-border); }
.toggle-thumb { position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--text-4); transition:.2s; pointer-events:none; }
.toggle input:checked ~ .toggle-thumb { left:18px; background:var(--accent); }

/* ============================================================ Terminal View ============================================================ */
.terminal-view { display:flex; flex-direction:column; height:100vh; background:var(--bg-0); }
.terminal-header { padding:10px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; background:var(--bg-2); flex-shrink:0; }
.terminal-title { font-family:var(--mono); font-size:12px; color:var(--text-3); }
#xtermContainer { flex:1; overflow:hidden; padding:8px; }
.xterm { height:100% !important; }

/* ============================================================ File Manager ============================================================ */
.files-view { display:grid; grid-template-columns:260px 1fr; height:100vh; overflow:hidden; }
.files-tree { border-right:1px solid var(--border); overflow-y:auto; padding:10px; display:flex; flex-direction:column; gap:4px; }
.files-main { display:flex; flex-direction:column; overflow:hidden; }
.files-toolbar { padding:10px 14px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; background:var(--bg-2); }
.files-breadcrumb { font-family:var(--mono); font-size:12px; color:var(--text-3); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.files-list { flex:1; overflow-y:auto; }
.file-entry { display:grid; grid-template-columns:28px 1fr auto auto; align-items:center; gap:8px; padding:8px 14px; border-bottom:1px solid rgba(30,30,48,.5); font-size:13px; cursor:pointer; transition:background .1s; }
.file-entry:hover { background:var(--bg-3); }
.file-entry.is-selected { background:color-mix(in oklab, var(--bg-3) 80%, var(--accent-soft)); }
.file-icon { color:var(--text-4); }
.file-icon svg { width:16px; height:16px; }
.file-name { color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-size { font-family:var(--mono); font-size:11px; color:var(--text-4); text-align:right; }
.file-mtime { font-family:var(--mono); font-size:11px; color:var(--text-4); }
.dir-entry .file-name { color:var(--accent); font-weight:500; }
.editor-pane { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.editor-header { padding:8px 14px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; background:var(--bg-2); }
.editor-filename { font-family:var(--mono); font-size:12px; color:var(--text-3); }
#codeEditor { flex:1; background:var(--bg-0); color:var(--text); border:none; outline:none; resize:none; padding:16px; font-family:var(--mono); font-size:13px; line-height:1.7; width:100%; }

/* ============================================================ Toast ============================================================ */
.toast-container { position:fixed; bottom:24px; right:24px; display:flex; flex-direction:column; gap:8px; z-index:2000; }
.toast { display:flex; align-items:center; gap:10px; padding:10px 16px; border-radius:12px; border:1px solid var(--border); background:var(--bg-4); color:var(--text); font-size:13px; min-width:200px; max-width:380px; box-shadow:0 8px 30px rgba(0,0,0,.5); animation:toast-in .2s ease; }
.toast.ok { border-color:rgba(0,212,100,.4); background:rgba(0,212,100,.08); }
.toast.err { border-color:rgba(239,68,68,.4); background:rgba(239,68,68,.08); color:var(--err); }
.toast.warn { border-color:rgba(245,158,11,.4); background:rgba(245,158,11,.08); color:var(--warn); }
@keyframes toast-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* ============================================================ Login Page ============================================================ */
.login-page { display:grid; place-items:center; min-height:100vh; background:radial-gradient(ellipse at top, color-mix(in oklab, var(--bg-2) 80%, #00b4d8), var(--bg-0) 60%); }
.login-shell { width:100%; max-width:400px; padding:20px; }
.login-card { background:var(--bg-2); border:1px solid var(--border); border-radius:20px; padding:36px; box-shadow:0 40px 100px -40px rgba(0,0,0,.8); }
.login-logo { display:flex; align-items:center; gap:14px; margin-bottom:28px; }
.login-appname { font-size:17px; font-weight:700; color:var(--text); }
.login-tagline { font-size:12px; color:var(--text-4); margin-top:2px; }
.login-title { margin:0 0 24px; font-size:20px; font-weight:700; color:var(--text); }
.login-form .form-field { margin-bottom:16px; }
.login-error { padding:10px 14px; border-radius:10px; border:1px solid rgba(239,68,68,.4); background:rgba(239,68,68,.08); color:var(--err); font-size:13px; margin-bottom:12px; }
.login-footer { margin:20px 0 0; font-size:12px; color:var(--text-4); text-align:center; }

/* ============================================================ Users View ============================================================ */
.users-grid { display:grid; grid-template-columns:1fr 360px; gap:16px; }
.user-row { display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--radius); border:1px solid var(--border); background:var(--bg-3); }
.user-row.is-current { border-color:var(--accent-border); background:var(--accent-soft); }
.user-avatar { width:44px; height:44px; display:grid; place-items:center; border-radius:12px; border:1px solid var(--border-strong); background:var(--bg-4); font-family:var(--mono); font-size:14px; font-weight:700; color:var(--accent); }
.user-name { font-weight:600; font-size:13px; color:var(--text); }
.user-meta { font-size:11px; color:var(--text-4); margin-top:2px; }
.badge { display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:600; border:1px solid; }
.badge-admin { background:rgba(0,180,216,.1); border-color:rgba(0,180,216,.3); color:var(--accent); }
.badge-you { background:rgba(0,212,100,.1); border-color:rgba(0,212,100,.3); color:var(--ok); }

/* ============================================================ Settings ============================================================ */
.settings-scroll { flex:1; overflow-y:auto; padding:20px; }
.settings-section { margin-bottom:24px; }
.settings-section-title { font-size:11px; font-weight:700; color:var(--text-4); text-transform:uppercase; letter-spacing:.06em; margin:0 0 12px; }
.settings-card { background:var(--bg-3); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; }
.select-group { display:flex; gap:8px; flex-wrap:wrap; }
.select-chip { padding:6px 14px; border-radius:8px; border:1px solid var(--border); background:var(--bg-4); font-size:13px; color:var(--text-3); cursor:pointer; transition:all .15s; }
.select-chip.is-active { border-color:var(--accent-border); background:var(--accent-soft); color:var(--accent); }

/* ============================================================ Empty States ============================================================ */
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1; padding:40px; text-align:center; gap:12px; color:var(--text-4); }
.empty-state svg { width:40px; height:40px; opacity:.3; }
.empty-state-title { font-size:15px; font-weight:600; color:var(--text-3); }
.empty-state-sub { font-size:13px; max-width:320px; }

/* ============================================================ Misc ============================================================ */
.sep { width:1px; height:20px; background:var(--border); flex-shrink:0; }
.chip { display:inline-flex; align-items:center; padding:2px 8px; border-radius:6px; font-size:11px; font-family:var(--mono); }
.chip-ok { background:rgba(0,212,100,.1); color:var(--ok); border:1px solid rgba(0,212,100,.3); }
.chip-err { background:rgba(239,68,68,.1); color:var(--err); border:1px solid rgba(239,68,68,.3); }
.chip-warn { background:rgba(245,158,11,.1); color:var(--warn); border:1px solid rgba(245,158,11,.3); }
.kbd { display:inline-flex; align-items:center; padding:1px 5px; border:1px solid var(--border-strong); border-radius:4px; font-family:var(--mono); font-size:10px; color:var(--text-3); background:var(--bg-4); }
.scroll-thin::-webkit-scrollbar { width:5px; height:5px; }
.scroll-thin::-webkit-scrollbar-track { background:transparent; }
.scroll-thin::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:999px; }

/* ============================================================ Settings Additional ============================================================ */
.settings-body { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:0; }
.settings-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; border-bottom:1px solid var(--border); gap:20px;
}
.settings-row:last-child { border-bottom:none; }
.settings-row-label { flex:1; min-width:0; }
.settings-label { font-size:13px; font-weight:500; color:var(--text); }
.settings-sublabel { font-size:12px; color:var(--text-4); margin-top:2px; }
.settings-row-control { display:flex; align-items:center; flex-shrink:0; }

/* ============================================================ Users Additional ============================================================ */
.users-body { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:0; }
.users-grid { display:flex; flex-direction:column; gap:8px; }
.user-card { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--radius); border:1px solid var(--border); background:var(--bg-3); }
.user-info { flex:1; min-width:0; }
.user-name { font-size:13px; font-weight:600; color:var(--text); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }