/* ShorelineDB Cloud IDE — Shared Design System */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@700;800&family=DM+Sans:wght@300;400;500&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root {
  --bg:    #07090e; --bg2: #0d1119; --bg3: #111820;
  --surf:  #141c28; --surf2: #1a2538; --surf3: #1f2d40;
  --bdr:   rgba(255,255,255,0.07);
  --bdr2:  rgba(255,255,255,0.12);
  --bdr3:  rgba(255,255,255,0.20);
  --teal:  #0ff5c0; --teal-bg: rgba(15,245,192,0.10); --teal-bdr: rgba(15,245,192,0.28);
  --amber: #f5a623; --amb-bg:  rgba(245,166,35,0.10);
  --purple:#b794f4; --pur-bg:  rgba(183,148,244,0.10);
  --red:   #f56565; --red-bg:  rgba(245,101,101,0.10);
  --blue:  #63b3ed; --blu-bg:  rgba(99,179,237,0.10);
  --green: #68d391;
  --tx:  #e2eaf5; --tx2: #7a8fa8; --tx3: #3a4d63;
  --mono:'Space Mono',ui-monospace,monospace;
  --display:'Syne',system-ui,sans-serif;
  --sans:'DM Sans',-apple-system,sans-serif;
  --r:6px; --r2:10px; --r3:14px;
  --nav-h:52px; --fleet-h:32px; --status-h:22px;
}

html,body { height:100%; background:var(--bg); color:var(--tx); font-family:var(--sans); font-size:13px; -webkit-font-smoothing:antialiased; }
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--surf3);border-radius:2px}

