/* ── RESET & VARIABLES ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --gold:#C9A84C;--gold-light:#E8C96B;--gold-dim:#8B6914;
  --black:#0A0A0A;--surface:#111111;--surface2:#1A1A1A;--surface3:#242424;
  --border:#2A2A2A;--border-light:#333;
  --text:#F0EDE8;--text-dim:#8A8A8A;--text-muted:#555;
  --accent-blue:#4A90D9;--accent-green:#4CAF50;--accent-red:#E57373;
  --font-display:'Cormorant Garamond',serif;
  --font-body:'DM Sans',sans-serif;
  --radius:8px;--radius-sm:4px;
  --shadow:0 4px 24px rgba(0,0,0,.6);
  --shadow-gold:0 0 20px rgba(201,168,76,.15);
  --transition:.2s ease;
}

/* ── LIGHT MODE OVERRIDES ── */
html[data-theme="light"]{
  --black:#F5F3EF;--surface:#FFFFFF;--surface2:#F0EDE8;--surface3:#E8E4DD;
  --border:#D8D3CC;--border-light:#C8C2B8;
  --text:#1A1714;--text-dim:#5A5450;--text-muted:#9A948E;
  --shadow:0 4px 24px rgba(0,0,0,.12);
  --shadow-gold:0 0 20px rgba(201,168,76,.2);
}
html[data-theme="light"] body{background:var(--black)}
html[data-theme="light"] #app-header{background:rgba(245,243,239,.96)}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea{
  background:var(--surface);
  color:var(--text);
  border-color:var(--border-light);
}
html[data-theme="light"] select option{background:var(--surface);color:var(--text)}

html[data-theme="light"] .modal{
  background:var(--surface);
  border-color:var(--border-light);
  color:var(--text);
}
html[data-theme="light"] .modal h2{color:var(--gold)}
html[data-theme="light"] .modal .form-group label{color:var(--text-dim)}
html[data-theme="light"] .modal input,
html[data-theme="light"] .modal select,
html[data-theme="light"] .modal textarea{
  background:var(--surface2);
  color:var(--text);
  border-color:var(--border-light);
}
html[data-theme="light"] .modal input::placeholder,
html[data-theme="light"] .modal textarea::placeholder{color:var(--text-muted)}

html[data-theme="light"] #loading{background:var(--black)}
html[data-theme="light"] #toast{background:var(--surface2);color:var(--text);border-color:var(--border-light)}
html[data-theme="light"] ::-webkit-scrollbar-track{background:var(--surface2)}
html[data-theme="light"] ::-webkit-scrollbar-thumb{background:var(--border-light)}
html[data-theme="light"] .region-select-bar{background:var(--surface2);border-bottom-color:var(--border-light)}
html[data-theme="light"] .region-select{background:var(--surface3);color:var(--text);border-color:var(--border-light)}
html[data-theme="light"] .add-trip-choice-btn{background:var(--surface2);border-color:var(--border-light);color:var(--text)}
html[data-theme="light"] .add-trip-choice-btn:hover{border-color:var(--gold-dim);background:var(--surface3)}

/* ── THEME TOGGLE BUTTON ── */
#btn-theme{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--border-light);
  background:var(--surface3);color:var(--text-dim);font-size:1rem;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--transition);flex-shrink:0;
}
#btn-theme:hover{border-color:var(--gold);color:var(--gold);background:var(--surface2)}

html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--black);color:var(--text);min-height:100vh;overflow-x:hidden}
a{color:var(--gold);text-decoration:none}
button{cursor:pointer;font-family:var(--font-body)}
input,select,textarea{
  font-family:var(--font-body);color:var(--text);background:var(--surface2);
  border:1px solid var(--border-light);border-radius:var(--radius-sm);
  padding:8px 12px;outline:none;transition:border-color var(--transition);
}
input:focus,select:focus,textarea:focus{border-color:var(--gold)}
input::placeholder{color:var(--text-muted)}
select option{background:var(--surface2);color:var(--text)}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--surface)}
::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--gold-dim)}

