/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE — tablet & mobile
   Loaded last so it overrides the desktop vertical-shell layout.
   - Tablet: narrower sidebar.
   - Mobile (≤768px): sidebar becomes an off-canvas drawer with a hamburger
     button + backdrop; header/content take full width; KPI grids & tables stack.
   ════════════════════════════════════════════════════════════════════════ */

/* Hamburger button — hidden on desktop, shown on mobile */
.ap-mobile-burger {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1300;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  border: 1px solid var(--sk2);
  background: var(--p);
  color: var(--st);
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(27, 26, 23, .14);
  cursor: pointer;
}
.ap-mobile-burger svg { width: 22px; height: 22px; }
.ap-mobile-burger:active { transform: scale(.94); }

.ap-mobile-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(27, 26, 23, .42);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 1150;
}

/* ── Tablet ── */
@media (max-width: 1024px) {
  body.ap-vertical-shell { --ap-side-open: 244px; }
}

/* ── Mobile: off-canvas sidebar ── */
@media (max-width: 768px) {
  .ap-mobile-burger { display: flex !important; }

  /* Header & content go full width (no sidebar offset) */
  body.ap-vertical-shell .hdr {
    left: 0 !important;
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 64px !important;
  }
  body.ap-vertical-shell .app .body,
  body.ap-vertical-shell .body,
  body.ap-vertical-shell .app > .body {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* Sidebar = full-height drawer that slides in from the left.
     Use the #app-tabs ID for high specificity so it beats the shell's runtime-
     injected .tabs rules. */
  body.ap-vertical-shell #app-tabs.tabs {
    inset: 0 auto 0 0 !important;
    width: 280px !important;
    max-width: 84vw !important;
    border-radius: 0 !important;
    z-index: 1200 !important;
    transform: translateX(-110%) !important;
    transition: transform .32s cubic-bezier(.4, 0, .2, 1) !important;
  }
  body.ap-vertical-shell #app-tabs.tabs.ap-nav-collapsed:not(.ap-nav-peek) {
    --ap-side-width: var(--ap-side-open) !important; /* always full labels inside the drawer */
  }
  body.ap-mobile-nav-open #app-tabs.tabs { transform: translateX(0) !important; }
  body.ap-mobile-nav-open .ap-mobile-backdrop { opacity: 1 !important; pointer-events: auto !important; }

  /* Hide the desktop collapse toggle inside the drawer (not needed on mobile) */
  body.ap-vertical-shell .ap-sidebar-toggle { display: none !important; }

  /* Tab content padding tighter */
  #home-root, #cost-root, #tp-projlog { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ── KPI / card grids stack on small screens ── */
@media (max-width: 760px) {
  .gpx-kpis, .gpx-snapshot-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .cost-kpis { grid-template-columns: repeat(2, 1fr) !important; }
  .home-grid { grid-template-columns: 1fr !important; }
  .home-quick-grid { grid-template-columns: 1fr !important; }
  .plog-grid { grid-template-columns: 1fr !important; }
}

/* ── Wide tables / panels: allow horizontal scroll instead of breaking layout ── */
@media (max-width: 900px) {
  #tp-acts, #tp-links, #tp-cost, #tp-labour, #tp-ms, #tp-cp,
  #tp-acts .panel, #tp-links .panel, #tp-labour .panel {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Gantt & WBS: heavy data tabs need swipeable horizontal scroll + wrapping
   toolbars on small screens (the grid is intentionally ~1400px wide). ── */
@media (max-width: 1024px) {
  /* Toolbar wraps instead of overflowing */
  #ganttOut .p6-toolbar,
  #tp-gantt .p6-toolbar {
    flex-wrap: wrap !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 6px !important;
    padding: 8px 10px !important;
    row-gap: 8px !important;
  }
  #ganttOut .p6-export-dock-safe {
    flex-wrap: wrap !important;
    height: auto !important;
    gap: 6px !important;
    row-gap: 6px !important;
  }
  /* The wide timeline grid scrolls horizontally INSIDE the viewport.
     The scroll container is .p6-outer (#v9-gantt-outer); it must be clamped to
     100% width or it expands to the ~1400px grid and pushes the whole page wide. */
  #ganttOut .p6-outer,
  #v9-gantt-outer,
  #ganttOut .gantt-shell,
  #tp-gantt .gantt-shell,
  #ganttOut .gantt-wrap,
  #tp-wbs #wbsOut,
  #tp-wbs .map-tbl-wrap,
  #tp-wbs .p6-outer {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* The gantt grid is sized to the full timeline width by its virtual-scroll
     renderer (can't be clamped via CSS), so make #ganttOut the swipeable
     horizontal scroll container clamped to the viewport. */
  #ganttOut { max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
}

