/* mendli-custom.css — loaded LAST, after customer-dashboard.css, so these overrides win.
   Nicci-directed tweaks that intentionally sit on top of the locked customer designs.
   NOTE: customer-dashboard.css scopes its hero rules with the #view-dashboard ID, so we
   include #view-dashboard here too to match specificity (and we load later, so we win). */

/* v70.63 — customer dashboard MOBILE hero:
   - backdrop = the login/front-page photo (m72-hero-wide.jpg)
   - "Welcome back, Nicci" + copy sit ON TOP of that photo, softer heading
   - advertising panes moved BELOW the hero
   - the middle chalkboard image (dashboard-community-script.png) removed on mobile */
@media(max-width:760px){
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v64-welcome{
    display:flex!important;flex-direction:column!important;
    background:#0b2a47!important;padding:0 0 6px!important;gap:12px!important;row-gap:12px!important;overflow:visible!important;
    height:auto!important;max-height:none!important;
  }
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v6673-welcome-copy{
    order:0!important;position:relative!important;
    background:linear-gradient(180deg,rgba(6,26,45,.35) 0%,rgba(6,26,45,.72) 62%,rgba(6,26,45,.9) 100%),url('assets/m72-hero-wide.jpg') 42% center/cover no-repeat!important;
    padding:26px 18px 30px!important;margin:0!important;border-radius:0 0 16px 16px!important;
  }
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v6673-welcome-copy h2{
    font-weight:500!important;font-size:30px!important;letter-spacing:.2px!important;line-height:1.14!important;
  }
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v6673-welcome-copy h2 span,
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v6673-welcome-copy #v64WelcomeName{font-weight:600!important;}
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v6673-hero-actions{order:1!important;}
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v6722-dashboard-story{
    order:2!important;display:flex!important;flex-direction:column!important;gap:10px!important;
    padding:0 12px 4px!important;background:transparent!important;grid-template-columns:none!important;
    min-height:0!important;height:auto!important;max-height:none!important;overflow:visible!important;
  }
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v6722-dashboard-story .v6722-story-photo{
    min-height:94px!important;position:relative!important;
    background:#0e3350!important;border:1px solid rgba(209,173,139,.22)!important;border-radius:12px!important;overflow:hidden!important;
  }
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v6722-dashboard-story .v6722-story-script{display:none!important;}
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v64-progress{order:3!important;}
}

/* v70.63 — customer mobile menu: make Log Out a clear, full-width button at the bottom
   (it was a tiny pill lost among the other menu items and easy to miss) */
body.customer-shell .v6673-mobile-menu-list button:last-child{
  flex:0 0 100%!important;width:100%!important;margin-top:10px!important;
  background:#082d49!important;color:#fff!important;border:1px solid #082d49!important;
  border-radius:12px!important;font-weight:800!important;padding:13px 16px!important;text-align:center!important;
}

/* v70.63 — hide the mobile bottom bar on the sign-up / account view (all auth screens) */
body[data-v64-view="account"] .v6673-mobile-bottom,
body[data-v64-view="account"] .m6747-home-bottom{display:none!important;}

/* v70.64 — customer dashboard: "Welcome back, Nicci" + the line under it in a cursive
   (script) font, matching the Mendli logo feel — less formal than the bold sans. */
body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v6673-welcome-copy h2,
body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v6673-welcome-copy h2 span,
body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v6673-welcome-copy #v64WelcomeName,
body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v6673-welcome-copy p,
body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v6673-welcome-copy .v6673-scriptline{
  font-family:'Dancing Script', cursive!important;
}
body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v6673-welcome-copy h2,
body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v6673-welcome-copy #v64WelcomeName{
  font-weight:700!important;font-size:42px!important;line-height:1.04!important;letter-spacing:0!important;
}
body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v6673-welcome-copy p,
body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v6673-welcome-copy .v6673-scriptline{
  font-weight:600!important;font-size:20px!important;line-height:1.15!important;
}

