@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap');

:root {
  --bg: #0b1026;
  --bg-grad: linear-gradient(170deg, #0b1026 0%, #0f1a3a 40%, #132244 100%);
  --surface: #13203e;
  --surface2: #192a50;
  --primary: #00c2e0;
  --primary-hover: #00a8c4;
  --accent: #ff8c42;
  --accent2: #ffd166;
  --pink: #ef476f;
  --text: #e8f0ff;
  --text-muted: #8dabc4;
  --border: #1e3460;
  --success: #06d6a0;
  --danger: #ef476f;
  --radius: 14px;
  --shadow: 0 4px 20px rgba(0,0,0,0.4);
  --glow-primary: 0 0 20px rgba(0,194,224,0.2);
  --glow-accent: 0 0 20px rgba(255,140,66,0.2);
}

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

body {
  font-family: 'Fredoka', 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  background-image: var(--bg-grad);
  color: var(--text);
  min-height: 100vh;
  position: relative;
}

/* Chicago skyline silhouette at the bottom — recognizable landmarks
   (front layer: Trump spire, Willis Tower stepped tubes + twin antennas,
   Hancock tapered tower + twin antennas; back layer: a fainter ridge for depth) */
body::after {
  content: '';
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 240px;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat, no-repeat;
  background-position: bottom center, bottom center;
  background-size: cover, cover;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath fill='%2300c2e0' fill-opacity='0.13' d='M0,200 L0,150 L60,150 L60,125 L120,125 L120,160 L150,160 L150,100 L158,100 L158,30 L161,30 L161,100 L210,100 L210,130 L220,130 L220,90 L235,90 L235,70 L255,70 L255,45 L262,45 L262,15 L264,15 L264,45 L273,45 L273,15 L275,15 L275,45 L285,45 L285,70 L300,70 L300,130 L340,130 L340,110 L390,110 L390,150 L420,150 L420,90 L470,90 L470,120 L510,120 L510,100 L515,100 L515,60 L520,60 L520,100 L560,100 L560,140 L600,140 L600,160 L640,160 L640,130 L650,65 L654,65 L654,22 L657,22 L657,65 L668,65 L668,22 L671,22 L671,65 L672,65 L682,130 L720,130 L720,150 L760,150 L760,120 L820,120 L820,140 L860,140 L860,100 L910,100 L910,160 L950,160 L950,130 L1000,130 L1000,150 L1050,150 L1050,110 L1100,110 L1100,140 L1150,140 L1150,150 L1200,150 L1200,200 Z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath fill='%237fb6ff' fill-opacity='0.05' d='M0,200 L0,170 L80,170 L80,150 L160,150 L160,175 L240,175 L240,140 L300,140 L300,165 L380,165 L380,135 L460,135 L460,170 L540,170 L540,148 L620,148 L620,162 L700,162 L700,132 L780,132 L780,168 L860,168 L860,150 L940,150 L940,172 L1020,172 L1020,142 L1100,142 L1100,166 L1200,166 L1200,200 Z'/%3E%3C/svg%3E");
}

a { color: var(--primary); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--accent); }

/* Navbar */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; gap: 16px;
  padding: 0 24px; height: 60px;
  background: linear-gradient(135deg, #0d1830 0%, #142850 100%);
  border-bottom: 2px solid var(--border);
  box-shadow: 0 4px 30px rgba(0,0,0,0.5), inset 0 -1px 0 rgba(0,194,224,0.1);
}

