/* EVBro — DESKTOP interface (mouse and screen ≥ 769 px).
   Standalone sheet: the load ORDER (templates/index.html) follows the original cascade; do not change it.

   On touch (phone, tablet, or the phone in «desktop site» mode) nothing here applies: the bottom dock and the single
   column rule. With a mouse the app stops being a wide phone: a sidebar with ALL the sections (also the ones that live
   in «Más» on the phone), two-column content per tab and the map at desktop size.
   Between 769 and 1099 px (small window) the sidebar narrows to icons with their name underneath. */

.desktop-sidebar { display: none; }

@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  :root { --side-w: 236px; --head-h: 64px; --desk-gap: 20px; }

  /* ───────── Frame: fixed header, fixed sidebar, scrolling content ───────── */
  .navbar-main { height: var(--head-h); max-width: none; padding: 0 1.5rem; }
  .native-bottom-dock { display: none; }

  .desktop-sidebar {
    display: flex; flex-direction: column; gap: 2px;
    position: fixed; top: var(--head-h); left: 0; bottom: 0; width: var(--side-w);
    padding: 12px 10px 14px; overflow-y: auto; z-index: 900;
    background: var(--surface); border-right: 1px solid var(--border-color);
    scrollbar-width: thin;
  }
  .side-group { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; }
  .side-group-bottom { margin-top: auto; padding: 10px 0 0; border-top: 1px solid var(--border-color); }
  .side-group-label {
    padding: 10px 12px 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-muted);
  }
  .side-item {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 9px 12px;
    border: 1px solid transparent; border-radius: 12px; background: transparent;
    color: var(--text-secondary); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer;
    transition: var(--transition);
  }
  .side-item svg { width: 19px; height: 19px; flex-shrink: 0; }
  .side-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .side-item:hover { color: var(--text-primary); background: var(--surface-secondary); }
  .side-item.active { color: var(--accent-bright); background: var(--accent-soft); font-weight: 750; }
  .side-item:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 1px; }

  main.container {
    margin: 0 0 0 var(--side-w); max-width: none; width: auto;
    padding: 1.5rem 2rem 3rem;
  }
  .tab-content { padding-bottom: 0; }
  .native-app-container { max-width: 1320px; margin: 0 auto; }
  /* Blocks some tabs (Viajes) put outside the container: aligned with it */
  .tab-content > :not(.native-app-container) { max-width: 1320px; margin-left: auto; margin-right: auto; }

  /* The «Más» menu is for phones: here everything is in the sidebar */
  #tabMore { display: none; }

  /* The Gastos category chips were swiped with a finger; with a mouse they wrap onto several rows */
  .ex-chips { flex-wrap: wrap; overflow: visible; }

  /* ───────── Per-tab grids (two columns) ───────── */
  .desk-grid { display: grid; column-gap: var(--desk-gap); align-items: start; }
  .desk-grid > .native-section-header { grid-column: 1 / -1; }
  .desk-sticky { position: sticky; top: calc(var(--head-h) + 1.5rem); }
}

