/* Julian & Molly in Paris — v3 */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;600;700&family=DM+Mono:wght@300;400&display=swap');

:root {
  --steel: #5B6770; --glass-blue: #3D5A80; --glass-light: #98B4CA;
  --slate: #2B3A4E; --concrete: #D5D0C8; --concrete-light: #EAE6E0;
  --terracotta: #C1272D; --terracotta-light: #D94F53;
  --garden: #6B8F6B; --garden-light: #9AB89A;
  --cream: #F6F2EB; --warm-white: #FDFBF8;
  --ink: #2C2C2C; --ink-light: #5A5A5A; --danger: #C1272D;
  --line-thin: 1px solid rgba(90,90,90,0.12);
  --radius: 3px; --radius-lg: 6px;
  --font-display: 'Josefin Sans', 'Futura', sans-serif;
  --font-mono: 'DM Mono', 'Courier New', monospace;
  --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Dark mode */
html.dark {
  --slate: #1a1f2a; --cream: #1e2028; --warm-white: #252830;
  --concrete: #3a3d44; --concrete-light: #2e3038;
  --ink: #e0ddd6; --ink-light: #9a9690; --line-thin: 1px solid rgba(200,200,200,0.1);
}
html.dark body { background: var(--cream); color: var(--ink); }
html.dark .search-bar, html.dark .bottom-panel, html.dark .login-card { background: var(--warm-white); }
html.dark header { background: #111318; }
html.dark .search-bar input, html.dark .form-group input, html.dark .form-group select,
html.dark .form-group textarea, html.dark .poi-item, html.dark .modal,
html.dark .add-day-row input { background: #1a1d24; color: var(--ink); border-color: var(--concrete); }
html.dark .modal h2 { color: var(--ink); }
html.dark .leaflet-popup-content-wrapper { background: var(--warm-white) !important; color: var(--ink) !important; }
html.dark .leaflet-popup-tip { border-top-color: var(--warm-white) !important; }
html.dark .status-pill { background: var(--warm-white); }
html.dark .cat-filter { border-color: var(--concrete); color: var(--ink-light); }
html.dark .tag-unvisited { background: var(--concrete); color: var(--ink-light); }
html.dark .btn-secondary { background: var(--concrete); color: var(--ink); }
html.dark .btn-ghost { border-color: var(--concrete); color: var(--ink-light); }
html.dark .address-link { color: var(--ink-light); border-bottom-color: var(--concrete); }
/* Darken map tiles in dark mode */
html.dark .leaflet-tile-pane img {
  filter: brightness(0.65) invert(1) contrast(2.8) hue-rotate(200deg) saturate(0.25) brightness(0.75);
}
/* Fix zoom controls in dark mode */
html.dark .leaflet-control-zoom a { background: var(--warm-white) !important; color: var(--ink) !important; border-color: var(--concrete) !important; }
html.dark .leaflet-control-attribution { background: rgba(30,32,40,0.8) !important; color: var(--ink-light) !important; }
html.dark .leaflet-control-attribution a { color: var(--ink-light) !important; }
/* Metro overlay adjusts in dark mode */
html.dark .metro-station-label { color: #ccc; text-shadow: 0 0 4px rgba(0,0,0,0.9); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { font-family: var(--font-display); font-weight: 400; color: var(--ink); background: var(--cream); height: 100dvh; overflow: hidden; position: fixed; width: 100%; }
body::before { content: ''; position: fixed; inset: 0; background-image: linear-gradient(rgba(90,90,90,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(90,90,90,0.03) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; z-index: 0; }

/* Login */
.login-screen { display: flex; align-items: center; justify-content: center; height: 100dvh; background: var(--cream); padding: 20px; z-index: 9999; position: relative; }
.login-card { background: var(--warm-white); border: 1.5px solid var(--concrete); border-radius: var(--radius-lg); padding: 32px 24px; width: 100%; max-width: 340px; text-align: center; }
.login-logo { width: 64px; height: 64px; border-radius: 50%; margin-bottom: 12px; }
.login-card h1 { font-weight: 300; font-size: 1.2rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 20px; line-height: 1.4; }
.login-card h1 span { font-weight: 700; color: var(--terracotta); }
.login-card .form-group { margin-bottom: 10px; }
.login-card input { width: 100%; padding: 10px 14px; font-family: var(--font-display); font-size: 0.9rem; border: 1.5px solid var(--concrete); border-radius: var(--radius); background: var(--cream); outline: none; }
.login-card input:focus { border-color: var(--glass-blue); }
.login-error { color: var(--danger); font-size: 0.78rem; min-height: 20px; margin: 6px 0; }

/* Layout */
#app { display: flex; flex-direction: column; height: 100dvh; position: relative; z-index: 1; }
header { background: var(--slate); color: var(--cream); padding: calc(var(--safe-top) + 6px) 12px 6px; display: flex; align-items: center; gap: 10px; z-index: 1000; flex-shrink: 0; border-bottom: 3px solid var(--terracotta); }
.logo-mark { width: 32px; height: 32px; flex-shrink: 0; }
header h1 { font-weight: 300; font-size: 1.05rem; letter-spacing: 0.12em; text-transform: uppercase; flex: 1; line-height: 1.2; }
header h1 span { font-weight: 700; color: var(--terracotta-light); }
.header-actions { display: flex; gap: 5px; }
.btn-icon { background: transparent; border: 1.5px solid rgba(255,255,255,0.3); color: var(--cream); width: 30px; height: 30px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.8rem; transition: all 0.15s; }
.btn-icon:active { background: rgba(255,255,255,0.15); }
.btn-icon.active { background: var(--terracotta); border-color: var(--terracotta); }

/* Search */
.search-bar { background: var(--warm-white); padding: 8px 12px; border-bottom: var(--line-thin); display: flex; gap: 8px; z-index: 999; flex-shrink: 0; }
.search-bar input { flex: 1; font-family: var(--font-display); font-size: 0.93rem; padding: 8px 12px; border: 1.5px solid var(--concrete); border-radius: var(--radius); background: var(--cream); color: var(--ink); outline: none; }
.search-bar input:focus { border-color: var(--glass-blue); }
.search-bar input::placeholder { color: var(--steel); font-weight: 300; }
.search-results { position: absolute; top: 100%; left: 12px; right: 12px; background: var(--warm-white); border: 1.5px solid var(--concrete); border-radius: 0 0 var(--radius-lg) var(--radius-lg); max-height: 240px; overflow-y: auto; z-index: 998; display: none; box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.search-results.active { display: block; }
.search-result-item { padding: 10px 14px; border-bottom: var(--line-thin); cursor: pointer; font-size: 0.88rem; }
.search-result-item:active { background: var(--concrete-light); }
.result-name { font-weight: 600; }
.result-address { font-size: 0.78rem; color: var(--ink-light); margin-top: 2px; font-weight: 300; }

/* Buttons */
.btn { font-family: var(--font-display); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 14px; border: none; border-radius: var(--radius); cursor: pointer; transition: all 0.15s; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.btn-primary { background: var(--terracotta); color: white; }
.btn-primary:active { background: var(--terracotta-light); }
.btn-secondary { background: var(--concrete); color: var(--ink); }
.btn-ghost { background: transparent; border: 1.5px solid var(--concrete); color: var(--ink-light); }
.btn-small { font-size: 0.7rem; padding: 5px 10px; }

/* Map */
.map-container { flex: 1; position: relative; min-height: 0; }
#map { width: 100%; height: 100%; }
.leaflet-popup-content-wrapper { border-radius: var(--radius-lg) !important; font-family: var(--font-display) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important; border: 2px solid var(--slate) !important; }
.leaflet-popup-content { margin: 10px 14px !important; font-size: 0.88rem !important; }
.jm-hotel-marker { z-index: 1000 !important; }

/* Bottom panel */
.bottom-panel { position: absolute; bottom: 0; left: 0; right: 0; background: var(--warm-white); border-top: 3px solid var(--terracotta); z-index: 999; transform: translateY(calc(100% - 48px)); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); max-height: 70dvh; display: flex; flex-direction: column; border-radius: 12px 12px 0 0; box-shadow: 0 -4px 20px rgba(0,0,0,0.1); }
.bottom-panel.open { transform: translateY(0); }
.panel-handle { padding: 8px 0 4px; text-align: center; cursor: pointer; flex-shrink: 0; }
.panel-handle::before { content: ''; display: inline-block; width: 36px; height: 4px; background: var(--concrete); border-radius: 2px; }
.panel-tabs { display: flex; border-bottom: var(--line-thin); padding: 0 12px; flex-shrink: 0; }
.panel-tab { font-family: var(--font-display); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 14px; border: none; background: none; color: var(--steel); cursor: pointer; border-bottom: 2px solid transparent; }
.panel-tab.active { color: var(--terracotta); border-bottom-color: var(--terracotta); }
.panel-content { flex: 1; overflow-y: auto; padding: 10px 12px calc(var(--safe-bottom) + 10px); -webkit-overflow-scrolling: touch; }

/* POI items */
.poi-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px; border: 1.5px solid var(--concrete); border-radius: var(--radius-lg); margin-bottom: 8px; background: white; position: relative; }
html.dark .poi-item { background: var(--warm-white); }
.poi-item:active { border-color: var(--glass-blue); }
.poi-hotel { border-color: var(--slate); }
.poi-cat-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; }
.poi-info { flex: 1; min-width: 0; }
.poi-name { font-weight: 600; font-size: 0.9rem; line-height: 1.3; }
.poi-address { font-size: 0.75rem; color: var(--ink-light); font-weight: 300; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.poi-hours { font-size: 0.72rem; color: var(--ink-light); margin-top: 2px; }
.poi-meta { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; }

/* Tags */
.tag { font-family: var(--font-mono); font-size: 0.65rem; padding: 2px 7px; border-radius: 2px; font-weight: 400; }
.tag-hotel { background: var(--slate); color: white; font-weight: 600; }
.tag-interest { color: white; }
.tag-visited { background: var(--garden-light); color: #2a4a22; }
.tag-unvisited { background: var(--concrete-light); color: var(--ink-light); }
.tag-day { color: white; }

/* Category filters */
.category-filters { display: flex; gap: 6px; margin-bottom: 10px; overflow-x: auto; padding: 2px 0; flex-shrink: 0; }
.cat-filter { font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; padding: 5px 10px; border: 1.5px solid var(--concrete); border-radius: 16px; background: transparent; color: var(--ink-light); cursor: pointer; white-space: nowrap; }
.cat-filter.active { background: var(--terracotta); color: white; border-color: var(--terracotta); }

/* Day groups */
.day-group { margin-bottom: 14px; }
.day-header { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: var(--radius-lg); margin-bottom: 6px; cursor: pointer; flex-wrap: wrap; }
.day-color-bar { width: 4px; height: 24px; border-radius: 2px; flex-shrink: 0; }
.day-header h3 { font-weight: 600; font-size: 0.88rem; flex: 1; letter-spacing: 0.04em; }
.day-count { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-light); }
.day-route-info { padding: 4px 10px; margin-bottom: 6px; font-size: 0.78rem; }
.route-badge { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 0.72rem; padding: 3px 8px; border-radius: 2px; }
.route-badge.walking { background: #e8f0e4; color: var(--garden); }
.route-badge.metro { background: #dde8f0; color: var(--glass-blue); }
.travel-between { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 4px 0; margin: 2px 0 2px 20px; font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-light); border-left: 2px dashed var(--concrete); min-height: 28px; }
.hotel-distance { padding: 4px 10px 4px 22px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--steel); border-left: 2px solid var(--slate); margin: 0 0 4px 12px; }
.add-day-row { display: flex; gap: 8px; margin-bottom: 14px; }
.add-day-row input { flex: 1; font-family: var(--font-display); font-size: 0.88rem; padding: 8px 12px; border: 1.5px solid var(--concrete); border-radius: var(--radius); background: white; outline: none; }
html.dark .add-day-row input { background: var(--warm-white); color: var(--ink); border-color: var(--concrete); }

/* Popup extras */
.popup-name { font-weight: 600; font-size: 0.92rem; margin-bottom: 2px; }
.popup-address { font-size: 0.78rem; color: var(--ink-light); margin-bottom: 4px; }
.popup-hours { font-size: 0.75rem; color: var(--ink-light); margin-bottom: 3px; }
.popup-notes { font-size: 0.75rem; color: var(--ink-light); font-style: italic; margin-bottom: 4px; }
.popup-photo { margin: 6px 0; }
.popup-photo img { max-width: 100%; max-height: 120px; border-radius: var(--radius); object-fit: cover; }
.popup-actions { display: flex; gap: 5px; flex-wrap: wrap; }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(44,44,44,0.5); z-index: 2000; display: none; align-items: flex-end; justify-content: center; }
.modal-overlay.active { display: flex; }
.modal { background: var(--warm-white); width: 100%; max-width: 420px; max-height: 85dvh; border-radius: 12px 12px 0 0; overflow-y: auto; padding: 20px 16px calc(var(--safe-bottom) + 16px); animation: slideUp 0.25s ease-out; }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.modal h2 { font-weight: 700; font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; color: var(--slate); }
html.dark .modal h2 { color: var(--ink); }
.form-group { margin-bottom: 12px; }
.form-group label { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel); margin-bottom: 4px; }
.form-group input, .form-group select, .form-group textarea { width: 100%; font-family: var(--font-display); font-size: 0.9rem; padding: 9px 12px; border: 1.5px solid var(--concrete); border-radius: var(--radius); background: white; color: var(--ink); outline: none; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--glass-blue); }
.form-group textarea { resize: vertical; min-height: 50px; }
.interest-selector { display: flex; gap: 10px; }
.interest-option { width: 36px; height: 36px; border-radius: 50%; border: 2.5px solid var(--concrete); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; cursor: pointer; color: white; opacity: 0.4; transition: all 0.15s; }
.interest-option.selected { opacity: 1; border-color: var(--ink); transform: scale(1.15); }
.modal-actions { display: flex; gap: 8px; margin-top: 16px; }
.modal-actions .btn { flex: 1; padding: 12px; }
.hotel-toggle { display: flex !important; align-items: center; gap: 10px; cursor: pointer; text-transform: none !important; font-weight: 400 !important; letter-spacing: 0 !important; }
.hotel-toggle input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--slate); cursor: pointer; }
.hotel-toggle-label { font-size: 0.88rem; color: var(--ink); }

/* Address links */
.address-link { color: var(--ink-light); text-decoration: none; border-bottom: 1px dotted var(--concrete); }
.address-link:active { color: var(--terracotta); border-bottom-color: var(--terracotta); }

/* Settings */
.settings-content h3 { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px; color: var(--steel); }

/* Status */
.status-bar { position: absolute; top: 8px; right: 8px; z-index: 998; }
.status-pill { font-family: var(--font-mono); font-size: 0.65rem; padding: 3px 8px; border-radius: 10px; background: var(--warm-white); border: 1px solid var(--concrete); color: var(--ink-light); box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
.status-pill.offline { background: var(--terracotta); color: white; border-color: var(--terracotta); }

/* Toast */
.toast { position: fixed; bottom: 60px; left: 50%; transform: translateX(-50%) translateY(100px); background: var(--slate); color: var(--cream); font-family: var(--font-display); font-size: 0.82rem; padding: 10px 20px; border-radius: var(--radius-lg); z-index: 3000; box-shadow: 0 4px 16px rgba(0,0,0,0.2); transition: transform 0.3s ease; pointer-events: none; }
.toast.show { transform: translateX(-50%) translateY(0); }
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--concrete); border-top-color: var(--terracotta); border-radius: 50%; animation: spin 0.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty-state { text-align: center; padding: 30px 20px; color: var(--steel); }
.empty-state p { font-size: 0.85rem; font-weight: 300; line-height: 1.5; }

/* Metro overlay */
.metro-station-label {
  font-family: var(--font-display); font-size: 10px; font-weight: 600;
  color: #333; white-space: nowrap; text-shadow: 0 0 3px rgba(255,255,255,0.9), 0 0 6px rgba(255,255,255,0.7);
  pointer-events: none;
}
.metro-popup-lines { display: flex; gap: 4px; margin: 4px 0 6px; flex-wrap: wrap; }
.metro-popup-line { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; color: white; font-weight: 700; font-size: 10px; font-family: var(--font-mono); }
.metro-popup-actions { display: flex; gap: 6px; margin-top: 6px; }

/* Responsive */
@media (min-width: 768px) {
  .bottom-panel { left: auto; right: 12px; bottom: 12px; width: 380px; max-height: calc(100dvh - 120px); border-radius: 12px; transform: translateY(calc(100% - 48px)); }
  .bottom-panel.open { transform: translateY(0); }
}
@media print { header, .search-bar, .bottom-panel, .status-bar { display: none !important; } #map { height: 100vh !important; } }