/* v70.65 — page-title headers (the underlined top-left titles across the site) in an
   elegant "Andalucia"-style calligraphy script (Great Vibes). NOT the headings in boxes. */
body[class][data-v64-view] .v6904-dashboard-page-head h1,
body[class][data-v64-view] .v6652-page-head h1,
body[class][data-v64-view] .v6704-page-title h1,
body[class][data-v64-view] .v6704-disputes-head h1,
body[class][data-v64-view] .v6710-title h1,
body[class][data-v64-view] .jc-title h1,
body[class][data-v64-view] .v7021-edit-title h1,
body[class][data-v64-view] .v6739-page-head h1,
body[class][data-v64-view] .v6706-jc-head h1,
.v6904-dashboard-page-head h1,.v6652-page-head h1,.v6704-page-title h1,
.v6704-disputes-head h1,.v6710-title h1,.jc-title h1,.v7021-edit-title h1,.v6706-jc-head h1{
  font-family:'Great Vibes', cursive !important;
  font-weight:400 !important;
  font-size:clamp(40px, 8.5vw, 58px) !important;
  line-height:1.12 !important;
  letter-spacing:.5px !important;
  -webkit-text-stroke:0.6px currentColor !important; /* Great Vibes has no bold weight — thicken the strokes a touch */
  padding-top:2px !important;
}
/* mobile: keep the script titles clear of the top blue bar */
@media(max-width:760px){
  body[class][data-v64-view] .v6904-dashboard-page-head h1,
  body[class][data-v64-view] .v6652-page-head h1,
  body[class][data-v64-view] .v6704-page-title h1,
  body[class][data-v64-view] .v6704-disputes-head h1,
  body[class][data-v64-view] .v6710-title h1,
  body[class][data-v64-view] .jc-title h1,
  body[class][data-v64-view] .v7021-edit-title h1,
  body[class][data-v64-view] .v6739-page-head h1,
  body[class][data-v64-view] .v6706-jc-head h1,
  .v6904-dashboard-page-head h1,.v6652-page-head h1,.v6704-page-title h1,
  .v6704-disputes-head h1,.v6710-title h1,.jc-title h1,.v7021-edit-title h1,.v6706-jc-head h1{
    margin-top:14px !important;
  }
}

/* v70.68 — Terms & legal links at the bottom of the mobile app views (worker + customer).
   Worker/admin: appended <footer class="v70x-legal-foot"> in v6710OpenRole (layout above unchanged).
   Customer: the existing dashboard footer (Terms/Privacy) is shown on mobile. */
