/* =========================================================
   AVAX MOBILE V2 — SHELL V1
   Header + toolbar only
   No vehicle-card rules in this phase
   ========================================================= */

@media (max-width: 900px){

  body.vehicles-v2{
    overflow-x:hidden;
  }

  .vehicles-v2 .wrap{
    width:100%;
    max-width:100%;
    padding:10px;
    box-sizing:border-box;
  }

  /* =======================================================
     HEADER
     ======================================================= */

  .vehicles-v2 .hero{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:12px !important;
    width:100%;
    margin:0 0 12px !important;
    padding:16px !important;
    box-sizing:border-box;
    border-radius:20px !important;
  }

  .vehicles-v2 .hero .title{
    width:100%;
    min-width:0;
  }

  .vehicles-v2 .hero-title-row{
    display:flex !important;
    align-items:center !important;
    gap:9px !important;
    width:100%;
    min-width:0;
    margin:0 0 9px !important;
  }

  .vehicles-v2 .hero-logo{
    flex:0 0 auto;
    width:auto !important;
    height:24px !important;
  }

  .vehicles-v2 .hero-title-row h1,
  .vehicles-v2 .hero h1{
    min-width:0;
    margin:0 !important;
    font-size:clamp(22px,7vw,28px) !important;
    line-height:1.04 !important;
    letter-spacing:-.035em !important;
    white-space:nowrap;
  }

  .vehicles-v2 .hero p{
    width:100%;
    max-width:none !important;
    margin:0 !important;
    font-size:13px !important;
    line-height:1.45 !important;
    opacity:.78;
  }

  .vehicles-v2 .hero .meta{
    display:grid !important;
    grid-template-columns:1fr 1fr 44px !important;
    align-items:center !important;
    width:100% !important;
    gap:8px !important;
    margin:0 !important;
  }

  .vehicles-v2 .hero .meta .chip{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-width:0 !important;
    min-height:40px !important;
    padding:7px 9px !important;
    box-sizing:border-box;
    border-radius:13px !important;
    font-size:12px !important;
    line-height:1.25 !important;
    text-align:center;
    white-space:normal !important;
  }

  .vehicles-v2 .hero #themeToggle{
    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;
    height:40px !important;
    min-height:40px !important;
    padding:0 !important;
    border-radius:13px !important;
  }

  /* =======================================================
     MAIN CARD + TOOLBAR
     ======================================================= */

  .vehicles-v2 .card{
    width:100%;
    max-width:100%;
    overflow:hidden;
    border-radius:20px !important;
  }

  .vehicles-v2 .toolbar{
    display:block !important;
    width:100% !important;
    padding:14px !important;
    box-sizing:border-box;
  }

  .vehicles-v2 .toolbar .search{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    width:100% !important;
    gap:9px !important;
  }

  .vehicles-v2 .toolbar .search input,
  .vehicles-v2 .toolbar .search input[type="text"]{
    grid-column:1 / -1 !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:48px !important;
    min-height:48px !important;
    padding:0 14px !important;
    box-sizing:border-box;
    border-radius:14px !important;
    font-size:14px !important;
  }

  .vehicles-v2 .toolbar .search .btn,
  .vehicles-v2 .toolbar .search a.btn,
  .vehicles-v2 .toolbar .search button.btn,
  .vehicles-v2 .toolbar .search #btnEditVehicle,
  .vehicles-v2 .toolbar .search #btnAddVehicle{
    grid-column:auto !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:44px !important;
    min-height:44px !important;
    padding:0 10px !important;
    box-sizing:border-box;
    border-radius:13px !important;
    font-size:13px !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
  }

  .vehicles-v2 .toolbar > .meta{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:100% !important;
    gap:10px !important;
    margin:12px 0 0 !important;
    padding:0 !important;
    flex-wrap:nowrap !important;
  }

  .vehicles-v2 .toolbar > .meta label{
    margin:0 !important;
    font-size:13px !important;
    white-space:nowrap;
  }

  .vehicles-v2 .toolbar > .meta select{
    width:76px !important;
    min-width:76px !important;
    height:42px !important;
    padding:0 10px !important;
    border-radius:13px !important;
    font-size:13px !important;
  }
}