/* Stylistic logo */
.nav-brand {
  font-family: 'Fredoka', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  white-space: nowrap;
  background: linear-gradient(135deg, #00c2e0 0%, #ffd166 50%, #ff8c42 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 8px rgba(0,194,224,0.3));
  letter-spacing: 0.5px;
  position: relative;
}

.nav-brand::before {
  content: '🍽️';
  -webkit-text-fill-color: initial;
  margin-right: 6px;
  font-size: 1.2rem;
  filter: none;
}

.nav-links { display: flex; gap: 4px; margin-left: 16px; }

.nav-link {
  padding: 8px 16px; border-radius: 20px;
  color: var(--text-muted); font-size: 0.9rem; font-weight: 600;
  transition: all 0.2s;
  position: relative;
}
.nav-link:hover { color: var(--primary); background: rgba(0,194,224,0.1); }
.nav-link.active {
  color: #0b1026;
  background: linear-gradient(135deg, var(--primary) 0%, #00e0a0 100%);
  box-shadow: 0 2px 12px rgba(0,194,224,0.3);
}

.nav-user {
  margin-left: auto; display: flex; align-items: center; gap: 10px;
  font-size: 0.9rem; color: var(--text-muted);
}
.nav-user-name {
  padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border);
}
.auth-error { color: var(--danger, #ef476f); font-size: 0.85rem; min-height: 1.2em; margin: 4px 0; }
.badge-admin {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
  background: rgba(0,194,224,0.15); color: var(--primary);
  padding: 2px 7px; border-radius: 10px; margin-left: 6px;
}

#app { margin-top: 60px; padding: 24px; max-width: 1200px; margin-left: auto; margin-right: auto; position: relative; z-index: 1; }

/* Buttons */
.btn {
  padding: 9px 18px; border: none; border-radius: 20px;
  font-family: 'Fredoka', sans-serif;
  font-size: 0.9rem; font-weight: 600; cursor: pointer;
  transition: all 0.2s;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, #00e0a0 100%);
  color: #0b1026;
  box-shadow: 0 2px 12px rgba(0,194,224,0.25);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #00d4f5 0%, #00f0b0 100%);
  box-shadow: 0 4px 20px rgba(0,194,224,0.4);
  transform: translateY(-1px);
}
.btn-sm { padding: 5px 12px; font-size: 0.8rem; }
.btn-danger {
  background: linear-gradient(135deg, var(--danger) 0%, #ff6b8a 100%);
  color: #fff;
}
.btn-ghost {
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 20px;
}
.btn-ghost:hover { color: var(--text); border-color: var(--primary); background: rgba(0,194,224,0.05); }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
.card {
  background: linear-gradient(145deg, var(--surface) 0%, var(--surface2) 100%);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  transition: all 0.25s;
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 50%, var(--pink) 100%);
  opacity: 0;
  transition: opacity 0.25s;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.5), var(--glow-primary);
  border-color: rgba(0,194,224,0.3);
}
.card:hover::before { opacity: 1; }
.card-label { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.card-value { font-size: 2rem; font-weight: 700; margin-top: 4px; background: linear-gradient(135deg, var(--text) 0%, var(--primary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* Tables */
.table-wrap { overflow-x: auto; border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); }
th {
  font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 1px; cursor: pointer; user-select: none; white-space: nowrap;
  font-weight: 600;
}
th:hover { color: var(--primary); }
tr:hover td { background: rgba(0,194,224,0.04); }
td { font-size: 0.9rem; }
.clickable-row { cursor: pointer; }

/* Stars */
.stars { display: inline-flex; gap: 2px; font-size: 1.1rem; }
.stars .filled { color: var(--accent2); text-shadow: 0 0 8px rgba(255,209,102,0.4); }
.stars .empty { color: var(--border); }
.star-input { cursor: pointer; font-size: 1.4rem; }
.star-input:hover .star, .star-input .star.active { color: var(--accent2); text-shadow: 0 0 8px rgba(255,209,102,0.4); }
.star-input .star { color: var(--border); transition: color 0.1s; }

/* Forms / Inputs */
input[type="text"], input[type="number"], input[type="date"],
input[type="datetime-local"], input[type="search"], textarea, select {
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 14px; font-size: 0.9rem; width: 100%;
  font-family: 'Fredoka', sans-serif;
  transition: all 0.2s;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,194,224,0.15), var(--glow-primary);
}
textarea { resize: vertical; min-height: 60px; }
label { display: block; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 4px; font-weight: 500; }
.form-group { margin-bottom: 14px; }
.form-row { display: flex; gap: 12px; }
.form-row > .form-group { flex: 1; }

/* Modal */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 2000;
  background: rgba(5,8,20,0.85); align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.modal-overlay.open { display: flex; }
.modal {
  background: linear-gradient(145deg, var(--surface) 0%, #0f1d3a 100%);
  border: 1px solid var(--border); border-radius: 20px;
  padding: 32px; width: 90%; max-width: 480px; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 12px 60px rgba(0,0,0,0.6), 0 0 40px rgba(0,194,224,0.1);
}
.modal h2 { margin-bottom: 8px; }
.modal p { color: var(--text-muted); margin-bottom: 16px; font-size: 0.9rem; }

.user-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.user-btn {
  padding: 10px 20px; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 20px; color: var(--text); cursor: pointer; font-size: 0.95rem;
  font-family: 'Fredoka', sans-serif;
  transition: all 0.2s;
}
.user-btn:hover {
  border-color: var(--primary); background: rgba(0,194,224,0.1);
  box-shadow: 0 0 12px rgba(0,194,224,0.15);
}

.user-add { display: flex; gap: 8px; }
.user-add input { flex: 1; }

/* Search */
.toolbar { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.toolbar input[type="search"] { max-width: 300px; }

/* Sections */
.section { margin-bottom: 32px; }
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; gap: 12px;
}
.section-header h2 { font-size: 1.4rem; font-weight: 700; }
.section-header h3 { font-size: 1.1rem; }

/* Activity feed */
.activity { list-style: none; }
.activity li {
  padding: 14px 0; border-bottom: 1px solid var(--border);
  display: flex; gap: 12px; align-items: flex-start; font-size: 0.9rem;
}
.activity-icon {
  width: 34px; height: 34px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 0.9rem;
  flex-shrink: 0;
}
.activity-icon.review { background: rgba(255,209,102,0.15); color: var(--accent2); }
.activity-icon.visit { background: rgba(6,214,160,0.15); color: var(--success); }
.activity-time { color: var(--text-muted); font-size: 0.8rem; margin-top: 2px; }

/* Image gallery */
.gallery { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.gallery img {
  width: 80px; height: 80px; object-fit: cover; border-radius: 10px;
  border: 2px solid var(--border); cursor: pointer;
  transition: all 0.2s;
}
.gallery img:hover { border-color: var(--primary); box-shadow: var(--glow-primary); transform: scale(1.05); }

/* Visit/Order blocks */
.visit-block, .order-block {
  background: linear-gradient(145deg, var(--surface) 0%, var(--surface2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; margin-bottom: 12px;
}
.order-block { background: linear-gradient(145deg, var(--surface2) 0%, #1a2d54 100%); }
.visit-meta, .order-meta { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 8px; }

/* Map */
.map-wrap { position: relative; }
#map-container { height: calc(100vh - 96px); border-radius: var(--radius); overflow: hidden; border: 2px solid var(--border); }

/* Dark-themed leaflet popups */
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
.leaflet-popup-content-wrapper { border-radius: 12px; }
.leaflet-popup-content { color: var(--text); margin: 12px 14px; font-family: 'Fredoka', sans-serif; }
.leaflet-popup-content a { color: var(--primary); font-weight: 600; }
.leaflet-popup-close-button { color: var(--text-muted) !important; }
.leaflet-popup-tip { border: none; }

/* Colored teardrop pins */
.ce-pin { background: none; border: none; }
.ce-pin-wrap { position: relative; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5)); }
.ce-pin-badge {
  position: absolute; top: -3px; right: -4px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--success); color: #07331f;
  font-size: 10px; font-weight: 700; line-height: 15px; text-align: center;
  border: 1.5px solid #0b1026;
}

/* Popup detail (restaurant markers) */
.ce-pop-name { font-size: 1.05rem; font-weight: 700; }
.ce-pop-desc {
  display: inline-block; margin-top: 3px;
  font-size: 0.8rem; font-weight: 600; color: var(--accent2);
  background: rgba(255,209,102,0.12); padding: 1px 8px; border-radius: 10px;
}
.ce-pop-addr { color: var(--text-muted); font-size: 0.82rem; margin-top: 5px; }
.ce-pop-meta { font-size: 0.85rem; margin-top: 5px; }
.ce-pop-visited { color: var(--success); font-weight: 600; margin-left: 4px; }
.ce-pop-edit {
  display: flex; gap: 10px; margin: 10px 0 8px;
  padding: 10px 0; border-top: 1px solid var(--border);
}
.ce-pop-edit label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; flex: 1; margin: 0; }
.ce-pop-edit .ce-cat-sel { padding: 5px 8px; font-size: 0.8rem; border-radius: 8px; margin-top: 3px; }
.ce-color-row { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.ce-color-inp {
  width: 34px; height: 28px; padding: 0; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface); cursor: pointer; flex: none;
}
.ce-color-reset {
  font-size: 0.7rem; padding: 4px 8px; border-radius: 8px;
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border); cursor: pointer;
  font-family: 'Fredoka', sans-serif;
}
.ce-color-reset:hover { color: var(--text); border-color: var(--primary); }

/* Map filter panel */
.map-filters {
  position: absolute; top: 12px; right: 12px; z-index: 800;
  width: 230px; max-height: calc(100% - 24px); display: flex; flex-direction: column;
  background: linear-gradient(145deg, rgba(19,32,62,0.96) 0%, rgba(15,29,58,0.96) 100%);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow); backdrop-filter: blur(6px);
  font-size: 0.85rem; overflow: hidden;
}
.mf-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
}
.mf-toggle {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; font-size: 0.9rem; transition: transform 0.2s;
}
.map-filters.collapsed .mf-body { display: none; }
.map-filters.collapsed .mf-toggle { transform: rotate(-90deg); }
.mf-body { padding: 12px 14px; overflow-y: auto; }
.mf-seg { display: flex; gap: 4px; margin-bottom: 14px; background: var(--bg); border-radius: 10px; padding: 3px; }
.mf-seg button {
  flex: 1; padding: 6px 4px; border: none; border-radius: 8px;
  background: transparent; color: var(--text-muted); cursor: pointer;
  font-family: 'Fredoka', sans-serif; font-size: 0.78rem; font-weight: 600;
  transition: all 0.15s;
}
.mf-seg button.active {
  background: linear-gradient(135deg, var(--primary) 0%, #00e0a0 100%);
  color: #0b1026;
}
.mf-cats-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted); margin-bottom: 8px;
}
.mf-links a { font-size: 0.72rem; }
.mf-cats { display: flex; flex-direction: column; gap: 4px; }
.mf-cat {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 8px; border-radius: 9px; cursor: pointer;
  background: transparent; border: 1px solid transparent;
  color: var(--text-muted); font-family: 'Fredoka', sans-serif; font-size: 0.82rem;
  text-align: left; transition: all 0.15s; opacity: 0.45;
}
.mf-cat.on { opacity: 1; color: var(--text); background: rgba(255,255,255,0.04); border-color: var(--border); }
.mf-cat:hover { background: rgba(0,194,224,0.08); }
.mf-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; border: 1px solid rgba(0,0,0,0.4); }
.mf-cat:not(.on) .mf-dot { filter: grayscale(0.7); }
.mf-label { flex: 1; }
.mf-count { font-size: 0.72rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Responsive */
@media (max-width: 768px) {
  .navbar { padding: 0 12px; gap: 8px; }
  .nav-brand { font-size: 1.2rem; }
  .nav-link { padding: 6px 10px; font-size: 0.8rem; }
  #app { padding: 12px; }
  .cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .card { padding: 14px; }
  .card-value { font-size: 1.5rem; }
  .form-row { flex-direction: column; gap: 0; }
  .toolbar { flex-direction: column; }
  .toolbar input[type="search"] { max-width: 100%; }
  body::after { height: 150px; }
  .map-filters { width: 180px; top: 8px; right: 8px; font-size: 0.8rem; }
  .map-filters.collapsed { width: auto; }
}

@media (max-width: 480px) {
  .cards { grid-template-columns: 1fr 1fr; }
}

.place-results {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 1001;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 0 0 10px 10px;
  max-height: 240px; overflow-y: auto;
}
.place-results:empty { display: none; }
.place-result-item {
  padding: 10px 12px; cursor: pointer; font-size: 0.85rem;
  border-bottom: 1px solid var(--border); line-height: 1.3;
}
.place-result-item:last-child { border-bottom: none; }
.place-result-item:hover { background: var(--primary); color: #0b1026; }

/* Settings — category manager */
.cat-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; margin-bottom: 8px;
  background: linear-gradient(145deg, var(--surface) 0%, var(--surface2) 100%);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.cat-row .cat-label { flex: 1; }
.cat-row-muted { opacity: 0.75; }
.cat-label-static { flex: 1; color: var(--text-muted); }
.cat-count { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cat-color {
  width: 44px; height: 36px; padding: 2px; flex: none;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); cursor: pointer;
}
.cat-color::-webkit-color-swatch { border: none; border-radius: 6px; }
.cat-color::-webkit-color-swatch-wrapper { padding: 0; }
.cat-del { flex: none; }