/* ShadLab OS — Phase 12.0.5 Responsive Consistency */

:root {
  --sl-safe-top: env(safe-area-inset-top, 0px);
  --sl-safe-right: env(safe-area-inset-right, 0px);
  --sl-safe-bottom: env(safe-area-inset-bottom, 0px);
  --sl-safe-left: env(safe-area-inset-left, 0px);
  --sl-touch-target: 44px;
}

html.shadlab-responsive-lock,
html.shadlab-responsive-lock body {
  overflow: hidden !important;
}

.shadlab-responsive {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.shadlab-scroll-x {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.shadlab-scroll-y {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.shadlab-no-horizontal-overflow {
  max-width: 100vw;
  overflow-x: hidden;
}

.sl-touch,
.sl-btn,
button.sl-btn,
a.sl-btn,
.sl-tab,
.sl-dropdown-item,
.sl-sidebar-item {
  min-height: var(--sl-touch-target);
}

.sl-form-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sl-space-4);
}

.sl-col-12 { grid-column: span 12; }
.sl-col-8 { grid-column: span 8; }
.sl-col-6 { grid-column: span 6; }
.sl-col-4 { grid-column: span 4; }
.sl-col-3 { grid-column: span 3; }

.sl-responsive-table {
  width: 100%;
  border-collapse: collapse;
}

.sl-responsive-table th,
.sl-responsive-table td {
  padding: var(--sl-space-3);
  border-bottom: 1px solid var(--sl-color-border);
  text-align: right;
}

.sl-mobile-card-list {
  display: none;
}

.sl-popup-safe,
.sl-modal,
.sl-command-box {
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
}

.sl-modal-body,
.sl-command-list,
.sl-notification-panel {
  overscroll-behavior: contain;
}

.sl-sticky-mobile-actions {
  display: flex;
  gap: var(--sl-space-2);
  align-items: center;
  justify-content: flex-start;
}

@media (min-width: 783px) and (max-width: 1024px) {
  .shadlab-shell {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .shadlab-shell-main,
  .sl-admin-shell-main {
    padding: var(--sl-space-5);
  }

  .sl-admin-topbar {
    flex-wrap: wrap;
  }

  .sl-global-search {
    min-width: 260px;
    flex: 1;
  }

  .sl-card {
    padding: var(--sl-space-4);
  }

  .sl-form-grid .sl-col-3,
  .sl-form-grid .sl-col-4 {
    grid-column: span 6;
  }
}

@media (max-width: 782px) {
  body {
    -webkit-text-size-adjust: 100%;
  }

  .shadlab-responsive,
  .shadlab-platform-wrap,
  .shadlab-admin-shell,
  .shadlab-shell-main,
  .wrap {
    max-width: 100%;
    overflow-x: hidden;
  }

  .shadlab-shell-main {
    padding: calc(var(--sl-space-4) + var(--sl-safe-top)) var(--sl-space-3) calc(var(--sl-space-5) + var(--sl-safe-bottom));
  }

  .sl-card,
  .sl-card-soft,
  .sl-card-metric {
    border-radius: var(--sl-radius-lg);
    padding: var(--sl-space-4);
  }

  .sl-form-grid {
    grid-template-columns: 1fr;
    gap: var(--sl-space-3);
  }

  .sl-col-12,
  .sl-col-8,
  .sl-col-6,
  .sl-col-4,
  .sl-col-3 {
    grid-column: 1 / -1;
  }

  .sl-field {
    margin-bottom: var(--sl-space-3);
  }

  .sl-input,
  .sl-select,
  .sl-textarea,
  input[type="text"],
  input[type="search"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  select,
  textarea {
    min-height: var(--sl-touch-target);
    font-size: 16px;
    max-width: 100%;
  }

  .sl-table-wrap {
    border-radius: var(--sl-radius-md);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sl-table,
  .sl-responsive-table {
    min-width: 680px;
  }

  .sl-table-mobile-cards table,
  .sl-table-mobile-cards thead,
  .sl-table-mobile-cards tbody,
  .sl-table-mobile-cards th,
  .sl-table-mobile-cards td,
  .sl-table-mobile-cards tr {
    display: block;
  }

  .sl-table-mobile-cards thead {
    display: none;
  }

  .sl-table-mobile-cards tr {
    background: var(--sl-color-surface);
    border: 1px solid var(--sl-color-border);
    border-radius: var(--sl-radius-lg);
    box-shadow: var(--sl-shadow-sm);
    margin-bottom: var(--sl-space-3);
    padding: var(--sl-space-2);
  }

  .sl-table-mobile-cards td {
    display: flex;
    justify-content: space-between;
    gap: var(--sl-space-3);
    border-bottom: 1px solid var(--sl-color-border);
    padding: var(--sl-space-2);
    text-align: left;
  }

  .sl-table-mobile-cards td:last-child {
    border-bottom: 0;
  }

  .sl-table-mobile-cards td:before {
    content: attr(data-label);
    font-weight: var(--sl-font-weight-bold);
    color: var(--sl-color-muted);
    text-align: right;
  }

  .sl-modal-backdrop,
  .sl-command-palette {
    padding: calc(var(--sl-space-3) + var(--sl-safe-top)) var(--sl-space-3) calc(var(--sl-space-3) + var(--sl-safe-bottom));
    align-items: flex-end;
  }

  .sl-modal {
    width: 100%;
    max-height: calc(100dvh - var(--sl-space-6) - var(--sl-safe-top) - var(--sl-safe-bottom));
    border-radius: var(--sl-radius-xl) var(--sl-radius-xl) 0 0;
  }

  .sl-modal-header,
  .sl-modal-footer {
    position: sticky;
    background: var(--sl-color-surface);
    z-index: 2;
  }

  .sl-modal-header {
    top: 0;
  }

  .sl-modal-footer {
    bottom: 0;
  }

  .sl-command-box {
    width: 100%;
    max-height: calc(100dvh - var(--sl-space-6) - var(--sl-safe-top) - var(--sl-safe-bottom));
    border-radius: var(--sl-radius-xl) var(--sl-radius-xl) 0 0;
  }

  .sl-notification-panel {
    width: min(94vw, 420px);
    padding: calc(var(--sl-space-4) + var(--sl-safe-top)) var(--sl-space-4) calc(var(--sl-space-4) + var(--sl-safe-bottom));
  }

  .sl-sticky-mobile-actions {
    position: sticky;
    bottom: calc(var(--sl-space-3) + var(--sl-safe-bottom));
    z-index: 20;
    background: var(--sl-color-surface);
    border: 1px solid var(--sl-color-border);
    border-radius: var(--sl-radius-xl);
    box-shadow: var(--sl-shadow-md);
    padding: var(--sl-space-3);
    margin-top: var(--sl-space-4);
    overflow-x: auto;
  }

  .sl-sticky-mobile-actions .sl-btn {
    flex: 0 0 auto;
  }
}

@supports not (height: 100dvh) {
  .sl-popup-safe,
  .sl-modal,
  .sl-command-box {
    max-height: calc(100vh - 32px);
  }
}