/* =========================================================
   Orbit – Frontend UI Styles
   Path: frontend/assets/css/main.css
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root{
  --bg:#0b0d12;
  --panel:#121623;
  --panel-2:#151b2c;
  --card:#161c2f;
  --border:#22304a;
  --muted:#8ea1b7;
  --text:#e9eef6;
  --brand:#5a7cff;
  --brand-2:#7eaaff;
  --danger:#ff5c7a;
  --success:#2dd4bf;
  --warning:#ffc857;

  --radius:14px;
  --radius-sm:10px;
  --shadow:0 8px 26px rgba(0,0,0,.28);
  --shadow-2:0 10px 32px rgba(0,0,0,.34);

  --topbar-h:56px;
  --sidebar-w:300px;
  --sidebar-r:360px;

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

/* ---------- Reset & Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:linear-gradient(180deg,#0a0c12 0%, #0b1020 100%);
  color:var(--text);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

.muted{color:var(--muted)}
.small{font-size:12px}
.hidden{display:none !important}
.grow{flex:1 1 auto}

/* Scrollbar (WebKit) */
*::-webkit-scrollbar{height:10px;width:10px}
*::-webkit-scrollbar-thumb{background:#2a3550;border-radius:20px}
*::-webkit-scrollbar-track{background:#0d1220}

/* Focus ring for a11y */
:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
  border-radius:8px;
}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:1000;
  height:var(--topbar-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 14px;
  background:rgba(12,15,24,.8); backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.topbar .left,.topbar .right{display:flex; align-items:center; gap:10px}
.topbar .center{flex:1 1 auto; max-width:800px; padding:0 10px}
.logo{width:26px;height:26px;filter:drop-shadow(0 2px 8px rgba(90,124,255,.35))}
.brand{font-weight:700; letter-spacing:.2px; margin-left:6px}
.badge{font-size:12px; padding:4px 8px; border:1px solid var(--border); border-radius:999px; background:rgba(21,27,44,.65)}
.divider{width:1px; height:26px; background:var(--border); margin:0 4px}

/* Searchbar */
.searchbar{
  display:flex; align-items:center; gap:8px;
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:999px; padding:6px 8px 6px 12px;
}
.searchbar input{
  flex:1 1 auto; border:none; outline:none;
  background:transparent; color:var(--text); font-size:14px;
}
.searchbar .btn{border-radius:999px}

/* Profile dropdown */
.profile-menu{position:relative}
.dropdown{
  position:absolute; right:0; top:calc(100% + 8px);
  width:260px; background:var(--panel);
  border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:10px; z-index:1001;
}
.dropdown.hidden{display:none}
.dropdown .user-row{display:flex; gap:10px; align-items:center}
.dropdown .dropdown-item{
  width:100%; text-align:left; background:transparent; border:1px solid var(--border);
  color:var(--text); padding:8px 10px; border-radius:10px; margin-top:8px; cursor:pointer;
}
.dropdown .dropdown-item:hover{background:#121a2a}
.dropdown .dropdown-item.danger{border-color:#40222a; color:#ffc8d3}
.avatar{
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(180deg,#2b3a64,#1a2340);
  border:1px solid var(--border);
}

/* ---------- Buttons & Inputs ---------- */
.btn{
  background:var(--brand);
  color:white; border:none; cursor:pointer;
  padding:10px 14px; border-radius:10px;
  font-weight:600; letter-spacing:.2px; transition:filter .15s ease, transform .06s ease;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent; color:var(--text); border:1px solid var(--border)}
.btn.primary{background:linear-gradient(180deg,var(--brand) 0%, var(--brand-2) 100%)}
.btn.danger{background:linear-gradient(180deg,#ff6b6b,#ff4177)}
.btn.xs{padding:6px 10px; font-size:12px; border-radius:8px}
.btn.full{width:100%}

label{display:grid; gap:6px; margin:8px 0; color:#cdd8ea; font-size:14px}
input, textarea, select{
  background:#0f1322; color:var(--text);
  border:1px solid var(--border); border-radius:10px;
  padding:10px 12px; font-size:14px;
}
textarea{resize:vertical}

/* Switch */
.switch{display:flex; align-items:center; gap:10px; cursor:pointer}
.switch input{appearance:none; width:40px; height:22px; border-radius:999px; background:#22304a; position:relative; transition:.2s}
.switch input::after{
  content:""; position:absolute; top:3px; left:3px; width:16px; height:16px;
  background:#c9d7ff; border-radius:50%; transition:.2s;
}
.switch input:checked{background:#2b54ff66}
.switch input:checked::after{left:21px}

/* ---------- App Layout ---------- */
.layout{
  display:grid;
  grid-template-columns: var(--sidebar-w) 1fr var(--sidebar-r);
  gap:14px; padding:14px; align-items:stretch;
}
.sidebar{
  background:linear-gradient(180deg,rgba(18,22,35,.9), rgba(18,22,35,.75));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:auto; max-height:calc(100vh - var(--topbar-h) - 28px);
}
.sidebar.left{padding:14px}
.sidebar.right{padding:0}

/* Panels (left sidebar) */
.panel{border:1px solid var(--border); background:var(--card); border-radius:var(--radius); padding:12px; margin-bottom:12px}
.panel h3{margin:2px 0 8px 0; font-size:14px; letter-spacing:.3px}

/* Map center */
.map-wrap{
  position:relative; overflow:hidden;
  border-radius:var(--radius); border:1px solid var(--border);
  box-shadow:var(--shadow-2);
  background:var(--panel);
}
#map{width:100%; height:calc(100vh - var(--topbar-h) - 28px);}

/* Leaflet overrides */
.leaflet-container{background:#0d1220}
.leaflet-control-zoom a{background:#11172a; color:#cfe0ff; border-color:#273557}
.leaflet-bar a:hover{background:#1a2340}
.leaflet-control-attribution{background:transparent; color:#8ea1b7}

/* Map FABs */
.map-fab{
  position:absolute; right:10px; bottom:10px; display:flex; flex-direction:column; gap:10px; z-index:500;
}
.fab{
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; font-weight:700;
  color:#dbe5ff; background:linear-gradient(180deg,#1a2340,#0f1529);
  border:1px solid var(--border); cursor:pointer; box-shadow:var(--shadow);
}
.fab:hover{filter:brightness(1.1)}
.map-toast{
  position:absolute; left:12px; bottom:12px; background:rgba(15,19,34,.8);
  border:1px solid var(--border); border-radius:999px; padding:8px 12px; font-size:12px
}

/* Right sidebar tabs */
.tabs{display:flex; gap:6px; padding:10px; position:sticky; top:0; background:linear-gradient(180deg,rgba(18,22,35,1), rgba(18,22,35,.8)); z-index:20; border-bottom:1px solid var(--border)}
.tabs.small{gap:4px; padding:6px 0}
.tab{
  border:none; background:transparent; color:var(--muted);
  padding:10px 12px; border-bottom:2px solid transparent; cursor:pointer; border-radius:8px 8px 0 0;
}
.tab:hover{color:#cfe0ff; background:#121a2a}
.tab.active{color:#e9eef6; border-color:var(--brand)}
.tabpane{padding:12px}
.tabpane.active{display:block}
.tabpane:not(.active){display:none}

/* Cards list */
.cards{display:grid; gap:10px; padding:12px}
.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:12px; box-shadow:0 2px 14px rgba(0,0,0,.2);
}
.card .title{font-weight:700; letter-spacing:.2px}
.card .desc{margin:6px 0 0}
.card .actions{display:flex; gap:6px}
.card-row{display:flex; gap:12px; align-items:center}

/* Lists */
.list{display:flex; flex-direction:column; gap:8px}
.list.empty{color:var(--muted); font-size:13px}

/* Utility layouts */
.row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:12px}

/* Check (for inbox selection) */
.check{display:flex; align-items:center; gap:8px}
.check input{width:18px; height:18px}

/* ---------- Modals ---------- */
.modal{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(9,12,18,.55); backdrop-filter: blur(8px); z-index:2000; padding:20px;
}
.modal[aria-hidden="false"]{display:flex}
.dialog{
  width:min(680px, 96vw); max-height:86vh; overflow:auto;
  background:linear-gradient(180deg,#151b2c,#11182a);
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-2); padding:16px;
}
.dialog-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
.dialog-foot{margin-top:10px}
.icon{
  background:transparent; border:1px solid var(--border); color:#cfe0ff;
  width:34px; height:34px; border-radius:10px; cursor:pointer;
}
.icon:hover{background:#121a2a}

/* ---------- Toasts ---------- */
.toasts{
  position:fixed; right:14px; top:calc(var(--topbar-h) + 10px);
  display:flex; flex-direction:column; gap:10px; z-index:3000;
}
.toast{
  background:linear-gradient(180deg,#0f162a,#0d1326);
  border:1px solid var(--border); color:var(--text);
  padding:10px 12px; border-radius:12px; min-width:240px; box-shadow:var(--shadow);
}
.toast.success{border-color:#1e3b39; color:#d2fff8}
.toast.warn{border-color:#3a3520; color:#ffe8b3}
.toast.error{border-color:#48222c; color:#ffd5df}

/* ---------- Skeleton Loading ---------- */
.skeleton .card,
.skeleton .list > *,
.skeleton .row > *,
.skeleton .avatar{
  position:relative; overflow:hidden;
}
.skeleton .card::after,
.skeleton .list > *::after,
.skeleton .row > *::after,
.skeleton .avatar::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
  transform:translateX(-100%); animation:shimmer 1.2s infinite;
}
@keyframes shimmer{100%{transform:translateX(100%)}}

/* ---------- Helpers ---------- */
.noscript{
  padding:10px; background:#3b1f1f; color:#ffdada; text-align:center; border-bottom:1px solid #5b2a2a;
}
.range-readout{font-size:12px; color:var(--muted); margin-top:-4px; margin-bottom:10px}

/* ---------- Responsive ---------- */
@media (max-width: 1200px){
  :root{ --sidebar-r:320px; }
}
@media (max-width: 1024px){
  :root{ --sidebar-w:260px; --sidebar-r:300px; }
  .brand{display:none}
}
@media (max-width: 900px){
  .layout{
    grid-template-columns: 1fr;
    grid-auto-rows:auto;
  }
  .sidebar.left, .sidebar.right{
    max-height:unset; order:0;
  }
  .map-wrap{order:1}
  #map{height:60vh}
  .tabs{position:relative}
}
@media (max-width: 560px){
  .topbar .center{display:none}
  .grid-2{grid-template-columns:1fr}
  .map-toast{display:none}
}

/* ---------- Right-rail content niceties ---------- */
#peopleList .card .tags{margin-top:8px}
.tags .skills::before{content:"Skills: "; color:#a9b9d4}
.tags .interests::before{content:" • Interests: "; color:#a9b9d4}

#eventsList .card .row button + button{margin-left:6px}

/* ---------- Badges & status chips ---------- */
.chip{
  border:1px solid var(--border); background:#0f1527;
  color:#d8e6ff; border-radius:999px; padding:4px 8px; font-size:12px;
}
.chip.success{border-color:#1f3d39; background:#0e1f1d; color:#b9fff3}
.chip.warn{border-color:#3b361e; background:#201c0e; color:#ffe9b0}
.chip.danger{border-color:#4a222a; background:#221017; color:#ffd6df}
/* Owner accents (your own items) */
.card.mine{
  border-color:#1e3b39;
  box-shadow:0 0 0 1px #1e3b39 inset, 0 2px 14px rgba(0,0,0,.2);
}
.card.mine .title::after{
  content:" • mine";
  color:#b9fff3;
  font-weight:600;
  margin-left:4px;
}

/* chips (used in map popups) */
.chip{
  display:inline-block;
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  padding:2px 8px;
  font-size:12px;
  line-height:18px;
}
.chip.success{
  border-color:#2dd4bf;
  color:#2dd4bf;
  background:rgba(45,212,191,.12);
}
/* Group headings */
.group { margin: 8px 0 12px; }
.group-title { margin: 6px 0 6px; text-transform: uppercase; letter-spacing: .04em; }

/* Saved state on cards */
.card .save-flag { margin-left: 8px; font-size: 12px; color: #2dd4bf; }
.leaflet-popup-content .pop-title { margin-bottom: 4px; }
.leaflet-popup-content .pop-meta  { margin-bottom: 6px; }
.leaflet-popup-content .pop-body  { margin-bottom: 8px; }
.leaflet-popup-content .pop-actions { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.leaflet-popup-content .pop-ext { display:flex; gap:6px; }
.chip.success { background:#064e3b; color:#2dd4bf; border-radius:10px; padding:1px 6px; font-size:11px; }
/* Orbit Leaflet popup theme (dark) */
.leaflet-popup.orbit-pop .leaflet-popup-content-wrapper {
  background: #0b0f17;           /* dark panel */
  color: #e5e7eb;                /* text */
  border: 1px solid #1f2937;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.55);
}
.leaflet-popup.orbit-pop .leaflet-popup-tip {
  background: #0b0f17;
  border: 1px solid #1f2937;
}

/* Inner layout polish */
.leaflet-popup-content .pop-title { margin-bottom: 4px; }
.leaflet-popup-content .pop-meta  { margin-bottom: 6px; color: #9ca3af; }
.leaflet-popup-content .pop-body  { margin-bottom: 8px; color: #cbd5e1; }
.leaflet-popup-content .pop-actions { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.leaflet-popup-content .pop-ext { display:flex; gap:6px; }

/* Buttons inside popups — make ghost buttons visible on dark bg */
.leaflet-popup-content .btn {
  font: inherit;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #374151;
  background: #111827;
  color: #e5e7eb;
  cursor: pointer;
}
.leaflet-popup-content .btn:hover { filter: brightness(1.1); }
.leaflet-popup-content .btn.ghost {
  background: transparent;
  border-color: #4b5563;
  color: #e5e7eb;
}
.leaflet-popup-content .btn.danger {
  background: #7f1d1d;
  border-color: #b91c1c;
  color: #fde68a;
}
.leaflet-popup-content .btn.xs { font-size: 12px; padding: 4px 8px; }

/* Links (OSM / Google / Street View) */
.leaflet-popup-content a {
  color: #93c5fd;
  text-decoration: none;
}
.leaflet-popup-content a:hover { text-decoration: underline; }

/* “mine” chip */
.chip.success {
  background: #064e3b;
  color: #2dd4bf;
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 11px;
}

/* Per-team toggles list */
.list.tiny { margin-top: 6px; display: grid; gap: 4px; }
.list.tiny.hidden { display: none; }
.list.tiny .row { display:flex; align-items:center; gap:8px; justify-content:space-between; }
.legend-dot { width:10px; height:10px; border-radius:50%; display:inline-block; border:1px solid rgba(0,0,0,.2); }
.small.muted { font-size: 12px; color: var(--muted, #6b7280); }


.legend-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle}
#teamLayerPicker.list.hidden{display:none}