/* ============================================================
   PLUGIN TYPOGRAPHY LOCKDOWN
   The plugin's headings/paragraphs must never depend on the site's
   own typography settings (Additional CSS, Options for Twenty
   Twenty-One, etc.) – past versions did, by omission, which is why
   spacing kept drifting every time site-wide typography changed.
   Every rule here is explicitly scoped to the plugin's own
   containers, with !important, specifically because the site's
   Additional CSS also uses !important on headings/paragraphs – a
   plain rule without !important here would silently lose that fight.
   ============================================================ */

.mmg-left h2, .mmg-right h2, #mmg_tab_content h2,
.mmg-left h3, .mmg-right h3, #mmg_tab_content h3,
#mmg_news_feed h2, #mmg_news_feed h3,
.mmg-login-wrapper h2, .mmg-login-wrapper h3 {
    font-family: -apple-system, Arial, sans-serif !important;
    line-height: 1.25 !important;
}

/* Tool heading (e.g. "Recalls", "Service Logbook") – the primary
   heading at this point in the view, now that the vehicle title has
   moved to a secondary h3 below it. */
#mmg_tab_content h2 {
    font-size: 26px !important;
    margin: 0 0 10px !important;
}

/* Vehicle title (year/make/model/trim), "My Vehicles," login-screen
   headings, and report subsections – secondary heading level. */
.mmg-left h3,
.mmg-right h3,
#mmg_tab_content h3,
#mmg_news_feed h3,
.mmg-login-wrapper h3,
#mmg_vehicle_header_desktop h3,
#mmg_vehicle_header_mobile h3 {
    font-size: 20px !important;
    margin: 0 0 10px !important;
}

.mmg-wrapper, .mmg-wrapper * {
    box-sizing: border-box;
}

/* Comprehensive, forced reset for every form control the plugin uses.
   Uses !important throughout because the previous, non-forced version of
   this rule was still being overridden somewhere in the cascade (most
   likely the site theme's own global form-element styling, which can
   apply large line-height/padding to every input/select/textarea on the
   site). This version forces an explicit fixed height on single-line
   fields rather than relying on line-height math, so it can't be thrown
   off by anything else being inherited unexpectedly. Applies across all
   mobile browsers/platforms, not just iOS Safari, since the root cause
   is CSS specificity, not a browser-specific rendering quirk. */
.mmg-wrapper input:not([type="submit"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.mmg-wrapper select,
.mmg-login-wrapper input:not([type="submit"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    display: block !important;
    height: 40px !important; /* was 44px - tightened per feedback that the
       box felt oversized relative to the 16px text now sitting in it.
       Staying at 40px rather than going lower keeps this above the
       ~40px minimum comfortable tap target on touch screens, which is
       the reason this was a fixed height in the first place. */
    min-height: 40px !important;
    max-height: 40px !important;
    line-height: normal !important;
    font-size: 16px !important; /* also prevents iOS Safari auto-zooming in on focus */
    padding: 0 10px !important;
    margin: 0 0 8px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    background-color: #fff !important;
    vertical-align: middle !important;
}

/* Date inputs specifically get their native appearance restored, right
   after the broad rule above (so this wins) – appearance:none was
   likely disrupting Safari's internal centering of the mm/dd/yyyy
   segments and calendar icon, the same root cause pattern that broke
   the textarea resize handle. Every other sizing/spacing fix from the
   rule above still applies; only the appearance property changes here. */
/* Date inputs specifically get their native appearance restored, right
   after the broad rule above (so this wins) – appearance:none was
   likely disrupting Safari's internal centering of the mm/dd/yyyy
   segments and calendar icon, the same root cause pattern that broke
   the textarea resize handle. An earlier attempt also forced an exact
   pixel line-height here, but that made Safari's alignment worse, not
   better – likely because handing rendering to Safari via
   appearance:auto and then also forcing our own line-height/height
   created two different positioning mechanisms fighting each other.
   This version hands off more fully: appearance:auto plus a flexible
   min-height (not a rigid height), giving Safari's own internal
   layout room to size itself naturally rather than forcing it into an
   exact box. Every other sizing/spacing fix from the rule above still
   applies; only appearance/height/line-height change here. */
.mmg-wrapper input[type="date"] {
    -webkit-appearance: auto !important;
    appearance: auto !important;
    height: auto !important;
    min-height: 40px !important; /* matches the 40px used on other single-line fields above */
    line-height: normal !important;
}

/* Checkboxes (ours, or injected by other plugins hooking into the
   registration form, like a mailing-list opt-in) get their own rule –
   normal native checkbox appearance, just sized/aligned consistently,
   rather than stretched by the rule above. */
.mmg-wrapper input[type="checkbox"],
.mmg-login-wrapper input[type="checkbox"] {
    -webkit-appearance: checkbox !important;
    appearance: checkbox !important;
    width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    padding: 0 !important;
    margin: 0 6px 0 0 !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    display: inline-block !important;
}

.mmg-wrapper select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3e%3cpath fill='%23555' d='M1 1l5 5 5-5'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 11px;
    padding-right: 32px !important;
}

.mmg-wrapper textarea {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-height: 52px !important; /* was 60px - tightened to match the single-line fields above */
    resize: vertical !important;
    line-height: 1.4 !important;
    font-size: 16px !important;
    padding: 8px 10px !important; /* was 10px 12px */
    margin: 0 0 10px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
}

.mmg-account-bar {
    max-width: 100%;
    margin-bottom: 12px;
    padding: 8px 14px;
    background: #eef2ff;
    border-radius: 6px;
    font-family: -apple-system, Arial, sans-serif;
    font-size: 0.9em;
    color: #333;
}

.mmg-account-bar a {
    color: #1d4ed8;
    font-weight: 600;
    text-decoration: none;
}

.mmg-account-bar a:hover {
    text-decoration: underline;
}

.mmg-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
    font-family: -apple-system, Arial, sans-serif;
}

.mmg-news-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 14px;
    background: #fff;
    font-size: 0.9em;
}

