/* 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;
}

/* Keep modal/drawer typography compact and consistent without changing page headers. */
:root {
  --ui-modal-header-title-size: var(--ui-font-size-md, 13px);
  --ui-modal-section-title-size: var(--ui-font-size-sm, 12px);
  --ui-modal-label-size: var(--ui-font-size-sm, 12px);
  --ui-modal-control-size: var(--ui-font-size-sm, 12px);
  --ui-modal-hint-size: var(--ui-font-size-xs, 11px);
}

.side-drawer .drawer-header h2,
.side-drawer .drawer-header h3,
.side-drawer .drawer-header .drawer-title,
.drawer-content .drawer-header h2,
.drawer-content .drawer-header h3,
.drawer-content .drawer-header .drawer-title,
.side-modal .modal-header h2,
.side-modal .modal-header h3,
.modal-center .modal-header h2,
.modal-center .modal-header h3 {
  font-size: var(--ui-modal-header-title-size) !important;
  line-height: 1.25 !important;
}

.side-drawer .section-title,
.side-drawer .permission-header,
.drawer-content .section-title,
.drawer-content .permission-header,
.side-modal .section-title,
.side-modal .permission-header,
.modal-center .section-title,
.modal-center .permission-header {
  font-size: var(--ui-modal-section-title-size) !important;
  line-height: 1.25 !important;
}

.side-drawer .section-title i,
.side-drawer .permission-header i,
.drawer-content .section-title i,
.drawer-content .permission-header i,
.side-modal .section-title i,
.side-modal .permission-header i,
.modal-center .section-title i,
.modal-center .permission-header i {
  font-size: var(--ui-modal-section-title-size) !important;
}

.side-drawer .form-label,
.side-drawer .form-group > label,
.drawer-content .form-label,
.drawer-content .form-group > label,
.side-modal .form-label,
.side-modal .form-group > label,
.modal-center .form-label,
.modal-center .form-group > label {
  font-size: var(--ui-modal-label-size) !important;
  line-height: 1.2 !important;
}

.side-drawer .form-input,
.side-drawer .form-select,
.side-drawer .form-textarea,
.side-drawer .dropdown-toggle,
.side-drawer .dropdown-option,
.side-drawer .client-multiselect-header,
.side-drawer .client-multiselect-item,
.side-drawer .client-multiselect-empty,
.side-drawer .client-multiselect-search input,
.drawer-content .form-input,
.drawer-content .form-select,
.drawer-content .form-textarea,
.drawer-content .dropdown-toggle,
.drawer-content .dropdown-option,
.drawer-content .client-multiselect-header,
.drawer-content .client-multiselect-item,
.drawer-content .client-multiselect-empty,
.drawer-content .client-multiselect-search input,
.side-modal .form-input,
.side-modal .form-select,
.side-modal .form-textarea,
.side-modal .dropdown-toggle,
.side-modal .dropdown-option,
.side-modal .client-multiselect-header,
.side-modal .client-multiselect-item,
.side-modal .client-multiselect-empty,
.side-modal .client-multiselect-search input,
.modal-center .form-input,
.modal-center .form-select,
.modal-center .form-textarea,
.modal-center .dropdown-toggle,
.modal-center .dropdown-option,
.modal-center .client-multiselect-header,
.modal-center .client-multiselect-item,
.modal-center .client-multiselect-empty,
.modal-center .client-multiselect-search input {
  font-size: var(--ui-modal-control-size) !important;
  line-height: 1.2 !important;
}

.side-drawer .field-hint,
.side-drawer .form-label-hint,
.drawer-content .field-hint,
.drawer-content .form-label-hint,
.side-modal .field-hint,
.side-modal .form-label-hint,
.modal-center .field-hint,
.modal-center .form-label-hint {
  font-size: var(--ui-modal-hint-size) !important;
  line-height: 1.3 !important;
}

.modal-center .modal-body-title {
  font-size: var(--ui-modal-header-title-size) !important;
}

.modal-center .modal-body-subtitle {
  font-size: var(--ui-modal-control-size) !important;
}