/* The Boys Trip Guide — luxury dashboard system.
   Visual-only. Extends the approved Home language across Plan, Expense, Crew and Evidence.
   Evidence/media geometry and application behaviour are intentionally untouched. */

.screen:has(.dashboard){
  --lux-gold:#d6a84e;
  --lux-gold-bright:#f1c96f;
  --lux-ivory:#f5efe4;
  --lux-muted:#b8b0a5;
  --lux-line:rgba(214,168,78,.34);
  --lux-line-soft:rgba(214,168,78,.16);
  --lux-card:#121415;
  --lux-card-deep:#0b0d0e;
  background:
    radial-gradient(circle at 18% -8%,rgba(214,168,78,.055),transparent 26rem),
    linear-gradient(180deg,#070809,#090a0b 56%,#050607);
}

/* Inner-page header: retain trip context and menu, remove repeated masthead. */
.screen:has(.dashboard):not(:has(#secret-hero)) .appbar{
  position:sticky;
  top:0;
  z-index:20;
  min-height:54px;
  padding:7px 18px;
  border-bottom:1px solid rgba(214,168,78,.14);
  background:rgba(7,8,9,.96);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
}
.screen:has(.dashboard):not(:has(#secret-hero)) .appbar-inner{
  max-width:1260px;
  min-height:40px;
  gap:12px;
}
.screen:has(.dashboard):not(:has(#secret-hero)) .brand-lockup{display:none}
.screen:has(.dashboard):not(:has(#secret-hero)) .trip-title{
  margin:0 auto 0 0;
  min-width:0;
  display:flex;
  align-items:baseline;
  gap:9px;
  text-align:left;
}
.screen:has(.dashboard):not(:has(#secret-hero)) .trip-title strong{
  color:var(--lux-ivory);
  font-size:14px;
  font-weight:800;
  letter-spacing:.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:260px;
}
.screen:has(.dashboard):not(:has(#secret-hero)) .trip-title span{
  color:var(--lux-gold);
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:230px;
}
.screen:has(.dashboard):not(:has(#secret-hero)) .trip-title span:before{content:"· ";color:#756b5b}
.screen:has(.dashboard):not(:has(#secret-hero)) .icon-btn{
  width:40px;
  height:40px;
  flex:0 0 40px;
  border-radius:13px;
  border-color:rgba(214,168,78,.20);
  background:linear-gradient(180deg,#151718,#0c0e0f);
  color:#eee6d9;
}
.screen:has(.dashboard):not(:has(#secret-hero)) .dashboard{
  max-width:1260px;
  padding-top:12px;
}

/* Functional page headings */
.screen:has(.dashboard) #tab-content .section-head{
  margin:18px 2px 13px;
  align-items:flex-end;
}
.screen:has(.dashboard):not(:has(#secret-hero)) #tab-content .section-head:first-child{margin-top:4px}
.screen:has(.dashboard) #tab-content .section-head h2{
  margin:0;
  color:var(--lux-ivory);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:30px;
  font-weight:850;
  line-height:1.02;
  letter-spacing:-.035em;
  text-transform:uppercase;
}
.screen:has(.dashboard) #tab-content .section-head h2 span{color:var(--lux-gold-bright)}
.screen:has(.dashboard) #tab-content .section-head p{
  max-width:650px;
  margin-top:7px;
  color:#aaa197;
  font-size:13px;
  line-height:1.45;
}
.screen:has(.dashboard) #tab-content .section-head .actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}

/* Buttons: same controls, more deliberate presentation. */
.screen:has(.dashboard) #tab-content .primary,
.screen:has(.dashboard) #tab-content .secondary,
.screen:has(.dashboard) #tab-content .ghost,
.screen:has(.dashboard) #tab-content .section-head button{
  min-height:44px;
  border-radius:12px;
}
.screen:has(.dashboard) #tab-content .primary{
  border-color:#e8be65;
  background:linear-gradient(180deg,#f1cb78,#d8a64d);
  color:#17120b;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 8px 24px rgba(0,0,0,.16);
}
.screen:has(.dashboard) #tab-content .ghost,
.screen:has(.dashboard) #tab-content .secondary,
.screen:has(.dashboard) #tab-content .section-head button:not(.primary){
  border-color:rgba(214,168,78,.26);
  background:linear-gradient(180deg,#151718,#0d0f10);
  color:#e9e0d3;
}

/* Reusable premium panels */
.screen:has(.dashboard) #tab-content .card,
.screen:has(.dashboard) #tab-content .list-row,
.screen:has(.dashboard) #tab-content .plan-total,
.screen:has(.dashboard) #tab-content .damage-card,
.screen:has(.dashboard) #tab-content .balance,
.screen:has(.dashboard) #tab-content .paywall,
.screen:has(.dashboard) #tab-content .empty{
  border-color:var(--lux-line-soft);
  background:
    radial-gradient(circle at 10% 4%,rgba(214,168,78,.045),transparent 8rem),
    linear-gradient(145deg,#151718,#0c0e0f 80%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 10px 30px rgba(0,0,0,.15);
}
.screen:has(.dashboard) #tab-content .card{border-radius:18px}
.screen:has(.dashboard) #tab-content .card .kicker,
.screen:has(.dashboard) #tab-content .eyebrow{
  color:var(--lux-gold-bright);
  letter-spacing:.19em;
}
.screen:has(.dashboard) #tab-content .card h3,
.screen:has(.dashboard) #tab-content .list-row b{color:var(--lux-ivory)}
.screen:has(.dashboard) #tab-content .card p,
.screen:has(.dashboard) #tab-content .list-row small{color:#aaa197}
.screen:has(.dashboard) #tab-content .card-footer{border-top-color:rgba(214,168,78,.12)}

/* Plan / damage overview */
.screen:has(.dashboard) #tab-content .combined-plan-damage{display:grid;gap:26px}
.screen:has(.dashboard) #tab-content .plan-totals{gap:10px}
.screen:has(.dashboard) #tab-content .plan-total{
  min-height:100px;
  padding:18px;
  border-radius:16px;
}
.screen:has(.dashboard) #tab-content .plan-total span{
  color:#b9b0a3;
  letter-spacing:.13em;
}
.screen:has(.dashboard) #tab-content .plan-total b{
  color:var(--lux-gold-bright);
  font-family:Georgia,"Times New Roman",serif;
  font-size:26px;
  font-weight:400;
}
.screen:has(.dashboard) #tab-content .plan-grand{
  padding:15px 18px;
  border-color:var(--lux-line);
  border-radius:15px;
  background:linear-gradient(90deg,#15120d,#101213);
}
.screen:has(.dashboard) #tab-content .plan-grand b{color:var(--lux-gold-bright)}
.screen:has(.dashboard) #tab-content .booking-cost,
.screen:has(.dashboard) #tab-content .expense-amount{color:var(--lux-gold-bright)}
.screen:has(.dashboard) #tab-content .damage-card{
  padding:22px;
  border-radius:20px;
  border-color:var(--lux-line);
}
.screen:has(.dashboard) #tab-content .damage-card .amount{
  color:var(--lux-gold-bright);
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
}
.screen:has(.dashboard) #tab-content .balance{border-radius:14px}

/* Crew / message surfaces */
.screen:has(.dashboard) #tab-content .list{gap:10px}
.screen:has(.dashboard) #tab-content .list-row{
  min-height:68px;
  padding:14px 15px;
  border-radius:16px;
}
.screen:has(.dashboard) #tab-content .list-row .avatar{
  width:42px;
  height:42px;
  border:1px solid rgba(214,168,78,.30);
  background:radial-gradient(circle at 50% 24%,rgba(214,168,78,.12),#111314 67%);
  color:var(--lux-gold-bright);
}
.screen:has(.dashboard) #tab-content .crew-broadcast,
.screen:has(.dashboard) #tab-content .crew-message-log{
  border-color:var(--lux-line-soft);
}

/* Evidence: improve shell only; preserve the approved grid/viewer geometry. */
.screen:has(.dashboard) #tab-content .evidence-toolbar,
.screen:has(.dashboard) #tab-content .gallery-actions{
  border-color:var(--lux-line-soft);
}
.screen:has(.dashboard) #tab-content .chip{
  border-color:rgba(214,168,78,.18);
  background:#0c0e0f;
  color:#c8beb1;
}
.screen:has(.dashboard) #tab-content .chip.gold{
  border-color:rgba(214,168,78,.38);
  color:var(--lux-gold-bright);
}

