/**
 * Enterprise visual polish
 * Aligns spacing, padding, font sizes, icon sizes, and responsive behavior.
 * Load after design-tokens-components.css.
 */

/* ========== Layout spacing (single source of truth) ========== */
:root {
  --layout-body-padding: var(--space-12, 0.75rem);
  --layout-section-gap: var(--space-24, 1.5rem);
  --layout-block-gap: var(--space-16, 1rem);
  --card-header-padding-y: var(--space-16, 1rem);
  --card-header-padding-x: var(--space-20, 1.25rem);
  --card-body-padding: var(--space-20, 1.25rem);
  --modal-body-padding: var(--space-24, 1.5rem);
  --modal-footer-padding-y: var(--space-16, 1rem);
  --modal-footer-padding-x: var(--space-24, 1.5rem);
  --table-cell-padding-y: var(--space-12, 0.75rem);
  --table-cell-padding-x: var(--space-16, 1rem);
  --flow-header-gap: var(--space-12, 0.75rem);
  --flow-header-margin-bottom: var(--space-24, 1.5rem);
  /* Typography hierarchy */
  --heading-page-size: var(--text-xl, 1.25rem);
  --heading-page-weight: var(--font-weight-semibold, 600);
  --heading-section-size: var(--text-md, 1rem);
  --heading-section-weight: var(--font-weight-semibold, 600);
  --body-size: var(--text-sm, 0.875rem);
  --caption-size: var(--text-xs, 0.75rem);
  --line-height-body: var(--text-line-height-normal, 1.5);
  --line-height-heading: var(--text-line-height-tight, 1.25);
  /* Icon scale */
  --icon-sm: 1rem;
  --icon-md: 1.25rem;
  --icon-lg: 1.5rem;
  --icon-xl: 2rem;
  /* Touch target minimum (accessibility); use 40px desktop, 44px mobile */
  --touch-target-min: 2.5rem;
}

/* ========== Page body ========== */
.dashboard-main-body {
  padding: 0.5rem;
  max-width: 100%;
}

/* ========== Section spacing ========== */
.dashboard-main-body > .mb-24,
.dashboard-main-body > .card.border.mb-24,
.dashboard-main-body > .row.gy-4.mb-24,
.dashboard-main-body > .d-flex.flex-wrap.mb-24 {
  margin-bottom: var(--layout-section-gap) !important;
}

/* ========== Flow page header (consistent spacing & hierarchy) ========== */
.dashboard-main-body .d-flex.flex-wrap.align-items-center.justify-content-between.gap-3.mb-24:first-of-type,
.flow-page-header-wrap {
  margin-bottom: var(--flow-header-margin-bottom);
  gap: var(--flow-header-gap);
  align-items: flex-start;
}

