/* Motorhome Planner v2.1 - UI Refinement
   Loaded after v2.css. Focus: tighter mobile layout, cleaner packing cards,
   slimmer navigation, softer departure treatment and improved empty states. */

/* Home: keep the lifestyle image, but give useful content more of the screen. */
body.v2-home-page{
  background:
    linear-gradient(180deg,rgba(255,247,238,.12) 0,rgba(255,247,238,.10) 145px,#f8f2eb 285px,#f8f2eb 100%),
    url('scene-home.jpg') center top/100% 290px no-repeat,
    #f8f2eb;
}
.v2-dashboard{padding-top:92px;gap:16px}
.v2-ready-card{padding:24px 27px;border-radius:25px}
.v2-next-trip{min-height:275px}

/* Slimmer persistent navigation. */
body.v2-shell{padding-bottom:96px}
.v2-bottom-nav{
  height:68px;
  width:min(820px,calc(100% - 28px));
  padding:6px;
  border-radius:25px;
}
.v2-bottom-nav a{border-radius:18px;gap:2px}
.v2-nav-icon{height:21px}
.v2-nav-icon svg{width:20px;height:20px}
.v2-bottom-nav small{font-size:9px}

/* Slightly more compact general page banners. */
.v2-page-banner{min-height:170px;padding:23px 25px;border-radius:24px}

/* Checklist refinement. */
.v2-check-main{gap:13px}
.v2-check-hero{min-height:238px;padding:23px 25px;border-radius:25px}
.v2-check-hero.departure{
  background:
    linear-gradient(90deg,rgba(224,76,5,.90),rgba(242,105,24,.60),rgba(71,31,10,.12)),
    url('scene-road.jpg') center/cover no-repeat;
}
.v2-check-hero-copy h1{font-size:clamp(39px,6.5vw,58px)}
.v2-check-hero-copy>p{font-size:16px;margin-bottom:13px}
.v2-list-toolbar{padding:9px 11px;border-radius:16px}
.v2-list-toolbar strong{font-size:12px}
.v2-list-toolbar small{font-size:9px}
.v2-list-toolbar .v2-outline-button{min-height:36px;padding:0 11px;font-size:10px;border-radius:12px}
.v2-check-list{gap:6px}
.v2-check-row{
  min-height:54px!important;
  padding:8px 11px!important;
  gap:8px!important;
  border-radius:14px!important;
  box-shadow:0 4px 12px rgba(76,54,34,.035)!important;
}
.v2-check-row .check-ui{width:24px!important;height:24px!important;border-radius:7px!important}
.v2-check-row .check-text strong{font-size:14px;line-height:1.2}
.v2-check-row .who{font-size:7.5px}
.v2-critical-star{width:24px;height:24px}
.v2-critical-star svg{width:12px;height:12px}
.v2-important{padding:4px 6px;font-size:6.5px;opacity:.78}
.v2-check-row .move-controls button{min-width:44px!important;padding:6px!important;font-size:9px!important}

/* Packing: force a compact, predictable layout even when older packing CSS is present. */
.v2-packing-page .v2-container{gap:11px}
.v2-packing-banner{min-height:155px}
.v2-pack-tabs{padding:5px;gap:5px;border-radius:17px}
.v2-pack-tabs a{min-height:42px;border-radius:12px}
.v2-action-row{padding:7px 9px;border-radius:16px}
.v2-action-row .v2-add-panel summary{padding:9px 11px!important}
.v2-packing-summary{padding:13px 16px;border-radius:18px}
.v2-pack-ring{width:66px;height:66px}
.v2-pack-ring strong{font-size:16px}
.v2-pack-table-head{
  grid-template-columns:minmax(180px,1.55fr) 82px 90px 72px 62px 22px;
  gap:7px;padding:0 10px;font-size:8px;
}
.v2-pack-list{gap:6px}
.v2-pack-row{
  min-height:62px!important;
  padding:8px 10px!important;
  grid-template-columns:minmax(180px,1.55fr) 82px 90px 72px 62px 22px!important;
  grid-template-rows:auto!important;
  grid-auto-flow:row!important;
  gap:7px!important;
  align-items:center!important;
  border-radius:14px!important;
  position:relative!important;
}
.v2-pack-row .simple-item-name{
  grid-column:auto!important;grid-row:auto!important;
  border:0!important;padding:0!important;margin:0!important;
  display:grid!important;gap:2px!important;align-self:center!important;
}
.v2-pack-row .simple-item-name strong{font-size:14px;line-height:1.15}
.v2-pack-row .simple-item-name small{font-size:7px}
.v2-pack-row .needed,
.v2-pack-row .onboard,
.v2-pack-row .packcheck,
.v2-pack-row .v2-to-pack{
  grid-column:auto!important;grid-row:auto!important;
  position:static!important;align-self:center!important;
  margin:0!important;padding:0!important;
}
.v2-pack-row .needed input,.v2-pack-row .onboard input{
  width:54px!important;height:37px!important;
  padding:3px!important;border-radius:10px!important;font-size:15px!important;
}
.v2-to-pack strong{width:49px;height:37px;border-radius:10px;font-size:15px}
.v2-pack-row .packcheck{
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:auto!important;min-width:0!important;
}
.v2-pack-row .packcheck input{width:21px!important;height:21px!important;margin:0!important}
.v2-pack-row .delete-item{
  grid-column:auto!important;grid-row:auto!important;
  position:static!important;inset:auto!important;
  width:20px!important;height:20px!important;
  min-width:20px!important;min-height:20px!important;
  margin:0!important;padding:0!important;
  align-self:center!important;justify-self:center!important;
  font-size:13px!important;opacity:.42!important;
  border-color:#e8ddd3!important;background:transparent!important;
}
.v2-pack-row .delete-item:hover,.v2-pack-row .delete-item:focus{opacity:1!important;background:#fff7f4!important}

/* Trip detail: turn an empty itinerary into an invitation rather than dead space. */
.v2-route-empty{
  min-height:140px;
  padding:22px!important;
  display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:14px;
  border:1px dashed #e8c7ad!important;
  background:linear-gradient(135deg,rgba(255,252,248,.94),rgba(255,244,234,.78))!important;
  text-align:left!important;
}
.v2-empty-route-icon{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#fff0e4;color:var(--v2-orange)}
.v2-empty-route-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8}
.v2-route-empty-copy{display:grid;gap:3px}
.v2-route-empty-copy strong{font-size:16px;color:var(--v2-ink)}
.v2-route-empty-copy small{font-size:10px;line-height:1.4;color:var(--v2-muted)}
.v2-empty-route-action{display:inline-flex;align-items:center;gap:6px;padding:9px 11px;border-radius:11px;background:var(--v2-orange);color:#fff;font-size:10px;font-weight:850;white-space:nowrap}
.v2-empty-route-action svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}

@media(max-width:760px){
  body.v2-shell{padding-bottom:84px}
  body.v2-home-page{
    background:
      linear-gradient(180deg,rgba(255,247,238,.10) 0,rgba(255,247,238,.08) 118px,#f8f2eb 225px,#f8f2eb 100%),
      url('scene-home.jpg') center top/auto 230px no-repeat,
      #f8f2eb;
  }
  .v2-dashboard{padding-top:64px;gap:11px}
  .v2-ready-card{padding:15px 16px;border-radius:20px}
  .v2-next-trip{min-height:195px}
  .v2-bottom-nav{height:60px;width:calc(100% - 16px);bottom:max(6px,env(safe-area-inset-bottom));padding:4px;border-radius:21px}
  .v2-bottom-nav a{border-radius:16px;gap:1px}.v2-nav-icon{height:19px}.v2-nav-icon svg{width:18px;height:18px}.v2-bottom-nav small{font-size:7.5px}
  .v2-page-banner{min-height:132px;padding:17px;border-radius:19px}.v2-page-banner h1{font-size:36px}.v2-page-banner p{font-size:10px}

  .v2-check-hero{min-height:185px;padding:16px;border-radius:20px}
  .v2-check-hero-copy h1{font-size:36px}.v2-check-hero-copy>p{font-size:13px;margin-bottom:9px}.v2-check-hero-copy>strong{font-size:9px;margin-bottom:8px}
  .v2-check-row{min-height:49px!important;padding:7px 9px!important;gap:7px!important;border-radius:13px!important}
  .v2-check-row .check-ui{width:22px!important;height:22px!important}.v2-check-row .check-text strong{font-size:12.5px}.v2-critical-star{width:22px;height:22px}.v2-important{font-size:6px;padding:3px 5px}

  .v2-packing-banner{min-height:126px}
  .v2-pack-tabs a{min-height:38px;font-size:8.5px}
  .v2-packing-summary{padding:10px 12px}.v2-pack-ring{width:56px;height:56px}.v2-pack-summary-copy>strong{font-size:13px}
  .v2-pack-row{
    min-height:86px!important;
    padding:8px 9px!important;
    grid-template-columns:repeat(4,minmax(0,1fr)) 20px!important;
    grid-template-rows:auto auto!important;
    grid-template-areas:
      "name name name name delete"
      "needed onboard topack packed delete"!important;
    column-gap:5px!important;row-gap:7px!important;
  }
  .v2-pack-row .simple-item-name{
    grid-area:name!important;
    display:flex!important;align-items:baseline!important;justify-content:space-between!important;gap:8px!important;
    border-bottom:1px solid #f1e8df!important;padding-bottom:6px!important;
  }
  .v2-pack-row .simple-item-name strong{font-size:13px}.v2-pack-row .simple-item-name small{max-width:42%;font-size:6.5px;text-align:right}
  .v2-pack-row .needed{grid-area:needed!important}.v2-pack-row .onboard{grid-area:onboard!important}.v2-pack-row .v2-to-pack{grid-area:topack!important}.v2-pack-row .packcheck{grid-area:packed!important}.v2-pack-row .delete-item{grid-area:delete!important;align-self:start!important;margin-top:1px!important}
  .v2-pack-row .needed span,.v2-pack-row .onboard span,.v2-pack-row .packcheck span,.v2-to-pack span{display:block!important;font-size:6.5px!important;line-height:1.1;text-align:center;white-space:normal}
  .v2-pack-row .needed input,.v2-pack-row .onboard input{width:45px!important;height:34px!important;font-size:14px!important}
  .v2-to-pack strong{width:43px;height:34px;font-size:14px}.v2-pack-row .packcheck input{width:20px!important;height:20px!important}
  .v2-pack-row.ordering-row{min-height:55px!important;grid-template-columns:1fr auto!important;grid-template-rows:auto!important;grid-template-areas:none!important}.v2-pack-row.ordering-row .simple-item-name{grid-area:auto!important;border:0!important;padding:0!important}

  .v2-route-empty{min-height:126px;grid-template-columns:40px 1fr;padding:16px!important;gap:10px}.v2-empty-route-icon{width:40px;height:40px}.v2-empty-route-action{grid-column:1/-1;justify-self:start;margin-left:50px}
}

@media(max-width:430px){
  .v2-dashboard{padding-top:55px}
  .v2-next-trip{min-height:185px}
  .v2-important{display:none}
  .v2-check-row .who{font-size:7px}
  .v2-pack-row{grid-template-columns:repeat(4,minmax(0,1fr)) 18px!important;column-gap:3px!important}
  .v2-pack-row .needed input,.v2-pack-row .onboard input{width:42px!important}.v2-to-pack strong{width:40px}.v2-pack-row .delete-item{width:18px!important;height:18px!important;min-width:18px!important;min-height:18px!important;font-size:12px!important}
}