.v70x-legal-foot{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 16px;
  padding:20px 16px;margin-top:16px;border-top:1px solid rgba(191,168,119,.4);text-align:center;
}
.v70x-legal-foot a{color:#0b3a5e;font-weight:700;font-size:13px;text-decoration:none}
.v70x-legal-foot a:hover{text-decoration:underline}
.v70x-legal-foot small{flex-basis:100%;color:#6b7280;font-size:11px;margin-top:2px}
@media(max-width:760px){
  .v70x-legal-foot{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
  body.customer-shell[data-v64-view="dashboard"] .v6692-dashboard-footer{
    display:block!important;text-align:center!important;background:#0b2a47!important;color:#cdd7e2!important;
    padding:20px 16px calc(90px + env(safe-area-inset-bottom))!important;margin-top:8px!important;
  }
  body.customer-shell[data-v64-view="dashboard"] .v6692-dashboard-footer img{height:40px!important;margin:0 auto 8px!important;display:block!important}
  body.customer-shell[data-v64-view="dashboard"] .v6692-dashboard-footer nav{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:10px 16px!important;margin:6px 0!important}
  body.customer-shell[data-v64-view="dashboard"] .v6692-dashboard-footer a{color:#e7dcc0!important;font-weight:700!important;font-size:13px!important}
  body.customer-shell[data-v64-view="dashboard"] .v6692-dashboard-footer .v6692-social{justify-content:center!important;margin:8px 0!important}
  body.customer-shell[data-v64-view="dashboard"] .v6692-dashboard-footer small{color:#9fb0c2!important;font-size:11px!important}
}

/* v70.69 — customer mobile dashboard: match the worker dashboard card style below the hero
   (boxed metric tiles + cream/champagne panels), keeping customer navy+champagne colours. */
@media(max-width:760px){
  /* metric tiles -> worker v7057-tile look: 2-up cream cards, boxed navy numbers */
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v64-summary-grid{
    display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:12px!important;margin:14px 12px 0!important;
  }
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v64-summary-grid article{
    display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:5px!important;
    background:#fffaf4!important;border:1px solid #efe2cf!important;border-radius:16px!important;padding:14px!important;box-shadow:none!important;
    min-height:104px!important;height:auto!important;justify-content:flex-start!important;
  }
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v64-summary-grid{grid-auto-rows:auto!important;}
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v64-summary-grid article>div{
    order:1!important;display:flex!important;align-items:center!important;gap:9px!important;margin:0!important;
  }
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v64-summary-grid .v64-round{
    background:transparent!important;color:#d1ad8b!important;font-size:16px!important;width:auto!important;height:auto!important;border:0!important;box-shadow:none!important;padding:0!important;
  }
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v64-summary-grid article b{
    background:#fff!important;border:2px solid #bfa877!important;border-radius:10px!important;padding:2px 12px!important;
    color:#082d49!important;font-size:24px!important;font-weight:800!important;line-height:1.2!important;
  }
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v64-summary-grid article h3{
    order:2!important;margin:2px 0 0!important;font-size:13px!important;color:#0f172a!important;font-weight:700!important;
  }
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v64-summary-grid article p{display:none!important;}
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v64-summary-grid article button{
    order:3!important;background:0!important;border:0!important;color:#d1ad8b!important;font-weight:700!important;font-size:12px!important;
    padding:0!important;margin-top:2px!important;text-align:left!important;
  }
  /* panels -> worker v7057-panel look: cream/champagne card, navy header, champagne link */
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v64-panel-grid{margin:14px 12px 0!important;gap:12px!important;}
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v64-panel{
    background:#fff!important;border:2px solid #bfa877!important;border-radius:16px!important;padding:16px 18px!important;box-shadow:none!important;
  }
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v64-panel>header h3{
    font-size:15px!important;font-weight:800!important;color:#082d49!important;
  }
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v64-panel>header button{
    color:#d1ad8b!important;font-weight:700!important;font-size:13px!important;background:0!important;border:0!important;
  }
}

/* v70.70 — customer mobile dashboard: match the worker's warm cream backdrop
   (worker content sits on #fffaf4; customer was pure white). */
@media(max-width:760px){
  body.customer-shell[data-v64-view="dashboard"],
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard{
    background:#e9dcbf!important;
  }
  /* give the "My Jobs" style panels a hair more warmth-separation on the cream bg */
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v64-panel{
    background:#ffffff!important;
  }
}

/* v70.71 — customer dashboard: the inner shell/main wrappers were white and covering the
   cream #view-dashboard. Warm them to match the worker. Plus: dashboard title fills the
   width and is bolder on mobile. */
@media(max-width:760px){
  body.customer-shell[data-v64-view="dashboard"] .v64-dashboard-shell,
  body.customer-shell[data-v64-view="dashboard"] .v64-dashboard-main{background:#e9dcbf!important;}
  body.customer-shell[data-v64-view="dashboard"] .v6904-dashboard-page-head h1{
    font-size:13vw!important;letter-spacing:0!important;line-height:1.08!important;
    -webkit-text-stroke:1px currentColor!important;
  }
}

/* v70.72 — customer dashboard action boxes: mirror the worker buttons exactly —
   primary (Post a job) = champagne .v7057-btn.gold; secondary = white ghost .v7057-btn.ghost. */
@media(max-width:760px){
  /* all three action buttons the same champagne (worker .v7057-btn.gold) */
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v6673-hero-actions button,
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v6673-hero-actions button#v6673PostJob,
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v6673-hero-actions button#v6673FindWorker,
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v6673-hero-actions button#v6692GetItDone{
    background:#d1ad8b!important;border:0!important;color:#0f172a!important;border-radius:11px!important;font-weight:800!important;box-shadow:none!important;
  }
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v6673-hero-actions button span,
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v6673-hero-actions button small{color:#0f172a!important;}
}

/* v70.78 — box around the "Customer Dashboard" title, border colour matching the navy writing */
@media(max-width:760px){
  body.customer-shell[data-v64-view="dashboard"] .v6904-dashboard-page-head{
    display:block!important;border:2px solid #0b2545!important;border-radius:12px!important;
    padding:4px 12px 8px!important;margin:14px 12px 0!important;text-align:center!important;text-decoration:none!important;
  }
  body.customer-shell[data-v64-view="dashboard"] .v6904-dashboard-page-head h1{
    margin:0!important;font-size:11.2vw!important;text-decoration:none!important;border-bottom:0!important;
  }
}

/* v70.79 — customer mobile: smaller title, box clearance from other boxes,
   taller top bar + bigger header logo, footer logo bigger + links pushed lower. */
@media(max-width:760px){
  /* title a little smaller + box clear of other boxes (top bar above, hero below) */
  body.customer-shell[data-v64-view="dashboard"] .v6904-dashboard-page-head{margin:16px 12px 16px!important;}
  body.customer-shell[data-v64-view="dashboard"] .v6904-dashboard-page-head h1{font-size:9.8vw!important;}
  /* top blue bar slightly taller + bigger Mendli logo */
  body.customer-shell[data-v64-view="dashboard"] .v6673-mobile-brandbar{height:78px!important;min-height:78px!important;padding-top:8px!important;padding-bottom:8px!important;}
  body.customer-shell[data-v64-view="dashboard"] .v6673-mobile-brandbar img{width:154px!important;height:auto!important;}
  /* footer (bottom blue bar): bigger logo, About/How it works etc pushed lower */
  body.customer-shell[data-v64-view="dashboard"] .v6692-dashboard-footer img{height:58px!important;margin:0 auto 4px!important;}
  body.customer-shell[data-v64-view="dashboard"] .v6692-dashboard-footer nav{margin-top:22px!important;}
}

/* v70.80 — My Jobs active tab underline used var(--m94-warning) amber (a stray gold line) — champagne it */
body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v6695-job-tabs button.active{
  border-bottom-color:#d1ad8b!important;
  background:#fffaf4!important;
}

/* v70.81 — LAPTOP/desktop customer dashboard: match the mobile page's look
   (warm tan bg, cream boxed tiles, champagne panels+buttons, boxed script title,
   chalkboard hidden, active tab champagne). Keeps the desktop sidebar/layout. */
@media(min-width:761px){
  /* warm tan background */
  body.customer-shell[data-v64-view="dashboard"],
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard,
  body.customer-shell[data-v64-view="dashboard"] .v64-dashboard-shell,
  body.customer-shell[data-v64-view="dashboard"] .v64-dashboard-main{background:#e9dcbf!important;}
  /* champagne action buttons (all, incl. primary) */
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v6673-hero-actions button,
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v6673-hero-actions button:first-child,
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v6673-hero-actions button#v6673PostJob,
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v6673-hero-actions button#v6673FindWorker,
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v6673-hero-actions button#v6692GetItDone{
    background:#d1ad8b!important;border:0!important;color:#0f172a!important;font-weight:800!important;
  }
  /* (chalkboard "Supporting local..." is KEPT on desktop — only hidden on mobile) */
  /* panels -> champagne cards, navy headers */
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v64-panel{
    background:#fff!important;border:2px solid #bfa877!important;border-radius:16px!important;
  }
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v64-panel>header h3{color:#082d49!important;}
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v64-panel>header button{color:#d1ad8b!important;background:0!important;border:0!important;}
  /* metric tiles -> cream cards, boxed navy numbers */
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v64-summary-grid article{
    background:#fffaf4!important;border:1px solid #efe2cf!important;border-radius:16px!important;box-shadow:none!important;
  }
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v64-summary-grid article b{
    background:#fff!important;border:2px solid #bfa877!important;border-radius:10px!important;padding:2px 12px!important;color:#082d49!important;
  }
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v64-summary-grid .v64-round{background:transparent!important;color:#d1ad8b!important;box-shadow:none!important;}
  /* boxed script title */
  body.customer-shell[data-v64-view="dashboard"] .v6904-dashboard-page-head{
    display:inline-block!important;border:2px solid #0b2545!important;border-radius:12px!important;padding:2px 26px 10px!important;margin:14px 0 18px!important;
  }
  body.customer-shell[data-v64-view="dashboard"] .v6904-dashboard-page-head h1{border-bottom:0!important;text-decoration:none!important;}
  /* active My Jobs tab champagne underline */
  body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v6695-job-tabs button.active{border-bottom-color:#d1ad8b!important;background:#fffaf4!important;}
}

/* v70.83 — bigger, readable text in the My Jobs + Recent messages panels (both views) */
body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v6695-job-tabs button{
  font-size:11px!important;height:auto!important;min-height:27px!important;padding:5px 6px!important;
}
body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v6673-job-row strong,
body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v6673-message-row strong{font-size:14px!important;line-height:1.25!important;}
body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v6673-job-row small,
body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v6673-message-row small,
body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v6673-due{font-size:12px!important;line-height:1.3!important;}
body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v6673-status{font-size:10.5px!important;}
body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v6673-job-view{font-size:13px!important;}
body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v6673-job-row{min-height:0!important;}

/* v70.84 — customer quote pill (like the worker) + 2 more advertising boxes on the laptop view */
body.customer-shell[data-v64-view="dashboard"] .v70x-cust-quote-row{display:flex;justify-content:flex-end;margin:2px 6px 8px;}
@media(min-width:761px){ body.customer-shell[data-v64-view="dashboard"] .v70x-cust-quote-row{margin:-52px 8px 16px!important;} }
body.customer-shell[data-v64-view="dashboard"] .v70x-cust-quote{
  display:inline-block;background:#082d49;border:2px solid #d1ad8b;border-radius:999px;
  padding:9px 24px;text-align:center;color:#fdf7ec;font-size:13.5px;font-weight:600;max-width:100%;
}
/* second advertising row — laptop/desktop only (hidden on mobile) */
@media(max-width:760px){ body.customer-shell[data-v64-view="dashboard"] .v70x-ad-row2{display:none!important;} }
@media(min-width:761px){
  body.customer-shell[data-v64-view="dashboard"] .v70x-ad-row2{
    display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;margin:12px 0 0!important;
  }
  body.customer-shell[data-v64-view="dashboard"] .v70x-ad-box{
    margin:0!important;background:linear-gradient(160deg,#0b3a5e,#082d49)!important;border:1px solid rgba(209,173,139,.32)!important;
    border-radius:14px!important;padding:16px 18px!important;min-height:98px!important;
  }
  body.customer-shell[data-v64-view="dashboard"] .v70x-ad-slide small{display:block!important;color:#d1ad8b!important;font-size:11px!important;font-weight:800!important;letter-spacing:1px!important;margin-bottom:5px!important;}
  body.customer-shell[data-v64-view="dashboard"] .v70x-ad-slide strong{display:block!important;color:#fff!important;font-size:16px!important;margin-bottom:4px!important;}
  body.customer-shell[data-v64-view="dashboard"] .v70x-ad-slide span{color:#cdd7e2!important;font-size:12.5px!important;}
}

/* v70.85 — behind "Welcome back, Nicci": part of the front-page photo, positioned so the
   chalkboard TEXT stays out of view (that writing already appears in a box on this page). */
body.customer-shell[data-v64-view="dashboard"] #view-dashboard .v6673-welcome-copy{
  background:linear-gradient(180deg,rgba(6,26,45,.5) 0%,rgba(6,26,45,.8) 100%),url('assets/m72-hero-wide.jpg') 20% center/cover no-repeat!important;
}