/**
 * SLICK RESPONSIVE - Utility Classes
 * ===================================
 *
 * Companion to slick-components.css for display/visibility utilities.
 * Provides responsive helper classes for showing/hiding content at breakpoints.
 *
 * BREAKPOINTS (canonical for OpenNebula cloud UX):
 * - phone: 0-479
 * - mobile: 0-767
 * - tablet: 768-1023
 * - desktop: 1024+
 *
 * NAMING CONVENTION:
 * - .slick-hide-{bp}: Hidden at and below breakpoint
 * - .slick-show-{bp}: Visible only at and below breakpoint
 * - .slick-stack-{bp}: Stack children vertically at and below breakpoint
 */

/* ============================================
   VISIBILITY UTILITIES
   ============================================ */

/* Hide on small screens (mobile) */
@media (max-width: 575.98px) {
  .slick-hide-sm { display: none !important; }
}

/* Hide on medium screens (phones and small tablets). 767px, not 768px, so the
   -md utilities never overlap the 768px start of the -tablet range. */
@media (max-width: 767px) {
  .slick-hide-md { display: none !important; }
}

/* Hide on large screens */
@media (max-width: 993px) {
  .slick-hide-lg { display: none !important; }
}

/* Show only on small screens */
.slick-show-sm { display: none !important; }
@media (max-width: 575.98px) {
  .slick-show-sm { display: block !important; }
  .slick-show-sm-inline { display: inline !important; }
  .slick-show-sm-flex { display: flex !important; }
}

/* Show only on medium screens and below */
.slick-show-md { display: none !important; }
@media (max-width: 767px) {
  .slick-show-md { display: block !important; }
  .slick-show-md-inline { display: inline !important; }
  .slick-show-md-flex { display: flex !important; }
}

/* Canonical OpenNebula ranges */
.slick-show-phone,
.slick-show-mobile,
.slick-show-tablet,
.slick-show-desktop { display: none !important; }

@media (max-width: 479px) {
  .slick-hide-phone { display: none !important; }
  .slick-show-phone { display: block !important; }
  .slick-show-phone-inline { display: inline !important; }
  .slick-show-phone-flex { display: flex !important; }
}