@media (max-width: 768px) {
  /* Snapshot KPI strip → 2 columns on phones */
  .gpx-snapshot-grid { grid-template-columns: repeat(2, 1fr) !important; }
  /* Toolbar control labels/buttons shrink a touch so more fit per row */
  #ganttOut .p6-toolbar .p6-tb-btn,
  #ganttOut .p6-toolbar .p6-tb-lbl,
  #ganttOut .p6-toolbar .p6-exp-btn { font-size: 11px !important; }
  /* WBS deep-view tree: let wide rows scroll rather than squash */
  #tp-wbs, [id^="tp-"] .deep-wbs-scroll, .deep-wbs-tree-wrap, .vdw-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   NEXORA MOBILE REFINEMENTS (v8)
   Fixes: header overflowed (rigid 240+260px grid) → sideways shift; settings
   options → stacked list; gantt height; content full width.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Kill any sideways shift — nothing wider than the screen. */
  html, body { max-width: 100% !important; overflow-x: hidden !important; }
  .tp, #home-root { max-width: 100% !important; }

  /* Header: compact flex row (was a fixed 3-col grid wider than the phone). */
  body.ap-vertical-shell .hdr,
  body.ap-vertical-shell .hdr.ap-nav-collapsed:not(.ap-nav-peek),
  body.ap-vertical-shell .hdr.ap-nav-peek {
    left: 0 !important; right: 0 !important; width: 100% !important;
    top: 8px !important; height: 52px !important;
    display: flex !important; align-items: center !important; gap: 8px !important;
    grid-template-columns: none !important;
    padding: 0 12px 0 62px !important;
  }
  body.ap-vertical-shell::before { height: 66px !important; }
  body.ap-vertical-shell .hdr .logo { min-width: 0 !important; flex: 1 1 auto !important; overflow: hidden !important; }
  body.ap-vertical-shell .hdr .logo-name { font-size: 15px !important; }
  body.ap-vertical-shell .hdr .logo-sub { display: none !important; }
  body.ap-vertical-shell .hdr .hdr-search { display: none !important; } /* reclaim space on phones */

  /* Content clears the shorter fixed header. */
  body.ap-vertical-shell .body,
  body.ap-vertical-shell .app .body { padding-top: 58px !important; }

  /* Settings: nav + content stack; options become a vertical list. */
  #tp-settings .dsett-shell { flex-direction: column !important; gap: 14px !important; }
  #tp-settings .dsett-aside { width: 100% !important; max-width: none !important; border-right: 0 !important; position: static !important; }
  #tp-settings .dsett-nav { display: flex !important; flex-direction: column !important; gap: 6px !important; }
  #tp-settings .dsett-main { width: 100% !important; }
  #tp-settings .appr-custom-grid,
  #tp-settings [class*="-grid"] { grid-template-columns: 1fr !important; }

  /* Data Input: 3-column console layout → single column. */
  #tp-input .di-shell, #tp-input [class*="grid"], #tp-input .di-cols { grid-template-columns: 1fr !important; display: block !important; }
  #tp-input [class*="col"] { width: 100% !important; max-width: 100% !important; }
}

/* Gantt: guarantee a usable height so the chart actually renders on small screens. */
@media (max-width: 1024px) {
  #ganttOut, #v9-gantt-outer, #tp-gantt .gantt-shell, #tp-gantt .p6-outer { min-height: 60vh !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   NEXORA MOBILE FIX v9 — content shift, header logo, drawer labels
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* THE main fix: .body has `padding-left:316px` (sidebar gap) via a high-specificity
     `html body.ap-vertical-shell .body` rule — it shoved all content to the right.
     Match that specificity here (this file loads last) and clear it. */
  html body.ap-vertical-shell .body,
  html body.ap-vertical-shell .body:not(.ap-body-closed),
  html body.ap-vertical-shell .body.ap-body-closed {
    padding: 62px 14px 46px 14px !important;
  }

  /* Header logo never overflows / pushes the icons off-screen. */
  body.ap-vertical-shell .hdr .logo { flex: 0 1 auto !important; max-width: 60vw !important; overflow: hidden !important; }
  body.ap-vertical-shell .hdr .logo img,
  body.ap-vertical-shell .hdr .logo svg { height: 26px !important; width: auto !important; max-width: 100% !important; }
  body.ap-vertical-shell .hdr .logo-ico { height: 26px !important; width: auto !important; }

  /* Open drawer: reveal the nav labels (they are display:none while collapsed). */
  body.ap-mobile-nav-open #app-tabs.tabs .ap-tab-label,
  body.ap-mobile-nav-open #app-tabs.tabs .ap-section-text { display: inline-block !important; }
}