@media (max-width: 360px){

  .vehicles-v2 .wrap{
    padding:7px;
  }

  .vehicles-v2 .hero{
    padding:13px !important;
  }

  .vehicles-v2 .hero-title-row h1,
  .vehicles-v2 .hero h1{
    font-size:20px !important;
  }

  .vehicles-v2 .hero p{
    font-size:12px !important;
  }

  .vehicles-v2 .hero .meta{
    grid-template-columns:1fr 1fr 40px !important;
    gap:6px !important;
  }

  .vehicles-v2 .hero #themeToggle{
    width:40px !important;
    min-width:40px !important;
    max-width:40px !important;
  }

  .vehicles-v2 .toolbar{
    padding:11px !important;
  }
}


/* =========================================================
   AVAX MOBILE V2 — COMPACT HEADER V1
   Header only — visual changes
   ========================================================= */

.hero-subtitle-mobile{
  display:none;
}

@media (max-width:900px){

  .vehicles-v2 .hero{
    gap:7px !important;
    padding:12px 14px !important;
    margin-bottom:10px !important;
  }

  .vehicles-v2 .hero-title-row{
    gap:8px !important;
    margin-bottom:3px !important;
  }

  .vehicles-v2 .hero-logo{
    height:21px !important;
  }

  .vehicles-v2 .hero-title-row h1,
  .vehicles-v2 .hero h1{
    font-size:clamp(21px,6.6vw,26px) !important;
    line-height:1 !important;
  }

  .vehicles-v2 .hero-subtitle-desktop{
    display:none !important;
  }

  .vehicles-v2 .hero-subtitle-mobile{
    display:block !important;
    margin:0 !important;
    font-size:11.5px !important;
    line-height:1.35 !important;
    opacity:.72 !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .vehicles-v2 .hero .meta{
    grid-template-columns:1fr 1fr 38px !important;
    gap:7px !important;
    margin-top:2px !important;
  }

  .vehicles-v2 .hero .meta .chip{
    min-height:34px !important;
    height:34px !important;
    padding:5px 8px !important;
    border-radius:11px !important;
    font-size:11px !important;
    line-height:1.1 !important;
  }

  .vehicles-v2 .hero #themeToggle{
    width:38px !important;
    min-width:38px !important;
    max-width:38px !important;
    height:34px !important;
    min-height:34px !important;
    border-radius:11px !important;
    font-size:13px !important;
  }
}

@media (max-width:360px){

  .vehicles-v2 .hero{
    padding:11px 11px !important;
  }

  .vehicles-v2 .hero-title-row h1,
  .vehicles-v2 .hero h1{
    font-size:20px !important;
  }

  .vehicles-v2 .hero-subtitle-mobile{
    font-size:11px !important;
  }
}


/* =========================================================
   AVAX MOBILE V2 — COMPACT DENSITY V1
   Shell only — more compact mobile header/toolbar
   ========================================================= */