@media (max-width: 767px) {
  .slick-hide-mobile { display: none !important; }
  .slick-show-mobile { display: block !important; }
  .slick-show-mobile-inline { display: inline !important; }
  .slick-show-mobile-flex { display: flex !important; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .slick-hide-tablet { display: none !important; }
  .slick-show-tablet { display: block !important; }
  .slick-show-tablet-inline { display: inline !important; }
  .slick-show-tablet-flex { display: flex !important; }
}

@media (min-width: 1024px) {
  .slick-hide-desktop { display: none !important; }
  .slick-show-desktop { display: block !important; }
  .slick-show-desktop-inline { display: inline !important; }
  .slick-show-desktop-flex { display: flex !important; }
}

/* ============================================
   LAYOUT UTILITIES
   ============================================ */

/* Stack children vertically on small screens */
@media (max-width: 575.98px) {
  .slick-stack-sm {
    flex-direction: column !important;
  }
  .slick-stack-sm > * {
    width: 100% !important;
  }
}

/* Stack children vertically on medium screens */
@media (max-width: 767px) {
  .slick-stack-md {
    flex-direction: column !important;
  }
  .slick-stack-md > * {
    width: 100% !important;
  }
}

@media (max-width: 767px) {
  .slick-stack-mobile {
    flex-direction: column !important;
  }
  .slick-stack-mobile > * {
    width: 100% !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .slick-stack-tablet {
    flex-direction: column !important;
  }
  .slick-stack-tablet > * {
    width: 100% !important;
  }
}

/* ============================================
   STACKED TABLE (.slick-table--stack)
   ============================================
   When the table's host is narrower than 600px each body row becomes a card
   of labelled values, so edit and destructive actions stay on screen
   instead of behind a horizontal scroller. The host is measured, not the
   viewport, so a table in a narrow card or beside a sidebar stacks too.
   Markup contract:
   - wrap the table in .slick-table-host (often the .slick-table-scroll
     region itself); without a host the table never stacks;
   - every body cell that needs a label carries data-label="<column name>";
     cells without one span the card (names, empty-state rows);
   - the cell holding row actions is .slick-table__actions and sits at the
     bottom of the card; an action cell with no controls is hidden.
   The header row stays in the accessibility tree, visually hidden. */
#content-cloud .slick-table-host, .template_togglebox .slick-table-host {
  container: slick-table / inline-size;
  min-width: 0;
}

@container slick-table (max-width: 600px) {
  #content-cloud .slick-table.slick-table--stack, .template_togglebox .slick-table.slick-table--stack {
    display: block;
    width: 100%;
    min-width: 0 !important;
    background: transparent;
    box-shadow: none;
  }

  #content-cloud .slick-table--stack thead, .template_togglebox .slick-table--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  #content-cloud .slick-table--stack tbody, .template_togglebox .slick-table--stack tbody {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2, 8px);
  }

  /* :nth-child(n) matches the specificity of the striped-row rule so every
     card shares one surface. */
  #content-cloud .slick-table--stack tbody tr:nth-child(n), .template_togglebox .slick-table--stack tbody tr:nth-child(n) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2, 8px);
    padding: var(--space-3, 12px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
  }

  #content-cloud .slick-table--stack tbody tr > :is(td, th), .template_togglebox .slick-table--stack tbody tr > :is(td, th) {
    display: block;
    width: auto !important;
    min-width: 0 !important;
    padding: 0;
    border: 0;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  /* The label sits on its own line above the value, so a value made of
     several nodes (value plus unit, input plus help text) stays together. */
  #content-cloud .slick-table--stack tbody tr > [data-label]::before, .template_togglebox .slick-table--stack tbody tr > [data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--space-1, 4px);
    font-size: var(--slick-font-xs);
    font-weight: var(--font-weight-600, 600);
    line-height: var(--line-height-135, 1.35);
    letter-spacing: var(--letter-spacing-030, 0.03em);
    text-transform: uppercase;
    color: var(--color-fg-muted);
  }

  /* max-width and the inline padding override the !important
     td.oneb-action-col lock (76px Manage column) so the divider and the
     controls span the whole card. */
  #content-cloud .slick-table--stack tbody tr > .slick-table__actions, .template_togglebox .slick-table--stack tbody tr > .slick-table__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
    justify-content: flex-start;
    max-width: none !important;
    padding-top: var(--space-2, 8px);
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-top: 1px solid var(--color-border);
  }

  #content-cloud .slick-table--stack tbody tr > .slick-table__actions:not(:has(*)), .template_togglebox .slick-table--stack tbody tr > .slick-table__actions:not(:has(*)) {
    display: none;
  }
}

/* Input context helpers */
@media (hover: hover) and (pointer: fine) {
  .oneb-touch-only { display: none !important; }
}

@media (hover: none), (pointer: coarse) {
  .oneb-hover-only { display: none !important; }
}

html[data-oneb-input="coarse"] .oneb-hover-only { display: none !important; }
html[data-oneb-input="fine"] .oneb-touch-only { display: none !important; }

/* ============================================
   IP COPY STYLING (migrated from responsive.css)
   ============================================ */

@media (hover: hover) and (pointer: fine) {
  .ip-address:hover {
    background-color: var(--brand-primary-bg, rgba(0, 123, 255, 0.1));
    border-radius: var(--radius-sm);
    padding: 2px 4px;
  }

  .ip-address:hover .copy-icon {
    opacity: 1 !important;
  }
}

/* ============================================
   TAG BADGE RESPONSIVE
   ============================================ */

@media (max-width: 767px) {
  .slick-tag-wrap, .tags-container { max-width: 150px; }
  .slick-tag, .tag-badge { font-size: var(--font-size-sm, 12px); padding: 2px 5px; max-width: 80px; }
}

/* ============================================
   TAGS COLUMN WRAPPING (migrated from responsive.css)
   ============================================ */

.opennebula-table-scroll .tags-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: flex-start;
}

.opennebula-table-scroll .tags-wrapper .slick-tag,
.opennebula-table-scroll .tags-wrapper .tag-badge,
.opennebula-table-scroll .tags-wrapper .label {
  margin: 1px;
  flex-shrink: 0;
  max-width: 100%;
  word-break: break-word;
  font-size: var(--font-size-sm, 12px) !important;
  line-height: var(--line-height-120, 1.2);
}