/* Tablet (769–1024): clear the sidebar padding too if the drawer mode is active. */
@media (min-width: 769px) and (max-width: 1024px) {
  html body.ap-vertical-shell .body,
  html body.ap-vertical-shell .body:not(.ap-body-closed) { padding-left: 96px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   NEXORA MOBILE FIX v10 — open drawer = FULLY expanded, scrollable, labelled
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* The open drawer must show EVERY tab with its label, and scroll if tall. */
  body.ap-mobile-nav-open #app-tabs.tabs {
    width: 286px !important;
    max-width: 88vw !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-top: 60px !important;      /* clear the hamburger */
    -webkit-overflow-scrolling: touch !important;
  }
  /* Force-expand: undo every collapse/peek hiding of labels & section titles. */
  body.ap-mobile-nav-open #app-tabs.tabs .ap-tab-label,
  body.ap-mobile-nav-open #app-tabs.tabs.ap-nav-collapsed .ap-tab-label,
  body.ap-mobile-nav-open #app-tabs.tabs .ap-section-text,
  body.ap-mobile-nav-open #app-tabs.tabs.ap-nav-collapsed .ap-section-text {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: auto !important;
    max-width: none !important;
    position: static !important;
    clip: auto !important;
    overflow: visible !important;
    white-space: nowrap !important;
    font-size: 14px !important;
  }
  /* Left-align rows + give the icon+label room. */
  body.ap-mobile-nav-open #app-tabs.tabs .tab {
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    width: auto !important;
  }
  body.ap-mobile-nav-open #app-tabs.tabs .ap-sidebar-foot { position: static !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   NEXORA COMPACT MODE v11 — mobile + tablet (≤1024): off-canvas drawer,
   FULL-WIDTH content (no sidebar gutter), clean fixed header, breathable data.
   This is the authoritative compact layout — loaded last, wins over the blocks
   above. Mirrors how modern SaaS apps behave on phones/tablets.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  html, body { max-width: 100% !important; overflow-x: hidden !important; }

  /* Hamburger on all compact widths. */
  .ap-mobile-burger { display: flex !important; }

  /* Content fills the screen — clear the desktop 316px sidebar padding entirely. */
  html body.ap-vertical-shell .body,
  html body.ap-vertical-shell .body:not(.ap-body-closed),
  html body.ap-vertical-shell .body.ap-body-closed {
    padding: 64px 18px 48px 18px !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .tp, #home-root, #cost-root, #tp-projlog { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }

  /* Header: full-width compact bar, logo constrained, icons pinned right. */
  body.ap-vertical-shell .hdr,
  body.ap-vertical-shell .hdr.ap-nav-collapsed:not(.ap-nav-peek),
  body.ap-vertical-shell .hdr.ap-nav-peek {
    left: 0 !important; right: 0 !important; width: 100% !important;
    top: 8px !important; height: 52px !important;
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    grid-template-columns: none !important; gap: 8px !important;
    padding: 0 14px 0 64px !important;
  }
  body.ap-vertical-shell::before { height: 66px !important; }
  body.ap-vertical-shell .hdr .logo { flex: 0 1 auto !important; min-width: 0 !important; max-width: 56vw !important; overflow: hidden !important; }
  body.ap-vertical-shell .hdr .logo img,
  body.ap-vertical-shell .hdr .logo svg,
  body.ap-vertical-shell .hdr .logo-ico { height: 26px !important; width: auto !important; max-width: 100% !important; }
  body.ap-vertical-shell .hdr .logo-sub { display: none !important; }
  body.ap-vertical-shell .hdr .hdr-search { display: none !important; }

  /* Sidebar → off-canvas drawer (slides in), full labels via mobile-nav.js. */
  body.ap-vertical-shell #app-tabs.tabs {
    inset: 0 auto 0 0 !important;
    width: 290px !important; max-width: 86vw !important;
    border-radius: 0 !important; z-index: 1200 !important;
    transform: translateX(-110%) !important;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1) !important;
    overflow-y: auto !important; overflow-x: hidden !important;
  }
  body.ap-mobile-nav-open #app-tabs.tabs { transform: translateX(0) !important; }
  body.ap-mobile-nav-open .ap-mobile-backdrop { opacity: 1 !important; pointer-events: auto !important; }
  body.ap-vertical-shell .ap-sidebar-toggle { display: none !important; }

  /* Drawer labels: smaller + comfortable rows. */
  body.ap-mobile-nav-open #app-tabs.tabs .ap-tab-label { font-size: 13px !important; }
  body.ap-mobile-nav-open #app-tabs.tabs .ap-section-text { font-size: 10.5px !important; letter-spacing: .4px !important; }
  body.ap-mobile-nav-open #app-tabs.tabs .tab { padding: 9px 14px !important; gap: 11px !important; }

  /* Breathable data — use the full width, less cramped padding. */
  body.ap-vertical-shell .panel,
  body.ap-vertical-shell .card,
  body.ap-vertical-shell .home-card { padding: 16px !important; }
  .home-grid, .home-quick-grid, .cost-kpis, .gpx-kpis, .gpx-snapshot-grid, .plog-grid { grid-template-columns: 1fr !important; }
}

