/* =========================================================
   RideMonkey Home — Page Styling
   =========================================================
   The shared tile-grid mechanics (.rm-tile-grid, .rm-tile,
   .rm-tile-head, .rm-tile-placeholder, and the generic mobile
   collapse) live in assets/css/components/tile-grid.css, since
   Garage now uses the exact same system. This file only
   contains: which tiles go where on Home's grid, and all of
   Home's own tile content styling.

   IMPORTANT: every selector below is namespaced under .rm-home
   (except the handful of shared class names imported from
   tile-grid.css, which are deliberately generic/shared — see
   that file's own header comment). All page stylesheets share
   one sitewide CSS cascade (see the dependency chain in
   bootstrap.php's rm_enqueue_app_styles()) — a bare page-
   specific class name here would apply on every other page
   too. This exact bug happened once already (bare
   .rm-bike-card etc. bled onto the Garage page).
   ========================================================= */

.rm-home {
    width: 100%;
}


/* ---------------------------------------------------------
   Grid placement — one rule per tile, matching the agreed
   layout. Column/row numbers refer to the shared 7x8 grid.
   --------------------------------------------------------- */

.rm-home .rm-w-bikes      { grid-column: 1 / span 6; grid-row: 1 / span 4; }
.rm-home .rm-w-quicklinks { grid-column: 7 / span 6; grid-row: 1 / span 1; }
.rm-home .rm-w-contacts   { grid-column: 13 / span 2; grid-row: 1 / span 6; }
.rm-home .rm-w-attention  { grid-column: 7 / span 4; grid-row: 2 / span 3; }
.rm-home .rm-w-costs      { grid-column: 11 / span 2; grid-row: 2 / span 3; }
.rm-home .rm-w-streak     { grid-column: 1 / span 2; grid-row: 5 / span 2; }
.rm-home .rm-w-calendar   { grid-column: 3 / span 4; grid-row: 5 / span 4; }
.rm-home .rm-w-graphtbd   { grid-column: 7 / span 6; grid-row: 5 / span 2; }
.rm-home .rm-w-promo2     { grid-column: 1 / span 2; grid-row: 7 / span 2; }
.rm-home .rm-w-triplog    { grid-column: 7 / span 4; grid-row: 7 / span 2; }
.rm-home .rm-w-promo      { grid-column: 11 / span 4; grid-row: 7 / span 2; }


/* ---------------------------------------------------------
   Quick Links — single borderless inline row, no card chrome
   per item
   --------------------------------------------------------- */

.rm-home .rm-w-quicklinks .rm-tile-head {
    border-bottom: none;
    margin: 0;
    padding: 0;
    flex: 1;
}

.rm-home .rm-qlinks-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
}

.rm-home .rm-qlinks-sep {
    color: #dddddd;
    font-weight: 300;
    font-size: 16px;
}

.rm-home .rm-qlink {
    display: flex;
    align-items: center;
    gap: 5px;

    color: #222222;
    text-decoration: none;

    font-size: 11px;
    font-weight: 600;
}

.rm-home .rm-qlink .rm-glyph {
    font-size: 15px;
}


/* ---------------------------------------------------------
   Quick Contacts — narrow column, horizontal icon+label rows
   --------------------------------------------------------- */