/* ── HEADER ── */
#app-header{
  position:sticky;top:0;z-index:100;
  background:rgba(10,10,10,.95);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  padding:0 24px;display:flex;align-items:center;justify-content:space-between;
  height:60px;
}
.header-logo{font-family:var(--font-display);font-size:1.5rem;font-weight:300;letter-spacing:.08em;color:var(--gold)}
.header-logo span{color:var(--text-dim);font-style:italic;font-size:.9rem;margin-left:8px}
.header-actions{display:flex;gap:8px;align-items:center}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--radius-sm);border:none;font-size:.8rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;transition:all var(--transition)}
.btn-gold{background:var(--gold);color:var(--black)}
.btn-gold:hover{background:var(--gold-light);transform:translateY(-1px);box-shadow:var(--shadow-gold)}
.btn-outline{background:transparent;color:var(--text-dim);border:1px solid var(--border-light)}
.btn-outline:hover{border-color:var(--gold);color:var(--gold)}
.btn-ghost{background:transparent;color:var(--text-dim);border:none;padding:6px 10px}
.btn-ghost:hover{color:var(--text)}
.btn-danger{background:transparent;color:var(--accent-red);border:1px solid var(--accent-red)}
.btn-danger:hover{background:var(--accent-red);color:#fff}
.btn-sm{padding:5px 10px;font-size:.75rem}
.btn-icon{width:32px;height:32px;padding:0;justify-content:center;border-radius:50%;background:var(--surface3);border:1px solid var(--border);color:var(--text-dim)}
.btn-icon:hover{border-color:var(--gold);color:var(--gold)}

/* ═══════════════════════════════════════════════════════
   DESKTOP NAV — continent pills + collapsible grid panel
   ═══════════════════════════════════════════════════════ */
#nav-bar{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex;
  flex-direction:column;
  padding:0;
}

.nav-row{
  display:flex;
  align-items:center;
  padding:0 24px;
  overflow-x:auto;
  scrollbar-width:none;
}
.nav-row::-webkit-scrollbar{display:none}

/* Row 1: continent pills */
.nav-row-continents{
  background:var(--surface2);
  border-bottom:1px solid var(--border);
  padding:6px 24px;
  gap:6px;
  flex-wrap:wrap;
}

/* Planner pill in row 1 */
.nav-tab.nav-planner{
  padding:5px 14px;
  border-radius:16px;
  border:1px solid var(--border-light);
  background:var(--surface3);
  color:var(--text-dim);
  font-size:.75rem;font-weight:500;letter-spacing:.04em;
  border-bottom:none;
  transition:all var(--transition);
  white-space:nowrap;
  text-transform:uppercase;
}
.nav-tab.nav-planner:hover{border-color:var(--gold);color:var(--gold)}
.nav-tab.nav-planner.active{
  background:rgba(201,168,76,.15);
  border-color:var(--gold-dim);
  color:var(--gold-light);
}

/* Continent pills */
.nav-continent-pill{
  padding:5px 12px;
  border-radius:16px;
  border:1px solid var(--border);
  background:var(--surface3);
  color:var(--text-dim);
  font-size:.75rem;font-weight:500;letter-spacing:.04em;
  white-space:nowrap;
  transition:all var(--transition);
  display:inline-flex;align-items:center;gap:5px;
}
.nav-continent-pill:hover{border-color:var(--border-light);color:var(--text)}
.nav-continent-pill.active,
.nav-continent-pill.open{
  background:rgba(201,168,76,.15);
  border-color:var(--gold-dim);
  color:var(--gold-light);
}
.pill-count{
  font-size:.65rem;
  background:var(--surface2);
  color:var(--text-muted);
  padding:1px 5px;
  border-radius:8px;
}
.nav-continent-pill.active .pill-count,
.nav-continent-pill.open .pill-count{
  background:var(--gold-dim);
  color:var(--gold-light);
}
.pill-caret{
  font-size:.6rem;
  transition:transform .2s ease;
  opacity:.6;
}
.nav-continent-pill.open .pill-caret{transform:rotate(180deg)}

/* Active country label — right side of row 1 */
.nav-active-label-wrap{
  margin-left:auto;
  flex-shrink:0;
}
.nav-active-label{
  font-size:.75rem;
  color:var(--gold);
  background:rgba(201,168,76,.1);
  border:1px solid var(--gold-dim);
  border-radius:12px;
  padding:4px 10px;
  white-space:nowrap;
}

/* ── Country grid panel ── */
.country-grid-panel{
  display:none;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:0;
  overflow:hidden;
}
.country-grid-panel.open{display:block;animation:slideDown .18s ease}
@keyframes slideDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

.cgp-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 24px 8px;
  border-bottom:1px solid var(--border);
}
.cgp-title{
  font-family:var(--font-display);font-size:1rem;color:var(--gold);font-weight:400;
}
.cgp-count{font-size:.72rem;color:var(--text-muted)}

.cgp-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:8px;
  padding:12px 24px 16px;
}
.cgp-grid-mobile{
  grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  padding:10px 12px 14px;
}

.cgp-card{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:2px;
  padding:10px 12px;
  border-radius:var(--radius);
  background:var(--surface2);
  border:1px solid var(--border);
  color:var(--text);
  text-align:left;
  transition:all var(--transition);
}
.cgp-card:hover{border-color:var(--border-light);background:var(--surface3);transform:translateY(-1px)}
.cgp-card.active{
  border-color:var(--gold-dim);
  background:rgba(201,168,76,.1);
}
.cgp-flag{font-size:1.3rem;line-height:1}
.cgp-name{font-size:.78rem;font-weight:500;color:var(--text);line-height:1.3}
.cgp-acts{font-size:.66rem;color:var(--text-muted)}
.cgp-card.active .cgp-name{color:var(--gold-light)}
.cgp-card.active .cgp-acts{color:var(--gold-dim)}