/* Animations */
@keyframes pulse  { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes blink  { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes spin   { to{transform:rotate(360deg)} }
@keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
@keyframes slideRight { from{opacity:0;transform:translateX(-8px)} to{opacity:1;transform:none} }

/* ── Top Nav ── */
.topnav { height:var(--nav-h); background:var(--bg2); border-bottom:.5px solid var(--bdr); display:flex; align-items:center; padding:0 20px; gap:10px; flex-shrink:0; }
.logo { display:flex; align-items:center; gap:9px; font-family:var(--display); font-weight:800; font-size:16px; letter-spacing:-.02em; text-decoration:none; color:var(--tx); flex-shrink:0; }
.logo-mark { width:26px; height:26px; background:var(--teal); border-radius:6px; display:flex; align-items:center; justify-content:center; }
.logo-mark svg { width:14px; height:14px; }
.nav-sep { width:.5px; height:22px; background:var(--bdr2); margin:0 4px; flex-shrink:0; }
.cloud-badge { display:inline-flex; align-items:center; gap:5px; background:var(--pur-bg); border:.5px solid rgba(183,148,244,.3); border-radius:100px; padding:3px 10px; font-family:var(--mono); font-size:9px; color:var(--purple); flex-shrink:0; }
.nav-actions { display:flex; align-items:center; gap:6px; margin-left:auto; }
.nav-btn { padding:5px 13px; border-radius:var(--r); border:.5px solid var(--bdr2); background:transparent; color:var(--tx2); font-family:var(--mono); font-size:11px; cursor:pointer; transition:all .15s; text-decoration:none; display:inline-flex; align-items:center; gap:5px; }
.nav-btn:hover { background:var(--surf2); color:var(--tx); }
.nav-btn.primary { border-color:var(--teal-bdr); background:var(--teal-bg); color:var(--teal); }
.nav-btn.primary:hover { background:rgba(15,245,192,.18); }
.nav-btn.amber { border-color:rgba(245,166,35,.35); background:var(--amb-bg); color:var(--amber); }
.avatar { width:28px; height:28px; border-radius:50%; background:var(--pur-bg); border:.5px solid rgba(183,148,244,.3); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:10px; color:var(--purple); cursor:pointer; text-decoration:none; }

/* ── Fleet bar ── */
.fleet-bar { height:var(--fleet-h); background:var(--surf); border-bottom:.5px solid var(--bdr); display:flex; align-items:center; padding:0 16px; gap:0; flex-shrink:0; overflow:hidden; }
.fi { display:flex; align-items:center; gap:5px; font-family:var(--mono); font-size:10px; color:var(--tx3); white-space:nowrap; }
.fi.teal{color:var(--teal)} .fi.amber{color:var(--amber)} .fi.purple{color:var(--purple)} .fi.green{color:var(--green)}
.fi-sep { width:.5px; height:14px; background:var(--bdr2); margin:0 12px; flex-shrink:0; }
.fi-right { margin-left:auto; display:flex; align-items:center; }
.dot-pulse { width:6px; height:6px; border-radius:50%; display:inline-block; animation:pulse 2s ease-in-out infinite; }

/* ── Status bar ── */
.statusbar { height:var(--status-h); background:var(--bg3); border-top:.5px solid var(--bdr); display:flex; align-items:center; padding:0 10px; gap:0; flex-shrink:0; overflow:hidden; }
.sb { display:flex; align-items:center; gap:4px; font-size:10px; font-family:var(--mono); color:var(--tx3); white-space:nowrap; }
.sb.teal{color:var(--teal)} .sb.amber{color:var(--amber)} .sb.purple{color:var(--purple)} .sb.green{color:var(--green)}
.sb-sep { width:.5px; height:12px; background:var(--bdr2); margin:0 8px; flex-shrink:0; }
.sb-right { margin-left:auto; display:flex; align-items:center; }

/* ── Page layout shells ── */
.page { display:grid; grid-template-rows:var(--nav-h) var(--fleet-h) 1fr var(--status-h); height:100vh; overflow:hidden; }
.page-no-fleet { display:grid; grid-template-rows:var(--nav-h) 1fr var(--status-h); height:100vh; overflow:hidden; }
.page-body { display:flex; overflow:hidden; min-height:0; }
.main-content { flex:1; overflow-y:auto; min-width:0; }
.sidebar { width:260px; background:var(--bg2); border-right:.5px solid var(--bdr); display:flex; flex-direction:column; overflow:hidden; flex-shrink:0; }
.right-sidebar { width:280px; background:var(--bg2); border-left:.5px solid var(--bdr); display:flex; flex-direction:column; overflow:hidden; flex-shrink:0; }

/* ── Content sections ── */
.section-head { padding:28px 32px 0; }
.section-title { font-family:var(--display); font-size:22px; font-weight:800; letter-spacing:-.02em; margin-bottom:4px; }
.section-sub { font-size:13px; color:var(--tx2); font-weight:300; }
.section-label { font-family:var(--mono); font-size:10px; color:var(--teal); text-transform:uppercase; letter-spacing:.12em; margin-bottom:8px; }
.content-pad { padding:24px 32px; }

/* ── Cards ── */
.card { background:var(--surf); border:.5px solid var(--bdr2); border-radius:var(--r3); padding:20px; transition:border-color .15s; }
.card:hover { border-color:var(--bdr3); }
.card.teal { border-color:var(--teal-bdr); }
.card.amber { border-color:rgba(245,166,35,.3); }
.card.purple { border-color:rgba(183,148,244,.3); }
.card.red { border-color:rgba(245,101,101,.3); }
.card-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.card-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.card-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }

/* ── Stat cards ── */
.stat-val { font-family:var(--display); font-size:28px; font-weight:800; line-height:1; margin-bottom:4px; }
.stat-label { font-family:var(--mono); font-size:10px; color:var(--tx3); text-transform:uppercase; letter-spacing:.1em; }
.stat-delta { font-family:var(--mono); font-size:10px; margin-top:4px; }
.stat-delta.up{color:var(--green)} .stat-delta.down{color:var(--red)} .stat-delta.neutral{color:var(--tx3)}

/* ── Tables ── */
.data-table { width:100%; border-collapse:collapse; }
.data-table th { font-family:var(--mono); font-size:10px; color:var(--tx3); text-transform:uppercase; letter-spacing:.1em; padding:8px 12px; text-align:left; border-bottom:.5px solid var(--bdr2); font-weight:400; }
.data-table td { padding:10px 12px; font-size:12px; border-bottom:.5px solid var(--bdr); vertical-align:middle; }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:var(--surf); }
.data-table tr { transition:background .1s; }