.rm-home .rm-contact-list {
    flex: 1 1 auto;
    overflow-y: auto;

    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rm-home .rm-contact-item {
    display: flex;
    align-items: center;
    gap: 7px;

    border: 1px solid #dddddd;
    border-radius: 7px;
    background: #faf9f6;

    padding: 7px 8px;

    text-decoration: none;
    color: #222222;
}

.rm-home .rm-contact-item .rm-glyph {
    font-size: 15px;
    flex: 0 0 auto;
}

.rm-home .rm-contact-item .rm-label {
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rm-home .rm-contact-empty {
    font-size: 11px;
    color: #666666;
}

/* Mobile-only Contacts markup — hidden by default, shown
   inside the mobile media query below */
.rm-home .rm-contact-grid-mobile,
.rm-home .rm-contacts-expand-mobile {
    display: none;
}


/* ---------------------------------------------------------
   Attention Required — fixed 2x3 grid, max 6 shown, no scroll
   --------------------------------------------------------- */

.rm-home .rm-attn-grid {
    flex: 1 1 auto;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 6px;
}

.rm-home .rm-attn-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;

    border: 1px solid #dddddd;
    border-radius: 7px;
    background: #faf9f6;

    padding: 4px 3px;

    position: relative;
    text-align: center;

    text-decoration: none;
    color: #222222;
}

.rm-home .rm-attn-item .rm-glyph {
    font-size: 14px;
}

.rm-home .rm-attn-item .rm-txt {
    font-size: 9px;
    font-weight: 600;
    line-height: 1.15;
}

.rm-home .rm-attn-item .rm-txt small {
    display: block;
    font-size: 8px;
    font-weight: 400;
    color: #666666;
}

.rm-home .rm-attn-badge {
    position: absolute;
    top: -5px;
    right: -5px;

    background: #ff4b00;
    color: #ffffff;

    font-size: 8px;
    font-weight: 700;

    width: 13px;
    height: 13px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.rm-home .rm-attn-empty {
    grid-column: 1 / -1;
    grid-row: 1 / -1;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 11px;
    color: #666666;
}


/* ---------------------------------------------------------
   My Bikes — horizontal-scroll row of vertical photo cards
   --------------------------------------------------------- */

.rm-home .rm-tile-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rm-home .rm-add-btn {
    width: 18px;
    height: 18px;
    border-radius: 5px;

    border: 1.5px solid #ff4b00;
    color: #ff4b00;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

.rm-home .rm-bike-list {
    flex: 1 1 auto;

    display: flex;
    gap: 8px;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;
}

.rm-home .rm-bike-card {
    flex: 0 0 46%;

    display: flex;
    flex-direction: column;

    border: 1px solid #dddddd;
    border-radius: 8px;
    overflow: hidden;
    background: #faf9f6;

    text-decoration: none;
    color: inherit;

    scroll-snap-align: center;
}

.rm-home .rm-bike-thumb {
    flex: 1 1 auto;
    min-height: 90px;

    background-color: #efece6;
    background-size: cover;
    background-position: center;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 26px;
    color: #b9b4aa;
}

.rm-home .rm-bike-card-body {
    flex: 0 0 auto;
    padding: 6px 8px;
    text-align: center;
}

.rm-home .rm-bike-name {
    font-weight: 700;
    font-size: 11.5px;
    color: #222222;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rm-home .rm-bike-makemodel,
.rm-home .rm-bike-mileage {
    font-size: 9.5px;
    color: #666666;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rm-home .rm-bikes-empty {
    font-size: 11px;
    color: #666666;
}


/* ---------------------------------------------------------
   Cost Breakdown — donut + legend
   --------------------------------------------------------- */

.rm-home .rm-donut-wrap {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    padding: 4px 0 8px;
}

.rm-home .rm-cost-legend {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 9.5px;
}

.rm-home .rm-cost-legend-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rm-home .rm-cost-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex: 0 0 auto;
}

.rm-home .rm-cost-name {
    flex: 1;
    color: #222222;
}

.rm-home .rm-cost-pct {
    font-weight: 700;
    color: #666666;
}

.rm-home .rm-costs-empty {
    font-size: 11px;
    color: #666666;
}


/* ---------------------------------------------------------
   Promo tiles — locked-in corner-peek banner design (white
   card, no buttons, orange chevron affordance, small
   disclosure text). Content is placeholder demo copy until
   rm-affiliate-functions.php is wired in.
   --------------------------------------------------------- */

.rm-home .rm-promo {
    position: relative;
    overflow: hidden;
    justify-content: center;
}

.rm-home .rm-promo .rm-promo-disclosure {
    font-size: 9px;
    letter-spacing: .3px;
    color: #b8b3a8;
    margin-bottom: 3px;
}

.rm-home .rm-promo h3 {
    margin: 0 0 3px;
    color: #222222;
    font-size: 13px;
}

.rm-home .rm-promo p {
    margin: 0;
    color: #666666;
    font-size: 11px;
}

.rm-home .rm-promo .rm-promo-peek {
    position: absolute;
    top: 0;
    right: 0;

    width: 0;
    height: 0;

    border-style: solid;
    border-width: 0 30px 30px 0;
    border-color: transparent #ff4b00 transparent transparent;
}

.rm-home .rm-promo .rm-promo-chev {
    position: absolute;
    top: 5px;
    right: 5px;

    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
}


/* =========================================================
   Mobile — original "lite" page: ONLY Attention, Quick Links,
   and Contacts render at all. Every other tile added in this
   redesign is desktop-only and hidden completely below this
   breakpoint, not just restacked. (The generic grid-to-flex
   collapse itself is handled in tile-grid.css — this just adds
   Home's own hide/reorder/restyle rules on top of that.)
   ========================================================= */

@media (max-width: 767px) {

    .rm-home .rm-w-bikes,
    .rm-home .rm-w-costs,
    .rm-home .rm-w-streak,
    .rm-home .rm-w-calendar,
    .rm-home .rm-w-graphtbd,
    .rm-home .rm-w-promo,
    .rm-home .rm-w-promo2,
    .rm-home .rm-w-triplog {
        display: none;
    }

    .rm-home .rm-w-attention,
    .rm-home .rm-w-quicklinks,
    .rm-home .rm-w-contacts {
        grid-column: auto;
        grid-row: auto;
    }

    /* Visual order: Attention first, regardless of the PHP
       require order (which only matters for desktop grid
       placement) */
    .rm-home .rm-w-attention  { order: 1; }
    .rm-home .rm-w-quicklinks { order: 2; }
    .rm-home .rm-w-contacts   { order: 3; }

    /* Drop the desktop tile chrome (shadow, uppercase title,
       tight sizing) for a plainer, original-feeling card */
    .rm-home .rm-w-attention,
    .rm-home .rm-w-quicklinks,
    .rm-home .rm-w-contacts {
        box-shadow: none;
        padding: 0;
    }

    .rm-home .rm-w-attention .rm-tile-head,
    .rm-home .rm-w-quicklinks .rm-tile-head,
    .rm-home .rm-w-contacts .rm-tile-head {
        margin: 0;
        padding: 6px 16px 4px;
        border-bottom: 2px solid #ff4b00;
    }

    .rm-home .rm-w-attention .rm-tile-head h2,
    .rm-home .rm-w-quicklinks .rm-tile-head h2,
    .rm-home .rm-w-contacts .rm-tile-head h2 {
        text-transform: none;
        letter-spacing: 0;
        font-size: 15px;
    }


    /* ---- Quick Links -> back to a touch-friendly, icon-only
       grid (no border boxes, no text labels) ---- */

    .rm-home .rm-w-quicklinks .rm-qlinks-row {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
        padding: 4px 0 4px; /* vertical only — tile-head above already provides the horizontal inset */
    }

    .rm-home .rm-w-quicklinks .rm-qlinks-row h2 {
        grid-column: 1 / -1;
        margin: 0 0 6px 0;
        padding-bottom: 4px;
        border-bottom: 2px solid #ff4b00;
    }

    /* the shared border above lands on the whole row (title +
       icons together) for Quick Links specifically, since its
       icons live inside .rm-tile-head — so cancel that one and
       let the h2's own border (above) carry it instead */
    .rm-home .rm-w-quicklinks .rm-tile-head {
        border-bottom: none;
    }

    .rm-home .rm-w-quicklinks .rm-qlinks-sep {
        display: none;
    }

    .rm-home .rm-w-quicklinks .rm-qlink {
        flex-direction: column;
        gap: 4px;

        min-height: 48px;
        padding: 7px 3px;

        border: none;
        background: none;

        font-size: 11px;
        text-align: center;
    }

    .rm-home .rm-w-quicklinks .rm-qlink .rm-glyph {
        font-size: 22px;
    }

    .rm-home .rm-w-quicklinks .rm-qlink-label {
        display: none;
    }


    /* ---- Attention -> icon + badge only, no text label,
       no borders, matching the original mobile treatment ---- */

    .rm-home .rm-w-attention .rm-attn-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto;
        padding: 4px 16px 6px;
    }

    .rm-home .rm-w-attention .rm-attn-item {
        min-height: 0;
        padding: 8px 4px 2px;
        border: none;
        background: none;

        justify-self: center;
        width: auto;
    }

    .rm-home .rm-w-attention .rm-attn-badge {
        top: 2px;
        right: -2px;
    }

    .rm-home .rm-w-attention .rm-attn-item .rm-txt {
        display: none;
    }

    .rm-home .rm-w-attention .rm-attn-item .rm-glyph {
        font-size: 22px;
    }


    /* ---- Contacts -> icon-only grid + collapsible detail,
       matching the original exactly. Desktop's icon+name rows
       are hidden here instead. ---- */

    .rm-home .rm-w-contacts .rm-contact-list-desktop {
        display: none;
    }

    .rm-home .rm-w-contacts .rm-contact-grid-mobile {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
        padding: 4px 16px 6px;
    }

    .rm-home .rm-w-contacts .rm-contact-icon-mobile {
        display: flex;
        align-items: center;
        justify-content: center;

        min-height: 48px;

        border: none;
        background: none;

        font-size: 22px;
        text-decoration: none;
    }

    .rm-home .rm-w-contacts .rm-contacts-expand-mobile {
        display: block;
        padding: 0 16px 6px;
    }

    .rm-home .rm-w-contacts .rm-contacts-expand-mobile summary {
        color: #ff4b00;
        cursor: pointer;

        font-size: 13px;
        font-weight: 600;
    }

    .rm-home .rm-w-contacts .rm-contacts-detail-list {
        margin-top: 10px;

        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .rm-home .rm-w-contacts .rm-contacts-detail-link {
        display: flex;
        align-items: center;
        justify-content: space-between;

        text-decoration: none;
        color: #222222;

        font-size: 14px;
    }

    .rm-home .rm-w-contacts .rm-contacts-detail-phone {
        color: #666666;
        font-size: 13px;
    }

}