.mmg-news-card a {
    color: #0080C5 !important;
    text-decoration: none;
}

.mmg-news-card a:hover {
    color: #0080C5 !important;
    text-decoration: underline;
}

.mmg-news-card p {
    margin-top: 8px;
    color: #444;
}

@media (max-width: 900px) {
    .mmg-news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .mmg-news-grid {
        grid-template-columns: 1fr;
    }
}

.mmg-login-wrapper {
    max-width: 360px;
    margin: 0 auto;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 24px;
    background: #fafafa;
    font-family: -apple-system, Arial, sans-serif;
    font-size: 16px;
}

.mmg-login-wrapper * {
    box-sizing: border-box;
}

.mmg-login-wrapper form p {
    margin-bottom: 12px;
}

.mmg-login-wrapper label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.9em;
    color: #333;
}

.mmg-login-wrapper input[type="text"],
.mmg-login-wrapper input[type="password"],
.mmg-login-wrapper input[type="email"] {
    width: 100%;
    max-width: 300px; /* these hold a username/email or a password - neither
       needs the full width of the login box, which was sized generously
       for the box itself, not for how long this text actually runs.
       ~300px uses most of the ~312px actually available inside the box
       (360px box - 24px padding each side), leaving a small deliberate
       margin from the edge rather than looking flush against the border.
       max-width (not a fixed width) so it still shrinks gracefully rather
       than overflowing on very narrow phone screens. */
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.mmg-login-wrapper input[type="submit"] {
    background: #1d4ed8;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px 18px;
    cursor: pointer;
    font-size: 1em;
}

.mmg-login-wrapper input[type="submit"]:hover {
    background: #0080C5;
}

/* "Show/Hide password" toggle - added generically via JS (see
   mmgInitPasswordToggles in mmg-script.js) to every password field across
   Login, Register, and Reset Password, rather than hand-added to each
   form's markup separately. Plain text ("Show"/"Hide") rather than an eye
   icon, deliberately - an icon glyph would hit the exact same cross-
   browser/OS vertical-centering inconsistency this project already spent
   real effort solving for the tab-menu emoji, and isn't worth reintroducing
   for a small functional control. Text is also more broadly legible and
   needs no alignment tuning at all. */
.mmg-login-wrapper .mmg-password-field-wrap {
    position: relative;
    display: block;
    width: 100%;
    max-width: 300px; /* MUST match the input's own max-width above, or this
       wrapper - a plain block-level element with no width of its own -
       just fills its full parent instead, and the toggle button (positioned
       relative to THIS wrapper) ends up floating off to the right of the
       now-narrower input instead of sitting flush against it. This was the
       actual bug behind the button floating away from the field. */
}

.mmg-login-wrapper .mmg-password-field-wrap input[type="password"]:not([type="submit"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.mmg-login-wrapper .mmg-password-field-wrap input[type="text"]:not([type="submit"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
    padding-right: 50px !important; /* room for the toggle button so typed text doesn't run under it.
       Matches the full :not() chain from the input-reset rule near the top
       of this file (which also sets padding, with !important) purely for
       specificity - a shorter selector here would lose that fight even
       with !important of its own, since specificity is compared before
       importance settles a tie, and that rule's four :not() clauses make
       it more specific than a plain input[type="..."] selector. */
}

.mmg-password-toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    min-height: auto; /* overrides the site-wide button{min-height:38px} rule - too small a control to need that tap-target height */
    background: none;
    border: none;
    color: #1d4ed8;
    font-size: 0.8em;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 6px;
}

.mmg-password-toggle:hover {
    text-decoration: underline;
}

/* "Create one here" - made noticeably more prominent than a plain muted
   link, without going as far as a full black button (which would visually
   compete with the actual Log In button above it, undercutting rather
   than supporting the primary action). A light bordered callout is the
   common middle ground for a secondary-but-important CTA - noticeable at
   a glance, still clearly subordinate to Log In. */
.mmg-login-wrapper p.mmg-create-account-callout {
    margin-top: 16px !important; /* .mmg-login-wrapper p above already forces
       margin:0 0 10px !important on every <p> here - this selector has to
       match that same specificity pattern (wrapper + element + class) to
       actually win, or the override above silently wins instead */
    margin-bottom: 10px !important;
    padding: 12px 14px;
    background: #eef4ff;
    border: 1px solid #c9dbfb;
    border-radius: 6px;
    font-size: 1.05em;
    text-align: center;
}

.mmg-create-account-callout a {
    font-weight: 700;
}

.mmg-wrapper {
    display: flex;
    gap: 24px;
    font-family: -apple-system, Arial, sans-serif;
    font-size: 16px;
    flex-wrap: wrap;
    max-width: 100%;
}

.mmg-left {
    flex: 1 1 280px;
    max-width: 320px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 16px;
    background: #fafafa;
}

.mmg-right {
    flex: 2 1 320px;
    min-width: 0; /* allows content to shrink instead of overflowing */
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Small header box (vehicle name/VIN/intro) – styled to match the left
   sidebar (same border, radius, and background), separate from the
   main tool window below it. Desktop only – the same header also
   renders inside the mobile sidebar (already bordered on its own), so
   giving it a second border there would look like a box within a box. */
.mmg-vehicle-header-box {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 16px 20px;
    background: #fafafa;
}

#mmg_vehicle_header_mobile .mmg-vehicle-header-box {
    border: none;
    border-radius: 0;
    padding: 0;
    background: transparent;
}

/* Main tool window – its own separate bordered box, distinct from the
   header box above it. */
#mmg_tab_content {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    background: #fff;
}

.mmg-add-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.mmg-add-row input {
    flex: 1 1 140px;
    min-width: 0;
    padding: 8px;
}

.mmg-add-row button {
    flex: 0 0 auto;
    height: 40px; /* was 44px - matches the VIN input's height (set globally
       via .mmg-wrapper input[type="text"] { height: 40px !important; }
       when the form fields were tightened), so the two sit flush instead
       of the button standing 4px taller than the field beside it. Also
       brings it in line with the plugin's other plain black buttons,
       which get their height from the global button{min-height:38px}
       rule rather than a custom explicit height like this one had. */
    padding: 0 14px;
    box-sizing: border-box;
}

.mmg-vehicle-card {
    position: relative; /* anchors the Remove (X) button to the card's own
       corner rather than the page, and lets it float independent of the
       card's other content */
    padding: 10px 40px 10px 12px; /* right padding reserves room so the
       vehicle title/VIN text never runs underneath the Remove button */
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-bottom: 8px;
    background: #fff;
    transition: background 0.15s ease;
    overflow-wrap: break-word;
}

.mmg-vehicle-card:hover {
    background: #f0f0f0;
}

/* Small, square, out-of-the-way icon button - Remove is a rare action
   (only really used when a car is sold), so it doesn't need the visual
   weight of a full labeled button competing with Select below.
   Deliberately NOT setting background/color/border here - every other
   plain button in the plugin (Add Vehicle, Add Entry, etc.) is unstyled
   and just inherits the site's own default black-background/white-text
   button look, so leaving this one unstyled too keeps it visually
   consistent with the rest of the plugin rather than introducing a
   separate look. Only the hover state gets custom color, to signal
   what the action does. */
.mmg-remove-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px !important; /* was missing !important, unlike every other
       property on this button - the site's own Additional CSS apparently
       has a conflicting height rule with !important that a plain value
       here can't beat, which is what stretched this into a tall rectangle
       on mobile Safari specifically (desktop happened not to expose it) */
    height: 26px !important;
    min-height: auto !important; /* overrides the site-wide button{min-height:38px} rule -
                          that's for comfortable tap targets on primary actions,
                          not appropriate for this intentionally small, rarely-used one */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.mmg-remove-btn:hover {
    background: #fde8e8 !important;
    color: #b00020 !important;
    border: 1px solid #b00020 !important; /* full shorthand, not just border-color - the site's default button may have no border width/style at all to color, so border-color alone could be a no-op */
}

/* Select, sized and positioned to match where/how Remove used to sit
   (small, left-aligned, under the vehicle info) rather than as a
   full-width bar - the info block above is already clickable, so this
   just needs to be a clear, compact affordance, not a large one.
   Same reasoning as .mmg-remove-btn above: no background/color/border
   set for the resting state, so it inherits the site's default black/
   white button look like everything else in the plugin. Only hover
   gets custom color. */
.mmg-vehicle-select-btn {
    display: inline-block !important;
    width: auto !important;
    min-height: auto !important;
    margin-top: 6px !important;
    padding: 4px 10px !important;
    font-size: 0.8em !important;
    font-weight: 600 !important;
    text-align: center !important;
    cursor: pointer !important;
}

.mmg-vehicle-select-btn:hover {
    background: #e6f7ec !important; /* light green, same shade/weight as the light red .mmg-remove-btn:hover uses (#fde8e8) */
    color: #16794c !important;
    border: 1px solid #16794c !important; /* full shorthand, not just border-color - same reasoning as .mmg-remove-btn's hover border above */
}

.mmg-field-label {
    display: block;
    font-size: 13px;
    color: #555;
    font-weight: 600;
    margin: 0 0 4px !important;
    line-height: 1.3 !important;
}

/* Applied to a specific field when it's missing on submit, instead of
   just a generic alert – shows the person exactly which field needs
   attention. Cleared automatically the next time they try submitting.
   Selector is deliberately specific (matching input/select context, not
   just the bare class) so it reliably wins over the earlier forced
   border rule on inputs, which has similar specificity. */
.mmg-wrapper input.mmg-field-error,
.mmg-wrapper select.mmg-field-error,
.mmg-wrapper textarea.mmg-field-error,
.mmg-login-wrapper input.mmg-field-error {
    border-color: #d33 !important;
    box-shadow: 0 0 0 1px #d33 !important;
}

.mmg-muted {
    color: #777;
    font-size: 0.9em;
}

/* Plain paragraphs (intro text, instructions, etc.) inside the plugin's
   content areas had no explicit margin, so they fell back to the
   browser's own default (~16px top and bottom) – a real contributor
   to the oversized header-to-field gaps. Tightened here, consistently,
   rather than left to whatever the browser happens to default to. */
.mmg-right p,
#mmg_tab_content p,
#mmg_vehicle_header_desktop p,
#mmg_vehicle_header_mobile p,
.mmg-login-wrapper p {
    margin: 0 0 10px !important;
    line-height: 1.5 !important;
}

/* Gap between the "Add" button and the list of entries below it,
   across every tab that uses this pattern (Service, Mods, Costs, Fuel,
   Insurance, To Do, Inspiration) – without this, the button sits flush
   against the newest entry, looking like it's part of it. */
.mmg-list {
    margin-top: 12px;
}

.mmg-tag {
    display: inline-block;
    background: #eef2ff;
    color: #1d4ed8;
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 0.8em;
    font-weight: 600;
}

.mmg-paint-code-value {
    font-weight: 700;
    color: #0080C5;
}

.mmg-cost-total {
    margin-top: 14px;
    padding: 12px;
    background: #f5f8ff;
    color: #0080C5;
    border-radius: 6px;
    font-weight: 700;
    font-size: 1.1em;
    text-align: right;
}

.mmg-stat-box {
    flex: 1 1 100px;
    background: #eef2ff;
    border-radius: 6px;
    padding: 10px;
    text-align: center;
}

.mmg-stat-value {
    font-size: 1.3em;
    font-weight: 700;
    color: #1d4ed8;
}

.mmg-stat-label {
    font-size: 0.8em;
    color: #555;
    margin-top: 2px;
}

.mmg-toggle-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.mmg-toggle-row .mmg-tab {
    flex: 1;
    text-align: center;
}

.mmg-specs-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 14px;
    border: none !important;
}

.mmg-paint-picker {
    display: flex;
    gap: 10px;
    margin: 12px 0;
    flex-wrap: wrap;
    align-items: stretch;
}

.mmg-paint-picker select {
    flex: 0 1 220px;
    width: 220px;
    max-width: 100%;
    min-width: 0;
    padding: 8px;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mmg-paint-picker button {
    flex: 0 0 auto;
    padding: 8px 16px;
    white-space: nowrap;
}

/* Alternating row stripes instead of visible grid borders – matches
   the soft, borderless background style used everywhere else in the
   plugin, rather than reading as a raw data table. */
.mmg-specs-table tr {
    border: none !important;
}

.mmg-specs-table tr:nth-child(even) {
    background: #f5f8ff;
}

.mmg-specs-table td {
    border: none !important;
    padding: 10px 12px;
    vertical-align: top;
    word-break: break-word;
}

.mmg-specs-label {
    color: #555;
    font-weight: 600;
    width: 45%;
}

@media (max-width: 480px) {
    .mmg-specs-table, .mmg-specs-table tbody, .mmg-specs-table tr, .mmg-specs-table td {
        display: block;
        width: 100%;
    }
    .mmg-specs-table tr {
        padding: 6px 0;
    }
    .mmg-specs-label {
        padding-bottom: 0;
        color: #0080C5;
    }
}

.mmg-tabs {
    display: flex;
    gap: 8px;
    margin: 16px 0;
    flex-wrap: wrap;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}

.mmg-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0; /* overrides the generic button min-height (38px) below - forcing extra empty space into these compact buttons is what actually caused the misalignment, not something flexbox needed to fix */
    padding: 6px 14px;
    border: 1px solid #ccc;
    border-radius: 20px;
    background: #f5f5f5;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

/* Firefox adds its own small internal padding/border to buttons
   (::-moz-focus-inner) independent of anything set above, which can
   throw off centering in a way that's specific to that browser. */
.mmg-tab::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/* Emoji glyphs are not metrically designed to align with a text font's
   baseline the way regular characters are – their internal rendering
   box has its own, inconsistent vertical offset depending on the
   platform's emoji font (Apple Color Emoji, Segoe UI Emoji, Noto Color
   Emoji, etc.). Flexbox correctly centers the button's text now, but
   can't independently correct for an emoji glyph rendering high or low
   within its own box – that requires nudging the emoji specifically,
   isolated from the text next to it. */
.mmg-tab-icon {
    position: relative;
    margin-right: 6px; /* Fixed, guaranteed gap to the label text. Previously
       this gap came from a single literal space character in the markup,
       but each emoji glyph's own colored artwork bleeds to a different
       distance from its character cell's right edge (a building or a
       wrench fills its box differently than a lightbulb does), so the
       same literal space produced a visibly different gap per icon - some
       nearly touching the text, some with room to spare. A margin on the
       icon itself is measured from the glyph's box edge, not its ink, so
       the visible gap is now identical for every icon regardless of how
       tightly each one's artwork fills its cell. */
}

/* Individual per-emoji vertical offsets – a single shared nudge could
   only ever be coincidentally right for a subset of these, since each
   emoji glyph has its own internal vertical position within the font,
   independent of the others. Starting values based on the visible
   offset direction/amount for each icon; may need a further small
   adjustment per icon after seeing it rendered live. */
/* Individual per-emoji vertical offsets. Previous rounds were tuned by
   eye, which turned out not to be precise enough - re-measured this round
   by pixel-analyzing the v4.15.6 screenshot directly (comparing each
   icon's own vertical center against its label's cap-height center,
   column by column) instead of eyeballing it. That measurement found
   a consistent problem across nearly every icon: they were rendering
   low, not just a couple of stragglers - from about 1px low up to
   ~4px low depending on the icon. Values below are corrected accordingly. */
.mmg-tab-icon[data-tab="specs"]         { top: -1px; }
.mmg-tab-icon[data-tab="wiki"]          { top: -2px; }
.mmg-tab-icon[data-tab="brandhistory"]  { top: -2px; }
.mmg-tab-icon[data-tab="manual"]        { top: -2px; }
.mmg-tab-icon[data-tab="paint"]         { top: -1px; }
.mmg-tab-icon[data-tab="recalls"]       { top: -2px; }
.mmg-tab-icon[data-tab="insurance"]     { top: -2px; }
.mmg-tab-icon[data-tab="ownership"]     { top: -2px; }
.mmg-tab-icon[data-tab="service"]       { top: -2px; }
.mmg-tab-icon[data-tab="mods"]          { top: -1px; }
.mmg-tab-icon[data-tab="tires"]         { top: -2px; }
.mmg-tab-icon[data-tab="fuel"]          { top: -2px; }
.mmg-tab-icon[data-tab="costs"]         { top: -2px; }
.mmg-tab-icon[data-tab="report"]        { top: -2px; }
.mmg-tab-icon[data-tab="notes"]         { top: -1px; }
.mmg-tab-icon[data-tab="todo"]          { top: -1px; }
.mmg-tab-icon[data-tab="inspiration"]   { top: -2px; }

.mmg-tab.active {
    background: #0080C5;
    color: #fff;
    border-color: #0080C5;
}

.mmg-tab:hover:not(.active) {
    border-color: #0080C5;
    color: #0080C5;
}

/* Desktop: the tab list now sits at the top of the left sidebar,
   above "My Vehicles" – visible the instant a vehicle is selected,
   with no scrolling past the vehicle list required. Compact styling
   (below) fits roughly two tabs per row within that narrow column. */
#mmg_top_tabs {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #ddd;
}

#mmg_top_tabs:empty {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* Compact tab buttons, back to the narrow-sidebar sizing that worked
   well before – roughly two per row within the ~280px sidebar column,
   rather than the wider full-page-width version this briefly became. */
#mmg_top_tabs .mmg-tabs {
    gap: 6px;
    margin: 0;
    border-bottom: none;
    padding-bottom: 0;
}

