/* IllyVoIP unified layout + spacing (Portal + SMNG).
 *
 * Keep this file small and focused on layout consistency:
 * - container gutters
 * - page header spacing / style
 * - responsive rules for common patterns
 */

:root {
  --iv-container-max: 95%;
  --iv-container-pad-x: 16px;
  --iv-page-pad-y: 16px;
  --iv-page-header-gap: 12px;
  --iv-page-header-mb: 14px;
  --iv-title-color: #0f172a;
  --iv-muted-color: #64748b;
  --iv-title-size: 18px;
  --iv-title-weight: 600;
  --iv-subtitle-size: 14px;
  --iv-subtitle-weight: 400;
  --iv-action-radius: 10px;
  /* Brand/action color used for primary actions in page headers. */
  --iv-action-bg: #5b9b8f;
}

@media (max-width: 768px) {
  :root {
    --iv-container-max: 100%;
    --iv-container-pad-x: 14px;
    --iv-page-pad-y: 14px;
    --iv-page-header-gap: 10px;
    --iv-page-header-mb: 12px;
  }
}

/* Center content and make gutters consistent across Portal + SMNG. */
.container-fluid {
  max-width: var(--iv-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--iv-container-pad-x) !important;
  padding-right: var(--iv-container-pad-x) !important;
}

/* Many pages use `.wrapper > .container-fluid` (legacy portal + SMNG). Give it consistent vertical padding. */
.wrapper > .container-fluid {
  padding-top: var(--iv-page-pad-y);
  padding-bottom: var(--iv-page-pad-y);
}

/* Add predictable vertical padding to the main content region (many pages rely on defaults). */
.content-page .content {
  padding-top: var(--iv-page-pad-y);
  padding-bottom: var(--iv-page-pad-y);
}

/* Common page-header wrapper pattern (most portal pages). */
.container-fluid > .d-flex.align-items-center.justify-content-between {
  gap: var(--iv-page-header-gap);
  flex-wrap: wrap;
  margin-bottom: var(--iv-page-header-mb);
}

/* Unify page title spacing across legacy + new pages (remove the old 70px line-height look). */
.container-fluid .page-title,
.container-fluid .page-title-box .page-title {
  line-height: 1.2;
  margin: 0 0 var(--iv-page-header-mb);
  color: var(--iv-title-color);
  font-size: var(--iv-title-size);
  font-weight: var(--iv-title-weight);
}

.page-title-box {
  padding: 0;
  margin-bottom: var(--iv-page-header-mb);
}

/* Standard "page header" block: use this instead of a standalone boxed card. */
.iv-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--iv-page-header-gap);
  flex-wrap: wrap;
  margin-bottom: var(--iv-page-header-mb);
}

/* If a page currently uses a dedicated header-only card-box, make it look like a header (not a card). */
.card-box.iv-page-header {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin-bottom: var(--iv-page-header-mb);
}

.iv-page-header .header-title,
.iv-page-header h4.header-title {
  margin: 0;
  line-height: 1.2;
  font-size: var(--iv-title-size);
  font-weight: var(--iv-title-weight);
  color: var(--iv-title-color);
}

.iv-page-header .text-muted {
  color: var(--iv-muted-color) !important;
  font-size: var(--iv-subtitle-size);
  font-weight: var(--iv-subtitle-weight);
}

/* Standardize "subtitle under title" typography for common header patterns. */
.container-fluid > .d-flex.align-items-center.justify-content-between .text-muted,
.container-fluid > .d-flex.align-items-center.justify-content-between p {
  color: var(--iv-muted-color) !important;
  font-size: var(--iv-subtitle-size);
  font-weight: var(--iv-subtitle-weight);
}

/* Voice Agent Studio has its own CSS; force its header typography into the standard. */
.va-page-title h4 {
  font-size: var(--iv-title-size) !important;
  font-weight: var(--iv-title-weight) !important;
  letter-spacing: normal !important;
}
.va-page-title p {
  color: var(--iv-muted-color) !important;
  font-size: var(--iv-subtitle-size) !important;
  font-weight: var(--iv-subtitle-weight) !important;
  line-height: 1.5 !important;
}

/* Standardize header action buttons across Portal + SMNG (limit to header areas). */
.iv-page-header .btn,
.container-fluid > .d-flex.align-items-center.justify-content-between .btn,
.va-page-title .btn,
.va-inline-actions .btn {
  border-radius: var(--iv-action-radius) !important;
  font-weight: 600;
}

/* Unify primary action color (CTA) in page headers. */
.iv-page-header .btn.btn-primary,
.iv-page-header .btn.btn-success,
.container-fluid > .d-flex.align-items-center.justify-content-between .btn.btn-primary,
.container-fluid > .d-flex.align-items-center.justify-content-between .btn.btn-success,
.va-page-title .btn.btn-primary,
.va-page-title .btn.btn-success,
.va-inline-actions .btn.btn-primary,
.va-inline-actions .btn.btn-success {
  background-color: var(--iv-action-bg) !important;
  border-color: var(--iv-action-bg) !important;
}

.iv-page-header .btn.btn-primary:hover,
.iv-page-header .btn.btn-success:hover,
.iv-page-header .btn.btn-primary:focus,
.iv-page-header .btn.btn-success:focus,
.iv-page-header .btn.btn-primary:active,
.iv-page-header .btn.btn-success:active,
.container-fluid > .d-flex.align-items-center.justify-content-between .btn.btn-primary:hover,
.container-fluid > .d-flex.align-items-center.justify-content-between .btn.btn-success:hover,
.container-fluid > .d-flex.align-items-center.justify-content-between .btn.btn-primary:focus,
.container-fluid > .d-flex.align-items-center.justify-content-between .btn.btn-success:focus,
.container-fluid > .d-flex.align-items-center.justify-content-between .btn.btn-primary:active,
.container-fluid > .d-flex.align-items-center.justify-content-between .btn.btn-success:active,
.va-page-title .btn.btn-primary:hover,
.va-page-title .btn.btn-success:hover,
.va-page-title .btn.btn-primary:focus,
.va-page-title .btn.btn-success:focus,
.va-page-title .btn.btn-primary:active,
.va-page-title .btn.btn-success:active,
.va-inline-actions .btn.btn-primary:hover,
.va-inline-actions .btn.btn-success:hover,
.va-inline-actions .btn.btn-primary:focus,
.va-inline-actions .btn.btn-success:focus,
.va-inline-actions .btn.btn-primary:active,
.va-inline-actions .btn.btn-success:active {
  background-color: var(--iv-action-bg) !important;
  border-color: var(--iv-action-bg) !important;
}

@media (max-width: 420px) {
  .iv-page-header .btn {
    width: 100%;
  }

  .container-fluid > .d-flex.align-items-center.justify-content-between .btn {
    width: 100%;
  }
}