/* ── Badges ── */
.badge { display:inline-flex; align-items:center; gap:4px; padding:2px 7px; border-radius:4px; font-family:var(--mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; border:.5px solid; }
.badge-teal   { background:var(--teal-bg);  color:var(--teal);   border-color:var(--teal-bdr); }
.badge-amber  { background:var(--amb-bg);   color:var(--amber);  border-color:rgba(245,166,35,.3); }
.badge-purple { background:var(--pur-bg);   color:var(--purple); border-color:rgba(183,148,244,.3); }
.badge-red    { background:var(--red-bg);   color:var(--red);    border-color:rgba(245,101,101,.3); }
.badge-blue   { background:var(--blu-bg);   color:var(--blue);   border-color:rgba(99,179,237,.3); }
.badge-gray   { background:var(--surf2);    color:var(--tx3);    border-color:var(--bdr2); }

/* ── Form controls ── */
.form-group { margin-bottom:16px; }
.form-label { font-family:var(--mono); font-size:10px; color:var(--tx3); text-transform:uppercase; letter-spacing:.08em; display:block; margin-bottom:6px; }
.form-input { width:100%; background:var(--surf); border:.5px solid var(--bdr2); border-radius:var(--r); padding:8px 12px; color:var(--tx); font-family:var(--mono); font-size:12px; outline:none; transition:border-color .15s; }
.form-input:focus { border-color:var(--teal-bdr); }
.form-input::placeholder { color:var(--tx3); }
.form-select { width:100%; background:var(--surf); border:.5px solid var(--bdr2); border-radius:var(--r); padding:8px 12px; color:var(--tx); font-family:var(--mono); font-size:12px; outline:none; cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%233a4d63' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; }
.form-select:focus { border-color:var(--teal-bdr); outline:none; }
.form-toggle { display:flex; align-items:center; gap:10px; cursor:pointer; }
.toggle-track { width:36px; height:20px; background:var(--surf3); border-radius:10px; position:relative; transition:background .2s; flex-shrink:0; }
.toggle-track.on { background:var(--teal-bg); border:.5px solid var(--teal-bdr); }
.toggle-thumb { width:14px; height:14px; background:var(--tx3); border-radius:50%; position:absolute; top:3px; left:3px; transition:all .2s; }
.toggle-track.on .toggle-thumb { background:var(--teal); left:19px; }
.toggle-label { font-size:12px; color:var(--tx2); }

/* ── Buttons ── */
.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:var(--r); border:.5px solid var(--bdr2); background:transparent; color:var(--tx2); font-family:var(--mono); font-size:12px; cursor:pointer; transition:all .15s; text-decoration:none; }
.btn:hover { background:var(--surf2); color:var(--tx); }
.btn-teal  { border-color:var(--teal-bdr);             background:var(--teal-bg);  color:var(--teal);   }
.btn-teal:hover  { background:rgba(15,245,192,.18); }
.btn-amber { border-color:rgba(245,166,35,.35);         background:var(--amb-bg);   color:var(--amber);  }
.btn-amber:hover { background:rgba(245,166,35,.18); }
.btn-red   { border-color:rgba(245,101,101,.3);         background:var(--red-bg);   color:var(--red);    }
.btn-red:hover   { background:rgba(245,101,101,.18); }
.btn-purple{ border-color:rgba(183,148,244,.3);         background:var(--pur-bg);   color:var(--purple); }
.btn-purple:hover{ background:rgba(183,148,244,.18); }
.btn-sm { padding:5px 10px; font-size:10px; }
.btn-lg { padding:11px 22px; font-size:13px; }
.btn-block { width:100%; justify-content:center; }

/* ── Progress bars ── */
.progress { height:4px; background:var(--surf3); border-radius:2px; overflow:hidden; }
.progress-fill { height:100%; border-radius:2px; transition:width .4s; }

/* ── Sidebar nav ── */
.snav { padding:12px 0; flex:1; overflow-y:auto; }
.snav-section { margin-bottom:4px; }
.snav-label { font-family:var(--mono); font-size:9px; color:var(--tx3); text-transform:uppercase; letter-spacing:.12em; padding:8px 16px 4px; }
.snav-item { display:flex; align-items:center; gap:8px; padding:7px 16px; cursor:pointer; border-radius:0; transition:background .1s; color:var(--tx2); font-size:12px; text-decoration:none; border:none; background:transparent; width:100%; text-align:left; }
.snav-item:hover { background:var(--surf); color:var(--tx); }
.snav-item.active { background:var(--surf2); color:var(--teal); border-right:2px solid var(--teal); }
.snav-item svg { flex-shrink:0; }
.snav-badge { margin-left:auto; font-family:var(--mono); font-size:9px; padding:1px 5px; border-radius:3px; }

/* ── Toast ── */
.toast { position:fixed; bottom:36px; right:20px; background:var(--surf2); border:.5px solid var(--teal-bdr); border-radius:var(--r2); padding:10px 14px; font-family:var(--mono); font-size:11px; color:var(--teal); z-index:9999; animation:fadeIn .2s ease; max-width:300px; line-height:1.5; pointer-events:none; }
.toast.hidden { display:none; }
.toast.amber { border-color:rgba(245,166,35,.4); color:var(--amber); }
.toast.red   { border-color:rgba(245,101,101,.4); color:var(--red); }

/* ── Dropdown ── */
.dropdown { position:relative; display:inline-block; }
.dropdown-menu { position:absolute; top:calc(100% + 6px); left:0; background:var(--surf2); border:.5px solid var(--bdr3); border-radius:var(--r2); min-width:180px; z-index:100; animation:fadeIn .15s ease; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.4); }
.dropdown-menu.right { left:auto; right:0; }
.dropdown-item { display:flex; align-items:center; gap:8px; padding:8px 14px; font-size:12px; color:var(--tx2); cursor:pointer; transition:background .1s; text-decoration:none; border:none; background:transparent; width:100%; text-align:left; }
.dropdown-item:hover { background:var(--surf3); color:var(--tx); }
.dropdown-item.danger { color:var(--red); }
.dropdown-item.danger:hover { background:var(--red-bg); }
.dropdown-sep { height:.5px; background:var(--bdr); margin:4px 0; }

