/* ============================================================
   SynetoOS mockup — mobile responsiveness.
   Adapts the appliance's fixed 230px-sidebar desktop layout into a
   phone/tablet-friendly off-canvas drawer + stacked content.
   ============================================================ */

.syn-hamburger { display: none; }
.syn-drawer-backdrop { display: none; }

@media (max-width: 992px) {
  /* Kill the 230px sidebar offset so content is full-width. */
  body { padding-left: 0 !important; }
  .gt-menu-main .page-title { padding-left: 54px !important; }

  /* Dark left sidebar (nav + footer + brand) becomes an off-canvas drawer.
     Must match app.css's `.gt-menu-main nav.gt-open-all` specificity + !important
     to win over its `transform: translateX(0)`. */
  .gt-menu-main nav.gt-open-part,
  .gt-menu-main nav.gt-open-all,
  .gt-menu-main .gt-menu-footer,
  .gt-menu-main .brand {
    transform: translateX(-100%) !important;
    transition: transform .26s cubic-bezier(.4,0,.2,1) !important;
    z-index: 1300 !important;
  }
  body.syn-drawer .gt-menu-main nav.gt-open-part,
  body.syn-drawer .gt-menu-main nav.gt-open-all,
  body.syn-drawer .gt-menu-main .gt-menu-footer,
  body.syn-drawer .gt-menu-main .brand { transform: translateX(0) !important; }

  /* The brand (logo) is float:left and 230px wide — even translated off-canvas
     it still consumes float width, pushing the top-bar icons onto a 2nd row.
     Fix it out of the float flow so the icons stay on one row. */
  .gt-menu-main .brand { position: fixed !important; top: 0 !important; left: 0 !important; }

  /* Hamburger toggle (rendered by the Console, shown only on small screens). */
  .syn-hamburger {
    display: flex; position: fixed; top: 11px; left: 9px; z-index: 1310;
    width: 40px; height: 40px; border: 0; border-radius: 9px; background: transparent;
    color: #181c37; align-items: center; justify-content: center; font-size: 20px; cursor: pointer;
  }
  body.syn-drawer .syn-hamburger { color: #fff; }

  body.syn-drawer .syn-drawer-backdrop {
    display: block; position: fixed; inset: 0; z-index: 1290; background: rgba(11,13,26,.5);
  }

  /* Dashboard / card grids stack to one column. Match bare `.col` / `.col-auto`
     too (no hyphen → not caught by [class*="col-"]); these hold the dashboard
     charts and were overflowing the viewport on phones. */
  /* Stack as a single vertical column. `nowrap` is essential: with the rows'
     inherited `flex-wrap: wrap`, a column direction would wrap children into a
     SECOND horizontal column once the (height-constrained) first column fills,
     pushing the page wider than the viewport (the dashboard chart cards). */
  main .row { flex-direction: column !important; flex-wrap: nowrap !important; }
  main .row > [class*="col-"],
  main .row > .col,
  main .row > .col-auto { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; }
  /* Charts/SVGs never exceed their column width on mobile. */
  .chart, .chart svg, .tab-content svg { max-width: 100% !important; }
  /* Flex children default to min-width:auto, so intrinsic-width content (the
     dashboard chart canvases) can't shrink below ~286px and pushes the page
     wider than the viewport. Allow the whole card→chart chain to shrink. */
  main .col, main [class*="col-"], main .card, main .card-body,
  main .card-content, main .chart, main .tab-content, main .tab-pane {
    min-width: 0 !important;
  }

  /* Master-detail panels stack vertically. */
  .list-details { display: block !important; }
  .list-details > .row,
  .list-details .row { display: block !important; }
  .list-details .details {
    border-left: 0 !important; border-top: 1px solid #ddd; width: 100% !important;
    margin: 16px 0 0 0 !important; padding: 16px 0 0 0 !important; overflow: visible !important;
  }
  .list-details [class*="col-"] { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }

  /* DataTables layout: un-float and stack its rows/cells so the filter toolbar
     (Action/Type/Status/Interval) sits ABOVE the table instead of overlapping
     it. Hide the advanced filter dropdowns on phones — Search remains. */
  .dt-container { float: none !important; width: 100% !important; }
  .dt-layout-row { display: block !important; }
  .dt-layout-cell { width: 100% !important; display: block !important; float: none !important; }
  /* Hide every advanced-filter column (filter-categories / filter-statuses /
     filter-actions / filter-intervals / filter-types …) — Search remains. */
  [class*="filter-categories"], [class*="filter-statuses"], [class*="filter-status"],
  [class*="filter-actions"], [class*="filter-action"], [class*="filter-interval"],
  [class*="filter-types"], [class*="filter-type"], [class*="filter-policies"],
  [class*="filter-power"] { display: none !important; }

  /* Wide tables / list panels scroll horizontally rather than overflow. */
  .table-responsive, .list-details, .list-details .list { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  main, main > .container-fluid { padding-left: 10px !important; padding-right: 10px !important; }

  /* Page-header action buttons (e.g. "Create virtual machine") wrap under the
     title instead of overlapping the fixed top-bar icons. */
  .page-title, .card-title, .card-header { flex-wrap: wrap !important; }
  .card-title .float-end, .card-header .float-end, .page-title .float-end { float: none !important; margin-top: 6px; }
  .card-title .btn, .card-header .btn { white-space: nowrap; }

  /* Hide the non-essential feedback launcher icons to de-crowd the top bar. */
  .gt-menu-main [class*="feedback"], #gt-feedback, .feedback-button { display: none !important; }

  /* Header action buttons that are absolutely/float positioned (e.g. "Create
     virtual machine", "Create policy") drop to static full-width so they clear
     the fixed top-bar icons. */
  .card-title .btn-primary, .card-header .btn-primary, .page-title .btn-primary,
  .card-title > .btn, .card-header > .btn {
    position: static !important; float: none !important; display: block !important;
    width: 100% !important; margin: 10px 0 0 0 !important;
  }
  /* Give the content room below the 65px fixed top bar. */
  main > .container-fluid > .row:first-child,
  main .list-details { margin-top: 8px; }

  /* Keep the top-bar icon group on ONE row so it doesn't wrap onto the page
     content. Compact padding + cap the page title width. */
  .gt-menu-main > li.float-end > a,
  .gt-menu-main > li.float-end .dropdown-toggle,
  .gt-menu-main > li.float-end .btn { padding-left: 5px !important; padding-right: 5px !important; }
  .gt-menu-main .page-title { max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Hide the four non-essential top-bar launchers on phones (notifications,
     feedback bullhorn, shutdown/restart, help) so EN + user + logout fit one
     row. Exact icon classes confirmed from the live DOM. */
  .gt-menu-main > li.float-end:has(.fa-power-off),
  .gt-menu-main > li.float-end:has(.fa-circle-question),
  .gt-menu-main > li.float-end:has(.fa-message-bot),
  .gt-menu-main > li.float-end:has(.fa-bullhorn) { display: none !important; }

  /* Toasts span the width comfortably. */
  .toast-container { left: 8px !important; right: 8px !important; bottom: 8px !important; }
}

@media (max-width: 576px) {
  .gt-menu-main .page-title, .page-title h1, .page-title { font-size: 17px !important; }
  /* Compact top-bar icon group. */
  .gt-menu-main > li.float-end { gap: 2px; }
}