.flow-page-header-wrap h6,
.heading-page {
  font-size: var(--heading-page-size);
  font-weight: var(--heading-page-weight);
  line-height: var(--line-height-heading);
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

.flow-page-header-wrap p.text-secondary-light,
.heading-page + p {
  font-size: var(--body-size);
  line-height: var(--line-height-body);
  margin-top: var(--space-2, 0.25rem);
}

/* ========== Icon sizes (normalize iconify and ri) ========== */
.icon-sm,
.iconify-icon.icon-sm,
.flow-page-header-wrap .text-xl.iconify-icon {
  width: var(--icon-md);
  height: var(--icon-md);
  font-size: var(--icon-md);
}

.icon-md,
.iconify-icon.icon-md {
  width: var(--icon-lg);
  height: var(--icon-lg);
  font-size: var(--icon-lg);
}

.icon-lg,
.iconify-icon.icon-lg {
  width: var(--icon-xl);
  height: var(--icon-xl);
  font-size: var(--icon-xl);
}

.icon-xl {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 2.5rem;
}

/* Page title icon in flow header */
.flow-page-header-wrap h6 iconify-icon:first-child,
.d-flex.align-items-center.gap-8 h6 iconify-icon:first-child {
  width: var(--icon-xl);
  height: var(--icon-xl);
  font-size: var(--icon-xl);
  flex-shrink: 0;
}

/* ========== Cards ========== */
.card {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.card .card-header {
  padding: var(--card-header-padding-y) var(--card-header-padding-x);
  font-size: var(--heading-section-size);
  font-weight: var(--heading-section-weight);
  line-height: var(--line-height-heading);
  border-bottom-width: 1px;
}

.card .card-body:not(.p-0) {
  padding: var(--card-body-padding);
  font-size: var(--body-size);
  line-height: var(--line-height-body);
}

/* ========== Tables ========== */
.table.bordered-table th,
.table.bordered-table td,
.table th,
.table td {
  padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
  font-size: var(--body-size);
  line-height: var(--line-height-body);
  vertical-align: middle;
}

.table thead th {
  font-weight: var(--font-weight-semibold);
  font-size: var(--caption-size);
  text-transform: none;
  color: var(--color-text-secondary);
  border-bottom-width: 1px;
}

/* ========== Modals ========== */
.modal-content {
  border-radius: var(--radius-lg);
}

.modal-header {
  padding: var(--card-header-padding-y) var(--modal-body-padding);
}

.modal-body {
  padding: var(--modal-body-padding);
  font-size: var(--body-size);
  line-height: var(--line-height-body);
}

.modal-footer {
  padding: var(--modal-footer-padding-y) var(--modal-footer-padding-x);
  gap: var(--space-3);
}

.modal-title {
  font-size: var(--heading-section-size);
  font-weight: var(--heading-section-weight);
}

/* ========== Buttons (consistent padding & hierarchy) ========== */
.btn {
  font-weight: var(--btn-font-weight);
  border-radius: var(--btn-radius);
  min-height: var(--touch-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.btn-sm {
  min-height: 2rem;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
}

.btn-lg {
  min-height: 3rem;
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-md);
}

.btn .iconify-icon,
.btn iconify-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

/* ========== Forms ========== */
.form-label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-2);
  line-height: var(--line-height-body);
}

.form-control,
.form-select {
  min-height: 2.5rem;
  font-size: var(--text-sm);
}

/* ========== Breadcrumb ========== */
.dashboard-main-body > nav[aria-label="breadcrumb"],
.dashboard-main-body > .breadcrumb {
  font-size: var(--caption-size);
  padding: 0 0 var(--space-2) 0;
  margin-bottom: var(--space-4);
}

.breadcrumb-item + .breadcrumb-item::before {
  opacity: 0.6;
}

/* Section spacing utility */
.section-gap {
  margin-bottom: var(--layout-section-gap);
}

/* ========== Alerts (consistent padding) ========== */
.alert {
  padding: var(--space-4) var(--space-5);
  font-size: var(--body-size);
  line-height: var(--line-height-body);
  border-radius: var(--radius-md);
}

/* ========== Empty / error / loading states ========== */
.empty-state-block.text-center.py-48.px-24,
.state-error-block,
.state-loading-block {
  padding: var(--space-24) var(--layout-body-padding);
}

/* ========== Responsive ========== */
@media (max-width: 991.98px) {
  :root {
    --layout-body-padding: var(--space-8, 0.5rem);
    --card-body-padding: var(--space-16, 1rem);
    --modal-body-padding: var(--space-20, 1.25rem);
  }

  .dashboard-main-body {
    padding: 0.5rem;
  }

  .flow-page-header-wrap,
  .d-flex.flex-wrap.align-items-center.justify-content-between.gap-3.mb-24 {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .flow-page-header-wrap .d-flex.align-items-center.gap-12.flex-wrap,
  .d-flex.align-items-center.gap-12.flex-wrap {
    justify-content: flex-start;
  }

  .card-header,
  .modal-header {
    padding: var(--space-3) var(--space-4);
  }

  .table.bordered-table th,
  .table.bordered-table td {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-xs);
  }
}

@media (max-width: 575.98px) {
  :root {
    --layout-body-padding: var(--space-6, 0.375rem);
    --touch-target-min: 44px;
  }

  .btn:not(.btn-sm) {
    min-height: 44px;
  }

  .modal-dialog {
    margin: var(--space-2);
    max-width: calc(100% - var(--space-4));
  }
}

/* ========== Readability ========== */
.dashboard-main-body p,
.card-body p,
.modal-body p {
  max-width: 65ch;
  color: var(--color-text-secondary);
}

.heading-page,
.heading-section,
.card-header .mb-0,
.modal-title {
  color: var(--color-text-primary);
}