@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  /* Inicio: the widgets in the owner's order on the left; the map (when shown) fixed on the right (features/home-widgets.js) */
  #homeWidgets { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--desk-gap); align-items: start; }
  #homeWidgets > .home-widget { grid-column: 1; }
  #homeWidgets > .home-widget[data-widget="map"] { grid-column: 2; grid-row: 1 / span 40; position: sticky; top: calc(var(--head-h) + 1.5rem); }
  #homeWidgets > .home-widget[data-widget="sensors"] { justify-self: start; }
  #homeWidgets:not(:has(> .home-widget[data-widget="map"]:not([hidden]))),
  body[data-manual="1"]:not([data-gps="1"]) #homeWidgets { grid-template-columns: minmax(0, 1fr); }
  #liveMapCard { margin-bottom: 1rem; }
  .home-edit-bar { left: calc(var(--side-w) + 24px); right: 24px; bottom: 20px; }
  .map-card:not(.map-expanded) .live-map-wrap { height: 460px; }

  /* Carga: the widgets in the owner's order on the left; one charge's detail (when shown) on the right */
  #energyWidgets { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--desk-gap); align-items: start; }
  #energyWidgets > .home-widget { grid-column: 1; }
  #energyWidgets > .home-widget[data-widget="session"] { grid-column: 2; grid-row: 1 / span 40; }
  #energyWidgets:not(:has(> .home-widget[data-widget="session"]:not([hidden]))) { grid-template-columns: minmax(0, 1fr); }
  /* A charge's detail was designed for full width; in its column it goes in a single stack */
  #accBatteryTelemetry .charge-main-grid { grid-template-columns: 1fr; }

  /* Confort: two columns, filled in the owner's order */
  #comfortWidgets { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--desk-gap); align-items: start; }
  /* While arranging, one column: the order is read top to bottom and dragging follows it */
  body.home-editing #comfortWidgets { grid-template-columns: minmax(0, 1fr); }
  #tabOverview .home-customize, #tabCharges .home-customize, #tabClimate .home-customize { width: fit-content; padding-left: 1.5rem; padding-right: 1.5rem; }

  /* Mantenimiento: plan on the left; ITV and intervention history on the right */
  #tabMaintenance .native-app-container {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--desk-gap); align-items: start;
  }
  #tabMaintenance .native-section-header { grid-column: 1 / -1; }
  #maintModeSwitch, #tabMaintenance .maint-quick-actions, #maintOfficialView, #maintCustomView { grid-column: 1; }
  #maintItvCard { grid-column: 2; grid-row: 2 / span 2; }
  #tabMaintenance .table-card { grid-column: 2; grid-row: 4; }
  #directInvoiceUploadInput { grid-column: 1; }

  /* Gastos: expenses on the left, refuels on the right */
  #tabExpenses .native-app-container {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--desk-gap); align-items: start;
  }
  #tabExpenses .native-section-header, #exDueCard { grid-column: 1 / -1; }

  /* Costes: total and breakdown on the left; chart and list on the right */
  #tabCosts .native-app-container {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--desk-gap); align-items: start;
  }
  #tabCosts .native-section-header, #tabCosts .costs-period, #tabCosts .period-picker { grid-column: 1 / -1; }
  #tabCosts .costs-period, #tabCosts .period-picker { max-width: 560px; margin-left: 0; }
  #tabCosts .costs-hero { grid-column: 1; grid-row: 3; }
  #tabCosts .costs-grid { grid-column: 1; grid-row: 4; }
  #costsPending { grid-column: 1; grid-row: 5; }
  #costsByCatCard { grid-column: 1; grid-row: 6; }
  #tabCosts .costs-chart-card { grid-column: 2; grid-row: 3; }
  #tabCosts .costs-list-card { grid-column: 2; grid-row: 4 / span 3; }
  #tabCosts .costs-goto { grid-column: 1 / -1; grid-row: 7; }

  /* Repostajes: consumption and litres per month on the left; list on the right */
  #tabRefuels .native-app-container {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--desk-gap); align-items: start;
  }
  #tabRefuels .native-section-header, #tabRefuels .costs-period, #tabRefuels .period-picker { grid-column: 1 / -1; }
  #tabRefuels .costs-period, #tabRefuels .period-picker { max-width: 560px; margin-left: 0; }
  #tabRefuels .costs-hero, #tabRefuels .costs-chart-card { grid-column: 1; }
  #rfListCard { grid-column: 2; grid-row: 3 / span 2; }

  /* Geocercas: fixed map on the left, list on the right */
  #tabGeofences .native-app-container {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--desk-gap); align-items: start;
  }
  #tabGeofences .native-section-header { grid-column: 1 / -1; }
  #tabGeofences .native-app-container > .glass:first-of-type { position: sticky; top: calc(var(--head-h) + 1.5rem); }
  #geofencesOverviewMap { height: 520px !important; }

  /* Coches: photo on the left, sheet on the right */
  #vpPaneData { display: grid; grid-template-columns: 320px minmax(0, 1fr); column-gap: var(--desk-gap); align-items: start; }
  #vpPaneData .vp-photo-card { position: sticky; top: calc(var(--head-h) + 1.5rem); }

  /* Ajustes: vertical submenu on the left, panel on the right */
  #tabSettings .native-app-container {
    display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 24px; align-items: start;
  }
  #tabSettings .native-section-header { grid-column: 1 / -1; }
  #tabSettings .settings-sub-nav {
    grid-column: 1; grid-row: 2 / span 6; position: sticky; top: calc(var(--head-h) + 1.5rem);
    flex-direction: column; align-items: stretch; gap: 4px; padding: 6px;
  }
  #tabSettings .settings-sub-nav .sub-nav-btn { justify-content: flex-start; flex: 0 0 auto; text-align: left; }
  #tabSettings .sub-tab-panel { grid-column: 2; grid-row: 2; }

  /* Table card rows have room for more columns */
  table.data-table tr { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* Small window with a mouse (769–1099 px): narrow sidebar, icon with its name underneath */
@media (min-width: 769px) and (max-width: 1099px) and (hover: hover) and (pointer: fine) {
  :root { --side-w: 94px; }
  .desktop-sidebar { padding: 10px 6px 12px; }
  .side-group-label { display: none; }
  .side-group { padding-bottom: 6px; }
  .side-item { flex-direction: column; gap: 4px; padding: 8px 2px; font-size: 10px; text-align: center; border-radius: 10px; }
  .side-item svg { width: 21px; height: 21px; }
  .side-item span { width: 100%; text-align: center; white-space: normal; line-height: 1.15; overflow: visible; }
  main.container { padding: 1.25rem 1.25rem 2.5rem; }
}