/* ==========================================================================
   CSS Container Queries — public/container-queries.css
   SmartMeeting Visual Enhancement Layer

   Provides component-level responsive layouts using CSS Container Queries.
   Falls back gracefully to existing media-query-based responsive styles
   when the browser does not support container queries.

   Targets:
     - Admin Console: .data-panel (table ↔ card layout)
     - Main Recording Page: .panel--summary, .panel--minutes (compact layout)
     - Modals: .modal-content (1-col ↔ 2-col form layout)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Admin Console — Data Panel Responsive Layout
   Requirements: 3.1, 3.4, 3.5

   NOTE: Container queries (container-type: inline-size) are NOT used here
   because they create a new containing block, which breaks position:fixed
   descendants such as .room-more-dropdown. A media query is used instead
   to provide the same table-to-card layout switch.
   -------------------------------------------------------------------------- */

/* When viewport is narrow (≤768px), switch table to card layout */
@media (max-width: 768px) {
  /* Hide table header row */
  .data-panel .table-wrapper table thead {
    display: none;
  }

  /* Convert table rows into stacked card items */
  .data-panel .table-wrapper table,
  .data-panel .table-wrapper table tbody,
  .data-panel .table-wrapper table tr,
  .data-panel .table-wrapper table td {
    display: block;
    width: 100%;
  }

  .data-panel .table-wrapper table tr {
    padding: 12px;
    margin-bottom: 8px;
    border: 1px solid var(--dt-border-default, var(--border-color, #e2e8f0));
    border-radius: var(--dt-radius-md, var(--radius-medium, 12px));
    background: var(--dt-bg-surface, var(--surface-bg, #ffffff));
  }

  .data-panel .table-wrapper table td {
    padding: 4px 0;
    border: none;
    text-align: left;
  }

  /* Show column label as a pseudo-element before each cell */
  .data-panel .table-wrapper table td::before {
    content: attr(data-label);
    display: inline-block;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--dt-text-secondary, var(--text-muted, #5f6c7b));
    min-width: 100px;
    margin-right: 8px;
  }

  /* Stack the panel toolbar vertically */
  .data-panel .panel-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .data-panel .data-panel__header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Fallback: @supports kept for documentation; no container-type set on
   .data-panel to avoid breaking fixed-position descendants. */

/* --------------------------------------------------------------------------
   2. Main Recording Page — Summary & Minutes Panel Container Queries
   Requirements: 3.2
   -------------------------------------------------------------------------- */

/* Establish panels as inline-size containers */
.panel--summary {
  container-type: inline-size;
}

.panel--minutes {
  container-type: inline-size;
}

/* Compact layout when panel width is narrow (≤400px) */
@container (max-width: 400px) {
  .panel-title {
    font-size: 13.5px;
  }

  .panel-caption {
    font-size: 13.5px;
  }

  .panel-body--fill {
    padding: 10px;
  }

  .rich-content {
    font-size: 13.5px;
  }

  .panel-header {
    gap: 2px;
  }

  .panel {
    padding: 12px;
  }
}

/* --------------------------------------------------------------------------
   3. Modal Content — Container Queries for Form Layout
   Requirements: 3.3
   -------------------------------------------------------------------------- */

/* Establish modal-content as a container */
.modal-content {
  container-type: inline-size;
}

/* 2-column form layout when modal is wide enough (≥480px) */
@container (min-width: 480px) {
  .form-grid,
  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
  }

  /* Allow full-width items to span both columns */
  .form-grid > .form-group--full,
  .form-row > .form-group--full {
    grid-column: 1 / -1;
  }

  /* ACL add form rows in 2-column layout */
  .acl-add-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: end;
  }

  /* User mapping list in 2-column grid */
  .user-mapping-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
}