/* ==========================================================================
   Responsive Breakpoints — Mobile-First Adaptive Layout
   ColorFlow / Walmart CSI Compass
   Uses CSS custom properties from variables.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   Breakpoint: 1024px — Tablets and small desktops
   - Form grids collapse to single column
   - Navigation wraps instead of overflowing
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* Force form-grid to single column */
  .form-grid {
    grid-template-columns: 1fr;
  }

  /* Form panels stack instead of side-by-side */
  #content .forms .pan1,
  #content .forms .pan2 {
    float: none;
    width: 100%;
    margin-right: 0;
  }
}

/* --------------------------------------------------------------------------
   Breakpoint: 768px — Small tablets and large phones
   - Wrapper padding reduced
   - Table rows stack as blocks
   - Buttons go full width
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  #wrapper {
    padding: var(--space-md);
  }

  /* Table cells stack vertically */
  #content .rows,
  #content .rows thead,
  #content .rows tbody,
  #content .rows tr,
  #content .rows th,
  #content .rows td {
    display: block;
    width: 100%;
  }

  /* Hide table header row — data attributes can label cells */
  #content .rows .tr_th {
    display: none;
  }

  #content .rows td {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--color-border);
  }

  /* Buttons stretch full width */
  #content .but {
    width: 100%;
    box-sizing: border-box;
  }

  /* Button variants keep auto width on mobile */
  #content .but.but-primary,
  #content .but.but-secondary,
  #content .but.but-danger,
  #content .but.but-ghost,
  #content .but.but-success,
  #content .but.but-warning,
  #content .but.but-info {
    width: auto;
  }

  /* Pagination wraps */
  #content .page div {
    margin-bottom: var(--space-xs);
  }

  /* Header bar stacks on narrow screens */
  .header-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .header-nav {
    margin-left: 0;
  }

  /* Hide pipe separators — clutters stacked mobile nav */
  .header-nav a.sel + a.sel::before {
    content: none;
  }

  /* Cap-button navigation wraps */
  .cap_buttons {
    float: none;
    width: 100%;
  }

  .cap_buttons .cap_nav_org,
  .cap_buttons .cap_nav_qua,
  .cap_buttons .cap_nav_grey,
  .cap_buttons .cap_nav_black {
    float: none;
    width: 100%;
  }

  .cap_buttons .cap_nav_org li,
  .cap_buttons .cap_nav_qua li,
  .cap_buttons .cap_nav_grey li,
  .cap_buttons .cap_nav_black li {
    float: none;
  }

  /* Forms constrain to viewport */
  input, textarea, select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  #content .forms .row {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Breakpoint: 480px — Mobile phones
   - Logo image constrained
   - Status text uses smaller font
   - Tighter spacing throughout
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  /* Constrain logo */
  .header-bar .logo {
    width: 120px;
  }

  /* Smaller nav text */
  .header-nav a.sel {
    font-size: var(--font-size-sm);
    padding: 3px 5px;
  }

  /* Reduce content padding */
  #content {
    padding: 10px 10px 16px;
  }
  #footer {
    padding: 10px;
  }

  /* Subtitle scales down */
  #content .sub_tit {
    font-size: var(--font-size-md);
  }

  /* Nav items tighter padding */
  #header .menu .nav li a {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-base);
  }

  /* Pagination tighter */
  #content .page div a {
    padding: var(--space-xs);
  }

  /* Footer wraps gracefully on small screens */
  .footer-inner {
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
  }

  .footer-text {
    font-size: var(--font-size-xs);
  }
}


/* --------------------------------------------------------------------------
   Responsive display utilities
   -------------------------------------------------------------------------- */
@media (max-width: 768px)  { .d-none-mobile  { display: none !important; } }
@media (max-width: 1024px) { .d-none-tablet  { display: none !important; } }
@media (min-width: 769px)  { .d-none-desktop { display: none !important; } }


/* --------------------------------------------------------------------------
   Print styles — clean output for enterprise reports
   -------------------------------------------------------------------------- */
@media print {
  /* Hide non-content elements */
  .cf-mega-nav,
  .header-bar,
  .cf-filter,
  .cf-filter-bar,
  .cf-filter-toggle,
  .cf-filter-panel,
  .cf-table-toolbar,
  .cf-table-footer,
  .cf-page,
  .cf-page-info,
  .cf-toast-container,
  .cf-nav-hamburger,
  .cf-nav-overlay,
  #footer,
  .but,
  .but-primary,
  .but-secondary,
  .but-ghost,
  .but-danger,
  .but-link,
  .but-icon,
  .profile-actions,
  dialog,
  [x-cloak] {
    display: none !important;
  }

  /* Full-width content */
  #content {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 8px !important;
  }

  #wrapper {
    padding: 0 !important;
  }

  /* Force table layout (override mobile card layout) */
  .cf-table table thead {
    display: table-header-group !important;
  }

  .cf-table table tbody tr {
    display: table-row !important;
    border: none !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
  }

  .cf-table table tbody td {
    display: table-cell !important;
    border-bottom: 1px solid #ccc !important;
    padding: 4px 6px !important;
  }

  .cf-table table tbody td::before {
    content: none !important;
  }

  /* Show mobile-hidden columns in print */
  .cf-mobile-hide,
  .cf-tablet-hide {
    display: table-cell !important;
  }

  /* Remove decorative elements */
  .cf-card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }

  .cf-table-wrap {
    overflow: visible !important;
    border: none !important;
  }

  .login-spectral,
  .reg-spectral {
    display: none !important;
  }

  /* Clean typography */
  body {
    font-size: 11pt !important;
    background: white !important;
    color: black !important;
  }

  a {
    color: black !important;
    text-decoration: none !important;
  }

  /* Avoid page breaks inside table rows */
  .cf-table table tbody tr {
    page-break-inside: avoid;
  }
}