/* Dock uses one visual language across every section. Geometry stays with existing/PWA rules. */
.screen:has(.dashboard) .bottom-dock{
  border-color:rgba(214,168,78,.34);
  background:rgba(10,12,13,.97);
  box-shadow:0 18px 50px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.035);
}
.screen:has(.dashboard) .dock-item{color:#9f988f}
.screen:has(.dashboard) .dock-item.active{color:var(--lux-gold-bright)}
.screen:has(.dashboard) .dock-item.active:after{
  background:var(--lux-gold-bright);
  box-shadow:0 0 10px rgba(241,201,111,.30);
}
.screen:has(.dashboard) .dock-primary{
  color:var(--lux-gold-bright);
  border-color:rgba(214,168,78,.20);
  background:rgba(214,168,78,.075);
}
.screen:has(.dashboard) .bottom-note{
  color:#716a62;
  letter-spacing:.10em;
  text-transform:uppercase;
}

@media(max-width:700px){
  /* The compact inner bar is intentionally much smaller than Home masthead. */
  .screen:has(.dashboard):not(:has(#secret-hero)) .appbar{
    min-height:48px;
    padding:5px 12px;
  }
  .screen:has(.dashboard):not(:has(#secret-hero)) .appbar-inner{min-height:38px}
  .screen:has(.dashboard):not(:has(#secret-hero)) .trip-title{gap:6px}
  .screen:has(.dashboard):not(:has(#secret-hero)) .trip-title strong{
    max-width:150px;
    font-size:12px;
  }
  .screen:has(.dashboard):not(:has(#secret-hero)) .trip-title span{
    max-width:120px;
    font-size:8px;
    letter-spacing:.11em;
  }
  .screen:has(.dashboard):not(:has(#secret-hero)) .icon-btn{
    width:38px;
    height:38px;
    flex-basis:38px;
    border-radius:12px;
  }
  .screen:has(.dashboard):not(:has(#secret-hero)) .dashboard{
    padding:9px 12px 126px;
  }

  .screen:has(.dashboard) #tab-content .section-head{
    margin:13px 2px 10px;
    align-items:flex-start;
  }
  .screen:has(.dashboard):not(:has(#secret-hero)) #tab-content .section-head:first-child{margin-top:3px}
  .screen:has(.dashboard) #tab-content .section-head h2{font-size:27px}
  .screen:has(.dashboard) #tab-content .section-head p{font-size:12px;margin-top:5px}
  .screen:has(.dashboard) #tab-content .section-head .actions{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    margin-top:9px;
  }
  .screen:has(.dashboard) #tab-content .section-head .actions>*{width:100%}

  .screen:has(.dashboard) #tab-content .plan-totals{grid-template-columns:1fr 1fr;gap:8px}
  .screen:has(.dashboard) #tab-content .plan-total{min-height:94px;padding:14px}
  .screen:has(.dashboard) #tab-content .plan-total b{font-size:23px}
  .screen:has(.dashboard) #tab-content .card-grid{grid-template-columns:1fr;gap:9px}
  .screen:has(.dashboard) #tab-content .card{padding:15px;border-radius:16px}
  .screen:has(.dashboard) #tab-content .damage-card{padding:17px}
  .screen:has(.dashboard) #tab-content .damage-card .amount{font-size:43px}
  .screen:has(.dashboard) #tab-content .balance-grid{grid-template-columns:1fr 1fr;gap:8px}
  .screen:has(.dashboard) #tab-content .list-row{min-height:64px;padding:12px 13px}

  .screen:has(.dashboard) .bottom-note{display:none}
}

@media(max-width:390px){
  .screen:has(.dashboard):not(:has(#secret-hero)) .trip-title span{display:none}
  .screen:has(.dashboard) #tab-content .section-head .actions{grid-template-columns:1fr}
}