/* MatchWork App Shell (v2026)
   Objective: remove “boxed” demo feel and make the app feel full-width like Airbnb.
   Applies to internal app views (non-authMode).
*/

/* ---------- Global frame (non-auth pages) ---------- */
body:not(.authMode){
  padding: 14px 18px !important;
}

body:not(.authMode) .wrap{
  max-width: none !important;
  margin: 0 !important;
}

/* Keep auth screens centered (login/register/etc) */
body.authMode .wrap{
  max-width: 980px;
  margin: 0 auto;
}

/* Topbar should feel premium and full width */
body:not(.authMode) .topbar{
  top: 12px;
  margin-bottom: 18px;
  border-radius: 22px;
  padding: 12px 14px;
}

/* ---------- Shell building blocks ---------- */
.card,
.card.soft,
.mwListingCard,
.adsCard{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

@media (hover:hover){
  .card:hover,
  .card.soft:hover,
  .mwListingCard:hover,
  .adsCard:hover{
    transform: translateY(-2px);
  }
}

.pageShell{
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}

/* Subpages inside dashboards: give more space to content (router toggles .subpage) */
.pageShell.subpage{
  grid-template-columns: minmax(0, 1fr) 320px;
}
.pageShell.subpage .appSidebar{ display:none; }

/* Used for worker dashboard while we keep the existing dashShell structure */
.dashShell{
  display: grid !important;

  /*
    IMPORTANT:
    Fix huge whitespace on Worker Home where the main content (dashMain)
    dropped to the next row (below the right rail) depending on DOM order.
    We lock layout with explicit grid areas.
  */
  grid-template-columns: 260px minmax(0, 1fr) 320px;
  grid-template-areas: "menu main rail";
  gap: 18px !important;
  align-items: start !important;
}

/* Router already toggles .subpage on .dashShell (mw-ui hides sideMenu). Keep the right panel. */
.dashShell.subpage{
  grid-template-columns: minmax(0, 1fr) 320px !important;
  grid-template-areas: "main rail";
}

.appSidebar,
.sideMenu{
  position: sticky;
  top: 92px;
  height: fit-content;
}

.appMain,
.dashMain{
  min-width: 0;
}

/* Explicit placement so DOM order can vary safely */
.pageShell > .appSidebar{ grid-column: 1; }
.pageShell > .appMain{ grid-column: 2; }
.pageShell > .appRight{ grid-column: 3; }
.pageShell.subpage > .appMain{ grid-column: 1; }
.pageShell.subpage > .appRight{ grid-column: 2; }

.dashShell > .sideMenu{ grid-area: menu !important; }
.dashShell > .dashMain{ grid-area: main !important; }
.dashShell > .appRight{ grid-area: rail !important; }
.dashShell.subpage > .dashMain{ grid-column: 1; }
.dashShell.subpage > .appRight{ grid-column: 2; }

.appRight{
  position: sticky;
  top: 92px;
  height: fit-content;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pageSurface{
  /* replaces the old mega-card wrapper */
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.appContent{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* New dashboard layout used by the unified shell (main + right rail). */
.mwLayout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: start;
}

/* Force correct column placement regardless of legacy .dashMain grid rules */
.mwLayout > .dashMain{ grid-column: 1 !important; }
.mwLayout > .mwRail{ grid-column: 2 !important; }

.mwRail{
  position: sticky;
  top: 92px;
  height: fit-content;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Subpages: give full width to content */
.dashShell.subpage .mwLayout{
  grid-template-columns: minmax(0, 1fr);
}

.dashShell.subpage .mwLayout > .mwRail{ display: none; }

@media (max-width: 1024px){
  .mwLayout{ grid-template-columns: 1fr; }
  .mwRail{ position: static; }
}

.sidebarHeader{
  margin-bottom: 12px;
}

.sidebarNav{ display:flex; flex-direction:column; }

.pageHeader{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.pageTitle{
  margin: 0;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.6px;
  font-weight: 950;
}

.pageSub{
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.pageActions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.rightCard{ padding: 16px !important; }

.userRow{ display:flex; gap:12px; align-items:center; }
.userText{ min-width:0; }

.rightPills{ display:flex; gap:8px; flex-wrap:wrap; }

.rightList{ margin: 0; padding-left: 18px; }
.rightList li{ margin: 8px 0; color: var(--text); opacity: .88; }

.rightActions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- Sidebar look (less “green demo”, more premium) ---------- */
.menuBtn{
  background: color-mix(in srgb, rgba(0,0,0,.18) 70%, transparent) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

.menuBtn.active{
  background: color-mix(in srgb, var(--primary) 18%, rgba(0,0,0,.18)) !important;
  border-color: color-mix(in srgb, var(--primary) 45%, rgba(255,255,255,.10)) !important;
  color: rgba(255,255,255,.95) !important;
}

/* ---------- Worker Home (2026 control center) ---------- */
.workerHome{ display:flex; flex-direction:column; gap:16px; }

.whHeader{
  /* Make it feel like Airbnb: open, not boxed */
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.whHeaderTop{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.whKicker{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color: var(--muted); font-weight: 850; }
.whHeadline{ margin-top:6px; font-size:18px; font-weight: 950; letter-spacing:-.2px; color: var(--text); }

.whHeader::after{
  content:"";
  display:block;
  height:1px;
  margin-top:14px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}

.whModeSwitch{
  display:flex; gap:8px; padding:6px; border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 86%, transparent);
}

/* Reuse existing segmented button class names from calendar, but give a home variant */
.whModeSwitch .segBtn{
  border-radius: 999px;
  padding: 10px 14px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-weight: 800;
}

.whModeSwitch .segBtn.isActive,
.whModeSwitch .segBtn[aria-selected="true"]{
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
}

.whKpis{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px; margin-top:12px; }
.kpiCard{ background: color-mix(in srgb, var(--card) 92%, transparent); border:1px solid var(--border); border-radius: 18px; padding: 12px; }
.kpiLabel{ color: var(--muted); font-size: 12px; font-weight: 700; }
.kpiValue{ font-size: 20px; font-weight: 950; letter-spacing:-.3px; margin-top:6px; }

.whGrid{ gap: 16px !important; }

.whFeed{ padding: 16px !important; }
.whFeedTop{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom: 12px; }

.whFilters{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.mwChips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 92%, transparent);
  color: var(--text);
  padding: 8px 12px;
  font-weight: 800;
  font-size: 13px;
}
.chip .chipCount{
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
  display:flex; align-items:center; justify-content:center;
  font-size: 12px;
}
.chip.isActive{ background: color-mix(in srgb, var(--primary) 14%, transparent); border-color: color-mix(in srgb, var(--primary) 42%, var(--border)); }

/* Job cards: higher signal, less "demo" */
.whJobCard{ position:relative; }
.whJobDetails{
  opacity: .92;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}

.whStatusPill{
  font-weight: 900;
  letter-spacing: .02em;
}

.whStatusPill.isNew{
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
}

.whStatusPill.isActive{
  background: color-mix(in srgb, rgba(0,0,0,.06) 55%, transparent);
  border-color: var(--border);
}

.whStatusPill.isExpired{
  background: color-mix(in srgb, rgba(255, 99, 71, .16) 70%, transparent);
  border-color: color-mix(in srgb, rgba(255, 99, 71, .35) 70%, var(--border));
}

.whExpiresPill{ opacity: .92; }
.whBudgetPill{ font-weight: 950; }

.whDirectPill{
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--primary) 38%, var(--border));
  font-weight: 950;
 }

/* Right rail: remove duplicated navigation vibe */
.rightNext .mwSectionTitle{ margin-bottom: 6px; }
.rightNext .rightActions .btn{ flex: 1 1 auto; }

/* Reputation: premium density */
.whRatingTop{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.whRatingScore{ display:flex; align-items:baseline; gap:8px; }
.whScoreNum{ font-weight: 950; font-size: 16px; letter-spacing: -.2px; }
.whRatingRow{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin: 8px 0; }
.whVerifiedPill{ opacity:.92; }

/* Right rail: smaller + more premium */
.rightNext .mwSectionTitle{ margin-bottom: 6px; }
.rightNext .rightActions{ margin-top: 10px; }

/* Worker job cards (inbox) */
.whJobCard{ border-radius: 22px !important; }
.whJobDetails{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.whStatusPill{
  font-weight: 950 !important;
  border-radius: 999px;
  padding: 8px 10px;
}
.whStatusPill.isNew{ background: color-mix(in srgb, var(--primary) 18%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--border)); }
.whStatusPill.isActive{ background: color-mix(in srgb, rgba(0,0,0,.10) 70%, transparent); border: 1px solid var(--border); }
.whStatusPill.isExpired{ background: color-mix(in srgb, rgba(220,38,38,.18) 75%, transparent); border: 1px solid color-mix(in srgb, rgba(220,38,38,.45) 60%, var(--border)); }

.whExpiresPill{ background: color-mix(in srgb, rgba(0,0,0,.08) 70%, transparent); border: 1px solid var(--border); font-weight: 850; }
.whBudgetPill{ font-weight: 950 !important; }

/* Rating card */
.whRating{ border-radius: 22px !important; }
.whRatingTop{ display:flex; align-items:center; justify-content:space-between; gap: 10px; }
.whRatingScore{ display:flex; align-items:center; gap: 8px; }
.whScoreNum{ font-weight: 950; font-size: 18px; letter-spacing:-.2px; }
.whRatingRow{ display:flex; align-items:center; justify-content:space-between; gap: 12px; margin: 8px 0; }
.whVerifiedPill{ background: color-mix(in srgb, var(--primary) 12%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border)); font-weight: 850; }

.whNext{ padding: 16px !important; }
.whNextRow{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.whTodo{ margin-top:12px; display:flex; flex-direction:column; gap:10px; }
.todoItem{ display:flex; align-items:center; gap:10px; font-weight: 700; }
.todoDot{ width:10px; height:10px; border-radius:999px; background: color-mix(in srgb, var(--primary) 55%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent); }

.whProfilePeek{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom: 10px; }
.whPeekCard{ border: 1px solid var(--border); border-radius: 18px; padding: 12px; background: color-mix(in srgb, var(--card) 94%, transparent); }
.whPeekRow{ display:flex; gap:10px; align-items:center; }
.whPeekText{ min-width:0; }
.whPeekMeta{ display:flex; gap:8px; flex-wrap:wrap; }
.whPeekRow2{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top: 10px; flex-wrap:wrap; }
.whThumbs{ display:grid; grid-template-columns: repeat(4, 1fr); gap:8px; margin-top: 10px; }
.whThumb{ aspect-ratio: 1 / 1; border-radius: 12px; border: 1px dashed var(--border); background: color-mix(in srgb, rgba(0,0,0,.06) 80%, transparent); }

.whMoney{ display:flex; gap:12px; margin-top: 8px; }
.whMoneyItem{ flex:1; border: 1px solid var(--border); border-radius: 16px; padding: 10px 12px; background: color-mix(in srgb, var(--card) 94%, transparent); display:flex; align-items:center; justify-content:space-between; }

@media (max-width: 1024px){
  .whKpis{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ---------- Toast / messages (remove giant green bar) ---------- */
.message{
  position: fixed;
  top: 92px;
  right: 18px;
  width: min(420px, calc(100vw - 36px));
  margin: 0;
  z-index: 9999;
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
}

.message.show{ display:flex; align-items:flex-start; gap:10px; }

#successMessage::before{
  content: "✅";
  margin-top: 1px;
}

#errorMessage::before{
  content: "⚠️";
  margin-top: 1px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px){
  .pageShell,
  .dashShell{
    grid-template-columns: 240px minmax(0, 1fr);
  }
  .appRight{ display:none; }
}

@media (max-width: 820px){
  body:not(.authMode){ padding: 14px 12px !important; }

  .pageShell,
  .dashShell{
    grid-template-columns: 1fr;
  }
  .appSidebar,
  .sideMenu{
    position: relative;
    top: 0;
  }
  .pageTitle{ font-size: 28px; }
}


/* ------------------------------
   2026 Shell upgrades: Airbnb-like navigation
--------------------------------*/

/* Hide legacy left menus (we use top tabs + mobile bottom nav)
   NOTE: we DON'T want the hidden left column to push the main content down.
   So we keep a 3-column grid but make the first column width 0.
*/
.appSidebar, .sideMenu{
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* Layout: (0px left) + main + optional right rail */
.pageShell{ grid-template-columns: 0 minmax(0, 1fr) 340px; }
.dashShell{ grid-template-columns: 0 minmax(0, 1fr) 340px; }

/* Anchor children to the intended columns */
.pageShell > .appSidebar{ grid-column: 1 !important; }
.pageShell > .appMain{ grid-column: 2 !important; }
.pageShell > .appRight{ grid-column: 3 !important; }
.dashShell > .sideMenu{ grid-column: 1 !important; }
.dashShell > .dashMain{ grid-column: 2 !important; }
.dashShell > .appRight{ grid-column: 3 !important; }

/* Right rail stays for home; subpages go full-width */
.pageShell.subpage, .dashShell.subpage{ grid-template-columns: minmax(0,1fr) !important; }
.pageShell.subpage > .appMain{ grid-column: 1 !important; }
.dashShell.subpage > .dashMain{ grid-column: 1 !important; }
.pageShell.subpage .appRight, .dashShell.subpage .appRight{ display:none !important; }

/* Tabs under topbar (desktop) — closer to Airbnb: text + underline */
.mwSubnav{ display:flex; gap:18px; padding:0 2px; margin:8px 0 14px; flex-wrap:wrap; }
.mwTab{ display:inline-flex; align-items:center; gap:8px; padding:10px 0; border-radius:0; border:0; background:transparent; font-weight:900; cursor:pointer; opacity:.78; border-bottom:2px solid transparent; transition: opacity .15s ease, border-color .15s ease; }
.mwTab:hover{ opacity:.95; }
.mwTab.active{ opacity:1; border-bottom-color: rgba(29,78,216,.85); }
body.dark .mwTab.active{ border-bottom-color: rgba(47,124,255,.85); }

/* Hide big header actions — now live in profile sheet */
.pageHeader .pageActions{ display:none !important; }

/* Mobile bottom nav */
.mwBottomNav{ display:none; }
@media (max-width: 820px){
  .mwSubnav{ display:none; }
  .mwBottomNav{ position:fixed; left:0; right:0; bottom:0; display:flex; justify-content:space-around; gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.92); border-top:1px solid rgba(0,0,0,.08); backdrop-filter: blur(12px); z-index:9998; }
  body.dark .mwBottomNav{ background:rgba(15,20,25,.90); border-top-color:rgba(255,255,255,.08); }
  .mwBottomItem{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:8px 6px; border-radius:16px; border:1px solid transparent; background:transparent; font-weight:800; font-size:12px; cursor:pointer; }
  .mwBottomIcon{ font-size:18px; line-height:1; }
  .mwBottomItem.active{ background:rgba(29,78,216,.10); border-color:rgba(29,78,216,.28); }
  body.dark .mwBottomItem.active{ background:rgba(47,124,255,.18); border-color:rgba(47,124,255,.32); }
  /* make room for bottom nav */
  body:not(.authMode){ padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  /* reduce header weight on mobile */
  .pageTitle{ font-size:28px; }
}

/* Profile sheet */
.mwOverlay{ position:fixed; inset:0; background:rgba(0,0,0,.35); display:none; align-items:flex-end; justify-content:center; padding:12px; z-index:9999; }
.mwOverlay.open{ display:flex; }
.mwSheet{ width:min(520px,100%); border-radius:24px; overflow:hidden; border:1px solid rgba(0,0,0,.10); background:rgba(255,255,255,.98); box-shadow:0 18px 60px rgba(0,0,0,.22); }
body.dark .mwSheet{ background:rgba(15,20,25,.98); border-color:rgba(255,255,255,.10); box-shadow:0 22px 70px rgba(0,0,0,.55); }
.mwSheetHeader{ display:flex; align-items:flex-start; justify-content:space-between; padding:14px 14px 12px; border-bottom:1px solid rgba(0,0,0,.08); }
body.dark .mwSheetHeader{ border-bottom-color:rgba(255,255,255,.10); }
.mwSheetTitle{ font-weight:900; font-size:16px; }
.mwSheetSub{ opacity:.75; margin-top:2px; font-size:13px; }
.mwSheetBody{ padding:12px 14px 14px; }
.mwSheetSection{ display:flex; gap:10px; }
.mwSheetSection .btn{ flex:1; }


body.mwNavHidden #mwSubnav,
body.mwNavHidden #mwBottomNav{ display:none !important; }
body.mwNavHidden #profileBtn{ display:none !important; }


/* ---- Worker right-rail tabs (2026) ---- */
.whTabs{ display:flex; gap:6px; align-items:center; }
.whTabBtn{
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 92%, transparent);
  padding: 8px 10px;
  font-weight: 900;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
}
.whTabBtn.isActive{ background: color-mix(in srgb, var(--primary) 14%, transparent); border-color: color-mix(in srgb, var(--primary) 42%, var(--border)); }
.whTabPane{ display:none; margin-top: 10px; }
.whTabPane.isActive{ display:block; }

.whRailCard .whPeekCard{ margin-top: 10px; }
.whRailCard .whThumbs{ margin-top: 10px; }

/* Make Worker Home use rail (avoid super long page) */
.mwMenuGrid.whGrid{ grid-template-columns: 1fr !important; }


/* Worker dashboard polish */
#workerDashboardView .pageSurface{
  padding-top: 16px;
}
#workerDashboardView .dashShell > .appRight{
  position: sticky;
  top: 96px;
  align-self: start;
  height: fit-content;
}