/* light-mode overrides for nav + grid panel */
html[data-theme="light"] .nav-row-continents{background:var(--surface2);border-bottom-color:var(--border-light)}
html[data-theme="light"] .nav-continent-pill{background:var(--surface3);border-color:var(--border-light);color:var(--text-dim)}
html[data-theme="light"] .nav-continent-pill.active,
html[data-theme="light"] .nav-continent-pill.open{background:rgba(201,168,76,.2);border-color:var(--gold-dim);color:var(--gold)}
html[data-theme="light"] .country-grid-panel{background:var(--surface);border-color:var(--border-light)}
html[data-theme="light"] .cgp-card{background:var(--surface2);border-color:var(--border-light);color:var(--text)}
html[data-theme="light"] .cgp-card:hover{background:var(--surface3)}
html[data-theme="light"] .cgp-card.active{background:rgba(201,168,76,.15);border-color:var(--gold-dim)}

/* ── MOBILE NAV — continent triggers + grid panel ── */
#mobile-nav{display:none}

@media(max-width:900px){
  #nav-bar{display:none}

  #mobile-nav{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    padding:8px 12px;
    background:var(--surface);
    border-bottom:1px solid var(--border);
    position:relative;
    z-index:50;
  }

  #mobile-nav .mobile-planner-btn{
    padding:7px 14px;
    border-radius:20px;
    border:1px solid var(--border);
    background:var(--surface2);
    color:var(--text-dim);
    font-size:.75rem;font-weight:500;letter-spacing:.04em;
    transition:all var(--transition);
    white-space:nowrap;
  }
  #mobile-nav .mobile-planner-btn.active{
    background:rgba(201,168,76,.15);
    border-color:var(--gold-dim);
    color:var(--gold-light);
  }

  .continent-trigger{
    display:inline-flex;align-items:center;gap:5px;
    padding:7px 12px;
    border-radius:20px;
    border:1px solid var(--border);
    background:var(--surface2);
    color:var(--text-dim);
    font-size:.75rem;font-weight:500;letter-spacing:.04em;
    transition:all var(--transition);
    white-space:nowrap;
  }
  .continent-trigger.has-active,
  .continent-trigger.open{
    background:rgba(201,168,76,.15);
    border-color:var(--gold-dim);
    color:var(--gold-light);
  }
  .continent-trigger .caret{
    font-size:.6rem;
    transition:transform .2s ease;
    display:inline-block;
  }
  .continent-trigger.open .caret{transform:rotate(180deg)}

  /* Mobile country grid panel — sits between mobile-nav and main content */
  .mobile-country-panel{
    display:none;
    background:var(--surface);
    border-bottom:1px solid var(--border);
    z-index:49;
  }
  .mobile-country-panel.open{
    display:block;
    animation:slideDown .18s ease;
  }
}

/* ── MAIN LAYOUT ── */
#main-layout{display:flex;height:calc(100vh - 104px);overflow:hidden;position:relative}

/* ── POOL REOPEN TAB ── */
#pool-reopen-tab{
  display:none;
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  z-index:10;
  width:20px;height:64px;
  background:var(--surface2);border:1px solid var(--border-light);
  border-left:none;border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  align-items:center;justify-content:center;
  color:var(--gold);font-size:.7rem;cursor:pointer;
  transition:all var(--transition);writing-mode:vertical-lr;
  letter-spacing:.06em;font-family:var(--font-body);font-size:.6rem;
  text-transform:uppercase;padding:8px 3px;
}
#pool-reopen-tab:hover{background:var(--surface3);border-color:var(--gold);width:24px}
#pool-reopen-tab.visible{display:flex}

#trip-pool{
  width:280px;min-width:260px;background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;overflow:hidden;transition:width .3s ease,min-width .3s ease;
}
#trip-pool.collapsed{width:0;min-width:0;overflow:hidden}

.pool-header{
  padding:16px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}
.pool-title{font-family:var(--font-display);font-size:1.1rem;font-weight:400;color:var(--gold)}
.pool-meta{font-size:.72rem;color:var(--text-dim);margin-top:2px}
.pool-body{flex:1;overflow-y:auto;padding:12px}
.pool-empty{
  text-align:center;padding:40px 16px;
  color:var(--text-muted);font-size:.8rem;line-height:1.8;
}
.pool-empty .icon{font-size:2rem;margin-bottom:8px;display:block;opacity:.3}
.pool-footer{padding:12px;border-top:1px solid var(--border);flex-shrink:0}
.pool-cost{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;margin-bottom:4px}
.pool-cost .label{color:var(--text-dim)}
.pool-cost .value{color:var(--gold);font-weight:500}
.headcount-row{display:flex;align-items:center;gap:8px;margin-top:8px}
.headcount-row label{font-size:.75rem;color:var(--text-dim);white-space:nowrap}
.headcount-row input{width:60px;text-align:center;font-size:.85rem}