@media (max-width:900px){

  .vehicles-v2 .wrap{
    padding:8px !important;
  }

  .vehicles-v2 .hero{
    gap:6px !important;
    padding:10px 12px !important;
    margin-bottom:8px !important;
    border-radius:18px !important;
  }

  .vehicles-v2 .hero-title-row{
    gap:7px !important;
    margin-bottom:2px !important;
  }

  .vehicles-v2 .hero-logo{
    height:18px !important;
  }

  .vehicles-v2 .hero-title-row h1,
  .vehicles-v2 .hero h1{
    font-size:clamp(18px,6vw,23px) !important;
    line-height:1 !important;
    letter-spacing:-.03em !important;
  }

  .vehicles-v2 .hero-subtitle-mobile{
    font-size:10.5px !important;
    line-height:1.25 !important;
  }

  .vehicles-v2 .hero .meta{
    grid-template-columns:1fr 1fr 34px !important;
    gap:6px !important;
    margin-top:1px !important;
  }

  .vehicles-v2 .hero .meta .chip{
    min-height:30px !important;
    height:30px !important;
    padding:4px 7px !important;
    border-radius:10px !important;
    font-size:10.5px !important;
  }

  .vehicles-v2 .hero #themeToggle{
    width:34px !important;
    min-width:34px !important;
    max-width:34px !important;
    height:30px !important;
    min-height:30px !important;
    border-radius:10px !important;
    font-size:12px !important;
  }

  .vehicles-v2 .card{
    border-radius:18px !important;
  }

  .vehicles-v2 .toolbar{
    padding:10px !important;
  }

  .vehicles-v2 .toolbar .search{
    gap:8px !important;
  }

  .vehicles-v2 .toolbar .search input,
  .vehicles-v2 .toolbar .search input[type="text"]{
    height:42px !important;
    min-height:42px !important;
    padding:0 12px !important;
    border-radius:12px !important;
    font-size:13px !important;
  }

  .vehicles-v2 .toolbar .search .btn,
  .vehicles-v2 .toolbar .search a.btn,
  .vehicles-v2 .toolbar .search button.btn,
  .vehicles-v2 .toolbar .search #btnEditVehicle,
  .vehicles-v2 .toolbar .search #btnAddVehicle{
    height:38px !important;
    min-height:38px !important;
    padding:0 8px !important;
    border-radius:11px !important;
    font-size:12.5px !important;
  }

  .vehicles-v2 .toolbar > .meta{
    gap:8px !important;
    margin-top:10px !important;
  }

  .vehicles-v2 .toolbar > .meta label{
    font-size:12.5px !important;
  }

  .vehicles-v2 .toolbar > .meta select{
    width:70px !important;
    min-width:70px !important;
    height:38px !important;
    border-radius:11px !important;
    font-size:12.5px !important;
  }
}

@media (max-width:360px){

  .vehicles-v2 .wrap{
    padding:6px !important;
  }

  .vehicles-v2 .hero{
    padding:9px 10px !important;
  }

  .vehicles-v2 .hero-title-row h1,
  .vehicles-v2 .hero h1{
    font-size:17px !important;
  }

  .vehicles-v2 .hero-subtitle-mobile{
    font-size:10px !important;
  }

  .vehicles-v2 .toolbar{
    padding:9px !important;
  }

  .vehicles-v2 .toolbar .search input,
  .vehicles-v2 .toolbar .search input[type="text"]{
    height:40px !important;
    min-height:40px !important;
    font-size:12.5px !important;
  }

  .vehicles-v2 .toolbar .search .btn,
  .vehicles-v2 .toolbar .search a.btn,
  .vehicles-v2 .toolbar .search button.btn,
  .vehicles-v2 .toolbar .search #btnEditVehicle,
  .vehicles-v2 .toolbar .search #btnAddVehicle{
    height:36px !important;
    min-height:36px !important;
    font-size:12px !important;
  }
}


/* =========================================================
   AVAX MOBILE V2 — ACTIONS MENU V1
   Existing action nodes are moved here only on mobile
   ========================================================= */

.mobile-actions-menu{
  display:none;
}

