/* IDSA UI Standard (additive + reversible) */
:root {
  --idsa-ui-max-width: 1320px;
  --idsa-ui-page-pad-x: 14px;
  --idsa-ui-page-pad-y: 12px;
  --idsa-ui-card-bg: #ffffff;
  --idsa-ui-card-fg: #0f172a;
  --idsa-ui-card-muted: #334155;
  --idsa-ui-card-border: #dbe5f1;
  --idsa-ui-card-radius: 14px;
  --idsa-ui-btn-outline-fg: #1e293b;
  --idsa-ui-btn-outline-border: #334155;
  --idsa-ui-btn-outline-bg: #ffffff;
  --idsa-ui-btn-outline-hover-bg: #eff6ff;
  --idsa-ui-btn-primary-fg: #ffffff;
  --idsa-ui-table-head-bg: #f8fbff;
  --idsa-ui-table-head-fg: #0f172a;
  --idsa-ui-table-border: #dbe5f1;
  --idsa-ui-table-max-height: 420px;
}

.idsa-page-container {
  width: 100%;
  max-width: 100%;
  padding: var(--idsa-ui-page-pad-y) var(--idsa-ui-page-pad-x);
  box-sizing: border-box;
}

.idsa-page-inner {
  width: 100%;
  max-width: var(--idsa-ui-max-width);
  margin: 0 auto;
  box-sizing: border-box;
}

.idsa-card {
  background: var(--idsa-ui-card-bg);
  color: var(--idsa-ui-card-fg);
  border: 1px solid var(--idsa-ui-card-border);
  border-radius: var(--idsa-ui-card-radius);
  padding: 14px;
  box-sizing: border-box;
}

.idsa-card .idsa-title,
.idsa-card .idsa-card-title,
.idsa-card h1,
.idsa-card h2,
.idsa-card h3 {
  color: var(--idsa-ui-card-fg);
}

.idsa-card .idsa-subtitle,
.idsa-card .idsa-card-subtitle,
.idsa-card p {
  color: var(--idsa-ui-card-muted);
}

.idsa-card .idsa-btn-outline {
  color: var(--idsa-ui-btn-outline-fg);
  border-color: var(--idsa-ui-btn-outline-border);
  background: var(--idsa-ui-btn-outline-bg);
}

.idsa-card .idsa-btn-outline:hover {
  color: var(--idsa-ui-card-fg);
  background: var(--idsa-ui-btn-outline-hover-bg);
  box-shadow: none;
}

.idsa-card .idsa-btn-primary {
  color: var(--idsa-ui-btn-primary-fg);
}

.idsa-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

.idsa-table-scroll {
  max-height: var(--idsa-ui-table-max-height);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.idsa-table-wrap table {
  width: 100%;
  border-collapse: collapse;
}

.idsa-table-wrap table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--idsa-ui-table-head-bg);
  color: var(--idsa-ui-table-head-fg);
  border-bottom: 1px solid var(--idsa-ui-table-border);
}

.idsa-table-wrap table th,
.idsa-table-wrap table td {
  border-bottom: 1px solid var(--idsa-ui-table-border);
  vertical-align: top;
}

.idsa-table-meta {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.idsa-table-toggle {
  border: 1px solid #bfd3ea;
  border-radius: 8px;
  background: #ffffff;
  color: #0f3f75;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  padding: 7px 10px;
  cursor: pointer;
}

.idsa-table-toggle:hover {
  background: #f2f7fd;
}

@media (max-width: 1024px) {
  :root {
    --idsa-ui-max-width: 100%;
    --idsa-ui-page-pad-x: 10px;
    --idsa-ui-page-pad-y: 10px;
  }
}

@media (max-width: 640px) {
  :root {
    --idsa-ui-page-pad-x: 8px;
    --idsa-ui-page-pad-y: 8px;
    --idsa-ui-table-max-height: 340px;
  }

  .idsa-card {
    padding: 10px;
  }
}

/* ─── S5: Token-aligned typography rhythm ───────────────────────────────────
   Additive heading + utility text rules for user panel content area.
   Scoped to .idsa-page-inner to avoid affecting shell chrome / topbar / nav. */

.idsa-page-inner h1,
.idsa-section-h1 {
  font-size: var(--idsa-font-size-7, 24px);
  font-weight: 800;
  line-height: var(--idsa-line-height-1, 1.25);
  color: var(--idsa-text-primary, #0f1f34);
  margin: 0 0 var(--idsa-space-5, 20px);
}

.idsa-page-inner h2,
.idsa-section-title {
  font-size: var(--idsa-font-size-5, 18px);
  font-weight: 700;
  line-height: var(--idsa-line-height-2, 1.4);
  color: var(--idsa-text-primary, #0f1f34);
  margin: 0 0 var(--idsa-space-4, 16px);
}

.idsa-page-inner h3 {
  font-size: var(--idsa-font-size-4, 16px);
  font-weight: 600;
  line-height: var(--idsa-line-height-2, 1.4);
  color: var(--idsa-text-primary, #0f1f34);
  margin: 0 0 var(--idsa-space-3, 12px);
}

/* Utility text helpers — scoped to user root to avoid site-wide collision */
body.idsa-user-root .idsa-meta,
body.idsa-user-root .idsa-muted {
  font-size: var(--idsa-font-size-2, 13px);
  color: var(--idsa-text-muted, #607590);
  line-height: var(--idsa-line-height-2, 1.4);
}

/* Uppercase label (e.g. section kicker, field label, status tag) */
body.idsa-user-root .idsa-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--idsa-text-muted, #607590);
  line-height: 1.3;
}

/* Responsive type scale — tighten large headings on narrow screens */
@media (max-width: 479px) {
  .idsa-page-inner h1,
  .idsa-section-h1 {
    font-size: var(--idsa-font-size-6, 20px);
  }
  .idsa-page-inner h2 {
    font-size: var(--idsa-font-size-4, 16px);
  }
}