#mmg_top_tabs .mmg-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    padding: 6px 8px;
    flex: 1 1 46%;
    white-space: normal;
    line-height: 1.3;
    border-radius: 6px;
    text-align: center;
}

/* Forces a specific tab onto its own full-width row regardless of where it
   falls in the sequence, rather than relying on it coincidentally landing
   on an odd position after a run of paired tabs (the mechanism the other
   full-width tabs, like Paint Code, happen to rely on - fine for those
   since their position is fixed, but not something to lean on for tabs
   whose neighbors just changed). */
#mmg_top_tabs .mmg-tab-wide {
    flex-basis: 100%;
}

/* Mobile dropdown selector – hidden on desktop by default, shown only
   at narrow widths (see media query below), where the two-per-row
   sidebar list would be too cramped to stay readable. */
.mmg-tab-select-wrapper {
    display: none;
}

.mmg-tab-select-wrapper .mmg-tab-select {
    width: 100%;
    font-size: 18px !important;
}

/* Vehicle header (name/VIN/intro) renders into two placeholders – one
   in the left sidebar (shown on mobile, above the dropdown, so the
   stacking order reads sensibly), one in the right column (shown on
   desktop, above the tab content, matching where it originally lived
   before tabs moved into the sidebar). Only one is ever visible at a
   time; CSS below decides which, based on screen width. */