/* ── POOL CARD ── */
.pool-card{
  background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);
  padding:10px 12px;margin-bottom:8px;cursor:grab;transition:all var(--transition);
  position:relative;
}
.pool-card:hover{border-color:var(--gold-dim);box-shadow:var(--shadow-gold)}
.pool-card.dragging{opacity:.5;cursor:grabbing;transform:rotate(2deg)}
.pool-card-name{font-size:.82rem;font-weight:500;color:var(--text);line-height:1.3;margin-bottom:4px;padding-right:20px}
.pool-card-meta{display:flex;gap:8px;flex-wrap:wrap}
.pool-card-badge{font-size:.68rem;padding:2px 6px;border-radius:10px;background:var(--surface3);color:var(--text-dim)}
.pool-card-badge.price{color:var(--gold-light)}
.pool-card-remove{
  position:absolute;top:8px;right:8px;
  width:18px;height:18px;border-radius:50%;
  background:none;border:none;color:var(--text-muted);font-size:.7rem;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--transition);
}
.pool-card-remove:hover{background:var(--accent-red);color:#fff}

/* ── CENTER PANEL ── */
#center-panel{flex:1;overflow:hidden;display:flex;flex-direction:column;min-width:0}

/* ── VIEW TABS ── */
#view-tabs{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0;
}
.view-switcher{display:flex;gap:4px;background:var(--surface2);border-radius:var(--radius-sm);padding:3px}
.view-btn{padding:5px 14px;border:none;border-radius:4px;font-size:.75rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);background:none;transition:all var(--transition)}
.view-btn.active{background:var(--surface3);color:var(--text);border:1px solid var(--border-light)}
.view-actions{display:flex;gap:6px;align-items:center}

/* ── ACTIVITY BROWSER ── */
#activity-view{flex:1;display:flex;flex-direction:column;overflow:hidden}
.filter-bar{
  padding:12px 16px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0;
}
.filter-bar input[type=text]{flex:1;min-width:140px;font-size:.8rem}
.filter-bar select{font-size:.78rem;min-width:120px}
.filter-count{font-size:.75rem;color:var(--text-dim);white-space:nowrap;margin-left:auto}

/* ── REGION SELECT BAR (2C: unified selects on desktop + mobile) ── */
/* The old pill bars are hidden via JS; this bar handles both layouts. */
#region-pills{display:none !important}
#subregion-pills{display:none !important}

