/**
 * 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: 576px) {
  .slick-hide-sm { display: none !important; }
}

/* Hide on medium screens (tablets) */
@media (max-width: 768px) {
  .slick-hide-md { display: none !important; }
}

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

/* Show only on small screens */
.slick-show-sm { display: none !important; }
@media (max-width: 576px) {
  .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: 768px) {
  .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: 576px) {
  .slick-stack-sm {
    flex-direction: column !important;
  }
  .slick-stack-sm > * {
    width: 100% !important;
  }
}

/* Stack children vertically on medium screens */
@media (max-width: 768px) {
  .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;
  }
}

/* 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: 3px;
    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: 9px; 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: 10px !important;
  line-height: var(--line-height-120, 1.2);
}