#mmg_vehicle_header_mobile {
    display: none;
}

/* Small, compact, centered group label above each tab cluster – does
   double duty as both the visual grouping cue AND the line-break
   mechanism (flex-basis:100% forces every tab after it onto a new
   row), replacing the old plain divider line entirely rather than
   sitting alongside it. */
.mmg-tab-group-label {
    flex-basis: 100%;
    width: 100%;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #999;
    margin: 10px 0 4px;
}

.mmg-tabs > .mmg-tab-group-label:first-child {
    margin-top: 0;
}

.mmg-recall-item, .mmg-note-item {
    padding: 10px 36px 10px 12px; /* right padding clears the delete button */
    margin-bottom: 10px;
    border-radius: 4px;
    position: relative;
    overflow-wrap: break-word;
}

/* Recall alerts stay red/warning-colored – a genuine safety notice,
   distinct from the general "saved info" boxes below. */
.mmg-recall-item {
    border-left: 3px solid #d33;
    background: #fff7f7;
}

/* Every other highlighted "saved info" box (Tire Info, Ownership
   Snapshot, Paint Code, Model History, Owner's Manual, etc.) now uses
   one consistent flat light-blue background, no left-edge accent bar –
   standardizing what had drifted into a mix of blue-with-accent-stripe
   and plain gray boxes across different tabs. */