@media (max-width:900px){

  .vehicles-v2 .hero{
    position:relative;
  }

  .vehicles-v2 .hero .title{
    padding-right:46px;
  }

  .vehicles-v2 .mobile-actions-menu{
    display:block;
    position:absolute;
    top:10px;
    right:10px;
    z-index:40;
  }

  .vehicles-v2 .mobile-actions-toggle{
    width:38px;
    height:36px;
    padding:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    border:1px solid rgba(148,163,184,.18);
    border-radius:11px;
    background:rgba(15,23,42,.78);
    color:inherit;
    cursor:pointer;
    box-shadow:0 6px 18px rgba(0,0,0,.14);
    backdrop-filter:blur(12px);
  }

  [data-theme="light"] .vehicles-v2 .mobile-actions-toggle{
    background:rgba(255,255,255,.92);
  }

  .vehicles-v2 .mobile-actions-toggle span{
    display:block;
    width:16px;
    height:2px;
    border-radius:999px;
    background:currentColor;
    opacity:.88;
    transition:
      transform .18s ease,
      opacity .18s ease;
  }

  .vehicles-v2 .mobile-actions-toggle[aria-expanded="true"] span:nth-child(1){
    transform:translateY(6px) rotate(45deg);
  }

  .vehicles-v2 .mobile-actions-toggle[aria-expanded="true"] span:nth-child(2){
    opacity:0;
  }

  .vehicles-v2 .mobile-actions-toggle[aria-expanded="true"] span:nth-child(3){
    transform:translateY(-6px) rotate(-45deg);
  }

  .vehicles-v2 .mobile-actions-panel{
    display:none;
    position:absolute;
    top:44px;
    right:0;
    width:min(230px, calc(100vw - 28px));
    padding:8px;
    border:1px solid rgba(148,163,184,.18);
    border-radius:14px;
    background:rgba(15,23,42,.97);
    box-shadow:0 18px 45px rgba(0,0,0,.28);
    backdrop-filter:blur(18px);
  }

  [data-theme="light"] .vehicles-v2 .mobile-actions-panel{
    background:rgba(255,255,255,.98);
  }

  .vehicles-v2 .mobile-actions-panel.open{
    display:flex;
    flex-direction:column;
    gap:7px;
  }

  .vehicles-v2 .mobile-actions-panel #btnEditVehicle,
  .vehicles-v2 .mobile-actions-panel #btnAddVehicle{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:40px !important;
    min-height:40px !important;
    margin:0 !important;
    padding:0 12px !important;
    border-radius:11px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    font-size:13px !important;
    white-space:nowrap !important;
    box-sizing:border-box;
  }

  .vehicles-v2 .toolbar .search{
    grid-template-columns:1fr 1fr !important;
  }

  .vehicles-v2 .toolbar .search input{
    grid-column:1 / -1 !important;
  }

  /* După mutarea acțiunilor rămân doar Caută și Reset */
  .vehicles-v2 .toolbar .search > .btn{
    width:100%;
  }
}

@media (max-width:360px){

  .vehicles-v2 .hero .title{
    padding-right:42px;
  }

  .vehicles-v2 .mobile-actions-menu{
    top:8px;
    right:8px;
  }

  .vehicles-v2 .mobile-actions-toggle{
    width:35px;
    height:33px;
  }

  .vehicles-v2 .mobile-actions-panel{
    top:40px;
  }
}


/* =========================================================
   AVAX MOBILE V2 — FINAL COMPACT BUTTONS V1
   Mobile shell only
   ========================================================= */