/* On phones give the snapshot / KPI strips 2 columns so they read well. */
@media (max-width: 768px) {
  .gpx-snapshot-grid, .gpx-kpis, .cost-kpis { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   NEXORA COMPACT v12 — Home dashboard fills the width (kill zoom + empty gutter)
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* The dashboard is scaled to 82% on desktop (zoom) + centered with max-width,
     which wasted space on small screens. Use the full width instead. */
  #home-root { max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
  .home-shell { zoom: 1 !important; width: 100% !important; }
  .home-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .home-welcome { min-height: 0 !important; padding: 24px 20px !important; border-radius: 22px !important; }
  .home-welcome h1 { font-size: clamp(24px, 7vw, 34px) !important; }
  .home-quick-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Every top-level panel/card fills the content width. */
  #tp-home .home-card, #tp-home .panel, #tp-home .card { width: auto !important; max-width: 100% !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   NEXORA COMPACT v13 — FULL-WIDTH everywhere, normal fonts (no enlargement)
   The sidebar is now a top hamburger, so every page must use 100% width.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Content area: no sidebar gutter, tight side padding. */
  html body.ap-vertical-shell .body,
  html body.ap-vertical-shell .body:not(.ap-body-closed),
  html body.ap-vertical-shell .body.ap-body-closed {
    padding: 60px 12px 40px 12px !important; width: 100% !important; margin: 0 !important;
  }

  /* Kill every centering / max-width / zoom / transform that leaves empty gutters,
     across the common page wrappers. */
  html #home-root, html .home-shell, html .home-welcome, html .home-grid,
  html #cost-root, html #tp-projlog, html .tp > *:first-child,
  html [id^="tp-"] > .panel, html [id^="tp-"] > .card {
    max-width: 100% !important; width: 100% !important;
    margin-left: 0 !important; margin-right: 0 !important;
    zoom: 1 !important; transform: none !important;
  }
  html .home-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  html .home-quick-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Normal (NOT enlarged) heading sizes on phones. */
  html .home-welcome { padding: 22px 18px !important; min-height: 0 !important; }
  html .home-welcome h1 { font-size: 25px !important; line-height: 1.15 !important; }
  html .home-welcome p { font-size: 13.5px !important; }

  /* Header + logo sized for phones. */
  body.ap-vertical-shell .hdr { height: 50px !important; top: 7px !important; padding: 0 12px 0 62px !important; }
  body.ap-vertical-shell .hdr .logo { max-width: 52vw !important; }
  body.ap-vertical-shell .hdr .logo img,
  body.ap-vertical-shell .hdr .logo svg { height: 24px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   NEXORA COMPACT v15 — taller header + bigger logo; symmetric content margins
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Header: comfortable height, bigger logo (was too small). */
  body.ap-vertical-shell .hdr,
  body.ap-vertical-shell .hdr.ap-nav-collapsed:not(.ap-nav-peek),
  body.ap-vertical-shell .hdr.ap-nav-peek {
    height: 60px !important; top: 10px !important;
    padding: 0 14px 0 66px !important;
    justify-content: center !important;   /* logo centred; burger is a fixed overlay */
  }
  body.ap-vertical-shell::before { height: 80px !important; }
  body.ap-vertical-shell .hdr .logo { max-width: 66vw !important; }
  body.ap-vertical-shell .hdr .logo img,
  body.ap-vertical-shell .hdr .logo svg,
  body.ap-vertical-shell .hdr .logo-ico { height: 38px !important; }

  /* Content clears the taller header, and left = right padding (symmetric). */
  html body.ap-vertical-shell .body,
  html body.ap-vertical-shell .body:not(.ap-body-closed),
  html body.ap-vertical-shell .body.ap-body-closed {
    padding: 74px 14px 40px 14px !important;
  }
  /* The dashboard card fills the width — equal gutters on both sides. */
  html .home-welcome, html .home-card, html .home-shell, html #home-root {
    width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important;
  }
}

/* v16 — nudge the header logo up a touch inside the compact header */
@media (max-width: 1024px) {
  body.ap-vertical-shell .hdr { top: 6px !important; align-items: center !important; }
  body.ap-vertical-shell .hdr .logo { margin-top: -4px !important; align-self: center !important; }
}

/* v17 — smaller header logo, raised, so it never overlaps the page content */
@media (max-width: 1024px) {
  body.ap-vertical-shell .hdr,
  body.ap-vertical-shell .hdr.ap-nav-collapsed:not(.ap-nav-peek),
  body.ap-vertical-shell .hdr.ap-nav-peek { height: 50px !important; top: 4px !important; }
  body.ap-vertical-shell::before { height: 66px !important; }
  body.ap-vertical-shell .hdr .logo { margin-top: -2px !important; max-width: 62vw !important; }
  body.ap-vertical-shell .hdr .logo img,
  body.ap-vertical-shell .hdr .logo svg,
  body.ap-vertical-shell .hdr .logo-ico { height: 30px !important; }
  html body.ap-vertical-shell .body,
  html body.ap-vertical-shell .body:not(.ap-body-closed),
  html body.ap-vertical-shell .body.ap-body-closed { padding-top: 62px !important; }
}

/* v18 — trim the header logo a bit more (was reading too large) */
@media (max-width: 1024px) {
  body.ap-vertical-shell .hdr .logo { max-width: 200px !important; }
  body.ap-vertical-shell .hdr .logo img,
  body.ap-vertical-shell .hdr .logo svg,
  body.ap-vertical-shell .hdr .logo-ico { height: 26px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   GANTT — responsive & touch-optimised (added to the existing Gantt rules)
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .gantt-wrap { grid-template-columns: 200px 1fr !important; min-width: 0 !important; }
  .g-left .rdur { display: none !important; }
  .rcode { font-size: clamp(7px, 1.8vw, 10px) !important; }
  .rname { font-size: clamp(9px, 2.2vw, 12px) !important; }
  .gh-l { font-size: clamp(9px, 2vw, 11px) !important; }
  .gh-r { font-size: clamp(9px, 2vw, 11px) !important; }
  .month-cell { font-size: clamp(8px, 1.6vw, 10px) !important; }
  .exp-bar { flex-wrap: wrap !important; gap: 6px !important; }
  .exp-bar .ebtn { min-height: 44px !important; padding: 8px 14px !important; font-size: clamp(10px, 1.8vw, 12px) !important; }
  .kpi-strip { gap: 6px !important; }
  .kpi { padding: 8px 10px !important; }
  .kpi .v { font-size: clamp(14px, 3.5vw, 20px) !important; }
  .kpi .k { font-size: clamp(8px, 1.6vw, 10px) !important; }
  .kpi .s { font-size: clamp(7px, 1.4vw, 9px) !important; }
}
@media (max-width: 768px) {
  .gantt-wrap { grid-template-columns: 140px 1fr !important; }
  .g-row { min-height: 44px !important; }
  .g-left .rcode { font-size: clamp(7px, 1.6vw, 9px) !important; min-width: 36px !important; }
  .g-left .rname { font-size: clamp(8px, 2vw, 10px) !important; }
  .months-row .month-cell { font-size: clamp(7px, 1.4vw, 9px) !important; }
  .kpi-strip { grid-template-columns: repeat(3, 1fr) !important; }
  .kpi .s { display: none !important; }
  .kpi .v { font-size: clamp(12px, 3vw, 16px) !important; }
  .exp-bar > .elbl { width: 100% !important; margin-bottom: 2px !important; }
}
@media (hover: none) and (pointer: coarse) {
  .g-row:hover { background: inherit !important; }
  .ebtn:hover { filter: none !important; transform: none !important; }
  .kpi:hover { transform: none !important; }
}