/*
    Styles for the opt-in Dashboard Home screen and its hamburger menu panel
    (HomeLayout.js / HeaderMenu.js / OnTheGo.View.HomeDashboard.js).
    See Specs/Mobile-DashboardHome-Design.md.

    Uses Tokens.css variables throughout so Theme.css/Dark.css keep resolving correctly under
    all four Classic/Light x Dark combinations - see CLAUDE.md's Mobile theming gotchas.
    Panel chrome (background/border/list-row colours) is already covered by Dark.css's
    .ui-body-a / .ui-btn-up-a rules, since #MainMenuPanel uses data-theme="a" like the rest
    of the app - only the custom row/star/icon colours below need their own dark handling.
*/

/* ---- Hamburger menu panel ---- */

/* jQuery Mobile panels default to a fixed 17em width - override with a viewport-relative one
   so the panel scales with the device instead of being a fixed size on every phone.

   The :not(.ui-panel-closed) is load-bearing. A closed panel is collapsed by jQuery Mobile's
   own '.ui-panel-closed { width: 0 }'; an unqualified '#MainMenuPanel { width: 80% !important }'
   beats that, so the panel stayed 80% wide while closed, parked at its off-screen resting
   position (right: -17em). That left every page's document 17em (272px) wider than the viewport.
   Desktop browsers hide the damage - body has overflow-x: hidden, so there is no scrollbar and
   nothing looks wrong - but iOS Safari's shrink-to-fit sizes the initial scale to the widest
   content, and this viewport meta has no initial-scale to stop it. The whole app then renders
   zoomed out to roughly device-width / (device-width + 272), flush left, with the fixed
   toolbars still spanning the full screen because they size to the visual viewport. */
#MainMenuPanel:not(.ui-panel-closed) {
    width: 80% !important;
}

/* Park the closed panel by its own width instead of jQuery Mobile's fixed 17em.
   jQM slides an overlay panel off-screen with 'transform: translate3d(17em, 0, 0)', a distance
   hard-coded to match its default 17em panel width. Overriding the width to 80% left that 17em
   in place, so the closed panel sat 272px beyond the right edge of the document.
   A percentage translate resolves against the element's own border box, so this parks the panel
   by exactly its own width whatever that width is: closed it is 0 wide and translates 0, resting
   flush at right: 0 and adding nothing to the document; opening it is 80% wide and translates by
   that, so the slide-in animation is unchanged (measured 312 -> 0 over ~280ms).
   Why this matters beyond tidiness: that parked panel was real document overflow, and a browser
   that shrinks a page to fit its widest content then zooms the whole app out. Reproduced on a
   Samsung tablet in Samsung Internet, and measured at its 800x1124 viewport with default
   settings: document 1057px wide against 800px of viewport, 257px of it empty panel. The app's
   content, capped at 760px by Mobile.css, then occupies only the left ~72% of the shrunk render
   with the rest empty - which is what "the page is small and shunted to the left" looks like.
   With this rule the document measures 785px and there is nothing to shrink.
   Two things that make it easy to miss. Desktop browsers hide it: body's 'overflow-x: hidden'
   propagates to the viewport, so nothing looks wrong and there is no scrollbar. And whether it
   bites depends on viewport width and on Settings > Zoom Level (TOTM.js applies it as
   body { zoom }, and a non-100% value stops that propagation) - which is why it hit some users
   and no device in the office. Clipping is not the fix: 'html { overflow-x: hidden }' and
   'body { position: relative }' both measured no change. Removing the overflow at source is. */
#MainMenuPanel.ui-panel-animate.ui-panel-position-right.ui-panel-display-overlay:not(.ui-panel-open) {
    transform: translate3d(100%, 0, 0) !important;
}

/* Keep the tap-to-close overlay off the panel, for the same reason as the transform above.
   jQM's '.ui-panel-dismiss-open.ui-panel-dismiss-position-right { right: 17em }' is the
   click-catcher that closes the panel when you tap the page beside it, and that 17em is once
   again its default panel width. With the panel at 80% the overlay reached 80% - 17em INTO the
   panel, sitting on top of the menu rows: at an 800px viewport it covered everything left of
   x = 800 - 272, so the left 57% of every row closed the menu instead of selecting the item.
   Worse the wider the screen - at 1440px it swallowed about 76% of each row, which is why it
   showed up on desktop first. Matching the panel's own width puts the boundary back on the
   panel edge. */
.ui-panel-dismiss-open.ui-panel-dismiss-position-right {
    right: 80% !important;
}

/* jQuery Mobile's default panel padding (1em all round) is what was making every row
   noticeably narrower than the panel itself - trim it to just enough for the open/close
   animation and the rows' own rounded corners to read clearly, not a full inset margin. */
#MainMenuPanel .ui-panel-inner {
    padding-left: 6px !important;
    padding-right: 6px !important;
}

#MainMenuList li {
    margin-bottom: 10px;
}

