/* Cross-page control/table consistency layer.
   Keeps icon sizes, control typography, and table typography aligned. */
:root {
  --ui-font-family-sans: var(--font-sans, var(--font-family, "Saira Semi Condensed", "Segoe UI", "Helvetica Neue", Arial, sans-serif));

  /* Core UI type scale (small-to-large). */
  --ui-font-size-5xs: 6px;
  --ui-font-size-4xs: 7px;
  --ui-font-size-3xs: 8px;
  --ui-font-size-3xs-plus: 8.5px;
  --ui-font-size-2xs: 10px;
  --ui-font-size-2xs-plus: 9px;
  --ui-font-size-xs-tight: 10.8px;
  --ui-font-size-xs: 11px;
  --ui-font-size-sm-tight: 11.8px;
  --ui-font-size-sm: 12px;
  --ui-font-size-md-tight: 12.8px;
  --ui-font-size-md: 13px;
  --ui-font-size-base: 14px;
  --ui-font-size-lg: 15px;
  --ui-font-size-xl: 16px;
  --ui-font-size-xl-plus: 17px;
  --ui-font-size-2xl: 18px;
  --ui-font-size-2xl-plus: 19px;
  --ui-font-size-3xl: 20px;
  --ui-font-size-3xl-plus: 21px;
  --ui-font-size-3xl-lg: 22px;
  --ui-font-size-4xl: 24px;
  --ui-font-size-4xl-plus: 26px;
  --ui-font-size-5xl: 28px;
  --ui-font-size-6xl: 30px;
  --ui-font-size-7xl: 32px;
  --ui-font-size-8xl: 36px;
  --ui-font-size-9xl: 40px;
  --ui-font-size-10xl: 48px;

  --ui-line-height-tight: 1.2;
  --ui-line-height-body: 1.4;
  --ui-line-height-relaxed: 1.5;

  /* Hierarchy aliases. */
  --ui-heading-h1-size: var(--ui-font-size-5xl);
  --ui-heading-h2-size: var(--ui-font-size-4xl);
  --ui-heading-h3-size: var(--ui-font-size-3xl);
  --ui-heading-h4-size: var(--ui-font-size-2xl);
  --ui-heading-h5-size: var(--ui-font-size-xl);
  --ui-heading-h6-size: var(--ui-font-size-lg);

  --ui-consistent-control-font-size: var(--ui-font-size-md);
  --ui-consistent-control-font-weight: 500;
  --ui-consistent-input-font-weight: 400;
  --ui-consistent-table-head-font-size: var(--ui-font-size-md);
  --ui-consistent-table-head-font-weight: 600;
  --ui-consistent-table-body-font-size: var(--ui-font-size-md);
  --ui-consistent-table-body-font-weight: 500;
  --ui-consistent-icon-size: var(--ui-font-size-sm);
}

html,
body,
input,
button,
select,
textarea {
  font-family: var(--ui-font-family-sans);
}

body {
  font-size: var(--ui-font-size-lg);
  line-height: var(--ui-line-height-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ui-font-family-sans);
  line-height: var(--ui-line-height-tight);
}

h1 { font-size: var(--ui-heading-h1-size); }
h2 { font-size: var(--ui-heading-h2-size); }
h3 { font-size: var(--ui-heading-h3-size); }
h4 { font-size: var(--ui-heading-h4-size); }
h5 { font-size: var(--ui-heading-h5-size); }
h6 { font-size: var(--ui-heading-h6-size); }

/* Keep the app/sidebar brand title on one compact, uniform scale everywhere. */
.sidebar .sidebar-logo {
  min-width: 0;
}

.sidebar .sidebar-logo h3,
.sidebar .sidebar-logo .sidebar-brand-title {
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.15;
  letter-spacing: 0.01em;
  font-size: var(--ui-font-size-md) !important;
  font-weight: 700 !important;
}

small,
.text-xs,
.caption,
.helper-text {
  font-size: var(--ui-font-size-sm);
  line-height: var(--ui-line-height-relaxed);
}

label,
.form-label,
.field-label {
  font-size: var(--ui-font-size-md);
  line-height: var(--ui-line-height-tight);
}

.main .btn,
.main .btn.btn-sm,
.main .btn.btn-md,
.main .btn.btn-lg,
.main .pagination-controls button,
.main .page-num,
.main .pagination-right label {
  font-size: var(--ui-consistent-control-font-size) !important;
  line-height: 1.2 !important;
}

.main .btn,
.main .btn.btn-sm,
.main .btn.btn-md,
.main .btn.btn-lg,
.main .pagination-controls button,
.main .page-num {
  font-weight: var(--ui-consistent-control-font-weight) !important;
}

.main select.form-select,
.main select.form-select-sm,
.main .dropdown-toggle,
.main .dropdown-option,
.main .search-box .search-input,
.main .notif-search-box input {
  font-size: var(--ui-consistent-control-font-size) !important;
  line-height: 1.2 !important;
  font-weight: var(--ui-consistent-input-font-weight) !important;
}

.main .btn i,
.main .btn svg,
.main .dropdown-toggle i,
.main .dropdown-toggle svg,
.main .search-box .search-icon,
.main .search-box .search-clear-btn i,
.main .search-box .search-clear-btn svg,
.main .notif-search-box i {
  width: var(--ui-consistent-icon-size);
  height: var(--ui-consistent-icon-size);
  font-size: var(--ui-consistent-icon-size) !important;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.main .data-table th,
.main .wa-table thead th,
.main .notif-table th,
.main .reprint-history-table th,
.main .audit-users-table th {
  font-size: var(--ui-consistent-table-head-font-size) !important;
  font-weight: var(--ui-consistent-table-head-font-weight) !important;
  line-height: 1.25 !important;
}

.main .data-table td,
.main .wa-table tbody td,
.main .notif-table td,
.main .reprint-history-table td,
.main .audit-users-table td {
  font-size: var(--ui-consistent-table-body-font-size) !important;
  font-weight: var(--ui-consistent-table-body-font-weight) !important;
  line-height: 1.3 !important;
}

/* Keep action cells from drifting back to tiny icon rendering. */
.main .wa-actions .btn i,
.main .actions .btn i,
.main .staff-actions .btn i {
  font-size: var(--ui-consistent-icon-size) !important;
}

/* Keep search clear and dropdown caret visually aligned with text. */
.main .search-box .search-clear-btn,
.main .dropdown-toggle i,
.main .dropdown-toggle svg {
  vertical-align: middle;
}