/*
 * Fleet Manager WP — Public Stylesheet (Phase 4 — complete rewrite)
 *
 * DESIGN PHILOSOPHY:
 * Layout, spacing, and plugin-specific treatments only.
 * font-family, heading sizes, body color = inherited from theme.
 * Intentional mono overrides: VIN value, license plate number.
 * UI chrome (labels, badges, buttons) = --fm-ui-font (system sans).
 *
 * All rules scoped under .fm-* to prevent theme conflicts.
 * Mobile-first: base = small screen, @media adds desktop layout.
 */

/*
 * =============================================================================
 * CSS CUSTOM PROPERTIES (DESIGN TOKENS)
 * =============================================================================
 * All plugin colors, spacing, and type values defined here as CSS variables.
 * These are declared on :root so they cascade everywhere.
 *
 * HOW TO CUSTOMISE:
 * Theme developers can override any of these in their own stylesheet without
 * touching plugin files. Example:
 *   :root { --fm-sidebar-width: 340px; --fm-radius: 8px; }
 *
 * STATUS COLOR SYSTEM:
 * Each vehicle status has four tokens: bg (background), bd (border),
 * pip (the dot indicator color), text (text color). They are used by
 * .fm-status-row--{slug} and .fm-status-pip--{slug} classes.
 * =============================================================================
 */
/* ---- Custom Properties ---- */
:root {
    --fm-sidebar-width:   300px;
    --fm-section-gap:     6px;
    --fm-border:          #e5e7eb;
    --fm-border-subtle:   #f3f4f6;
    --fm-bg-alt:          #f9fafb;
    --fm-radius:          4px;
    --fm-radius-sm:       4px;
    --fm-ui-font:         -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --fm-mono:            'Courier New', Courier, monospace;
    --fm-status-active-bg:   #f0fdf4; --fm-status-active-bd:   #bbf7d0;
    --fm-status-active-pip:  #22c55e; --fm-status-active-text: #166534;
    --fm-status-storage-bg:  #f9fafb; --fm-status-storage-bd:  #e5e7eb;
    --fm-status-storage-pip: #6b7280; --fm-status-storage-text:#374151;
    --fm-status-repair-bg:   #fffbeb; --fm-status-repair-bd:   #fde68a;
    --fm-status-repair-pip:  #f59e0b; --fm-status-repair-text: #92400e;
    --fm-status-sold-bg:     #fef2f2; --fm-status-sold-bd:     #fecaca;
    --fm-status-sold-pip:    #ef4444; --fm-status-sold-text:   #991b1b;
    --fm-warn-bg:#fffbeb; --fm-warn-bd:#fde68a; --fm-warn-text:#92400e;
    --fm-danger-bg:#fef2f2; --fm-danger-bd:#fecaca; --fm-danger-text:#991b1b;
    --fm-ok-text:#16a34a;
}

/*
 * SCOPED BOX-MODEL RESET
 * Applies border-box sizing only to our own components (.fm-single, .fm-archive).
 * Avoids touching the theme's global box-model or third-party plugin elements.
 */
/* ---- Scoped reset ---- */
.fm-single *, .fm-single *::before, .fm-single *::after,
.fm-archive *, .fm-archive *::before, .fm-archive *::after { box-sizing: border-box; }
.fm-single img, .fm-archive img { max-width: 100%; height: auto; }

/*
 * =============================================================================
 * HERO IMAGE
 * =============================================================================
 * Full-width cinematic header photo using the WP featured image.
 * aspect-ratio: 16/9 keeps the hero proportional regardless of image size.
 * object-fit: cover prevents distortion on portrait photos.
 * .fm-hero__badges: status/type labels overlaid on the hero bottom-left.
 * .fm-hero__count: "1 / 6" gallery counter, bottom-right.
 * =============================================================================
 */
/* ===== HERO ===== */
.fm-hero { position: relative; background: #111; line-height: 0; overflow: hidden; }
.fm-hero__img-wrap { width: 100%; line-height: 0; }
.fm-hero__img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.fm-hero__badges { position: absolute; bottom: 12px; left: 12px; display: flex; flex-wrap: wrap; gap: 6px; line-height: 1; }
.fm-hero__count { position: absolute; bottom: 12px; right: 12px; background: rgba(0,0,0,.55); color: rgba(255,255,255,.88); font-size: 11px; font-weight: 600; font-family: var(--fm-ui-font); padding: 4px 10px; border-radius: var(--fm-radius-sm); border: 1px solid rgba(255,255,255,.15); letter-spacing: .3px; line-height: 1; }

/*
 * =============================================================================
 * STATUS BADGES
 * =============================================================================
 * Small pill-shaped labels used in two places:
 *   1. Overlaid on the hero image (hero__badges)
 *   2. Inline in lists and cards
 * The --{slug} modifier maps directly to taxonomy term slugs, so a term
 * with slug "in-storage" picks up .fm-status-badge--in-storage automatically.
 * New custom statuses without a matching class get no background color.
 * =============================================================================
 */
/* ===== STATUS BADGES =====
 * Soft background + border + pip-dot style.
 * Mirrors the .fm-status-row--{slug} design on the vehicle detail page
 * so Active/Storage/Repair/Sold look identical everywhere.
 * Hero overlay badges (type, location) keep a translucent treatment since
 * they sit on top of a photo and need contrast regardless of image tone.
 * ===== */
.fm-status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--fm-radius-sm); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; line-height: 1.4; font-family: var(--fm-ui-font); border: 1px solid transparent; }

/* Pip dot shared by all status badges */
.fm-status-badge--active::before,
.fm-status-badge--storage::before, .fm-status-badge--in-storage::before,
.fm-status-badge--repair::before,  .fm-status-badge--in-repair::before,
.fm-status-badge--sold::before,    .fm-status-badge--for-sale::before
{ content:''; display:inline-block; width:6px; height:6px; border-radius:50%; flex-shrink:0; }

.fm-status-badge--active      { background: var(--fm-status-active-bg);  border-color: var(--fm-status-active-bd);  color: var(--fm-status-active-text); }
.fm-status-badge--active::before { background: var(--fm-status-active-pip); }

.fm-status-badge--storage     { background: var(--fm-status-storage-bg); border-color: var(--fm-status-storage-bd); color: var(--fm-status-storage-text); }
.fm-status-badge--storage::before { background: var(--fm-status-storage-pip); }
.fm-status-badge--in-storage  { background: var(--fm-status-storage-bg); border-color: var(--fm-status-storage-bd); color: var(--fm-status-storage-text); }
.fm-status-badge--in-storage::before { background: var(--fm-status-storage-pip); }

.fm-status-badge--repair      { background: var(--fm-status-repair-bg);  border-color: var(--fm-status-repair-bd);  color: var(--fm-status-repair-text); }
.fm-status-badge--repair::before { background: var(--fm-status-repair-pip); }
.fm-status-badge--in-repair   { background: var(--fm-status-repair-bg);  border-color: var(--fm-status-repair-bd);  color: var(--fm-status-repair-text); }
.fm-status-badge--in-repair::before { background: var(--fm-status-repair-pip); }

