/* =========================================================================
   Fleet / Vehicle Types page — mobile makeover.
   Scoped to #vehicle-types, fires under 768px. Mirrors the User Management
   pattern: the desktop table is hidden and replaced by a JS-rendered card
   list (#vehicleTypesCards), the "Veículos" section chrome collapses so the
   cards float free on the page, and the "Add Vehicle" button becomes a
   purple FAB pinned bottom-right.

   Uses !important because the global tablet-optimized.css / mobile-optimized.css
   set several layout properties with !important; matching them keeps our
   #vehicle-types rules winning the cascade.
   ========================================================================= */

/* The card list is desktop-hidden by default so it can't leak in above 768px. */
.vt-cards { display: none; }

@media (max-width: 767px) {

    /* ---- Page shell ---- */
    #vehicle-types {
        padding-top: 8px !important;
        padding-bottom: 90px !important;   /* clear the bottom nav + FAB */
        padding-left: 8px !important;
        padding-right: 8px !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* Hide the "Frota" hero — the app header + bottom nav already say where
       you are, matching the other redesigned mobile pages. */
    #vehicle-types .page-header { display: none !important; }

    /* ---- Strip the section card chrome so cards float free ---- */
    #vehicle-types .content-section {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
    }
    /* Collapse the "Veículos" section header to zero height — the Add button
       inside it must stay in the DOM to become the FAB, so we can't
       display:none the whole header. Matches the selector shape in
       mobile-optimized.css that forces white bg + padding on first-of-type. */
    #vehicle-types .content-section > .section-header,
    #vehicle-types .content-section > div:first-of-type.section-header,
    #vehicle-types .content-section > div:first-of-type {
        display: block !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        background: transparent !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }
    #vehicle-types .content-section > .section-header > .section-title {
        display: none !important;
    }

    /* Hide the desktop table, show the card list */
    #vehicle-types .table-container { display: none !important; }
    #vehicle-types .vt-cards {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* ---- Floating action button — Add Vehicle ---- */
    #vehicle-types .content-section > .section-header > .btn.btn-primary {
        position: fixed !important;
        bottom: 90px !important;
        right: 16px !important;
        z-index: 900 !important;
        width: 56px !important;
        height: 56px !important;
        border-radius: 12px !important;
        background: linear-gradient(135deg, #667eea, #764ba2) !important;
        color: #fff !important;
        border: 2px solid rgba(255, 255, 255, 0.2) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4) !important;
        cursor: pointer !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 0 !important;          /* hide the "Add Vehicle" label */
        overflow: hidden !important;
    }
    /* Keep only the "+" icon, centred */
    #vehicle-types .content-section > .section-header > .btn.btn-primary span {
        display: none !important;
    }
    #vehicle-types .content-section > .section-header > .btn.btn-primary svg {
        width: 26px !important;
        height: 26px !important;
        margin: 0 !important;
    }
    #vehicle-types .content-section > .section-header > .btn.btn-primary:active {
        transform: scale(0.95);
    }

    /* ---------------------------------------------------------------
       Card
       --------------------------------------------------------------- */
    #vehicle-types .vt-card {
        background: #f9fafb !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 14px !important;
        padding: 12px 13px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* Top row: thumb + name/details + status */
    #vehicle-types .vt-top {
        display: flex !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    #vehicle-types .vt-thumb {
        flex-shrink: 0 !important;
        width: 52px !important;
        height: 52px !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        background: #eef2f7 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    #vehicle-types .vt-thumb img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    #vehicle-types .vt-thumb svg { width: 26px !important; height: 26px !important; color: #94a3b8 !important; }

    #vehicle-types .vt-headmain {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    #vehicle-types .vt-name {
        font-weight: 700 !important;
        font-size: 1rem !important;
        color: #111827 !important;
        line-height: 1.25 !important;
    }
    #vehicle-types .vt-sub {
        color: #6b7280 !important;
        font-size: 0.82rem !important;
        margin-top: 1px !important;
    }
    #vehicle-types .vt-plate {
        display: inline-block !important;
        margin-top: 5px !important;
        background: #1e293b !important;
        color: #f8fafc !important;
        padding: 2px 8px !important;
        border-radius: 4px !important;
        font-size: 0.72rem !important;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
        letter-spacing: 0.06em !important;
    }
    #vehicle-types .vt-status {
        flex-shrink: 0 !important;
        padding: 3px 10px !important;
        border-radius: 999px !important;
        font-size: 0.68rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.03em !important;
    }
    #vehicle-types .vt-status.is-active { background: #dcfce7 !important; color: #15803d !important; }
    #vehicle-types .vt-status.is-inactive { background: #f1f5f9 !important; color: #64748b !important; }

    /* Meta chips: passengers / luggage / multiplier */
    #vehicle-types .vt-meta {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    #vehicle-types .vt-chip {
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        background: #fff !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 8px !important;
        padding: 5px 9px !important;
        font-size: 0.82rem !important;
        font-weight: 600 !important;
        color: #374151 !important;
    }
    #vehicle-types .vt-chip svg { width: 14px !important; height: 14px !important; color: #64748b !important; }
    #vehicle-types .vt-chip.is-boost { background: #fef3c7 !important; border-color: #fde68a !important; color: #92400e !important; }

    /* Driver line */
    #vehicle-types .vt-driver {
        display: flex !important;
        align-items: center !important;
        gap: 7px !important;
        font-size: 0.85rem !important;
        color: #374151 !important;
    }
    #vehicle-types .vt-driver svg { width: 15px !important; height: 15px !important; color: #64748b !important; flex-shrink: 0 !important; }
    #vehicle-types .vt-driver .vt-driver-phone { color: #9ca3af !important; }

    /* Action buttons */
    #vehicle-types .vt-actions {
        display: flex !important;
        gap: 8px !important;
        border-top: 1px solid #eef0f3 !important;
        padding-top: 10px !important;
    }
    #vehicle-types .vt-btn {
        flex: 1 1 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        height: 40px !important;
        border: none !important;
        border-radius: 10px !important;
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        cursor: pointer !important;
    }
    #vehicle-types .vt-btn svg { width: 15px !important; height: 15px !important; }
    #vehicle-types .vt-btn-edit { background: rgba(59, 130, 246, 0.1) !important; color: #2563eb !important; }
    #vehicle-types .vt-btn-edit:active { background: rgba(59, 130, 246, 0.2) !important; }
    #vehicle-types .vt-btn-del { background: rgba(239, 68, 68, 0.1) !important; color: #dc2626 !important; }
    #vehicle-types .vt-btn-del:active { background: rgba(239, 68, 68, 0.2) !important; }

    /* Empty state */
    #vehicle-types .vt-empty {
        text-align: center !important;
        color: #9ca3af !important;
        font-size: 0.9rem !important;
        padding: 28px 12px !important;
    }
}