.mmg-note-item {
    background: #f5f8ff;
}

/* Collapsible entries – used by every tab that can hold multiple saved
   items (Service Logbook, Mods, Costs, Fuel Economy, Insurance, To Do,
   Inspiration). Collapsed state always shows two lines (date/mileage,
   then the item itself) so a glance is enough to identify an entry
   before expanding it for full details. */
.mmg-entry {
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 8px;
    overflow: hidden;
    background: #fff;
}

.mmg-entry-header {
    padding: 10px 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mmg-entry-row1,
.mmg-entry-row2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

/* Groups the always-visible delete/action button with the expand
   chevron in the entry header, so entries can be deleted (or, for To
   Do, marked done) without needing to expand them first. */
.mmg-entry-row1 .mmg-delete-btn {
    position: static;
    flex-shrink: 0;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: #999 !important;
    font-size: 14px;
    line-height: 1;
    padding: 2px;
    width: 32px;      /* matches .mmg-entry-chevron's width below so the two
                          glyphs share the same centered axis instead of just
                          sharing a right edge - relying on "flush right" was
                          only ever a coincidence of both glyphs happening to
                          be a similar width, and broke as soon as the
                          chevron's font-size changed relative to the X's. */
    text-align: center;
}

.mmg-entry-header:hover {
    background: #f7f9fc;
}

.mmg-entry-line1 {
    font-size: 0.8em;
    color: #777;
}

.mmg-entry-line2 {
    font-weight: 600;
    margin-top: 2px;
}

.mmg-entry-chevron {
    flex-shrink: 0;
    transition: transform 0.15s;
    color: #555;
    font-size: 30px; /* 20px + 50% per request */
    line-height: 1;
    width: 32px;     /* same fixed width as .mmg-entry-row1 .mmg-delete-btn,
                         see note there - keeps the chevron centered directly
                         beneath the X regardless of glyph width/browser/device */
    text-align: center;
}

.mmg-entry.expanded .mmg-entry-chevron {
    transform: rotate(180deg);
}

.mmg-entry-details {
    display: none;
    padding: 0 12px 12px;
    border-top: 1px solid #eee;
    font-size: 0.9em;
}

.mmg-entry.expanded .mmg-entry-details {
    display: block;
    padding-top: 10px;
}

.mmg-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 14px;
}