@media (max-width:900px){

  /* Header puțin mai compact */
  .vehicles-v2 .wrap{
    padding-top:6px !important;
  }

  .vehicles-v2 .hero{
    padding:8px 10px !important;
    gap:4px !important;
    margin-bottom:6px !important;
    border-radius:16px !important;
  }

  .vehicles-v2 .hero-title-row{
    gap:6px !important;
    margin-bottom:1px !important;
  }

  .vehicles-v2 .hero-logo{
    height:17px !important;
  }

  .vehicles-v2 .hero-title-row h1,
  .vehicles-v2 .hero h1{
    font-size:clamp(17px,5.7vw,21px) !important;
    line-height:1 !important;
  }

  .vehicles-v2 .hero-subtitle-mobile{
    font-size:10px !important;
    line-height:1.15 !important;
  }

  .vehicles-v2 .hero .meta{
    grid-template-columns:1fr 1fr 32px !important;
    gap:5px !important;
    margin-top:0 !important;
  }

  .vehicles-v2 .hero .meta .chip{
    min-height:28px !important;
    height:28px !important;
    padding:3px 6px !important;
    border-radius:9px !important;
    font-size:10px !important;
  }

  .vehicles-v2 .hero #themeToggle{
    width:32px !important;
    min-width:32px !important;
    max-width:32px !important;
    height:28px !important;
    min-height:28px !important;
    padding:0 !important;
    border-radius:9px !important;
    font-size:11px !important;
  }

  .vehicles-v2 .mobile-actions-menu{
    top:7px !important;
    right:7px !important;
  }

  .vehicles-v2 .mobile-actions-toggle{
    width:34px !important;
    height:32px !important;
    border-radius:9px !important;
  }

  /* Toolbar mai compact */
  .vehicles-v2 .toolbar{
    padding:8px !important;
  }

  .vehicles-v2 .toolbar .search{
    gap:6px !important;
  }

  .vehicles-v2 .toolbar .search input,
  .vehicles-v2 .toolbar .search input[type="text"]{
    height:38px !important;
    min-height:38px !important;
    padding:0 11px !important;
    border-radius:11px !important;
    font-size:12.5px !important;
  }

  .vehicles-v2 .toolbar .search .btn,
  .vehicles-v2 .toolbar .search a.btn,
  .vehicles-v2 .toolbar .search button.btn{
    height:34px !important;
    min-height:34px !important;
    padding:0 8px !important;
    border-radius:10px !important;
    font-size:12px !important;
  }

  /* Caută — albastru premium */
  .vehicles-v2 .toolbar .search .btn-search-accent{
    background:linear-gradient(180deg,#3b82f6 0%,#2563eb 100%) !important;
    color:#fff !important;
    border:1px solid rgba(96,165,250,.55) !important;
    box-shadow:
      0 6px 14px rgba(37,99,235,.20),
      inset 0 1px 0 rgba(255,255,255,.16) !important;
    font-weight:800 !important;
  }

  /* Reset — auriu premium */
  .vehicles-v2 .toolbar .search .btn-reset-accent{
    background:linear-gradient(180deg,#f6c453 0%,#e5a335 100%) !important;
    color:#1f2937 !important;
    border:1px solid rgba(251,191,36,.58) !important;
    box-shadow:
      0 6px 14px rgba(217,119,6,.15),
      inset 0 1px 0 rgba(255,255,255,.22) !important;
    font-weight:800 !important;
  }

  .vehicles-v2 .toolbar > .meta{
    gap:6px !important;
    margin-top:7px !important;
  }

  .vehicles-v2 .toolbar > .meta label{
    font-size:11.5px !important;
  }

  .vehicles-v2 .toolbar > .meta select{
    width:66px !important;
    min-width:66px !important;
    height:34px !important;
    padding:0 8px !important;
    border-radius:10px !important;
    font-size:12px !important;
  }
}

@media (max-width:360px){

  .vehicles-v2 .hero{
    padding:7px 8px !important;
  }

  .vehicles-v2 .hero-title-row h1,
  .vehicles-v2 .hero h1{
    font-size:16px !important;
  }

  .vehicles-v2 .hero-subtitle-mobile{
    font-size:9.5px !important;
  }

  .vehicles-v2 .toolbar{
    padding:7px !important;
  }
}


/* =========================================================
   AVAX VEHICLE ACTIONS TEMPORARILY HIDDEN V1
   Visual only — functionality and routes remain unchanged
   ========================================================= */

.vehicles-v2 #btnEditVehicle,
.vehicles-v2 #btnAddVehicle,
.vehicles-v2 .mobile-actions-menu{
  display:none !important;
}