/* =========================================================
   App styles (Bootstrap-friendly)
   ========================================================= */

/* Base */
body { padding-top: 30px; }

/* Global page width: keep admin/workbench screens readable, but let tables
   breathe more than Bootstrap's fixed centered container. */
.container {
  width: 90vw;
  max-width: 90vw;
}

/* Width helpers for pages that want less than the global 90vw width. */
.container--narrow { max-width: 700px; }

/* Backward-compatible helper. The global container is already wide now. */
.container.container--wide {
  width: 90vw;
  max-width: 90vw;
}

/* Page-specific hook for the wide invites page when using container-fluid */
.page-admin-invites { padding-left: 15px; padding-right: 15px; }

/* JournalFlow workbench/runtime preview: use the global 90vw container,
   not a page-specific 100vw breakout. */
.jf-workbench-hero,
.jf-workbench-grid {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.jf-workbench-grid {
  grid-template-columns: 1fr !important;
}

#jf-authoring-runtime-preview [class*="col-md-"],
#jf-authoring-runtime-preview [class*="col-sm-"] {
  float: none;
  width: 100%;
}

#jf-authoring-runtime-preview .row {
  margin-left: 0;
  margin-right: 0;
}

#jf-authoring-runtime-preview .row > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 12px;
}

#jf-authoring-runtime-preview .panel,
#jf-authoring-runtime-preview .jf-runtime-section,
#jf-authoring-runtime-preview details,
#jf-authoring-runtime-preview .table-responsive {
  width: 100%;
}

/* Source Row Map Workbench preview. Use the global 90vw container and keep
   preview panels full width inside that container. */
#sourceRowMapWorkbenchForm,
#sourceRowMapPreviewPanels {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

#sourceRowMapPreviewPanels .source-row-map-preview-stack {
  display: block;
}

#sourceRowMapPreviewPanels .source-row-map-preview-stack > .panel {
  width: 100%;
  margin-bottom: 12px;
}

#sourceRowMapPreviewPanels .source-row-map-preview-table th,
#sourceRowMapPreviewPanels .source-row-map-preview-table td {
  vertical-align: top;
  font-size: 12px;
}

#sourceRowMapPreviewPanels .source-row-map-review-json summary {
  cursor: pointer;
  color: #8a6d3b;
  font-weight: 600;
}

@media (max-width: 992px) {
  .container,
  .container.container--wide,
  .jf-workbench-hero,
  .jf-workbench-grid,
  #sourceRowMapWorkbenchForm,
  #sourceRowMapPreviewPanels {
    width: auto;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Tiny brand tweak is in header inline to avoid FOUC */

/* Utilities */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Roles table */
.table-roles { width:100%; table-layout:auto; }
.table-roles th, .table-roles td { vertical-align:middle; }
.table-roles .btn { padding:4px 8px; font-size:12px; }

/* =========================================================
   Invites table
   ========================================================= */

.table-invites {
  width: 100%;
  table-layout: fixed; /* compact on small/medium screens */
}
.table-invites th,
.table-invites td {
  vertical-align: middle;
}

/* Column width hints for compact layouts */
.table-invites .cell-id       { width: 90px; }
.table-invites .cell-username { width: 160px; }
.table-invites .cell-email    { width: 260px; }
.table-invites .cell-primary  { width: 140px; }
.table-invites .cell-extras   { width: 240px; }
.table-invites .cell-expires  { width: 190px; white-space: nowrap; }
.table-invites .cell-status   { width: 140px; white-space: nowrap; }
.table-invites .cell-flavor   { width: 140px; white-space: nowrap; }
.table-invites .cell-actions  { width: 460px; }

/* Labels spacing inside cells */
.table-invites .cell-primary .label,
.table-invites .cell-extras .label,
.table-invites .cell-flavor .label {
  display: inline-block;
  margin: 2px 4px 2px 0;
}

/* Action buttons compact + inline forms */
.table-invites .btn {
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1.3333;
}
.table-invites .cell-actions form {
  display: inline-block;
  margin: 0 6px 0 0;
}
.table-invites .cell-actions form:last-child {
  margin-right: 0;
}

/* Wider screens: let columns auto-size and breathe */
@media (min-width: 1200px) {
  .table-invites { table-layout: auto; }
  .table-invites .cell-email  { max-width: 600px; }
  .table-invites .cell-actions { width: 1%; white-space: nowrap; } /* shrink-to-fit */
}

/* Very wide screens: allow even wider content */
@media (min-width: 1600px) {
  .table-invites .cell-email  { max-width: 800px; }
}

/* Small screens: stack actions, constrain email */
@media (max-width: 992px) {
  .table-invites .cell-email { width: auto; max-width: 180px; }
  .table-invites .cell-actions .btn {
    display: block;
    width: 100%;
    margin-bottom: 6px;
  }
  .table-invites .cell-actions .btn + .btn { margin-left: 0; }
  .table-invites .cell-actions form {
    display: block;
    margin: 0 0 6px 0;
  }
}

/* Subtle, fast horizontal scrolling when needed */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}