.mmg-form-row {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.mmg-form-row input,
.mmg-form-row select {
    padding: 8px;
    flex: 1 1 140px;
    min-width: 0;
}

textarea#mmg_service_desc,
textarea#mmg_tire_notes,
textarea#mmg_note_text,
textarea#mmg_mod_desc {
    width: 100%;
    padding: 8px;
    margin-bottom: 8px;
    box-sizing: border-box;
    resize: vertical;
    font-family: inherit;
}

button {
    min-height: 38px; /* comfortable tap target on touch screens */
}

.mmg-delete-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    font-size: 1em;
    padding: 4px 8px;
    min-height: auto;
}

.mmg-delete-btn:hover {
    color: #d33;
}

#mmg_message .mmg-error {
    color: #b00020;
    font-size: 0.9em;
    margin-bottom: 8px;
}

#mmg_message .mmg-success {
    color: #16794c;
    font-size: 0.9em;
    margin-bottom: 8px;
}

/* The garage-full upsell button - previously plain/unstyled, which had two
   problems: no margin below it, so it sat flush against the vehicle card
   list right underneath (same "missing breathing room" issue fixed on
   other buttons before); and, being the plugin's longest button label by
   far ("Add Another Garage Space – $4.99"), the default padding made it
   feel oversized. Tightened padding/font-size to suit that much text
   rather than leaving it sized like a short-label button. */
