/* =========================================================
   v2.8.23 — targeted admin/mobile/frontend fixes
   Scope: layout/visibility fixes only unless explicitly noted in patch script.
   ========================================================= */

/* Global mobile safety */
@media (max-width: 860px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  main,
  .site-main,
  .page-main,
  .portal-main,
  .admin-main,
  .customer-main {
    max-width: 100%;
    overflow-x: hidden;
  }

  .container,
  .container-wide,
  .section-inner,
  .page-section,
  .clean-section {
    width: 100%;
    max-width: 100%;
    padding-left: clamp(24px, 6vw, 34px);
    padding-right: clamp(24px, 6vw, 34px);
  }
}

/* Buttons: readable hover/focus states on mobile and desktop */
.btn:hover,
.btn:focus-visible,
.button:hover,
.button:focus-visible,
.nav-login:hover,
.nav-login:focus-visible,
.customer-login:hover,
.customer-login:focus-visible,
a[href*="login"]:hover,
a[href*="login"]:focus-visible {
  color: #0F1B2D !important;
}

.btn-primary:hover,
.btn-primary:focus-visible,
button[type="submit"]:hover,
button[type="submit"]:focus-visible {
  color: #FFFFFF !important;
}

/* Mobile header: prevent login button from becoming dark/blank */
@media (max-width: 760px) {
  .nav-login,
  .customer-login,
  .header-login,
  a[href*="login"] {
    color: #0F1B2D !important;
    background: transparent !important;
    white-space: nowrap !important;
  }

  .nav-login:hover,
  .customer-login:hover,
  .header-login:hover,
  a[href*="login"]:hover {
    color: #0F1B2D !important;
    background: #EAF1FB !important;
  }
}

/* Overview: textile strip image smaller and calmer on mobile */
@media (max-width: 760px) {
  img[src*="strip-textile"],
  img[src*="strip_textile"],
  .strip-textile,
  .textile-strip img,
  .separator-strip img {
    width: 100% !important;
    height: clamp(72px, 18vw, 130px) !important;
    max-height: 130px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }

  .separator-strip,
  .textile-strip,
  .overview-strip {
    margin-top: 24px !important;
    margin-bottom: 32px !important;
    border: 0 !important;
    overflow: hidden !important;
  }
}

/* Overview: hide repeated application/use-case section on mobile */
@media (max-width: 860px) {
  section:has(.eyebrow),
  .section:has(.eyebrow) {
    overflow-wrap: anywhere;
  }

  section:has(.eyebrow):has(h2),
  .section:has(.eyebrow):has(h2) {
    min-width: 0;
  }

  section:has(.eyebrow):has(h2):has(.use-case-card),
  section:has(.eyebrow):has(h2):has(.application-card),
  section.use-cases,
  section.applications,
  .use-cases-section,
  .applications-section {
    display: none !important;
  }
}

/* EXIST/funding block: force clean stacking before the text gets squeezed */
@media (max-width: 980px) {
  .funding-grid,
  .exist-grid,
  .funding-implementation-grid,
  .exist-section .split,
  section:has(img[src*="exist"]):has(.clean-card),
  section:has(img[src*="Team"]):has(.clean-card) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    align-items: start !important;
  }

  .funding-grid > *,
  .exist-grid > *,
  .funding-implementation-grid > *,
  .exist-section .split > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .funding-grid img,
  .exist-grid img,
  .funding-implementation-grid img,
  .exist-section img,
  img[src*="exist"],
  img[src*="Team"] {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }
}

/* Services: output text and portal tablet image should align as a clean pair */
@media (min-width: 900px) {
  .output-grid,
  .services-output-grid,
  .portal-output-grid,
  .service-output-grid {
    display: grid !important;
    grid-template-columns: minmax(320px, 0.85fr) minmax(460px, 1.15fr) !important;
    gap: clamp(36px, 5vw, 88px) !important;
    align-items: stretch !important;
  }

  .output-grid > *,
  .services-output-grid > *,
  .portal-output-grid > *,
  .service-output-grid > * {
    height: 100% !important;
  }

  .output-grid img,
  .services-output-grid img,
  .portal-output-grid img,
  .service-output-grid img,
  img[src*="Portal_Tablet"] {
    width: 100% !important;
    height: 100% !important;
    min-height: 280px !important;
    object-fit: contain !important;
  }
}