.fm-status-badge--sold        { background: var(--fm-status-sold-bg);    border-color: var(--fm-status-sold-bd);    color: var(--fm-status-sold-text); }
.fm-status-badge--sold::before { background: var(--fm-status-sold-pip); }

.fm-status-badge--for-sale    { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.fm-status-badge--for-sale::before { background: #2563eb; }

/* Hero overlay: translucent — no pip dot, light text on dark photo */
.fm-status-badge--type     { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.3); backdrop-filter: blur(4px); }
.fm-status-badge--location { background: rgba(0,0,0,.5); color: rgba(255,255,255,.9); border-color: rgba(255,255,255,.2); }
.fm-status-badge--type::before, .fm-status-badge--location::before { display: none; }

/*
 * =============================================================================
 * GALLERY STRIP
 * =============================================================================
 * Horizontal scrolling thumbnail row below the hero.
 * JavaScript in fm-public.js handles click-to-swap (replaces hero image src).
 * .is-active marks the currently displayed thumbnail with a blue outline.
 * scrollbar-width: none + -webkit-overflow-scrolling: touch = native iOS feel.
 * =============================================================================
 */
/* ===== GALLERY STRIP ===== */
.fm-gallery-strip { display: flex; gap: 3px; background: #0d0d0d; padding: 3px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; line-height: 0; }
.fm-gallery-strip::-webkit-scrollbar { display: none; }
.fm-gallery-thumb { flex-shrink: 0; width: 88px; height: 60px; overflow: hidden; cursor: pointer; opacity: .65; transition: opacity .15s; border-radius: 4px; border: none; padding: 0; background: #1a1a1a; display: block; line-height: 0; }
.fm-gallery-thumb:hover { opacity: .88; }
.fm-gallery-thumb:focus { outline: 2px solid #2563eb; outline-offset: 1px; }
.fm-gallery-thumb.is-active { opacity: 1; outline: 2px solid #2563eb; outline-offset: -2px; }
.fm-gallery-thumb__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fm-gallery-thumb--more { display: flex; align-items: center; justify-content: center; font-size: 11px; color: #888; font-family: var(--fm-ui-font); line-height: 1.3; text-align: center; cursor: default; opacity: 1; }

/*
 * =============================================================================
 * VEHICLE HEADER
 * =============================================================================
 * White strip below the gallery containing: title, subtitle meta, admin actions.
 * .fm-admin-actions: Edit/Print buttons, visible only to admins (PHP-gated).
 * .fm-btn variants: shared button styles used across the plugin front end.
 * =============================================================================
 */
/* ===== VEHICLE HEADER ===== */
.fm-vehicle-header { padding: 20px 24px 0; background: #fff; border-bottom: 1px solid var(--fm-border); }
.fm-vehicle-header__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 10px; flex-wrap: wrap; }
.fm-vehicle-header__titles { flex: 1; min-width: 0; }
.fm-vehicle-header__meta { font-size: 13px; color: #6b7280; font-family: var(--fm-ui-font); margin-top: 3px; margin-bottom: 0; }
.fm-admin-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: flex-start; }

/* Buttons */
.fm-single .fm-btn,
.fm-archive .fm-btn {
    display:            inline-flex !important;
    align-items:        center !important;
    gap:                5px !important;
    padding:            6px 14px !important;
    border-radius:      6px !important;
    font-family:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size:          11px !important;
    font-weight:        700 !important;
    letter-spacing:     .04em !important;
    text-transform:     uppercase !important;
    cursor:             pointer !important;
    border-width:       1.5px !important;
    border-style:       solid !important;
    text-decoration:    none !important;
    white-space:        nowrap !important;
    line-height:        1.4 !important;
    box-sizing:         border-box !important;
    appearance:         none !important;
    -webkit-appearance: none !important;
    transition:         background .12s ease, border-color .12s ease, color .12s ease !important;
}
.fm-single .fm-btn--outline { background: #fff !important; border-color: #d1d5db !important; color: #374151 !important; }
.fm-single .fm-btn--outline:hover { border-color: #1a1a1a !important; color: #1a1a1a !important; text-decoration: none !important; }
.fm-single .fm-btn--dark { background: #1a1a1a !important; border-color: #1a1a1a !important; color: #fff !important; }
.fm-single .fm-btn--dark:hover { background: #333 !important; color: #fff !important; text-decoration: none !important; }

/*
 * =============================================================================
 * QUICK FACTS STRIP
 * =============================================================================
 * Horizontally scrolling row of key stats (Year, Engine, Trans, Fuel, etc.)
 * displayed just below the vehicle title.
 * Items are generated in PHP from available meta values — only populated
 * fields appear, so the strip is always dense and useful.
 * margin: 0 -24px bleeds to the edges of the header padding.
 * =============================================================================
 */
/* ===== QUICK FACTS ===== */
.fm-quickfacts { display: flex; overflow-x: auto; scrollbar-width: none; margin: 0 -24px; border-top: 1px solid var(--fm-border-subtle); -webkit-overflow-scrolling: touch; }
.fm-quickfacts::-webkit-scrollbar { display: none; }
.fm-quickfact { flex-shrink: 0; padding: 10px 18px; border-right: 1px solid var(--fm-border-subtle); min-width: 96px; }
.fm-quickfact:last-child { border-right: none; }
.fm-quickfact__label { display: block; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: #9ca3af; margin-bottom: 2px; font-family: var(--fm-ui-font); }
.fm-quickfact__value { display: block; font-size: 14px; font-weight: 700; white-space: nowrap; }

/*
 * =============================================================================
 * VEHICLE TAGS
 * =============================================================================
 * Row of freeform taxonomy tags (fm_tag) below the quick facts strip.
 * Each tag links to its taxonomy archive page for filtered browsing.
 * =============================================================================
 */
/* ===== TAGS ===== */
/* .fm-tags-row — full-width strip moved to sidebar; kept for reference
.fm-tags-row { padding: 12px 24px; display: flex; flex-wrap: wrap; gap: 6px; background: #fff; border-bottom: 1px solid var(--fm-border); } */
.fm-tag { display: inline-block; padding: 3px 10px; background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 4px; font-size: 11px; font-weight: 600; color: #4b5563; text-decoration: none; font-family: var(--fm-ui-font); letter-spacing: .3px; transition: background .12s, color .12s, border-color .12s; }
.fm-tag:hover { background: #1a1a1a; color: #fff; border-color: #1a1a1a; text-decoration: none; }
/* Sidebar tag list — wrapping flex row of .fm-tag pills */
.fm-sb-tag-list { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; }

/*
 * =============================================================================
 * TWO-COLUMN LAYOUT
 * =============================================================================
 * Mobile-first: single column by default, side-by-side at 900px+.
 * Main column (content): fluid, takes remaining space.
 * Sidebar: fixed 300px wide (--fm-sidebar-width), scrolls with page.
 * The --fm-section-gap background color creates visible gutters between
 * sections without needing margin (avoids margin-collapse issues).
 * =============================================================================
 */
/* ===== LAYOUT ===== */
.fm-layout { display: grid; grid-template-columns: 1fr; gap: 0; background: #f4f4f2; }
@media (min-width: 900px) { .fm-layout { grid-template-columns: 1fr var(--fm-sidebar-width); } }
.fm-main { min-width: 0; }
.fm-sidebar { background: #fafafa; border-top: var(--fm-section-gap) solid #e5e7eb; }
@media (min-width: 900px) { .fm-sidebar { border-top: none; border-left: 1px solid var(--fm-border); } }

/*
 * =============================================================================
 * CONTENT SECTIONS
 * =============================================================================
 * Each major content block (Description, Identity, Mechanical, etc.) is
 * wrapped in .fm-section. White background + bottom margin creates a
 * card-stack appearance against the grey --fm-section-gap background.
 * .fm-section__heading: underlined heading with consistent spacing.
 * =============================================================================
 */
/* ===== SECTIONS ===== */
.fm-section { background: #fff; padding: 22px 24px; margin-bottom: var(--fm-section-gap); }
.fm-section:last-child { margin-bottom: 0; }
.fm-section__heading { padding-bottom: 10px; margin-bottom: 16px; border-bottom: 1px solid var(--fm-border); }

/*
 * DESCRIPTION SECTION
 * max-width: 68ch limits line length for comfortable reading (~680px at 10px).
 * Content can contain HTML from the rich editor (wp_kses_post sanitized).
 */
/* ===== DESCRIPTION ===== */
.fm-description { max-width: 68ch; }
.fm-description p:last-child { margin-bottom: 0; }

/*
 * =============================================================================
 * VIN DISPLAY BLOCK
 * =============================================================================
 * Monospaced VIN string with a "Decode" link that opens the NHTSA modal.
 * font-family: var(--fm-mono) + letter-spacing: 2px makes individual
 * characters easy to verify against a physical VIN plate.
 * =============================================================================
 */
/* ===== VIN BLOCK ===== */
.fm-vin-block { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--fm-bg-alt); border: 1px solid var(--fm-border); border-radius: var(--fm-radius); margin-bottom: 16px; flex-wrap: wrap; }
.fm-vin-block__label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: #9ca3af; font-family: var(--fm-ui-font); flex-shrink: 0; }
.fm-vin-block__value { font-family: var(--fm-mono); font-size: 14px; font-weight: 600; letter-spacing: 2px; color: #111; flex: 1; word-break: break-all; }
.fm-vin-block__link { font-size: 11px; font-weight: 700; font-family: var(--fm-ui-font); color: #2563eb; text-decoration: none; border: 1px solid #bfdbfe; padding: 3px 9px; border-radius: var(--fm-radius-sm); white-space: nowrap; background: #eff6ff; transition: all .12s; letter-spacing: .3px; }
.fm-vin-block__link:hover { background: #2563eb; color: #fff; border-color: #2563eb; text-decoration: none; }

/*
 * LICENSE PLATE DISPLAY
 * Mimics a physical license plate: state abbreviation above the number.
 * Uses monospace font + wide letter-spacing to match plate typography.
 */
/* ===== PLATE ===== */
.fm-plate { display: inline-flex; flex-direction: column; align-items: center; padding: 4px 12px 5px; border: 2px solid #374151; border-radius: var(--fm-radius-sm); background: #fff; line-height: 1.15; }
.fm-plate__state { font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: #6b7280; font-family: var(--fm-ui-font); }
.fm-plate__number { font-family: var(--fm-mono); font-size: 15px; font-weight: 700; letter-spacing: 2px; color: #111; }

/*
 * =============================================================================
 * SPEC GRID (two-column key/value list)
 * =============================================================================
 * Used in Identity & Registration and Mechanical Specs sections.
 * Single column on small screens, two columns at 600px+.
 * Each row is a flex container: label left, value right.
 * .fm-date--soon / .fm-date--overdue: amber/red colouring for expiry warnings.
 * =============================================================================
 */
/* ===== SPEC GRID ===== */
.fm-spec-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 600px) { .fm-spec-grid { grid-template-columns: 1fr 1fr; gap: 0 32px; } }
.fm-spec-row { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--fm-border-subtle); gap: 12px; }
.fm-spec-row:last-child { border-bottom: none; }
.fm-spec-row__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #9ca3af; flex-shrink: 0; white-space: nowrap; font-family: var(--fm-ui-font); }
.fm-spec-row__value { font-size: 13px; font-weight: 500; text-align: right; }
.fm-date--soon    { color: #d97706; font-weight: 700; }
.fm-date--overdue { color: #dc2626; font-weight: 700; }

/*
 * =============================================================================
 * MAINTENANCE HISTORY TABLE
 * =============================================================================
 * Shared table style used for both maintenance records and modifications.
 * .fm-maint-type: small grey pill label for the service type name.
 * .fm-maint-note: italic note below the table from the most recent record.
 * =============================================================================
 */
/* ===== MAINTENANCE TABLE ===== */
.fm-maint-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fm-maint-table th { text-align: left; padding: 7px 10px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: #9ca3af; background: var(--fm-bg-alt); border-bottom: 1px solid var(--fm-border); font-family: var(--fm-ui-font); white-space: nowrap; }
.fm-maint-table td { padding: 9px 10px; border-bottom: 1px solid var(--fm-border-subtle); vertical-align: middle; }
.fm-maint-table tr:last-child td { border-bottom: none; }
.fm-maint-table tr:hover td { background: var(--fm-bg-alt); }
.fm-maint-type { display: inline-block; padding: 2px 8px; background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 4px; font-size: 11px; font-weight: 600; color: #374151; font-family: var(--fm-ui-font); white-space: nowrap; }
.fm-maint-note { margin-top: 12px; font-size: 13px; color: #6b7280; font-style: italic; border-top: 1px solid var(--fm-border-subtle); padding-top: 10px; }

/* ===== SIDEBAR ===== */
.fm-sb-section { padding: 16px 20px; border-bottom: 1px solid var(--fm-border); background: #fff; margin-bottom: var(--fm-section-gap); }
.fm-sb-section:last-child { margin-bottom: 0; border-bottom: none; }
.fm-sb-heading { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: #9ca3af; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--fm-border-subtle); font-family: var(--fm-ui-font); }
.fm-status-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--fm-radius); margin-bottom: 12px; }
.fm-status-row--active   { background: var(--fm-status-active-bg);  border: 1px solid var(--fm-status-active-bd); }
.fm-status-row--storage,
.fm-status-row--in-storage { background: var(--fm-status-storage-bg); border: 1px solid var(--fm-status-storage-bd); }
.fm-status-row--repair,
.fm-status-row--in-repair  { background: var(--fm-status-repair-bg);  border: 1px solid var(--fm-status-repair-bd); }
.fm-status-row--sold     { background: var(--fm-status-sold-bg);    border: 1px solid var(--fm-status-sold-bd); }
.fm-status-pip { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.fm-status-pip--active   { background: var(--fm-status-active-pip); }
.fm-status-pip--storage,
.fm-status-pip--in-storage { background: var(--fm-status-storage-pip); }
.fm-status-pip--repair,
.fm-status-pip--in-repair  { background: var(--fm-status-repair-pip); }
.fm-status-pip--sold     { background: var(--fm-status-sold-pip); }
.fm-status-text { font-size: 14px; font-weight: 600; }
.fm-location-block { font-size: 13px; line-height: 1.5; }
.fm-location-block__name { font-weight: 700; display: block; margin-bottom: 2px; }
.fm-location-block__addr { color: #6b7280; font-size: 12px; display: block; font-family: var(--fm-ui-font); }
.fm-reminder { padding: 9px 11px; border-radius: var(--fm-radius-sm); margin-bottom: 6px; font-size: 12px; font-family: var(--fm-ui-font); }
.fm-reminder:last-child { margin-bottom: 0; }
.fm-reminder--warn   { background: var(--fm-warn-bg);   border: 1px solid var(--fm-warn-bd); }
.fm-reminder--danger { background: var(--fm-danger-bg); border: 1px solid var(--fm-danger-bd); }
.fm-reminder__title { font-weight: 700; display: block; font-size: 13px; margin-bottom: 2px; }
.fm-reminder--warn   .fm-reminder__title { color: var(--fm-warn-text); }
.fm-reminder--danger .fm-reminder__title { color: var(--fm-danger-text); }
.fm-reminder__sub { color: #78716c; }
.fm-reminder--danger .fm-reminder__sub { color: #dc2626; }
.fm-sb-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fm-sb-stat { background: var(--fm-bg-alt); border: 1px solid var(--fm-border); border-radius: var(--fm-radius-sm); padding: 10px; text-align: center; }
.fm-sb-stat__num { font-size: 20px; font-weight: 700; display: block; line-height: 1; margin-bottom: 4px; }
.fm-sb-stat__label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #9ca3af; font-family: var(--fm-ui-font); }
.fm-reg-list { list-style: none; display: flex; flex-direction: column; padding: 0; margin: 0; }
.fm-reg-list li { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--fm-border-subtle); font-size: 12px; gap: 8px; }
.fm-reg-list li:last-child { border-bottom: none; }
.fm-reg-list__key { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #9ca3af; flex-shrink: 0; font-family: var(--fm-ui-font); }
.fm-reg-list__val { font-weight: 600; text-align: right; }
.fm-reg-list__val--warn { color: #dc2626; }
.fm-reg-list__val--ok   { color: #16a34a; }
.fm-sb-actions { display: flex; flex-direction: column; gap: 6px; }
.fm-sidebar .fm-sb-btn,
.fm-sidebar a.fm-sb-btn {
    display:            block !important;
    width:              100% !important;
    padding:            9px 14px !important;
    border-radius:      6px !important;
    font-family:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size:          11px !important;
    font-weight:        700 !important;
    letter-spacing:     .05em !important;
    text-transform:     uppercase !important;
    text-align:         center !important;
    text-decoration:    none !important;
    line-height:        1.4 !important;
    cursor:             pointer !important;
    border-width:       1.5px !important;
    border-style:       solid !important;
    box-sizing:         border-box !important;
    appearance:         none !important;
    -webkit-appearance: none !important;
    transition:         background .15s ease, border-color .15s ease,
                        color .15s ease, transform .15s ease !important;
}
.fm-sidebar .fm-sb-btn:active { transform: scale(.98) !important; }
.fm-sidebar .fm-sb-btn--dark    { background-color: #1a1a1a !important; border-color: #1a1a1a !important; color: #fff !important; }
.fm-sidebar .fm-sb-btn--dark:hover { background-color: #2d2d2d !important; border-color: #2d2d2d !important; color: #fff !important; text-decoration: none !important; }
.fm-sidebar .fm-sb-btn--outline { background-color: #fff !important; border-color: #d1d5db !important; color: #374151 !important; }
.fm-sidebar .fm-sb-btn--outline:hover { border-color: #374151 !important; color: #111827 !important; background-color: #f9fafb !important; text-decoration: none !important; }
.fm-sidebar .fm-sb-btn:focus-visible { outline: 2px solid #2271b1 !important; outline-offset: 2px !important; }

/* ===== VIN MODAL ===== */
.fm-vin-modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.fm-vin-modal__inner { background: #fff; border-radius: var(--fm-radius); padding: 28px 32px; max-width: 580px; width: 100%; max-height: 80vh; overflow-y: auto; position: relative; }
.fm-vin-modal .fm-vin-modal__close {
    position:           absolute !important;
    top:                12px !important;
    right:              16px !important;
    background:         none !important;
    background-color:   transparent !important;
    border:             none !important;
    font-size:          22px !important;
    cursor:             pointer !important;
    color:              #9ca3af !important;
    line-height:        1 !important;
    padding:            4px !important;
    appearance:         none !important;
    -webkit-appearance: none !important;
    transition:         color .12s !important;
}
.fm-vin-modal .fm-vin-modal__close:hover { color: #1a1a1a !important; }
.fm-vin-modal h3 { margin-bottom: 8px; }
.fm-vin-modal__vin { font-family: var(--fm-mono); font-size: 15px; letter-spacing: 2px; padding: 8px 12px; background: var(--fm-bg-alt); border-radius: var(--fm-radius-sm); margin-bottom: 16px; word-break: break-all; border: 1px solid var(--fm-border); }
.fm-vin-modal__results table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fm-vin-modal__results td { padding: 6px 10px; border-bottom: 1px solid var(--fm-border-subtle); }
.fm-vin-modal__results td:first-child { font-weight: 600; color: #6b7280; width: 45%; font-family: var(--fm-ui-font); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
.fm-vin-modal__results tr:last-child td { border-bottom: none; }

/*
 * =============================================================================
 * ARCHIVE / FLEET LIST
 * =============================================================================
 * Styles for both the WordPress archive template (archive-fm_vehicle.php)
 * and the [fm_fleet_list] shortcode output.
 *
 * Filter bar: pill-style buttons with active state.
 * Vehicle grid: responsive CSS grid 1→2→3→4 columns.
 * Vehicle card: hover lift effect via box-shadow + translateY.
 * Thumbnail tooltip: absolutely positioned preview on hover (JS-controlled).
 * =============================================================================
 */
/* ===== ARCHIVE ===== */
.fm-archive__header { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.fm-archive__count { font-size: 14px; color: #6b7280; font-family: var(--fm-ui-font); }
.fm-archive__empty { padding: 40px 0; color: #6b7280; text-align: center; font-style: italic; }
.fm-filter-bar { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--fm-border); }
.fm-filter-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fm-filter-group__divider { width: 1px; height: 20px; background: var(--fm-border); flex-shrink: 0; margin: 0 2px; }
.fm-archive .fm-filter-btn {
    padding:            5px 14px !important;
    border:             1.5px solid #e5e7eb !important;
    border-radius:      20px !important;
    font-family:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size:          12px !important;
    font-weight:        600 !important;
    background-color:   #fff !important;
    color:              #374151 !important;
    cursor:             pointer !important;
    display:            flex !important;
    align-items:        center !important;
    gap:                5px !important;
    appearance:         none !important;
    -webkit-appearance: none !important;
    box-sizing:         border-box !important;
    transition:         background-color .12s, border-color .12s, color .12s !important;
}
.fm-archive .fm-filter-btn:hover { border-color: #1a1a1a !important; color: #1a1a1a !important; }
.fm-archive .fm-filter-btn.is-active { background-color: #1a1a1a !important; border-color: #1a1a1a !important; color: #fff !important; }
.fm-filter-count { display: inline-flex; align-items: center; justify-content: center; background: rgba(0,0,0,.12); border-radius: 10px; padding: 0 5px; font-size: 10px; min-width: 18px; line-height: 16px; }
.fm-filter-btn.is-active .fm-filter-count { background: rgba(255,255,255,.2); }
.fm-vehicle-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 500px) { .fm-vehicle-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .fm-vehicle-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .fm-vehicle-grid { grid-template-columns: repeat(4, 1fr); } }
.fm-vehicle-card { background: #fff; border: 1px solid var(--fm-border); border-radius: var(--fm-radius); overflow: hidden; transition: box-shadow .2s, transform .2s; display: flex; flex-direction: column; }
.fm-vehicle-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); transform: translateY(-2px); }
.fm-vehicle-card__photo-link { display: block; aspect-ratio: 16/9; overflow: hidden; position: relative; background: #f3f4f6; }
.fm-vehicle-card__photo { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; display: block; }
.fm-vehicle-card:hover .fm-vehicle-card__photo { transform: scale(1.04); }
.fm-vehicle-card__photo-placeholder { width: 100%; height: 100%; background: #e5e7eb; }
.fm-vehicle-card__status { position: absolute; bottom: 8px; left: 8px; }
.fm-vehicle-card__body { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.fm-vehicle-card__title { margin: 0; font-size: 16px; line-height: 1.3; }
.fm-vehicle-card__title a { text-decoration: none; }
.fm-vehicle-card__title a:hover { text-decoration: underline; }
.fm-vehicle-card__meta { font-size: 12px; color: #6b7280; font-family: var(--fm-ui-font); display: flex; gap: 8px; flex-wrap: wrap; }
.fm-vehicle-card__specs { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; color: #6b7280; font-family: var(--fm-ui-font); }
.fm-vehicle-card__spec { background: var(--fm-bg-alt); padding: 2px 7px; border-radius: 2px; border: 1px solid var(--fm-border); }
.fm-vehicle-card__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; padding-top: 6px; }

/*
 * UTILITIES
 * .fm-hide-mobile: hides table columns (State, VIN, etc.) on small screens.
 */
/* ===== UTILITIES ===== */
@media (max-width: 599px) { .fm-hide-mobile { display: none !important; } }

/*
 * =============================================================================
 * PRINT STYLES
 * =============================================================================
 * Triggered by window.print() from the "Print Record" button.
 * Hides interactive elements (gallery strip, buttons, filters, modals).
 * Converts the two-column layout to single-column for A4/Letter paper.
 * Sidebar prints below the main content with a top border separator.
 * =============================================================================
 */
/* ===== PRINT ===== */
@media print {
    .fm-gallery-strip, .fm-admin-actions, .fm-sb-actions, .fm-filter-bar,
    .fm-vin-modal, .fm-btn, .fm-sb-btn { display: none !important; }
    .fm-layout, .fm-spec-grid { display: block !important; }
    .fm-sidebar { border: none !important; border-top: 2px solid #000 !important; margin-top: 20px; }
    .fm-hero__img { max-height: 300px; }
    .fm-section, .fm-sb-section { background: none !important; border: none !important; padding: 12px 0 !important; }
    .fm-section__heading { border-bottom: 1px solid #000 !important; }
}

/* ===== MOBILE ADJUSTMENTS ===== */
@media (max-width: 599px) {
    .fm-vehicle-header { padding: 16px 16px 0; }
    .fm-quickfacts { margin: 0 -16px; }
    .fm-tags-row { padding: 10px 16px; }
    .fm-section { padding: 16px; }
    .fm-vin-block { flex-direction: column; align-items: flex-start; gap: 8px; }
    .fm-gallery-thumb { width: 68px; height: 48px; }
    .fm-admin-actions { display: none; }
}

/* ===== PHASE 5: ARCHIVE — toolbar, filters, view toggle ===== */
.fm-archive-header { display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.fm-archive .fm-archive-add-btn,
.fm-archive a.fm-archive-add-btn {
    font-family:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size:          12px !important;
    font-weight:        700 !important;
    letter-spacing:     .04em !important;
    padding:            6px 14px !important;
    border:             1.5px solid #e5e7eb !important;
    border-radius:      6px !important;
    color:              #374151 !important;
    background-color:   #fff !important;
    text-decoration:    none !important;
    cursor:             pointer !important;
    display:            inline-flex !important;
    align-items:        center !important;
    box-sizing:         border-box !important;
    transition:         border-color .12s, color .12s !important;
}
.fm-archive .fm-archive-add-btn:hover { border-color: #1a1a1a !important; color: #1a1a1a !important; text-decoration: none !important; }
.fm-archive-toolbar { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; justify-content:space-between; margin-bottom:12px; padding-bottom:14px; border-bottom:1px solid var(--fm-border); }
.fm-archive-filters { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; flex:1; }
.fm-archive-filter-group { display:flex; flex-direction:column; gap:3px; }
.fm-archive-filter-group label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:#9ca3af; font-family:var(--fm-ui-font); }
.fm-archive-select { font-size:12px; padding:5px 22px 5px 8px; border:1px solid var(--fm-border); border-radius:var(--fm-radius-sm); background:var(--color-background,#fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239ca3af'/%3E%3C/svg%3E") no-repeat right 7px center; -webkit-appearance:none; appearance:none; color:inherit; min-width:120px; cursor:pointer; }
.fm-archive-select:focus { outline:none; border-color:#2563eb; }
.fm-archive .fm-archive-reset-btn {
    font-family:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size:          11px !important;
    font-weight:        600 !important;
    padding:            5px 12px !important;
    border:             1px solid #e5e7eb !important;
    border-radius:      4px !important;
    background-color:   #fff !important;
    cursor:             pointer !important;
    color:              #6b7280 !important;
    align-self:         flex-end !important;
    appearance:         none !important;
    -webkit-appearance: none !important;
    box-sizing:         border-box !important;
    transition:         border-color .12s, color .12s !important;
}
.fm-archive .fm-archive-reset-btn:hover { border-color: #1a1a1a !important; color: #1a1a1a !important; }
.fm-archive-toolbar-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.fm-archive-count { font-size:12px; color:#6b7280; font-family:var(--fm-ui-font); white-space:nowrap; }
.fm-archive .fm-view-toggle { display: flex !important; border: 1px solid #e5e7eb !important; border-radius: 4px !important; overflow: hidden !important; }
.fm-archive .fm-view-btn {
    padding:            5px 9px !important;
    border:             none !important;
    background-color:   #fff !important;
    cursor:             pointer !important;
    color:              #9ca3af !important;
    line-height:        0 !important;
    appearance:         none !important;
    -webkit-appearance: none !important;
    transition:         background-color .12s, color .12s !important;
}
.fm-archive .fm-view-btn:hover { color: #374151 !important; }
.fm-archive .fm-view-btn.is-active { background-color: #1a1a1a !important; color: #fff !important; }
.fm-active-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; min-height:0; }
.fm-active-tag { display:inline-flex; align-items:center; gap:4px; background:#eff6ff; color:#1d4ed8; font-size:11px; font-family:var(--fm-ui-font); padding:3px 8px; border-radius:20px; }
.fm-active-tag button { background:none; border:none; cursor:pointer; color:inherit; padding:0; font-size:14px; line-height:1; opacity:.7; }
.fm-active-tag button:hover { opacity:1; }
.fm-archive-empty { padding:2.5rem 0; text-align:center; color:#6b7280; font-style:italic; }

/* ===== LIST TABLE ===== */
.fm-list-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.fm-list-table { width:100%; border-collapse:collapse; font-size:13px; table-layout:fixed; }
.fm-list-table th { text-align:left; padding:7px 10px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:#9ca3af; background:var(--fm-bg-alt); border-bottom:1px solid var(--fm-border); white-space:nowrap; font-family:var(--fm-ui-font); }
.fm-list-table th.fm-sortable { cursor:pointer; user-select:none; }
.fm-list-table th.fm-sortable:hover { color:#374151; }
.fm-list-table th.fm-sorted { color:#1a1a1a; }
.fm-sort-arrow { font-size:10px; margin-left:2px; }
.fm-list-table td { padding:7px 10px; border-bottom:1px solid var(--fm-border-subtle); vertical-align:middle; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fm-list-table tr:last-child td { border-bottom:none; }
.fm-list-table tr:hover td { background:var(--fm-bg-alt); }
.fm-col-thumb { width:56px; }
.fm-col-name  { width:auto; }
.fm-col-type  { width:100px; }
.fm-col-plate { width:110px; }
.fm-col-state { width:60px; }
.fm-col-vin   { width:175px; }
.fm-col-status{ width:90px; }
.fm-col-fuel  { width:85px; }
.fm-list-name { font-weight:500; text-decoration:none; color:inherit; font-size:13px; }
.fm-list-name:hover { text-decoration:underline; }
.fm-list-make { display:block; font-size:11px; color:#9ca3af; font-family:var(--fm-ui-font); margin-top:1px; }
.fm-list-meta { color:#6b7280; font-size:12px; font-family:var(--fm-ui-font); }
.fm-vin-text  { font-family:var(--fm-mono); font-size:11px; color:#6b7280; letter-spacing:.5px; }

/* Thumbnail in list */
/* Thumbnail: 80×56 for better legibility in the list view */
.fm-thumb-wrap { width:80px; height:56px; border-radius:3px; overflow:hidden; background:var(--fm-bg-alt); display:inline-block; vertical-align:middle; flex-shrink:0; cursor:pointer; }
.fm-thumb-img  { width:100%; height:100%; object-fit:cover; display:block; transition:opacity .12s; }
.fm-thumb-wrap:hover .fm-thumb-img { opacity:.85; }
.fm-thumb-no-photo { width:80px; height:56px; background:var(--fm-bg-alt); border-radius:3px; display:inline-block; }

/* Tooltip: position:fixed so it sits relative to the viewport, not an
   offset parent. JS uses getBoundingClientRect() (viewport-relative)
   so we must NOT add scroll offsets when positioning. */
.fm-thumb-tooltip { position:fixed; display:none; z-index:99999; pointer-events:none; }
.fm-thumb-tooltip__inner { background:#fff; border:1px solid var(--fm-border); border-radius:var(--fm-radius); padding:5px; box-shadow:0 4px 16px rgba(0,0,0,.12); }
.fm-thumb-tooltip__img { display:block; width:260px; height:182px; object-fit:cover; border-radius:2px; background:var(--fm-bg-alt); }

/* ===== CARD GRID ===== */
.fm-card-view { }
.fm-card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
@media(min-width:900px){ .fm-card-grid { grid-template-columns:repeat(3,1fr); } }
@media(min-width:1200px){ .fm-card-grid { grid-template-columns:repeat(4,1fr); } }
.fm-vehicle-card { background:#fff; border:1px solid var(--fm-border); border-radius:var(--fm-radius); overflow:hidden; transition:border-color .15s,transform .15s; display:flex; flex-direction:column; }
.fm-vehicle-card:hover { border-color:#9ca3af; transform:translateY(-2px); }
.fm-card-photo-link { display:block; aspect-ratio:16/9; overflow:hidden; position:relative; background:var(--fm-bg-alt); text-decoration:none; }
.fm-card-img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; }
.fm-vehicle-card:hover .fm-card-img { transform:scale(1.04); }
.fm-card-img-placeholder { width:100%; height:100%; background:var(--fm-bg-alt); }
.fm-card-status-badge { position:absolute; bottom:7px; left:7px; }
.fm-card-body { padding:12px 14px; display:flex; flex-direction:column; gap:4px; flex:1; }
.fm-card-title { font-size:13px; font-weight:500; color:inherit; text-decoration:none; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fm-card-title:hover { text-decoration:underline; }
.fm-card-meta { font-size:11px; color:#6b7280; font-family:var(--fm-ui-font); display:flex; gap:6px; flex-wrap:wrap; }
.fm-card-meta span+span::before { content:'·'; margin-right:6px; opacity:.4; }
.fm-card-plate { font-family:var(--fm-mono); font-size:11px; border:1px solid var(--fm-border); border-radius:2px; padding:2px 6px; color:#374151; letter-spacing:1px; align-self:flex-start; display:inline-block; }
.fm-card-vin { font-family:var(--fm-mono); font-size:10px; color:#9ca3af; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fm-vehicle-card__tags { display:flex; flex-wrap:wrap; gap:3px; margin-top:auto; padding-top:6px; }

/* ===== Phase 6: [fm_documents] front-end shortcode ===== */
.fm-doc-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.fm-doc-item { display:flex; gap:12px; padding:12px 14px; background:#fff; border:1px solid var(--fm-border); border-radius:var(--fm-radius); align-items:flex-start; }
.fm-doc-item__icon { flex-shrink:0; }
.fm-doc-item__thumb { width:40px; height:40px; object-fit:cover; border-radius:2px; border:1px solid var(--fm-border); display:block; }
.fm-doc-item__body { flex:1; min-width:0; }
.fm-doc-item__name { font-weight:500; font-size:14px; margin-bottom:3px; }
.fm-doc-item__link { color:inherit; text-decoration:none; }
.fm-doc-item__link:hover { text-decoration:underline; }
.fm-doc-item__desc { font-size:13px; color:#6b7280; margin:0 0 5px; line-height:1.5; }
.fm-doc-item__meta { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:4px; }
.fm-doc-item__type { display:inline-block; font-size:10px; font-weight:700; font-family:var(--fm-ui-font); text-transform:uppercase; letter-spacing:.4px; padding:2px 7px; background:var(--fm-bg-alt); border:1px solid var(--fm-border); border-radius:2px; color:#6b7280; }
.fm-doc-item__version { font-size:11px; font-family:var(--fm-mono); color:#2563eb; font-weight:600; }
.fm-doc-item__date { font-size:11px; color:#9ca3af; font-family:var(--fm-ui-font); }
.fm-doc-item__meta .fm-doc-item__type + .fm-doc-item__version::before,
.fm-doc-item__meta .fm-doc-item__type + .fm-doc-item__date::before,
.fm-doc-item__meta .fm-doc-item__version + .fm-doc-item__date::before { content:'·'; margin-right:6px; color:#d1d5db; }

/* Table layout variant */
.fm-doc-table { width:100%; border-collapse:collapse; font-size:13px; }
.fm-doc-table th { text-align:left; padding:7px 10px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#9ca3af; background:var(--fm-bg-alt); border-bottom:1px solid var(--fm-border); font-family:var(--fm-ui-font); }
.fm-doc-table td { padding:9px 10px; border-bottom:1px solid var(--fm-border-subtle); vertical-align:top; }
.fm-doc-table tr:last-child td { border-bottom:none; }
.fm-doc-table__link { font-weight:500; color:inherit; text-decoration:none; }
.fm-doc-table__link:hover { text-decoration:underline; }

/* ===== Year range filter row ===== */
.fm-archive-filters--year { margin-top: 8px; flex-wrap: nowrap; align-items: flex-end; }
.fm-archive-filters--year .fm-archive-filter-group { flex-direction: row; align-items: center; gap: 6px; }
.fm-archive-filters--year label { font-size: 12px; font-weight: 600; font-family: var(--fm-ui-font); color: #9ca3af; white-space: nowrap; margin-bottom: 0; }
.fm-archive-filters--year .fm-archive-select { min-width: 80px; }

/* ===== Phase 9: QR code shortcode ===== */
.fm-qr-wrap { display:inline-block; }
.fm-qr { display:inline-flex; flex-direction:column; align-items:center; gap:6px; }
.fm-qr__img { display:block; border:1px solid var(--fm-border); border-radius:var(--fm-radius-sm); }
.fm-qr__link { display:block; line-height:0; }
.fm-qr__link:hover .fm-qr__img { border-color:#1a1a1a; }
.fm-qr__label { font-size:11px; color:#6b7280; font-family:var(--fm-ui-font); text-align:center; }

/* ===== Modifications public table =====
   Override the shared .fm-maint-table styles:
   - No alternating row background colors
   - Simple 1px bottom border between rows only
   - No left/right cell padding so content aligns flush with surrounding text
   ===== */
.fm-mods-public-table th,
.fm-mods-public-table td {
    padding-left: 0;
    padding-right: 0;
}
.fm-mods-public-table th {
    background: var(--fm-bg-alt);         /* keep header row background */
}
.fm-mods-public-table td {
    background: transparent !important;   /* remove alternating row colors */
    border-bottom: 1px solid var(--fm-border);
}
.fm-mods-public-table tr:last-child td  { border-bottom: none; }
.fm-mods-public-table tr:hover td       { background: transparent !important; }
.fm-mods-public-table tfoot td          { background: transparent !important; border-top: 1px solid var(--fm-border); border-bottom: none; }
.fm-mods-public-table .fm-mod-link {
    font-family:     -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size:       11px !important;
    font-weight:     600 !important;
    color:           #2563eb !important;
    text-decoration: none !important;
    display:         inline-flex !important;
    align-items:     center !important;
    gap:             3px !important;
}
.fm-mods-public-table .fm-mod-link:hover { color: #1d4ed8 !important; text-decoration: underline !important; }
.fm-mods-public-table .fm-mod-link .lni {
    font-size:   11px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    color:       inherit !important;
}

/* ===== QR code sidebar block ===== */
/* .fm-sb-qr styles commented out — QR sidebar section disabled (potential future feature) */
/* .fm-sb-qr { text-align:center; } */
/* .fm-sb-qr .fm-qr__img { ... } */
/* .fm-sb-qr .fm-qr__label { ... } */

/* ── Related Content sidebar (front-end) ── */
.fm-related-list {
    list-style:  none;
    margin:      0;
    padding:     0;
}
.fm-related-item {
    display:       flex;
    gap:           8px;
    padding:       8px 0;
    border-bottom: 1px solid var(--fm-border);
    align-items:   flex-start;
}
.fm-related-item:last-child { border-bottom:none; }
.fm-related-item__thumb {
    width:         36px;
    height:        36px;
    object-fit:    cover;
    border-radius: 3px;
    flex-shrink:   0;
    border:        1px solid var(--fm-border);
    background:    var(--fm-bg-subtle,#f9fafb);
}
.fm-related-item__body { flex:1; min-width:0; }
.fm-related-item__title {
    display:         block;
    font-size:       12px;
    font-weight:     600;
    line-height:     1.4;
    color:           var(--fm-text-dark,#1a1a1a);
    text-decoration: none;
    word-break:      break-word;
    margin-bottom:   2px;
}
.fm-related-item__title:hover { text-decoration:underline; }
.fm-related-item__source {
    display:     block;
    font-size:   10px;
    color:       #9ca3af;
    margin-bottom: 2px;
}
.fm-related-item__excerpt {
    margin:      0;
    font-size:   11px;
    color:       #6b7280;
    line-height: 1.5;
}

/* ===== Admin Private Note Bar =====
   Matches the design language of the status container (.fm-status-row):
   soft background + 1px border in matching tones, same border-radius.
   Amber/gold palette — visually distinct from status colours (green/grey/red)
   but consistent with the card-style component pattern.
   Visible to admins only — never rendered for public visitors.
   ===== */

/* Outer wrapper — 2rem bottom margin, flush left/right to match hero image width */
.fm-admin-note-bar {
    background: #fefce8;                      /* warm amber tint — matches status row pattern */
    border: 1px solid #fde68a;                /* 1px solid, same amber family */
    border-radius: var(--fm-radius);           /* 4px — same as .fm-status-row */
    margin: 16px 0 2rem;                      /* top preserved, left/right 0, 2rem bottom */
    font-family: var(--fm-ui-font, sans-serif);
}

/* Inner flex row: label+text on left, edit link pinned right */
.fm-admin-note-bar__inner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 14px;                       /* same compact padding as .fm-status-row (10px 12px + a little more) */
}

/* Left column: label + note text */
.fm-admin-note-bar__content {
    flex: 1;
    min-width: 0;                             /* prevents overflow in narrow sidebars */
}

/* "PRIVATE NOTES" label — uppercase caps label same as sidebar heading style */
.fm-admin-note-bar__label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #92400e;                           /* dark amber — readable on light yellow bg */
    margin-bottom: 4px;
}

/* Note body text */
.fm-admin-note-bar__text {
    font-size: 13px;
    line-height: 1.6;
    color: #78350f;                           /* slightly warmer/darker than label for body contrast */
}
.fm-admin-note-bar__text p           { margin: 0 0 5px; }
.fm-admin-note-bar__text p:last-child { margin-bottom: 0; }
.fm-admin-note-bar__text ul,
.fm-admin-note-bar__text ol          { margin: 3px 0 5px 16px; padding: 0; }

/* "Edit" link — top-right, subtle until hovered */
.fm-admin-note-bar__edit {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    color: #92400e;
    text-decoration: underline;
    white-space: nowrap;
    margin-top: 1px;
    opacity: .6;
    transition: opacity .15s;
}
.fm-admin-note-bar__edit:hover { opacity: 1; }

/* Formatted text in public description and recall notes */
.fm-description h3, .fm-recall-notes h3 { font-size: 1.15em; font-weight: 700; margin: 1.2em 0 .4em; }
.fm-description h4, .fm-recall-notes h4 { font-size: 1.05em; font-weight: 700; margin: 1em 0 .3em; }
.fm-description ul, .fm-description ol,
.fm-recall-notes ul, .fm-recall-notes ol { margin-left: 1.4em; margin-bottom: .8em; }

/* ===== Insurance provider external link icon =====
   Small inline SVG link icon that appears after the provider name
   when a URL is configured in Fleet Manager → Settings.
   Inherits sidebar text color; slightly muted until hovered.
   ===== */
.fm-ins-provider-link {
    display: inline-flex;
    align-items: center;
    margin-left: 5px;
    color: #9ca3af;
    vertical-align: middle;
    opacity: .7;
    transition: opacity .12s, color .12s;
    text-decoration: none;
}
.fm-ins-provider-link:hover {
    opacity: 1;
    color: #2563eb;
    text-decoration: none;
}

/* ── Share button (QR code sidebar) ─────────────────────────────────────── */

.fm-single .fm-share-btn {
    display:            inline-flex !important;
    align-items:        center !important;
    gap:                5px !important;
    margin-top:         8px !important;
    padding:            5px 10px !important;
    background-color:   transparent !important;
    border:             1px solid #e5e7eb !important;
    border-radius:      4px !important;
    color:              #6b7280 !important;
    font-family:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size:          11px !important;
    font-weight:        600 !important;
    line-height:        1 !important;
    cursor:             pointer !important;
    white-space:        nowrap !important;
    appearance:         none !important;
    -webkit-appearance: none !important;
    box-sizing:         border-box !important;
    transition:         border-color .15s, color .15s, background-color .15s !important;
}
.fm-single .fm-share-btn:hover {
    border-color:     #1a1a1a !important;
    color:            #1a1a1a !important;
    background-color: #f9fafb !important;
}
.fm-single .fm-share-btn svg { flex-shrink: 0 !important; }

/* Confirmation message that fades in/out after sharing or copying */
.fm-share-btn__confirm {
    display:     block;
    height:      1em;
    font-size:   11px;
    color:       #059669;
    font-family: var(--fm-ui-font);
    text-align:  center;
    opacity:     0;
    transition:  opacity .2s;
    margin-top:  4px;
}
.fm-share-btn__confirm.is-visible {
    opacity: 1;
}

/* ── Placeholder text — clearly lighter than real values ── */
.fm-single input::placeholder,
.fm-single textarea::placeholder,
.fm-vin-modal input::placeholder { color: #b0b4ba; opacity: 1; }
.fm-single input::-webkit-input-placeholder,
.fm-single textarea::-webkit-input-placeholder,
.fm-vin-modal input::-webkit-input-placeholder { color: #b0b4ba; }
.fm-single input::-moz-placeholder,
.fm-single textarea::-moz-placeholder { color: #b0b4ba; opacity: 1; }

/* =========================================================================
   FM SVG BUTTONS — theme-proof admin action buttons
   Fully self-contained: no theme font, no theme color inheritance.
   Used for Print and Edit on the vehicle header.
   ========================================================================= */

/* =========================================================================
   FM SVG BUTTONS — theme-proof
   Scoped under .fm-admin-actions for specificity over theme button/a rules.
   ========================================================================= */

/* ── Shared base — scoped for high specificity ── */
.fm-admin-actions .fm-svg-btn,
.fm-admin-actions a.fm-svg-btn {
    display:            inline-flex !important;
    align-items:        center !important;
    gap:                7px !important;
    padding:            8px 16px !important;
    min-width:          80px !important;
    font-family:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size:          12px !important;
    font-weight:        700 !important;
    letter-spacing:     .06em !important;
    text-transform:     uppercase !important;
    line-height:        1 !important;
    text-decoration:    none !important;
    border-radius:      6px !important;
    border-width:       1.5px !important;
    border-style:       solid !important;
    cursor:             pointer !important;
    user-select:        none !important;
    white-space:        nowrap !important;
    box-sizing:         border-box !important;
    appearance:         none !important;
    -webkit-appearance: none !important;
    box-shadow:         none;
    transition:         background .18s ease, border-color .18s ease,
                        color .18s ease, transform .18s ease,
                        box-shadow .18s ease !important;
}

/* Icon — handles both <span class="fm-svg-btn__icon"> and <i class="lni"> */
.fm-admin-actions .fm-svg-btn__icon,
.fm-admin-actions i.lni.fm-svg-btn__icon {
    display:     inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    font-size:   16px !important;
    line-height: 1 !important;
    transition:  transform .25s ease !important;
}
.fm-admin-actions .fm-svg-btn__icon svg { display: block !important; }

/* ── Print — outlined neutral ── */
.fm-admin-actions .fm-svg-btn--print {
    color:            #374151 !important;
    border-color:     #d1d5db !important;
    background-color: #fff !important;
}
.fm-admin-actions .fm-svg-btn--print:hover,
.fm-admin-actions .fm-svg-btn--print:focus-visible {
    color:            #111827 !important;
    border-color:     #374151 !important;
    background-color: #f9fafb !important;
    box-shadow:       0 2px 6px rgba(0,0,0,.12) !important;
    transform:        translateY(-1px) !important;
    text-decoration:  none !important;
}
.fm-admin-actions .fm-svg-btn--print:hover .fm-svg-btn__icon,
.fm-admin-actions .fm-svg-btn--print:hover i.lni { transform: translateY(-2px) !important; }

/* ── Edit — dark filled ── */
.fm-admin-actions .fm-svg-btn--edit {
    color:            #fff !important;
    border-color:     #1a1a1a !important;
    background-color: #1a1a1a !important;
}
.fm-admin-actions .fm-svg-btn--edit:hover,
.fm-admin-actions .fm-svg-btn--edit:focus-visible {
    color:            #fff !important;
    border-color:     #2d2d2d !important;
    background-color: #2d2d2d !important;
    box-shadow:       0 2px 8px rgba(0,0,0,.30) !important;
    transform:        translateY(-1px) !important;
    text-decoration:  none !important;
}
.fm-admin-actions .fm-svg-btn--edit:hover .fm-svg-btn__icon,
.fm-admin-actions .fm-svg-btn--edit:hover i.lni { transform: rotate(-8deg) !important; }

/* Active press */
.fm-admin-actions .fm-svg-btn:active { transform: translateY(0) scale(.98) !important; }

/* Focus ring */
.fm-admin-actions .fm-svg-btn:focus-visible {
    outline:        2px solid #2271b1 !important;
    outline-offset: 2px !important;
}

/* =========================================================================
   LINEICONS — sizing and alignment within FM UI contexts
   ========================================================================= */

/* Default icon size inside FM buttons and sidebar buttons */
.fm-sidebar .fm-sb-btn .lni,
.fm-archive .fm-archive-add-btn .lni {
    font-size:      14px !important;
    line-height:    1 !important;
    vertical-align: middle !important;
    margin-right:   4px !important;
}

/* Slightly smaller for the external link icon inline with text */
.fm-ins-provider-link .lni {
    font-size:      11px !important;
    vertical-align: middle !important;
}

/* View toggle icons */
.fm-archive .fm-view-btn .lni {
    font-size:      16px !important;
    line-height:    1 !important;
    display:        block !important;
}

/* Ensure lni inherits color in all FM button contexts */
.fm-sidebar .fm-sb-btn .lni,
.fm-archive .lni,
.fm-admin-actions .lni {
    color: inherit !important;
}