/* =========================================================
   RideMonkey Dashboard — Page Styling
   =========================================================
   Mobile is the original page, completely unchanged: the
   .rm-card.rm-dashboard-links flat list below. Desktop gets
   the new shared tile-grid treatment instead (same system as
   Home/Garage) — the two are toggled by breakpoint further
   down, not merged into one responsive layout.
   ========================================================= */

.rm-dashboard {
    width: 100%;
}


/* ---------------------------------------------------------
   ORIGINAL — untouched. Base dashboard card + link rows,
   exactly as before this redesign. This is what mobile shows.
   --------------------------------------------------------- */

.rm-dashboard .rm-card {
    width: 100%;
    margin: 0;
    padding: 0;

    background: #ffffff;

    border: 1px solid #dddddd;
    border-radius: 14px;

    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);

    overflow: hidden;
}

.rm-dashboard .rm-dashboard-link {
    display: flex;

    align-items: center;
    gap: 10px;

    padding: 10px 10px;

    border-bottom: 1px solid #f0f0f0;

    color: #222222;

    text-decoration: none;

    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;

    transition: color 0.15s ease, background 0.15s ease;
}

.rm-dashboard .rm-dashboard-link:last-child {
    border-bottom: none;
}

.rm-dashboard .rm-dashboard-link:hover,
.rm-dashboard .rm-dashboard-link:focus {
    color: #ff4b00;

    background: #faf9f6;
}

.rm-dashboard .rm-dashboard-link-icon {
    font-size: 18px;
    line-height: 1;
}

.rm-dashboard .rm-dashboard-link-text {
    display: flex;
    flex: 1;
    flex-direction: column;

    gap: 2px;
}

.rm-dashboard .rm-dashboard-link-label {
    line-height: 1.2;
}

.rm-dashboard .rm-dashboard-link-meta {
    color: #666666;

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

.rm-dashboard .rm-dashboard-link-meta-warning {
    color: #c0392b;
}

.rm-dashboard .rm-dashboard-link .rm-card-arrow {
    color: #ff4b00;

    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}


/* ---------------------------------------------------------
   ORIGINAL — untouched. Service history icon strip. Bare
   (non-namespaced) class names, same as they've always been —
   left as-is rather than changed as part of this redesign.
   --------------------------------------------------------- */

.rm-service-icon-strip {
    display: flex;

    gap: 12px;
    margin-top: 3px;
}

.rm-service-icon-item {
    display: flex;
    flex-direction: column;

    align-items: center;
    gap: 1px;
}

.rm-service-icon-glyph {
    font-size: 15px;
    line-height: 1;
}

.rm-service-icon-value {
    color: #666666;

    font-size: 10px;
    font-weight: 700;
}

.rm-service-icon-overdue .rm-service-icon-value {
    color: #c0392b;
}


/* =========================================================
   NEW — desktop tile grid
   ========================================================= */

.rm-dashboard .rm-w-bikedetails  { grid-column: 1 / span 6; grid-row: 1 / span 4; }
.rm-dashboard .rm-w-service      { grid-column: 7 / span 8; grid-row: 1 / span 4; }
.rm-dashboard .rm-w-fuel         { grid-column: 1 / span 4; grid-row: 5 / span 4; }
.rm-dashboard .rm-w-mot          { grid-column: 5 / span 4; grid-row: 5 / span 4; }
.rm-dashboard .rm-w-checklists   { grid-column: 9 / span 4; grid-row: 5 / span 4; }
.rm-dashboard .rm-w-documents    { grid-column: 13 / span 2; grid-row: 5 / span 4; }

.rm-dashboard .rm-tile-head {
    color: inherit;
    text-decoration: none;
    transition: background 0.15s ease;
}

.rm-dashboard .rm-tile-head:hover,
.rm-dashboard .rm-tile-head:focus {
    background: #faf9f6;
}

.rm-dashboard .rm-tile-placeholder a {
    color: inherit;
    text-decoration: none;
}

.rm-dashboard .rm-tile-placeholder a:hover,
.rm-dashboard .rm-tile-placeholder a:focus {
    text-decoration: underline;
}

.rm-dashboard .rm-dtile-link {
    flex: 1 1 auto;
    min-height: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;

    padding: 4px 4px 8px;

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

.rm-dashboard .rm-dtile-meta {
    color: #222222;
    font-size: 15px;
    font-weight: 700;
}

.rm-dashboard .rm-dtile-meta.warning {
    color: #c0392b;
}

.rm-dashboard .rm-dtile-empty {
    color: #999999;
    font-size: 13px;
    font-style: italic;
}

.rm-dashboard .rm-dtile-link .rm-card-arrow {
    color: #ff4b00;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.rm-dashboard .rm-dtile-link:hover .rm-card-arrow,
.rm-dashboard .rm-dtile-link:focus .rm-card-arrow {
    text-decoration: underline;
}

/* Service tile's icon strip needs a bit more room to breathe
   than the compact dashboard-link version did */
.rm-dashboard .rm-w-service .rm-service-icon-strip {
    gap: 20px;
    margin-top: 6px;
}

.rm-dashboard .rm-w-service .rm-service-icon-glyph {
    font-size: 20px;
}

.rm-dashboard .rm-w-service .rm-service-icon-value {
    font-size: 12px;
}


/* =========================================================
   Toggle: original mobile list vs new desktop tile grid
   ========================================================= */

@media (min-width: 768px) {

    .rm-dashboard .rm-dashboard-links {
        display: none;
    }

}

@media (max-width: 767px) {

    .rm-dashboard .rm-w-bikedetails,
    .rm-dashboard .rm-w-service,
    .rm-dashboard .rm-w-fuel,
    .rm-dashboard .rm-w-mot,
    .rm-dashboard .rm-w-checklists,
    .rm-dashboard .rm-w-documents {
        display: none;
    }


    /* ORIGINAL — untouched */

    .rm-dashboard .rm-dashboard-link {
        padding: 10px 5px;

        font-size: 14px;
    }

}