@media (max-width: 899px) {
  img[src*="Portal_Tablet"] {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* Knowledge: morphology table mobile solution */
@media (max-width: 760px) {
  .morphology-table,
  .knowledge-table,
  .comparison-table,
  .table-wrap,
  .table-scroll {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 22px !important;
  }

  .morphology-table table,
  .knowledge-table table,
  .comparison-table table,
  .table-wrap table,
  .table-scroll table {
    width: max-content !important;
    min-width: 640px !important;
    table-layout: auto !important;
  }

  .morphology-table th,
  .morphology-table td,
  .knowledge-table th,
  .knowledge-table td,
  .comparison-table th,
  .comparison-table td {
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: auto !important;
    min-width: 170px !important;
    padding: 18px 20px !important;
    font-size: clamp(18px, 4.2vw, 24px) !important;
    line-height: 1.35 !important;
  }

  .morphology-table th:first-child,
  .morphology-table td:first-child,
  .knowledge-table th:first-child,
  .knowledge-table td:first-child,
  .comparison-table th:first-child,
  .comparison-table td:first-child {
    min-width: 210px !important;
    max-width: 240px !important;
  }
}

/* Aachen/history image: not oversized on mobile */
@media (max-width: 760px) {
  img[src*="Aachen"],
  img[src*="Karlsschrein"],
  img[src*="Cathedral"],
  img[src*="cloth_with_elephants"],
  .aachen-history img,
  .history-image img,
  .origin-image img {
    width: 100% !important;
    max-height: 420px !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
  }

  .aachen-history,
  .history-image,
  .origin-image {
    margin-top: 20px !important;
    margin-bottom: 28px !important;
  }
}

/* Admin: mobile cards/tables should be readable */
@media (max-width: 860px) {
  .admin-main,
  .admin-content,
  main.admin-main {
    padding-left: clamp(20px, 5vw, 34px) !important;
    padding-right: clamp(20px, 5vw, 34px) !important;
    overflow-x: hidden !important;
  }

  .admin-table,
  .admin-table-wrap,
  .customers-table,
  .orders-table,
  .products-table,
  .waitlist-table,
  .newsletter-table,
  table[data-admin-table] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: visible !important;
  }

  .admin-table thead,
  .customers-table thead,
  .orders-table thead,
  .products-table thead,
  .waitlist-table thead,
  .newsletter-table thead,
  table[data-admin-table] thead {
    display: none !important;
  }

  .admin-table tbody,
  .admin-table tr,
  .customers-table tbody,
  .customers-table tr,
  .orders-table tbody,
  .orders-table tr,
  .products-table tbody,
  .products-table tr,
  .waitlist-table tbody,
  .waitlist-table tr,
  .newsletter-table tbody,
  .newsletter-table tr,
  table[data-admin-table] tbody,
  table[data-admin-table] tr {
    display: block !important;
    width: 100% !important;
  }

  .admin-table tr,
  .customers-table tr,
  .orders-table tr,
  .products-table tr,
  .waitlist-table tr,
  .newsletter-table tr,
  table[data-admin-table] tr {
    margin: 0 0 18px !important;
    border: 1px solid #C7D7EE !important;
    border-radius: 20px !important;
    background: #FFFFFF !important;
    overflow: hidden !important;
  }

  .admin-table td,
  .customers-table td,
  .orders-table td,
  .products-table td,
  .waitlist-table td,
  .newsletter-table td,
  table[data-admin-table] td {
    display: grid !important;
    grid-template-columns: minmax(118px, 38%) minmax(0, 1fr) !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 16px 18px !important;
    border-bottom: 1px solid #C7D7EE !important;
    text-align: right !important;
    overflow-wrap: anywhere !important;
  }

  .admin-table td::before,
  .customers-table td::before,
  .orders-table td::before,
  .products-table td::before,
  .waitlist-table td::before,
  .newsletter-table td::before,
  table[data-admin-table] td::before {
    content: attr(data-label);
    text-align: left;
    color: #6F829F;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 0.78rem;
  }

  .admin-actions,
  .bulk-actions,
  .toolbar-actions,
  .table-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .admin-actions button,
  .bulk-actions button,
  .toolbar-actions button,
  .table-actions button {
    white-space: nowrap !important;
    min-width: 44px !important;
  }

  .admin-card,
  .admin-panel,
  .admin-form-card {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .admin-card input,
  .admin-card select,
  .admin-card textarea,
  .admin-panel input,
  .admin-panel select,
  .admin-panel textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* Fix skeleton placeholders that stay visible after failed/empty data load */
.admin-data-fallback-active .skeleton-table,
.admin-data-fallback-active .loading-table,
.admin-data-fallback-active .skeleton-list {
  display: none !important;
}