.mmg-garage-full-btn {
    display: block;
    width: 100%;
    margin-bottom: 12px; /* matches .mmg-add-row's margin-bottom, the same spacing convention used elsewhere above the vehicle card list */
    padding: 8px 14px;
    font-size: 0.9em;
    line-height: 1.3;
    text-align: center;
    box-sizing: border-box;
}

.mmg-report-toolbar {
    text-align: right;
    margin-bottom: 12px;
}

.mmg-report-stats {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 16px 0;
}

.mmg-report-stats .mmg-stat-box {
    flex: 1 1 100px;
}

.mmg-report-row {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    font-size: 0.9em;
}

.mmg-report-footer {
    margin-top: 20px;
    font-size: 0.8em;
    text-align: center;
}

/* Print-optimized view: hide everything except the report itself.
   IMPORTANT: this has to use visibility, not display. display:none on an
   ancestor removes its whole subtree from rendering - a descendant's own
   display:revert can't undo that, because the ancestor is gone from the
   render tree entirely. That's what broke v4.15.8 (totally blank page):
   .mmg-report sits nested inside .mmg-wrapper > .mmg-right >
   #mmg_tab_content, all of which matched "body *" and got display:none,
   so .mmg-report's own revert had nothing left to attach to. visibility
   doesn't have that problem - it's inherited, but a descendant CAN
   override it back to visible even when an ancestor set it hidden, which
   is why this needs to be the mechanism for "hide everything, show only
   this nested element" regardless of what markup surrounds it (including
   theme wrapper divs this plugin doesn't control).

   The blank-page-COUNT problem (the original bug this was meant to fix)
   is separate: visibility:hidden leaves layout space reserved, so the
   full page height (sidebar, tabs, vehicle list, news feed - all still
   occupying space even though invisible) is what got paginated. Rather
   than hiding via visibility alone, explicitly collapse the height of
   the specific large siblings this plugin controls - the account bar,
   the vehicle sidebar (garage list + full tab menu), and the news feed -
   since those are the actual source of most of the extra height, not
   .mmg-report's own ancestors (which must be left at their natural
   height, or .mmg-report would be clipped along with them). */