.MainMenuRow {
    /* jQuery Mobile's own .ui-btn rule sets display: block !important, which silently
       defeated this flex layout (icon/label/star all rendering left-packed instead of the
       star sitting flush right) - match its !important so this one actually wins. */
    display: flex !important;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-sm) !important;
    /* jQuery Mobile's listview auto-enhancement doesn't add its usual ui-btn-up-a swatch class
       to these rows (a side effect of building them imperatively with data-icon="false" - see
       HeaderMenu.js), so it never picks up Dark.css's .ui-btn-up-a rule either. Style directly
       from tokens instead of relying on that swatch class. */
    background: var(--surface) !important;
    color: var(--text) !important;
}

.MainMenuRowIcon {
    width: 24px;
    text-align: center;
    margin-right: 12px;
    color: var(--brand);
}

.MainMenuRowLabel {
    flex: 1;
}

.MenuFavouriteToggle {
    color: var(--warn);
    padding: 4px 0 4px 8px;
    margin-left: auto;
}

.MainMenuDivider {
    border-top: 1px solid var(--border);
    margin-top: var(--space-2);
    padding-top: var(--space-2);
}

/* ---- Dashboard Home body ---- */

#HomeDashboard {
    display: none;
}

body.home-dashboard #HomeDashboard {
    display: block;
    padding: 0 var(--space-3) var(--space-3);
}

/* Classic Home elements hidden while the Dashboard layout is active. */
body.home-dashboard #home > .ui-content > ul[data-role="listview"] {
    display: none;
}

/* Was an inline style="max-width: 240px" on the <img> - moved here so the Dashboard-mode
   override below (an external stylesheet rule) can actually win; an inline style always beats
   an external rule of any specificity (see CLAUDE.md's Mobile theming gotchas). */
#HomePageLogoImage {
    max-width: 240px;
}

body.home-dashboard #HomePageLogoImage {
    max-width: 144px;
}

body.home-dashboard #HomepageUsername {
    display: none;
}

.HomeDashboardCard {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--elev-1);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
    color: var(--text);
}

/* ---- Hours card ---- */

.HoursCardHeading {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-3);
}

.HoursCardGreeting {
    font-size: var(--type-lg);
    font-weight: bold;
}

.HoursCardDate {
    color: var(--text-muted);
    font-size: var(--type-sm);
}

.HoursBubbleRow {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-2);
}

.HoursBubbleRow:last-child {
    margin-bottom: 0;
}

.HoursBubble {
    background: var(--brand);
    color: var(--text-on-brand);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--type-sm);
    font-weight: bold;
    flex-shrink: 0;
    margin-right: var(--space-3);
}

.HoursBubbleLabel {
    color: var(--text);
}

/* ---- Next Job band + card ---- */

.NextJobBand {
    background: var(--brand);
    color: var(--text-on-brand);
    border-radius: var(--radius) var(--radius) 0 0;
    padding: var(--space-2) var(--space-3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    font-size: var(--type-sm);
    letter-spacing: 0.03em;
}

.NextJobCard {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--elev-1);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
    color: var(--text);
    position: relative;
}

.NextJobCardEmpty {
    color: var(--text-muted);
}

.NextJobRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-1);
}

.NextJobCustomerName {
    font-weight: bold;
    font-size: var(--type-lg);
}

.NextJobStatusPill {
    border-radius: var(--radius-pill);
    padding: 2px 12px;
    font-size: var(--type-sm);
    font-weight: bold;
}

.NextJobDetailLine {
    color: var(--text-muted);
    font-size: var(--type-sm);
    margin-bottom: var(--space-1);
}

.NextJobMapPin {
    position: absolute;
    right: var(--space-3);
    bottom: var(--space-3);
    background: var(--map-pin-bg, #F4511E);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--elev-1);
}

/* ---- Favourites grid ---- */

.HomeFavouritesGrid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.HomeFavouritesEmpty {
    color: var(--text-muted);
    text-align: center;
    padding: var(--space-3) 0;
}

.FavouriteTile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--elev-1);
    width: calc(50% - var(--space-2) / 2);
    box-sizing: border-box;
    padding: var(--space-3) var(--space-2);
    text-align: center;
    color: var(--text);
    text-decoration: none;
    display: block;
}

.FavouriteTile .FavouriteTileIcon {
    font-size: var(--type-xl);
    color: var(--brand);
    display: block;
    margin-bottom: var(--space-1);
}

/* The trailing "add a favourite" tile - deliberately reads as a placeholder rather than
   another module: dashed outline, no card fill or shadow, muted label. Compound selectors
   (.FavouriteTile.AddFavouriteTile) so it beats .FavouriteTile regardless of rule order. */
.FavouriteTile.AddFavouriteTile {
    background: transparent;
    /* --border is deliberately near-invisible under Tradie Light, which left the dashed
       outline barely readable - the muted text colour is the same in both themes and reads
       as a placeholder outline rather than a card edge. */
    border: 1px dashed var(--text-muted);
    box-shadow: none;
    color: var(--text-muted);
}

.FavouriteTile.AddFavouriteTile .FavouriteTileIcon {
    color: var(--text-muted);
}