.region-select-bar{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  padding:8px 16px;
  background:var(--surface2);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
/* On mobile, stack selects vertically */
@media(max-width:900px){
  .region-select-bar{
    flex-direction:column;
    align-items:stretch;
    padding:8px 12px;
  }
}

.region-select{
  font-size:.78rem;
  padding:6px 10px;
  background:var(--surface3);
  color:var(--text);
  border:1px solid var(--border-light);
  border-radius:var(--radius-sm);
  min-width:160px;
  transition:border-color var(--transition);
}
.region-select:focus{border-color:var(--gold)}

/* Legacy mobile-region-selects wrapper — kept for safety but hidden since we
   now render selects in #region-select-bar for both platforms */
#mobile-region-selects{display:none !important}

.activity-grid{
  flex:1;overflow-y:auto;padding:16px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;
  align-content:start;
}
.activity-card{
  background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);
  overflow:visible;transition:all var(--transition);display:flex;flex-direction:column;
}
.activity-card:hover{border-color:var(--border-light);transform:translateY(-2px);box-shadow:var(--shadow)}
.activity-card.added{border-color:var(--gold-dim);opacity:.7}
.card-header{padding:16px 16px 0}
.card-category{
  display:inline-block;font-size:.7rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 10px;border-radius:10px;margin-bottom:10px;
}
.cat-Adventure{background:rgba(74,144,217,.15);color:#6AABEF}
.cat-Cultural{background:rgba(201,168,76,.12);color:var(--gold-light)}
.cat-Nature{background:rgba(76,175,80,.15);color:#80C784}
.cat-Nightlife{background:rgba(156,39,176,.15);color:#CE93D8}
.cat-Food{background:rgba(255,152,0,.15);color:#FFB74D}
.cat-Water{background:rgba(0,188,212,.15);color:#4DD0E1}
.cat-Wellness{background:rgba(233,30,99,.15);color:#F48FB1}
.cat-Shopping{background:rgba(158,158,158,.15);color:#BDBDBD}
.cat-Sightseeing{background:rgba(121,85,72,.15);color:#BCAAA4}

.card-name{font-size:1rem;font-weight:500;color:var(--text);line-height:1.4;margin-bottom:6px}
.card-location{font-size:.8rem;color:var(--text-dim);margin-bottom:10px;display:flex;align-items:center;gap:4px}
.card-desc{padding:0 16px;font-size:.8rem;color:var(--text-dim);line-height:1.6;flex:1}
.card-footer{
  padding:12px 16px;margin-top:auto;border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0;
}
.card-meta{display:flex;gap:10px;flex-wrap:wrap}
.card-meta span{font-size:.8rem;color:var(--text-dim);display:flex;align-items:center;gap:3px}
.card-meta .price{color:var(--gold-light);font-weight:500}
.card-add-btn{
  padding:7px 14px;font-size:.78rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  background:var(--surface3);border:1px solid var(--border-light);border-radius:var(--radius-sm);
  color:var(--text-dim);transition:all var(--transition);white-space:nowrap;flex-shrink:0;
}
.card-add-btn:hover{background:var(--gold);border-color:var(--gold);color:var(--black)}
.card-add-btn.added{background:var(--gold-dim);border-color:var(--gold-dim);color:var(--gold-light)}
.activity-card.multi-day .card-name::after{content:" ★";color:var(--gold-dim);font-size:.7rem}

/* ── ITINERARY VIEW ── */
#itinerary-view{flex:1;overflow:hidden;display:flex;flex-direction:column}
.itinerary-toolbar{
  padding:10px 16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0;
}
.day-controls{display:flex;align-items:center;gap:6px}
.day-controls label{font-size:.75rem;color:var(--text-dim)}
.day-controls input{width:50px;text-align:center}
.hour-toggle{display:flex;align-items:center;gap:6px;margin-left:8px}
.hour-toggle label{font-size:.75rem;color:var(--text-dim)}
.toggle-switch{position:relative;width:36px;height:20px}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{
  position:absolute;inset:0;background:var(--surface3);border-radius:10px;cursor:pointer;
  border:1px solid var(--border-light);transition:all var(--transition);
}
.toggle-slider::before{
  content:'';position:absolute;width:14px;height:14px;background:var(--text-muted);
  border-radius:50%;top:2px;left:2px;transition:all var(--transition);
}
.toggle-switch input:checked+.toggle-slider{background:var(--gold-dim);border-color:var(--gold)}
.toggle-switch input:checked+.toggle-slider::before{transform:translateX(16px);background:var(--gold-light)}

.itinerary-canvas{flex:1;overflow-x:auto;overflow-y:hidden;display:flex;gap:0;padding:0}
.day-column{
  min-width:200px;flex:1;border-right:1px solid var(--border);
  display:flex;flex-direction:column;overflow:hidden;
}
.day-column:last-child{border-right:none}
.day-header{
  padding:10px 12px;background:var(--surface2);border-bottom:1px solid var(--border);
  font-size:.78rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-dim);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}
.day-header span{color:var(--gold);font-family:var(--font-display);font-size:1rem;font-weight:400;text-transform:none;letter-spacing:0}
.day-body{flex:1;overflow-y:auto;padding:0;min-height:200px}
.day-body.drag-over{background:rgba(201,168,76,.04)}

/* Touch drag target highlights (4C) */
.day-body.touch-drop-target{
  outline:2px dashed var(--border-light);
  outline-offset:-2px;
}
.day-body.touch-drop-hover{
  background:rgba(201,168,76,.08);
  outline:2px solid var(--gold-dim);
  outline-offset:-2px;
}

/* Long-press activated state on an itinerary item */
.itinerary-item.long-press-active,
.timeline-block.long-press-active{
  border-left-color:var(--gold);
  box-shadow:var(--shadow-gold);
  transform:scale(1.02);
  z-index:10;
  transition:transform .15s ease, box-shadow .15s ease;
}

/* Floating clone shown under finger during touch drag */
.touch-drag-clone{
  position:fixed;
  z-index:500;
  background:var(--surface3);
  border:1px solid var(--gold);
  border-radius:var(--radius-sm);
  padding:6px 12px;
  font-size:.78rem;
  font-weight:500;
  color:var(--text);
  max-width:200px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  pointer-events:none;
  box-shadow:var(--shadow-gold);
  opacity:.9;
}

/* ── UNSCHEDULED BIN ── */
.unscheduled-block{
  padding:6px 8px;border-bottom:2px solid var(--border);background:var(--surface);
}
.unscheduled-label{
  font-size:.6rem;color:var(--text-muted);padding-bottom:4px;
  text-transform:uppercase;letter-spacing:.06em;
}

/* ── SIMPLE LIST MODE (hour mode OFF) ── */
.day-drop-zone{
  min-height:80px;border:2px dashed var(--border);border-radius:var(--radius);margin:8px;
  display:flex;align-items:center;justify-content:center;color:var(--text-muted);
  font-size:.75rem;transition:all var(--transition);
}
.day-drop-zone.drag-over{border-color:var(--gold-dim);background:rgba(201,168,76,.05);color:var(--gold-dim)}

/* ── TIMELINE GRID (hour mode ON) ── */
:root{ --slot-h:60px; --timeline-start:6; }

.timeline-wrapper{
  position:relative;
  flex:1;
  overflow-y:auto;
}

.timeline-grid{
  position:relative;
  height:calc(24 * var(--slot-h));
}

.timeline-row{
  position:absolute;left:0;right:0;
  height:var(--slot-h);
  border-bottom:1px solid var(--border);
  display:flex;align-items:flex-start;
  pointer-events:none;
}
.timeline-row:nth-child(even){background:rgba(255,255,255,.012)}
.timeline-hour-label{
  width:38px;flex-shrink:0;
  font-size:.6rem;color:var(--text-muted);
  padding:3px 6px 0 4px;text-align:right;
  user-select:none;
}
.timeline-half{
  position:absolute;left:38px;right:0;top:50%;
  border-top:1px dashed rgba(255,255,255,.05);
  pointer-events:none;
}

.timeline-drop-surface{
  position:absolute;inset:0;left:38px;
  z-index:1;
}
.timeline-drop-surface.drag-active{
  background:rgba(201,168,76,.03);
}
.timeline-ghost-line{
  position:absolute;left:0;right:0;height:2px;
  background:var(--gold);opacity:.7;pointer-events:none;z-index:3;
  transition:top .05s linear;
}

.timeline-block{
  position:absolute;
  left:2px;right:2px;
  z-index:2;
  background:var(--surface3);
  border:1px solid var(--border-light);
  border-left:3px solid var(--gold-dim);
  border-radius:var(--radius-sm);
  padding:4px 22px 4px 7px;
  cursor:grab;
  overflow:hidden;
  transition:border-color var(--transition), box-shadow var(--transition), opacity var(--transition);
  box-sizing:border-box;
}
.timeline-block:hover{
  border-left-color:var(--gold);
  box-shadow:var(--shadow-gold);
  z-index:4;
}
.timeline-block.dragging{ opacity:.35; cursor:grabbing; }
.timeline-block.custom-item{ border-left-color:var(--accent-blue); }
.timeline-block.conflict{ border-left-color:var(--accent-red); opacity:.9; }

.timeline-block-name{
  font-size:.75rem;font-weight:500;color:var(--text);
  line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.timeline-block-time{
  font-size:.64rem;color:var(--text-dim);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.timeline-block[data-short="true"] .timeline-block-time{ display:none; }
.timeline-block[data-short="true"] .timeline-block-name{ font-size:.68rem; }

.timeline-block-remove{
  position:absolute;top:4px;right:4px;
  width:15px;height:15px;border-radius:50%;
  background:none;border:none;color:var(--text-muted);font-size:.6rem;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--transition);z-index:5;
}
.timeline-block-remove:hover{background:var(--accent-red);color:#fff}

.timeline-now-line{
  position:absolute;left:0;right:0;height:2px;
  background:var(--accent-red);opacity:.5;
  pointer-events:none;z-index:3;
}
.timeline-now-line::before{
  content:'';position:absolute;left:32px;top:-4px;
  width:8px;height:8px;border-radius:50%;background:var(--accent-red);opacity:.8;
}

/* ── ITINERARY ITEM (list mode + unscheduled bin) ── */
.itinerary-item{
  background:var(--surface3);border:1px solid var(--border-light);border-radius:var(--radius-sm);
  padding:8px 10px;margin-bottom:6px;cursor:grab;transition:all var(--transition);
  position:relative;border-left:3px solid var(--gold-dim);
}
.itinerary-item:hover{border-left-color:var(--gold);box-shadow:var(--shadow-gold)}
.itinerary-item.dragging{opacity:.4;cursor:grabbing}
.itinerary-item-name{font-size:.78rem;font-weight:500;color:var(--text);line-height:1.3;padding-right:20px}
.itinerary-item-meta{font-size:.68rem;color:var(--text-dim);margin-top:3px;display:flex;gap:6px}
.itinerary-item-remove{
  position:absolute;top:6px;right:6px;width:16px;height:16px;
  background:none;border:none;color:var(--text-muted);font-size:.6rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:all var(--transition);
}
.itinerary-item-remove:hover{background:var(--accent-red);color:#fff}
.custom-item{border-left-color:var(--accent-blue)}

/* ── MODALS ── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(4px);
  z-index:200;display:flex;align-items:center;justify-content:center;padding:16px;
  opacity:0;pointer-events:none;transition:opacity var(--transition);
}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal{
  background:var(--surface);border:1px solid var(--border-light);border-radius:var(--radius);
  padding:24px;max-width:480px;width:100%;box-shadow:var(--shadow);
  transform:translateY(16px);transition:transform var(--transition);
  color:var(--text);
}
.modal-overlay.open .modal{transform:translateY(0)}
.modal h2{font-family:var(--font-display);font-size:1.4rem;font-weight:400;color:var(--gold);margin-bottom:16px}
.form-group{margin-bottom:14px}
.form-group label{
  display:block;font-size:.75rem;color:var(--text-dim);
  margin-bottom:5px;text-transform:uppercase;letter-spacing:.04em;
}
.form-group input,.form-group select,.form-group textarea{
  width:100%;font-size:.85rem;
  background:var(--surface2);color:var(--text);border-color:var(--border-light);
}
.form-group textarea{resize:vertical;min-height:70px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}

/* ── TOAST ── */
#toast{
  position:fixed;bottom:24px;right:24px;z-index:300;
  background:var(--surface2);border:1px solid var(--border-light);border-radius:var(--radius);
  padding:10px 16px;font-size:.8rem;color:var(--text);box-shadow:var(--shadow);
  transform:translateY(80px);opacity:0;transition:all .3s ease;pointer-events:none;
  display:flex;align-items:center;gap:8px;
}
#toast.show{transform:translateY(0);opacity:1}
#toast.success{border-color:var(--gold-dim)}
#toast.success::before{content:'✓';color:var(--gold)}

/* ── LOADING ── */
#loading{
  position:fixed;inset:0;background:var(--black);z-index:400;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  transition:opacity .5s ease;
}
#loading.done{opacity:0;pointer-events:none}
.loading-logo{font-family:var(--font-display);font-size:2.5rem;font-weight:300;color:var(--gold);letter-spacing:.1em}
.loading-bar{width:200px;height:2px;background:var(--surface3);border-radius:1px;overflow:hidden}
.loading-fill{height:100%;background:var(--gold);width:0%;transition:width .3s ease;border-radius:1px}
.loading-text{font-size:.75rem;color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase}

/* ── EMPTY STATE ── */
.empty-state{
  grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--text-muted);
}
.empty-state .icon{font-size:3rem;margin-bottom:12px;opacity:.25}
.empty-state p{font-size:.85rem;line-height:1.8}

/* ── EXPORT VIEW ── */
#export-view{flex:1;overflow-y:auto;padding:24px;display:none}
#export-view.active{display:block}
.export-section{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:16px}
.export-section h3{font-family:var(--font-display);color:var(--gold);margin-bottom:12px;font-weight:400}
.export-day{margin-bottom:16px}
.export-day h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid var(--border)}
.export-item{display:flex;justify-content:space-between;padding:6px 0;font-size:.82rem;border-bottom:1px solid rgba(255,255,255,.04)}
.export-total{display:flex;justify-content:space-between;padding:12px 0;font-size:.9rem;font-weight:500;border-top:2px solid var(--gold-dim);margin-top:8px}

/* ── MOBILE ── */
#pool-toggle-mobile{display:none}

@media(max-width:900px){
  #main-layout{
    flex-direction:column;
    height:auto;
    overflow:visible;
  }

  #trip-pool{
    width:100%;
    min-width:0;
    max-height:420px;
    border-right:none;
    border-bottom:1px solid var(--border);
    transition:max-height .3s ease;
  }
  #trip-pool.collapsed{
    width:100%;
    min-width:0;
    max-height:0;
    overflow:hidden;
  }

  #pool-reopen-tab{display:none !important}

  #pool-toggle-bar{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    width:100%;
    padding:7px 12px;
    background:var(--surface2);
    border-bottom:2px solid var(--border-light);
    font-size:.75rem;
    font-weight:500;
    letter-spacing:.04em;
    color:var(--gold);
    cursor:pointer;
    border:none;
    border-bottom:1px solid var(--border-light);
    border-top:1px solid var(--border);
    flex-shrink:0;
    transition:background var(--transition);
  }
  #pool-toggle-bar:hover{background:var(--surface3)}

  #center-panel{min-height:60vh}

  .activity-grid{
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    padding:10px;
  }

  #pool-toggle-mobile{display:flex}

  .itinerary-canvas{overflow-x:auto}
  .day-column{min-width:200px}

  .filter-bar{gap:6px}
  .filter-bar select{min-width:100px}
}

@media(max-width:600px){
  #app-header{padding:0 14px}
  .header-logo span{display:none}
  .header-actions{gap:4px;flex-wrap:wrap;justify-content:flex-end}

  #nav-bar{padding:0 10px}
  .nav-tab{padding:12px 10px;font-size:.72rem}

  .activity-grid{
    grid-template-columns:1fr;
    padding:8px;
  }

  .form-row{grid-template-columns:1fr}

  #trip-pool{max-height:340px}
  #trip-pool.collapsed{max-height:0}

  .filter-bar select{min-width:90px;font-size:.72rem}
  .filter-bar input[type=text]{min-width:120px}
}

/* ── POOL TOGGLE BAR — mobile only ── */
#pool-toggle-bar{display:none}

/* ── BOTTOM SHEETS (tap-assign + add-to-trip choice) ── */
.tap-assign-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:250;
  display:flex;align-items:flex-end;justify-content:center;
  animation:fadeIn .15s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.tap-assign-sheet{
  background:var(--surface);border-top:1px solid var(--border-light);
  border-radius:var(--radius) var(--radius) 0 0;
  width:100%;max-width:480px;padding:20px 16px 32px;
  animation:slideUp .2s ease;
}
@keyframes slideUp{from{transform:translateY(40px)}to{transform:translateY(0)}}
.tap-assign-title{font-family:var(--font-display);font-size:1.1rem;color:var(--gold);margin-bottom:4px}
.tap-assign-sub{font-size:.75rem;color:var(--text-dim);margin-bottom:16px}
.tap-assign-days{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.tap-assign-day-btn{
  padding:8px 16px;border-radius:var(--radius-sm);
  background:var(--surface3);border:1px solid var(--border-light);
  color:var(--text);font-size:.82rem;font-weight:500;
  transition:all var(--transition);
}
.tap-assign-day-btn:hover,.tap-assign-day-btn:active{
  background:var(--gold);border-color:var(--gold);color:var(--black);
}
.tap-assign-cancel{
  width:100%;padding:10px;border-radius:var(--radius-sm);
  background:none;border:1px solid var(--border-light);color:var(--text-muted);
  font-size:.8rem;transition:all var(--transition);
}
.tap-assign-cancel:hover{border-color:var(--text-muted);color:var(--text)}

/* 5C: Add-to-trip choice buttons */
.add-trip-choices{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:16px;
}
.add-trip-choice-btn{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border-radius:var(--radius);
  background:var(--surface3);
  border:1px solid var(--border-light);
  color:var(--text);
  text-align:left;
  transition:all var(--transition);
}
.add-trip-choice-btn:hover,.add-trip-choice-btn:active{
  border-color:var(--gold-dim);
  background:var(--surface2);
  box-shadow:var(--shadow-gold);
}
.choice-icon{font-size:1.4rem;flex-shrink:0}
.choice-label{font-size:.88rem;font-weight:500;color:var(--text);display:block;line-height:1.3}
.choice-desc{font-size:.72rem;color:var(--text-dim);display:block;margin-top:2px}

/* ── 3B: ASSIGN-TO-DAY POPOVER (desktop) ── */
.assign-popover{
  position:absolute;
  z-index:300;
  background:var(--surface2);
  border:1px solid var(--border-light);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px 16px;
  min-width:220px;
  max-width:300px;
  animation:fadeIn .12s ease;
}
.assign-popover-title{
  font-family:var(--font-display);font-size:1rem;color:var(--gold);
  margin-bottom:2px;font-weight:400;
}
.assign-popover-sub{
  font-size:.72rem;color:var(--text-dim);margin-bottom:12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.assign-popover-days{
  display:flex;flex-wrap:wrap;gap:6px;
}
.assign-popover-day-btn{
  padding:5px 12px;border-radius:var(--radius-sm);
  background:var(--surface3);border:1px solid var(--border-light);
  color:var(--text);font-size:.78rem;font-weight:500;
  transition:all var(--transition);
}
.assign-popover-day-btn:hover:not(:disabled){
  background:var(--gold);border-color:var(--gold);color:var(--black);
}
.assign-popover-day-btn.assigned{
  opacity:.45;cursor:default;
}
html[data-theme="light"] .assign-popover{
  background:var(--surface);border-color:var(--border-light);
}
html[data-theme="light"] .assign-popover-day-btn{
  background:var(--surface2);border-color:var(--border-light);color:var(--text);
}

/* ── 2B: MOBILE TIME PICKER ── */
.time-picker-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-bottom:16px;
  max-height:260px;
  overflow-y:auto;
}
.time-picker-hour-btn{
  padding:8px 6px;border-radius:var(--radius-sm);
  background:var(--surface3);border:1px solid var(--border-light);
  color:var(--text);font-size:.78rem;font-weight:500;text-align:center;
  transition:all var(--transition);
}
.time-picker-hour-btn:hover,.time-picker-hour-btn:active{
  background:var(--gold);border-color:var(--gold);color:var(--black);
}
html[data-theme="light"] .time-picker-hour-btn{
  background:var(--surface2);border-color:var(--border-light);color:var(--text);
}

/* ── PRINT ── */
@media print{
  #app-header,#nav-bar,#view-tabs,#trip-pool,#loading,#toast,#modal-custom,#modal-save{display:none !important}
  #center-panel{overflow:visible}
  #export-view{display:block !important;overflow:visible}
  body{background:#fff;color:#000}
  .export-section{border:1px solid #ccc;background:#fff}
  .export-section h3{color:#8B6914}
}