@media print {
    body * {
        visibility: hidden;
    }
    .mmg-report, .mmg-report * {
        visibility: visible;
    }
    .mmg-report {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
    .mmg-report-toolbar {
        display: none;
    }
    .mmg-account-bar,
    .mmg-left,
    #mmg_vehicle_header_desktop,
    #mmg_news_feed {
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }
}

/* Tablet and narrow desktop: let the two panels stack sooner */
@media (max-width: 900px) {
    .mmg-left {
        max-width: 100%;
        flex: 1 1 100%;
    }
    .mmg-right {
        flex: 1 1 100%;
    }
    /* The header swap happens at this breakpoint specifically – it's
       where the two columns actually stack into one. Using a narrower
       breakpoint here would leave a gap (tablet widths) where columns
       are already stacked but still show the desktop header placement,
       reproducing the same ordering bug this was built to fix. */
    #mmg_vehicle_header_mobile {
        display: block;
    }
    #mmg_vehicle_header_desktop {
        display: none;
    }
    /* The sidebar tab list only makes sense with the two columns side
       by side; once they stack on mobile, the dropdown (further down
       the sidebar, after the vehicle list and header) takes over. */
    #mmg_top_tabs {
        display: none;
    }
}

/* Phones: tighten spacing, stack form rows, full-width buttons and inputs */
@media (max-width: 480px) {
    .mmg-wrapper {
        gap: 14px;
    }
    .mmg-left, .mmg-right {
        padding: 12px;
    }
    .mmg-left .mmg-tabs {
        display: none;
    }
    .mmg-tab-select-wrapper {
        display: block;
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid #ddd;
    }
    .mmg-add-row {
        flex-direction: column;
    }
    .mmg-add-row input,
    .mmg-add-row button {
        width: 100%;
    }
    .mmg-form-row {
        flex-direction: column;
    }
    /* The paired-field wrapper divs (Date+Mileage, Service/Part+Date,
       etc.) use inline flex:1 1 140px, meant as a WIDTH basis when
       sitting side by side. Once the row above switches to column
       direction, flex-basis controls height instead of width, forcing
       each wrapper to a 140px minimum height and creating a large gap
       between every paired field. Resetting it back to auto here fixes
       that without touching the desktop side-by-side layout at all. */
    .mmg-form-row > div {
        flex-basis: auto !important;
    }
    .mmg-form-row input,
    .mmg-form-row select {
        width: 100%;
    }
    .mmg-paint-picker {
        flex-direction: column;
    }
    .mmg-paint-picker select,
    .mmg-paint-picker button {
        width: 100%;
    }
    .mmg-tabs {
        gap: 6px;
    }
    .mmg-tab {
        flex: 1 1 auto;
        text-align: center;
        padding: 8px 10px;
        font-size: 0.85em;
    }
    .mmg-recall-item, .mmg-note-item {
        padding-right: 32px;
    }
    button {
        width: 100%;
    }
    .mmg-remove-btn,
    .mmg-delete-btn,
    .mmg-vehicle-select-btn,
    .mmg-password-toggle {
        width: auto; /* keep these compact, not full-width */
    }
}