/* ── Modal ── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:999; animation:fadeIn .15s ease; }
.modal { background:var(--bg2); border:.5px solid var(--bdr3); border-radius:var(--r3); padding:28px; min-width:480px; max-width:600px; width:90%; animation:fadeIn .2s ease; }
.modal-title { font-family:var(--display); font-size:18px; font-weight:800; margin-bottom:6px; }
.modal-sub { font-size:13px; color:var(--tx2); margin-bottom:24px; font-weight:300; }
.modal-footer { display:flex; gap:8px; justify-content:flex-end; margin-top:24px; }
.modal.hidden { display:none; }

/* ── Chart placeholder ── */
.chart-wrap { background:var(--surf); border:.5px solid var(--bdr2); border-radius:var(--r2); padding:16px; }
.chart-title { font-family:var(--mono); font-size:10px; color:var(--tx3); text-transform:uppercase; letter-spacing:.1em; margin-bottom:12px; }

/* ── Utility ── */
.flex { display:flex; } .flex-col { flex-direction:column; } .items-center { align-items:center; } .justify-between { justify-content:space-between; } .gap-2{gap:8px} .gap-3{gap:12px} .gap-4{gap:16px}
.mt-2{margin-top:8px} .mt-3{margin-top:12px} .mt-4{margin-top:16px} .mb-2{margin-bottom:8px} .mb-3{margin-bottom:12px}
.mono{font-family:var(--mono)} .text-teal{color:var(--teal)} .text-amber{color:var(--amber)} .text-purple{color:var(--purple)} .text-muted{color:var(--tx2)} .text-faint{color:var(--tx3)} .text-sm{font-size:11px} .text-xs{font-size:10px}
.w-full{width:100%} .h-full{height:100%} .overflow-auto{overflow-y:auto} .flex-1{flex:1} .min-w-0{min-width:0}
.divider { height:.5px; background:var(--bdr); margin:16px 0; }