/*
 * AccFlow interface system
 * A semantic, RTL-safe layer shared by Bootstrap and DaisyUI components.
 * Loaded after core.css and ui-compact.css so legacy pages inherit the same
 * forms, cards, tables, dialogs and interaction states without a rebuild.
 */

body.app-ui-compact {
  /* Semantic palette: light appearance */
  --app-color-canvas: #f5f7fa;
  --app-color-surface: #ffffff;
  --app-color-surface-soft: #f9fafb;
  --app-color-surface-muted: #f2f4f7;
  --app-color-text: #344054;
  --app-color-text-strong: #101828;
  --app-color-text-secondary: #667085;
  --app-color-placeholder: #667085;
  --app-color-border: #d0d5dd;
  --app-color-border-strong: #98a2b3;
  --app-color-accent: #5b4fd6;
  --app-color-accent-hover: #493dbf;
  --app-color-accent-soft: #f0efff;
  --app-color-success: #067647;
  --app-color-success-hover: #05603a;
  --app-color-warning: #b54708;
  --app-color-warning-hover: #93370d;
  --app-color-danger: #b42318;
  --app-color-danger-hover: #912018;
  --app-focus-ring: rgba(91, 79, 214, 0.22);
  --app-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
  --app-shadow-sm:
    0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --app-shadow-md:
    0 10px 28px rgba(16, 24, 40, 0.13), 0 2px 6px rgba(16, 24, 40, 0.06);
  --app-shadow-modal:
    0 24px 64px rgba(16, 24, 40, 0.24), 0 8px 20px rgba(16, 24, 40, 0.12);

  /* Keep framework components on the same semantic palette. */
  --bs-primary: var(--app-color-accent);
  --bs-primary-rgb: 91, 79, 214;
  --bs-body-bg: var(--app-color-canvas);
  --bs-body-bg-rgb: 245, 247, 250;
  --bs-paper-bg: var(--app-color-surface);
  --bs-paper-bg-rgb: 255, 255, 255;
  --bs-card-bg: var(--app-color-surface);
  --bs-body-color: var(--app-color-text);
  --bs-body-color-rgb: 52, 64, 84;
  --bs-heading-color: var(--app-color-text-strong);
  --bs-secondary-color: var(--app-color-text-secondary);
  --bs-secondary-color-rgb: 102, 112, 133;
  --bs-secondary-bg: var(--app-color-surface-muted);
  --bs-secondary-bg-rgb: 242, 244, 247;
  --bs-tertiary-bg: #eaecf0;
  --bs-tertiary-bg-rgb: 234, 236, 240;
  --bs-border-color: var(--app-color-border);
  --bs-link-color: #4f46c8;
  --bs-link-hover-color: #3f37a9;
  --bs-success: var(--app-color-success);
  --bs-success-rgb: 6, 118, 71;
  --bs-warning: var(--app-color-warning);
  --bs-warning-rgb: 181, 71, 8;
  --bs-danger: var(--app-color-danger);
  --bs-danger-rgb: 180, 35, 24;
  --bs-focus-ring-color: var(--app-focus-ring);
  --bs-box-shadow-sm: var(--app-shadow-sm);
  --bs-box-shadow: var(--app-shadow-md);

  --color-base-100: var(--app-color-surface);
  --color-base-200: var(--app-color-surface-muted);
  --color-base-300: var(--app-color-border);
  --color-base-content: var(--app-color-text);
  --color-primary: var(--app-color-accent);
  --color-primary-content: #ffffff;
  --color-success: var(--app-color-success);
  --color-success-content: #ffffff;
  --color-warning: var(--app-color-warning);
  --color-warning-content: #ffffff;
  --color-error: var(--app-color-danger);
  --color-error-content: #ffffff;

  --app-control-height: 2.5rem;
  --app-control-height-sm: 2.25rem;
  --app-icon-size: 1.125rem;
  --app-icon-size-xs: 0.875rem;
  --app-icon-size-sm: 1rem;
  --app-icon-size-md: 1.25rem;
  --app-icon-size-lg: 1.5rem;
  --app-icon-size-xl: 2rem;
  --app-table-icon-size: 1rem;
  --app-table-action-size: 2rem;
  --bs-icon-size: var(--app-icon-size);
  --bs-icon-size-xs: var(--app-icon-size-xs);
  --bs-icon-size-sm: var(--app-icon-size-sm);
  --bs-icon-size-md: var(--app-icon-size-md);
  --bs-icon-size-lg: var(--app-icon-size-lg);
  --bs-icon-size-xl: var(--app-icon-size-xl);
  --app-radius: 0.75rem;
  --app-radius-sm: 0.625rem;
  --app-radius-lg: 1rem;
  --app-control-border: var(--app-color-border-strong);
  --app-hover-bg: rgba(91, 79, 214, 0.055);
  --app-soft-bg: var(--app-color-surface-soft);
  --app-border-strong: var(--app-color-border-strong);

  color: var(--app-color-text);
  background: var(--app-color-canvas);
  font-size: 0.9375rem;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Shared icon scale. Explicit size classes always win over button-size rules. */
body.app-ui-compact .icon-base {
  width: var(--app-icon-size);
  min-width: var(--app-icon-size);
  height: var(--app-icon-size);
  font-size: var(--app-icon-size);
  line-height: 1;
  vertical-align: middle;
}

body.app-ui-compact i.ti:not(.icon-base) {
  font-size: var(--app-icon-size);
  line-height: 1;
  vertical-align: middle;
}

body.app-ui-compact :where(.btn-icon.btn-xs, .btn-icon.btn-sm, .btn-icon.btn-lg, .btn-icon.btn-xl)
  .icon-base:not(.icon-xs):not(.icon-sm):not(.icon-md):not(.icon-lg):not(.icon-xl):not([class*="px"]) {
  width: var(--app-icon-size) !important;
  min-width: var(--app-icon-size) !important;
  height: var(--app-icon-size) !important;
  font-size: var(--app-icon-size) !important;
}

body.app-ui-compact .icon-base.icon-xs {
  width: var(--app-icon-size-xs) !important;
  min-width: var(--app-icon-size-xs) !important;
  height: var(--app-icon-size-xs) !important;
  font-size: var(--app-icon-size-xs) !important;
}

body.app-ui-compact .icon-base.icon-sm {
  width: var(--app-icon-size-sm) !important;
  min-width: var(--app-icon-size-sm) !important;
  height: var(--app-icon-size-sm) !important;
  font-size: var(--app-icon-size-sm) !important;
}

body.app-ui-compact .icon-base.icon-md {
  width: var(--app-icon-size-md) !important;
  min-width: var(--app-icon-size-md) !important;
  height: var(--app-icon-size-md) !important;
  font-size: var(--app-icon-size-md) !important;
}

body.app-ui-compact .icon-base.icon-lg {
  width: var(--app-icon-size-lg) !important;
  min-width: var(--app-icon-size-lg) !important;
  height: var(--app-icon-size-lg) !important;
  font-size: var(--app-icon-size-lg) !important;
}

body.app-ui-compact .icon-base.icon-xl {
  width: var(--app-icon-size-xl) !important;
  min-width: var(--app-icon-size-xl) !important;
  height: var(--app-icon-size-xl) !important;
  font-size: var(--app-icon-size-xl) !important;
}

/* Every data table uses one icon and action-button size on desktop. */
body.app-ui-compact table :where(.icon-base.ti, i.ti) {
  width: var(--app-table-icon-size) !important;
  min-width: var(--app-table-icon-size) !important;
  height: var(--app-table-icon-size) !important;
  font-size: var(--app-table-icon-size) !important;
  line-height: 1 !important;
  vertical-align: middle;
}

body.app-ui-compact table :where(.btn, .icon-link, .app-sort-link, .page-link) > svg:not([data-icon-size-preserve]) {
  width: var(--app-table-icon-size) !important;
  min-width: var(--app-table-icon-size) !important;
  height: var(--app-table-icon-size) !important;
  flex: 0 0 var(--app-table-icon-size);
  vertical-align: middle;
}

body.app-ui-compact table :where(.btn-icon, .app-table-action, .app-row-action) {
  width: var(--app-table-action-size) !important;
  min-width: var(--app-table-action-size) !important;
  height: var(--app-table-action-size) !important;
  min-height: var(--app-table-action-size) !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem !important;
}

body.app-ui-compact table :where(.btn-icon, .app-table-action, .app-row-action) :where(.icon-base.ti, i.ti, svg) {
  width: var(--app-table-icon-size) !important;
  min-width: var(--app-table-icon-size) !important;
  height: var(--app-table-icon-size) !important;
  font-size: var(--app-table-icon-size) !important;
  line-height: 1 !important;
}

/* Shared table-action geometry and semantic colors. */
body.app-ui-compact table .btn {
  height: var(--app-table-action-size) !important;
  min-height: var(--app-table-action-size) !important;
  padding: 0.375rem 0.625rem !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border-radius: 0.5rem !important;
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1 !important;
  white-space: nowrap;
}

body.app-ui-compact table :where(.btn-primary, .btn-info, .btn-label-primary, .btn-label-info, .btn-outline-primary, .btn-outline-info) {
  border-color: color-mix(in srgb, var(--app-color-accent) 28%, transparent) !important;
  background: color-mix(in srgb, var(--app-color-accent) 12%, transparent) !important;
  color: var(--app-color-accent) !important;
}

body.app-ui-compact table :where(.btn-secondary, .btn-label-secondary, .btn-outline-secondary, .btn-ghost) {
  border-color: var(--app-color-border) !important;
  background: var(--app-color-surface-muted) !important;
  color: var(--app-color-text-secondary) !important;
}

body.app-ui-compact table :where(.btn-success, .btn-label-success, .btn-outline-success) {
  border-color: color-mix(in srgb, var(--app-color-success) 30%, transparent) !important;
  background: color-mix(in srgb, var(--app-color-success) 12%, transparent) !important;
  color: var(--app-color-success) !important;
}

body.app-ui-compact table :where(.btn-warning, .btn-label-warning, .btn-outline-warning) {
  border-color: color-mix(in srgb, var(--app-color-warning) 32%, transparent) !important;
  background: color-mix(in srgb, var(--app-color-warning) 13%, transparent) !important;
  color: var(--app-color-warning) !important;
}

body.app-ui-compact table :where(.btn-danger, .btn-error, .btn-label-danger, .btn-outline-danger) {
  border-color: color-mix(in srgb, var(--app-color-danger) 30%, transparent) !important;
  background: color-mix(in srgb, var(--app-color-danger) 11%, transparent) !important;
  color: var(--app-color-danger) !important;
}

body.app-ui-compact table :where(.btn-primary, .btn-info, .btn-label-primary, .btn-label-info, .btn-outline-primary, .btn-outline-info):not(:disabled, .disabled):hover,
body.app-ui-compact table :where(.btn-primary, .btn-info, .btn-label-primary, .btn-label-info, .btn-outline-primary, .btn-outline-info):not(:disabled, .disabled):focus-visible {
  border-color: var(--app-color-accent) !important;
  background: var(--app-color-accent) !important;
  color: #fff !important;
}

body.app-ui-compact table :where(.btn-secondary, .btn-label-secondary, .btn-outline-secondary, .btn-ghost):not(:disabled, .disabled):hover,
body.app-ui-compact table :where(.btn-secondary, .btn-label-secondary, .btn-outline-secondary, .btn-ghost):not(:disabled, .disabled):focus-visible {
  border-color: var(--app-color-border-strong) !important;
  background: var(--app-color-text-secondary) !important;
  color: #fff !important;
}

body.app-ui-compact table :where(.btn-success, .btn-label-success, .btn-outline-success):not(:disabled, .disabled):hover,
body.app-ui-compact table :where(.btn-success, .btn-label-success, .btn-outline-success):not(:disabled, .disabled):focus-visible {
  border-color: var(--app-color-success) !important;
  background: var(--app-color-success) !important;
  color: #fff !important;
}

body.app-ui-compact table :where(.btn-warning, .btn-label-warning, .btn-outline-warning):not(:disabled, .disabled):hover,
body.app-ui-compact table :where(.btn-warning, .btn-label-warning, .btn-outline-warning):not(:disabled, .disabled):focus-visible {
  border-color: var(--app-color-warning) !important;
  background: var(--app-color-warning) !important;
  color: #fff !important;
}

body.app-ui-compact table :where(.btn-danger, .btn-error, .btn-label-danger, .btn-outline-danger):not(:disabled, .disabled):hover,
body.app-ui-compact table :where(.btn-danger, .btn-error, .btn-label-danger, .btn-outline-danger):not(:disabled, .disabled):focus-visible {
  border-color: var(--app-color-danger) !important;
  background: var(--app-color-danger) !important;
  color: #fff !important;
}

body.app-ui-compact table .btn:is(:disabled, .disabled, .btn-disabled) {
  border-color: var(--app-color-border) !important;
  background: var(--app-color-surface-muted) !important;
  color: var(--app-color-text-secondary) !important;
  opacity: 0.65;
  box-shadow: none !important;
  transform: none !important;
}

html[data-bs-theme="dark"] body.app-ui-compact {
  --app-color-canvas: #161b26;
  --app-color-surface: #1f2633;
  --app-color-surface-soft: #252d3b;
  --app-color-surface-muted: #2b3443;
  --app-color-text: #d0d5dd;
  --app-color-text-strong: #f2f4f7;
  --app-color-text-secondary: #aab2c0;
  --app-color-placeholder: #aab2c0;
  --app-color-border: #3b4658;
  --app-color-border-strong: #596579;
  --app-color-accent: #9b8cff;
  --app-color-accent-hover: #b1a6ff;
  --app-color-accent-soft: rgba(155, 140, 255, 0.14);
  --app-color-success: #32d583;
  --app-color-success-hover: #6ce9a6;
  --app-color-warning: #fdb022;
  --app-color-warning-hover: #fec84b;
  --app-color-danger: #f97066;
  --app-color-danger-hover: #fda29b;
  --app-focus-ring: rgba(155, 140, 255, 0.3);
  --app-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.18);
  --app-shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.24);
  --app-shadow-md: 0 14px 32px rgba(0, 0, 0, 0.3);
  --app-shadow-modal: 0 28px 72px rgba(0, 0, 0, 0.52);

  --bs-primary-rgb: 155, 140, 255;
  --bs-body-bg-rgb: 22, 27, 38;
  --bs-paper-bg-rgb: 31, 38, 51;
  --bs-body-color-rgb: 208, 213, 221;
  --bs-secondary-color-rgb: 170, 178, 192;
  --bs-secondary-bg-rgb: 43, 52, 67;
  --bs-tertiary-bg: #344054;
  --bs-tertiary-bg-rgb: 52, 64, 84;
  --bs-link-color: #b9b0ff;
  --bs-link-hover-color: #d0caff;
  --bs-success-rgb: 50, 213, 131;
  --bs-warning-rgb: 253, 176, 34;
  --bs-danger-rgb: 249, 112, 102;
  --color-primary-content: #101828;
  --color-success-content: #101828;
  --color-warning-content: #101828;
  --color-error-content: #101828;
  color-scheme: dark;
}

body.app-ui-compact
  :where(.layout-wrapper, .layout-container, .layout-page, .content-wrapper) {
  background-color: var(--app-color-canvas);
}

body.app-ui-compact :where(h1, h2, h3, h4, h5, h6, .card-title, .modal-title) {
  color: var(--app-color-text-strong);
  letter-spacing: -0.012em;
}

body.app-ui-compact :where(.text-muted, .text-secondary) {
  color: var(--app-color-text-secondary) !important;
}

body.app-ui-compact .text-xs {
  font-size: 0.8125rem;
  line-height: 1.5;
}

body.app-ui-compact .text-sm,
body.app-ui-compact small,
body.app-ui-compact .small {
  font-size: 0.875rem;
  line-height: 1.5;
}

body.app-ui-compact .app-page-title {
  max-width: min(100%, 48rem);
  font-size: clamp(1.125rem, 1rem + 0.35vw, 1.375rem);
  font-weight: 750 !important;
  line-height: 1.4;
}

body.app-ui-compact a:not(.btn) {
  text-underline-offset: 0.18em;
}

body.app-ui-compact a:not(.btn):hover {
  text-decoration-thickness: 1px;
}

/* Keyboard and high-precision interaction */
body.app-ui-compact
  :where(
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [role="button"],
    [tabindex]
  ):focus-visible {
  outline: 3px solid var(--app-focus-ring);
  outline-offset: 2px;
}

body.app-ui-compact
  :where(
    button,
    .btn,
    [role="button"],
    summary,
    select,
    label[for],
    .form-check-label
  ) {
  touch-action: manipulation;
}

body.app-ui-compact :where([aria-disabled="true"], :disabled) {
  cursor: not-allowed;
}

/* Buttons */
body.app-ui-compact .btn {
  min-height: var(--app-control-height);
  gap: 0.4rem;
  padding: 0.5rem 0.875rem;
  border-width: 1px;
  border-radius: var(--app-radius-sm);
  box-shadow: none;
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1.2;
  transition:
    background-color 0.14s ease,
    border-color 0.14s ease,
    color 0.14s ease,
    box-shadow 0.14s ease;
}

body.app-ui-compact .btn:hover,
body.app-ui-compact .btn:focus-visible,
body.app-ui-compact .btn:active {
  transform: none !important;
}

body.app-ui-compact .btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--app-focus-ring) !important;
}

body.app-ui-compact :where(.btn-sm, .btn-xs) {
  min-height: var(--app-control-height-sm);
  padding: 0.4rem 0.7rem;
  font-size: 0.8125rem;
}

body.app-ui-compact :where(.btn-icon, .btn-square, .btn-circle) {
  width: var(--app-control-height);
  min-width: var(--app-control-height);
  padding: 0;
}

body.app-ui-compact
  :where(.btn-sm, .btn-xs):where(.btn-icon, .btn-square, .btn-circle) {
  width: var(--app-control-height-sm);
  min-width: var(--app-control-height-sm);
}

body.app-ui-compact .btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--app-color-accent);
  --bs-btn-border-color: var(--app-color-accent);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--app-color-accent-hover);
  --bs-btn-hover-border-color: var(--app-color-accent-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--app-color-accent-hover);
  --bs-btn-active-border-color: var(--app-color-accent-hover);
}

html[data-bs-theme="dark"] body.app-ui-compact .btn-primary {
  --bs-btn-color: #101828;
  --bs-btn-hover-color: #101828;
  --bs-btn-active-color: #101828;
}

body.app-ui-compact .btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: #067647;
  --bs-btn-border-color: #067647;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #05603a;
  --bs-btn-hover-border-color: #05603a;
}

body.app-ui-compact .btn-warning {
  --bs-btn-color: #fff;
  --bs-btn-bg: #b54708;
  --bs-btn-border-color: #b54708;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #93370d;
  --bs-btn-hover-border-color: #93370d;
}

body.app-ui-compact .btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #b42318;
  --bs-btn-border-color: #b42318;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #912018;
  --bs-btn-hover-border-color: #912018;
}

body.app-ui-compact :where(.btn-ghost, .btn-label-secondary, .btn-light) {
  border-color: transparent;
  background: transparent;
  color: var(--app-color-text);
}

body.app-ui-compact :where(.btn-ghost, .btn-label-secondary, .btn-light):hover {
  border-color: var(--app-color-border);
  background: var(--app-color-surface-muted);
  color: var(--app-color-text-strong);
}

body.app-ui-compact
  :where(
    .btn-outline-secondary,
    .btn-outline-primary,
    .btn-outline-success,
    .btn-outline-warning,
    .btn-outline-danger
  ) {
  background: var(--app-color-surface);
}

/* Forms */
body.app-ui-compact :where(.fieldset, fieldset.app-field) {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.375rem;
}

body.app-ui-compact :where(.label, .form-label, .fieldset-legend) {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  color: var(--app-color-text);
  font-size: 0.8125rem;
  font-weight: 650;
  line-height: 1.5;
}

body.app-ui-compact .app-required-marker,
body.app-ui-compact
  :where(.label, .form-label)
  > [aria-hidden="true"]:only-last-child {
  color: var(--app-color-danger);
}

body.app-ui-compact
  :where(
    .form-control,
    .form-select,
    .input,
    .select,
    .textarea,
    .file-input,
    .input-group-text
  ) {
  min-height: var(--app-control-height);
  height: auto;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--app-control-border);
  border-radius: var(--app-radius-sm);
  background-color: var(--app-color-surface);
  color: var(--app-color-text-strong);
  box-shadow: var(--app-shadow-xs);
  font-size: 0.875rem;
  line-height: 1.45;
  transition:
    border-color 0.14s ease,
    background-color 0.14s ease,
    box-shadow 0.14s ease;
}

body.app-ui-compact
  :where(
    .form-control,
    .form-select,
    .input,
    .select,
    .textarea,
    .file-input
  ):hover:not(:disabled):not([readonly]) {
  border-color: color-mix(
    in srgb,
    var(--app-color-accent) 48%,
    var(--app-control-border)
  );
}

body.app-ui-compact
  :where(
    .form-control,
    .form-select,
    .input,
    .select,
    .textarea,
    .file-input
  ):focus,
body.app-ui-compact
  :where(
    .form-control,
    .form-select,
    .input,
    .select,
    .textarea,
    .file-input
  ):focus-within {
  border-color: var(--app-color-accent);
  outline: 0;
  box-shadow: 0 0 0 3px var(--app-focus-ring);
}

body.app-ui-compact :where(.form-control, .input, .textarea)::placeholder {
  color: var(--app-color-placeholder);
  opacity: 1;
}

body.app-ui-compact
  :where(
    .form-control,
    .form-select,
    .input,
    .select,
    .textarea,
    .file-input
  )[readonly] {
  border-color: var(--app-color-border);
  background: var(--app-color-surface-soft);
  color: var(--app-color-text-secondary);
  box-shadow: none;
}

body.app-ui-compact
  :where(
    .form-control,
    .form-select,
    .input,
    .select,
    .textarea,
    .file-input
  ):disabled {
  border-color: var(--app-color-border);
  background: var(--app-color-surface-muted);
  color: var(--app-color-text-secondary);
  box-shadow: none;
  opacity: 0.78;
}

body.app-ui-compact
  :where(
    .form-control,
    .form-select,
    .input,
    .select,
    .textarea,
    .file-input
  ).is-invalid,
body.app-ui-compact
  :where(
    .form-control,
    .form-select,
    .input,
    .select,
    .textarea,
    .file-input
  )[aria-invalid="true"] {
  border-color: var(--app-color-danger);
  background-color: var(--app-color-surface);
}

body.app-ui-compact
  :where(
    .form-control,
    .form-select,
    .input,
    .select,
    .textarea,
    .file-input
  ).is-invalid:focus,
body.app-ui-compact
  :where(
    .form-control,
    .form-select,
    .input,
    .select,
    .textarea,
    .file-input
  )[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--app-color-danger) 22%, transparent);
}

body.app-ui-compact textarea.form-control,
body.app-ui-compact .textarea {
  min-height: 6rem;
  line-height: 1.65;
}

body.app-ui-compact
  :where(.form-control-sm, .form-select-sm, .input-sm, .select-sm) {
  min-height: var(--app-control-height-sm);
  padding: 0.4rem 0.65rem;
  font-size: 0.8125rem;
}

body.app-ui-compact :where(.form-text, .app-field-hint) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin: 0;
  color: var(--app-color-text-secondary);
  font-size: 0.8125rem;
  line-height: 1.5;
}

body.app-ui-compact :where(.app-field-error, .invalid-feedback) {
  display: block;
  margin: 0;
  color: var(--app-color-danger) !important;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
}

body.app-ui-compact :where(.form-check-input, .checkbox) {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  border-color: var(--app-control-border);
  accent-color: var(--app-color-accent);
}

body.app-ui-compact :where(.form-check-input, .checkbox):focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--app-focus-ring);
}

body.app-ui-compact .form-check-label,
body.app-ui-compact .app-check-label {
  min-height: 2rem;
  color: var(--app-color-text);
  font-size: 0.875rem;
  line-height: 1.5;
}

body.app-ui-compact .input-group > :not(:first-child) {
  margin-inline-start: -1px;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

body.app-ui-compact .input-group > :not(:last-child) {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

body.app-ui-compact .file-input::file-selector-button {
  min-height: calc(var(--app-control-height) - 2px);
  margin-block: -0.5rem;
  margin-inline: -0.75rem 0.75rem;
  padding-inline: 0.875rem;
  border: 0;
  border-inline-end: 1px solid var(--app-color-border);
  background: var(--app-color-surface-muted);
  color: var(--app-color-text-strong);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

body.app-ui-compact .app-form-section {
  border: 1px solid var(--app-color-border) !important;
  border-radius: var(--app-radius) !important;
  background: var(--app-color-surface) !important;
}

body.app-ui-compact .app-form-row {
  border-color: var(--app-color-border) !important;
  border-radius: var(--app-radius-sm) !important;
  background: var(--app-color-surface-soft) !important;
}

body.app-ui-compact .app-form-actions {
  border: 1px solid var(--app-color-border);
  border-radius: var(--app-radius-sm) !important;
  background: var(--app-color-surface-soft) !important;
}

body.app-ui-compact .app-filter-shell {
  border-bottom: 1px solid var(--app-color-border);
  background: var(--app-color-surface-soft);
}

body.app-ui-compact .app-filter-form {
  align-items: flex-end;
  gap: 0.5rem;
}

body.app-ui-compact
  .app-filter-form
  > :where(input, select, .form-control, .form-select, .input, .select) {
  flex: 1 1 10rem;
  width: auto;
  min-width: 8rem;
  max-width: 18rem;
}

/* Select2 follows the native control language. */
body.app-ui-compact .select2-container {
  max-width: 100%;
  font-size: 0.875rem;
}

body.app-ui-compact .select2-container .select2-selection--single,
body.app-ui-compact .select2-container .select2-selection--multiple {
  min-height: var(--app-control-height);
  border: 1px solid var(--app-control-border);
  border-radius: var(--app-radius-sm);
  background: var(--app-color-surface);
  color: var(--app-color-text-strong);
  box-shadow: var(--app-shadow-xs);
}

body.app-ui-compact .select2-container--focus .select2-selection--single,
body.app-ui-compact .select2-container--focus .select2-selection--multiple,
body.app-ui-compact .select2-container--open .select2-selection--single,
body.app-ui-compact .select2-container--open .select2-selection--multiple {
  border-color: var(--app-color-accent);
  box-shadow: 0 0 0 3px var(--app-focus-ring);
}

body.app-ui-compact
  .select2-container
  .select2-selection--single
  .select2-selection__rendered {
  padding-inline: 0.75rem 2.25rem;
  color: var(--app-color-text-strong);
  line-height: calc(var(--app-control-height) - 2px);
}

body.app-ui-compact
  .select2-container
  .select2-selection--single
  .select2-selection__placeholder {
  color: var(--app-color-placeholder);
}

body.app-ui-compact
  .select2-container
  .select2-selection--single
  .select2-selection__arrow {
  width: 2rem;
  height: calc(var(--app-control-height) - 2px);
  inset-inline-end: 0.25rem;
  inset-inline-start: auto;
}

body.app-ui-compact .select2-dropdown {
  overflow: hidden;
  border: 1px solid var(--app-color-border-strong);
  border-radius: var(--app-radius-sm);
  background: var(--app-color-surface);
  color: var(--app-color-text);
  box-shadow: var(--app-shadow-md);
}

body.app-ui-compact .select2-search--dropdown {
  padding: 0.625rem;
  border-bottom: 1px solid var(--app-color-border);
}

body.app-ui-compact .select2-search--dropdown .select2-search__field {
  min-height: var(--app-control-height-sm);
  border: 1px solid var(--app-control-border);
  border-radius: 0.5rem;
  background: var(--app-color-surface);
  color: var(--app-color-text-strong);
}

body.app-ui-compact .select2-results__option {
  min-height: 2.5rem;
  padding: 0.55rem 0.75rem;
  line-height: 1.45;
}

body.app-ui-compact .select2-results__option--highlighted[aria-selected] {
  background: var(--app-color-accent-soft);
  color: var(--app-color-text-strong);
}

/* Cards */
body.app-ui-compact .card {
  overflow: visible;
  border: 1px solid var(--app-color-border);
  border-radius: var(--app-radius);
  background: var(--app-color-surface);
  box-shadow: var(--app-shadow-sm);
  transform: none !important;
}

body.app-ui-compact .card:hover {
  border-color: var(--app-color-border);
  box-shadow: var(--app-shadow-sm);
  transform: none !important;
}

@media (hover: hover) {
  body.app-ui-compact
    :where(a.card, .card.app-interactive-card, .management-link-card):hover {
    border-color: color-mix(
      in srgb,
      var(--app-color-accent) 42%,
      var(--app-color-border)
    );
    box-shadow: var(--app-shadow-md);
  }
}

body.app-ui-compact .card-header {
  min-height: 3.25rem;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--app-color-border);
  background: transparent;
}

body.app-ui-compact .card-body {
  padding: 1rem;
}

body.app-ui-compact .card-footer {
  padding: 0.875rem 1rem;
  border-top: 1px solid var(--app-color-border);
  background: var(--app-color-surface-soft);
}

body.app-ui-compact
  :where(
    .card-title,
    .card-header h2,
    .card-header h3,
    .card-header h4,
    .card-header h5,
    .card-header h6
  ) {
  margin: 0;
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.45;
}

body.app-ui-compact .app-form-card > .card-body {
  padding: clamp(1rem, 1.5vw, 1.25rem);
}

body.app-ui-compact .app-metric-card,
body.app-ui-compact .app-stat-card {
  height: 100%;
}

body.app-ui-compact :where(.app-metric-card, .app-stat-card) .card-body {
  display: flex;
  min-height: 7.25rem;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.75rem;
}

body.app-ui-compact .app-metric-card__icon,
body.app-ui-compact .app-stat-card__icon {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 0.75rem;
}

body.app-ui-compact .app-metric-card__value,
body.app-ui-compact .app-stat-card__value {
  color: var(--app-color-text-strong);
  font-size: clamp(1.25rem, 1.05rem + 0.5vw, 1.5rem);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

body.app-ui-compact .app-metric-card__label,
body.app-ui-compact .app-stat-card__label {
  color: var(--app-color-text-secondary);
  font-size: 0.8125rem;
  font-weight: 550;
}

/* Tables */
body.app-ui-compact
  :where(.app-table-scroll, .table-responsive, .card-datatable) {
  border: 1px solid var(--app-color-border);
  border-radius: var(--app-radius-sm);
  background: var(--app-color-surface);
  scrollbar-color: var(--app-color-border-strong) transparent;
}

body.app-ui-compact
  .card
  :where(.app-table-scroll, .table-responsive, .card-datatable) {
  border-inline: 0;
  border-radius: 0;
}

body.app-ui-compact .table {
  --bs-table-color: var(--app-color-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--app-color-border);
  margin: 0;
  color: var(--app-color-text);
  font-size: 0.8125rem;
  line-height: 1.5;
}

body.app-ui-compact .table > :not(caption) > * > * {
  padding: 0.7rem 0.75rem;
  border-bottom-color: var(--app-color-border);
  background-color: transparent;
  vertical-align: middle;
}

body.app-ui-compact .table thead th {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
  border-bottom: 1px solid var(--app-color-border-strong);
  background: var(--app-color-surface-muted);
  color: var(--app-color-text-strong);
  font-size: 0.8125rem;
  font-weight: 750;
  letter-spacing: 0;
}

body.app-ui-compact .table thead th:first-child {
  border-start-start-radius: calc(var(--app-radius-sm) - 1px);
}

body.app-ui-compact .table thead th:last-child {
  border-start-end-radius: calc(var(--app-radius-sm) - 1px);
}

body.app-ui-compact .table tbody tr:nth-child(even) > * {
  background: color-mix(
    in srgb,
    var(--app-color-surface-soft) 72%,
    transparent
  );
}

body.app-ui-compact .table tbody tr:hover > *,
body.app-ui-compact .table tbody tr:focus-within > * {
  background: var(--app-hover-bg);
}

body.app-ui-compact .table tbody tr:last-child > * {
  border-bottom: 0;
}

body.app-ui-compact .table :where(td, th)[dir="ltr"],
body.app-ui-compact .table :where(.font-mono, .font-monospace, .app-numeric-cell) {
  font-family: inherit !important;
  font-variant-numeric: tabular-nums;
}

body.app-ui-compact .table .app-row-actions-header,
body.app-ui-compact .table .app-row-actions-cell {
  position: sticky;
  inset-inline-end: 0;
  z-index: 1;
  min-width: 5rem;
  background: var(--app-color-surface);
  box-shadow: -1px 0 var(--app-color-border);
}

[dir="rtl"] body.app-ui-compact .table .app-row-actions-header,
[dir="rtl"] body.app-ui-compact .table .app-row-actions-cell {
  box-shadow: 1px 0 var(--app-color-border);
}

body.app-ui-compact .table thead .app-row-actions-header {
  z-index: 3;
  background: var(--app-color-surface-muted);
}

body.app-ui-compact .table tbody tr:nth-child(even) > .app-row-actions-cell {
  background: var(--app-color-surface-soft);
}

body.app-ui-compact .table tbody tr:hover > .app-row-actions-cell,
body.app-ui-compact .table tbody tr:focus-within > .app-row-actions-cell {
  background: color-mix(
    in srgb,
    var(--app-color-accent) 7%,
    var(--app-color-surface)
  );
}

body.app-ui-compact .table .app-empty-row > td,
body.app-ui-compact .table td.app-empty-cell {
  min-height: 9rem;
  padding-block: 2.5rem;
  color: var(--app-color-text-secondary);
  text-align: center;
}

body.app-ui-compact
  :where(.app-table-scroll, .table-responsive, .card-datatable):focus-visible {
  outline: 3px solid var(--app-focus-ring);
  outline-offset: 2px;
}

body.app-ui-compact .pagination {
  align-items: center;
  gap: 0.25rem;
}

body.app-ui-compact .page-link {
  display: inline-flex;
  min-width: 2.25rem;
  min-height: 2.25rem;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 0.55rem !important;
  background: transparent;
  color: var(--app-color-text);
  font-size: 0.8125rem;
}

body.app-ui-compact .page-link:hover {
  border-color: var(--app-color-border);
  background: var(--app-color-surface-muted);
}

/* Modals and dialogs */
body.app-ui-compact div.modal {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 1rem;
  overflow-x: hidden;
  overflow-y: auto;
  background: rgba(16, 24, 40, 0.58);
  backdrop-filter: blur(3px);
}

body.app-ui-compact div.modal:not(.show):not(.modal-open) {
  display: none;
}

body.app-ui-compact div.modal.show {
  display: block;
}

body.app-ui-compact div.modal.modal-open {
  display: grid;
  place-items: center;
}

html[data-bs-theme="dark"] body.app-ui-compact div.modal {
  background: rgba(0, 0, 0, 0.68);
}

body.app-ui-compact .modal-backdrop,
body.app-ui-compact dialog.modal::backdrop {
  background: rgba(16, 24, 40, 0.58);
  backdrop-filter: blur(3px);
}

html[data-bs-theme="dark"] body.app-ui-compact .modal-backdrop,
html[data-bs-theme="dark"] body.app-ui-compact dialog.modal::backdrop {
  background: rgba(0, 0, 0, 0.68);
}

body.app-ui-compact :where(.modal-content, .modal-box) {
  max-height: calc(100dvh - 2rem);
  border: 1px solid var(--app-color-border);
  border-radius: var(--app-radius-lg);
  background: var(--app-color-surface);
  color: var(--app-color-text);
  box-shadow: var(--app-shadow-modal);
}

body.app-ui-compact .modal-content {
  overflow: hidden;
}

body.app-ui-compact .modal-box {
  width: calc(100% - 2rem);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 1.25rem;
}

body.app-ui-compact :where(.modal-header, .app-modal-header) {
  min-height: 3.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--app-color-border);
  background: var(--app-color-surface);
}

body.app-ui-compact :where(.modal-body, .app-modal-body) {
  padding: 1.25rem;
  overflow: auto;
  overscroll-behavior: contain;
}

body.app-ui-compact :where(.modal-footer, .app-modal-footer) {
  min-height: 4rem;
  gap: 0.5rem;
  padding: 0.875rem 1.25rem;
  border-top: 1px solid var(--app-color-border);
  background: var(--app-color-surface-soft);
}

body.app-ui-compact .modal-box > :where(h2, h3):first-child,
body.app-ui-compact .modal-title,
body.app-ui-compact .app-modal-title {
  margin: 0 0 1rem;
  font-size: 1.125rem;
  font-weight: 750;
  line-height: 1.45;
}

body.app-ui-compact .app-modal-heading {
  display: flex;
  min-height: 3.75rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--app-color-border);
  background: var(--app-color-surface);
}

body.app-ui-compact .modal-box > .app-modal-heading {
  margin: -1.25rem -1.25rem 1.25rem;
}

body.app-ui-compact .app-modal-heading .app-modal-title {
  margin: 0;
}

body.app-ui-compact .modal-action {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--app-color-border);
}

body.app-ui-compact
  :where(
    .btn-close,
    [data-bs-dismiss="modal"],
    [data-modal-close],
    [data-customer-group-modal-close]
  ) {
  min-width: 2.5rem;
  min-height: 2.5rem;
}

body.app-ui-compact .modal-backdrop button {
  cursor: default;
}

/* --------------------------------------------------------------------------
 * Global modal standard
 * One contract for Bootstrap modals, native <dialog> modals and the legacy
 * invoice/receipt overlays. Size is semantic, header/body/footer spacing is
 * fixed, and action buttons use one predictable layout across the application.
 * -------------------------------------------------------------------------- */
body.app-ui-compact.app-modal-active {
  overflow: hidden;
}

body.app-ui-compact {
  --app-modal-width-sm: 30rem;
  --app-modal-width-md: 42rem;
  --app-modal-width-lg: 58rem;
  --app-modal-width-xl: 72rem;
  --app-modal-gutter: 1rem;
  --app-modal-max-height: calc(100dvh - 2rem);
  --app-modal-header-height: 4rem;
  --app-modal-footer-height: 4rem;
  --app-modal-action-height: 2.5rem;
  --app-modal-action-min-width: 7rem;
}

body.app-ui-compact :where(
  .modal-dialog,
  .modal-box,
  .invoice-product-picker-dialog,
  .invoice-barcode-dialog,
  .invoice-adjustment-dialog,
  .receipt-tree-dialog
) {
  width: min(100%, var(--app-modal-width-md));
  max-width: var(--app-modal-width-md) !important;
}

body.app-ui-compact :where(.app-modal-size-sm, .app-modal-surface--sm) {
  width: min(100%, var(--app-modal-width-sm)) !important;
  max-width: var(--app-modal-width-sm) !important;
}

body.app-ui-compact :where(.app-modal-size-md, .app-modal-surface--md) {
  width: min(100%, var(--app-modal-width-md)) !important;
  max-width: var(--app-modal-width-md) !important;
}

body.app-ui-compact :where(.app-modal-size-lg, .app-modal-surface--lg) {
  width: min(100%, var(--app-modal-width-lg)) !important;
  max-width: var(--app-modal-width-lg) !important;
}

body.app-ui-compact :where(.app-modal-size-xl, .app-modal-surface--xl) {
  width: min(100%, var(--app-modal-width-xl)) !important;
  max-width: var(--app-modal-width-xl) !important;
}

body.app-ui-compact :where(
  .app-modal-surface,
  .invoice-product-picker-dialog,
  .invoice-barcode-dialog,
  .invoice-adjustment-dialog,
  .receipt-tree-dialog
) {
  max-height: var(--app-modal-max-height) !important;
  overflow: hidden !important;
  border: 1px solid var(--app-color-border) !important;
  border-radius: var(--app-radius-lg) !important;
  background: var(--app-color-surface) !important;
  box-shadow: var(--app-shadow-modal) !important;
}

body.app-ui-compact .modal-content.app-modal-surface,
body.app-ui-compact .modal-box.app-modal-surface,
body.app-ui-compact :where(
  .invoice-product-picker-dialog,
  .invoice-barcode-dialog,
  .invoice-adjustment-dialog,
  .receipt-tree-dialog
).app-modal-surface {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

body.app-ui-compact .app-modal-form-shell,
body.app-ui-compact .app-modal-surface > form:not(.modal-backdrop) {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  margin: 0;
}

/* Legacy dialogs that do not yet expose a dedicated body still remain fully
 * usable: the complete surface scrolls rather than clipping long content. */
body.app-ui-compact .modal-box.app-modal-surface:not(:has(.app-modal-body)):not(:has(.modal-body)):not(:has(.customer-money-modal__body)) {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* Native dialog boxes traditionally carry padding on the surface. Remove it
 * only when the standardized header/body/footer structure is present. */
body.app-ui-compact .modal-box.app-modal-surface:has(> .app-modal-header),
body.app-ui-compact .modal-box.app-modal-surface:has(> .app-modal-heading),
body.app-ui-compact .modal-box.app-modal-surface:has(> .customer-money-modal__header) {
  padding: 0 !important;
}

body.app-ui-compact :where(
  .modal-header,
  .app-modal-header,
  .app-modal-heading,
  .customer-money-modal__header,
  .receipt-tree-dialog__header
) {
  display: flex;
  flex: 0 0 auto;
  min-height: var(--app-modal-header-height);
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 !important;
  padding: 0.875rem 1.25rem !important;
  border-bottom: 1px solid var(--app-color-border) !important;
  background: var(--app-color-surface) !important;
}

body.app-ui-compact :where(.modal-title, .app-modal-title) {
  margin: 0 !important;
  color: var(--app-color-text-strong);
  font-size: 1.0625rem !important;
  font-weight: 750 !important;
  line-height: 1.45;
}

body.app-ui-compact :where(
  .modal-body,
  .app-modal-body,
  .customer-money-modal__body,
  .receipt-tree-dialog__body
) {
  flex: 1 1 auto;
  min-height: 0;
  padding: 1.25rem !important;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

body.app-ui-compact :where(
  .modal-footer,
  .app-modal-footer.app-modal-actions,
  .modal-action.app-modal-actions,
  .customer-money-modal__footer.app-modal-actions
) {
  display: flex !important;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start !important;
  gap: 0.5rem !important;
  min-height: var(--app-modal-footer-height);
  margin: 0 !important;
  padding: 0.75rem 1.25rem !important;
  border-top: 1px solid var(--app-color-border) !important;
  background: var(--app-color-surface-soft) !important;
  direction: rtl;
}

body.app-ui-compact :where(
  .modal-footer,
  .app-modal-footer.app-modal-actions,
  .modal-action.app-modal-actions,
  .customer-money-modal__footer.app-modal-actions
) :where(.btn, button:not(.btn-close)) {
  min-width: var(--app-modal-action-min-width);
  min-height: var(--app-modal-action-height);
  height: var(--app-modal-action-height);
  margin: 0 !important;
  padding-inline: 1rem;
  border-radius: var(--app-radius-sm) !important;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* Primary action is always the first visual action on the RTL start edge. */
body.app-ui-compact .app-modal-actions .app-modal-action-primary {
  order: -10;
}

body.app-ui-compact .app-modal-actions .app-modal-action-secondary {
  order: 0;
}

body.app-ui-compact .app-modal-footer--summary .app-modal-summary {
  order: 10;
  margin-inline-start: auto;
}

body.app-ui-compact :where(
  .app-modal-close.btn,
  .app-modal-close.btn-close,
  .app-modal-header .btn-close,
  .app-modal-heading .btn,
  .customer-money-modal__header [data-money-modal-close],
  .receipt-tree-dialog__header .btn
) {
  width: 2.5rem;
  min-width: 2.5rem !important;
  height: 2.5rem;
  min-height: 2.5rem !important;
  flex: 0 0 2.5rem;
  padding: 0 !important;
  border-radius: 0.625rem !important;
}

/* The three legacy invoice overlays now open with the same backdrop, surface
 * and motion as every other application modal. */
body.app-ui-compact :where(
  .invoice-product-picker-modal,
  .invoice-barcode-modal,
  .invoice-adjustment-modal,
  .receipt-tree-overlay
) {
  position: fixed;
  inset: 0;
  z-index: 1095;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--app-modal-gutter);
}

body.app-ui-compact :where(
  .invoice-product-picker-backdrop,
  .invoice-barcode-backdrop,
  .invoice-adjustment-backdrop
) {
  position: absolute;
  inset: 0;
  background: rgba(16, 24, 40, 0.58) !important;
  backdrop-filter: blur(3px);
}

html[data-bs-theme="dark"] body.app-ui-compact :where(
  .invoice-product-picker-backdrop,
  .invoice-barcode-backdrop,
  .invoice-adjustment-backdrop
) {
  background: rgba(0, 0, 0, 0.68) !important;
}

body.app-ui-compact .app-modal-surface {
  animation: app-modal-enter 150ms ease-out both;
}

@keyframes app-modal-enter {
  from {
    opacity: 0;
    transform: translateY(0.35rem) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.app-ui-compact .app-modal-surface {
    animation: none;
  }
}

@media (max-width: 767.98px) {
  body.app-ui-compact {
    --app-modal-gutter: 0.5rem;
    --app-modal-max-height: calc(100dvh - 1rem);
    --app-modal-header-height: 3.5rem;
    --app-modal-footer-height: auto;
  }

  body.app-ui-compact :where(
    .modal-dialog,
    .modal-box,
    .invoice-product-picker-dialog,
    .invoice-barcode-dialog,
    .invoice-adjustment-dialog,
    .receipt-tree-dialog,
    .app-modal-size-sm,
    .app-modal-size-md,
    .app-modal-size-lg,
    .app-modal-size-xl,
    .app-modal-surface--sm,
    .app-modal-surface--md,
    .app-modal-surface--lg,
    .app-modal-surface--xl
  ) {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.app-ui-compact :where(
    .modal-header,
    .app-modal-header,
    .app-modal-heading,
    .customer-money-modal__header,
    .receipt-tree-dialog__header,
    .modal-body,
    .app-modal-body,
    .customer-money-modal__body,
    .receipt-tree-dialog__body,
    .modal-footer,
    .app-modal-footer.app-modal-actions,
    .modal-action.app-modal-actions,
    .customer-money-modal__footer.app-modal-actions
  ) {
    padding-inline: 1rem !important;
  }

  body.app-ui-compact :where(
    .modal-footer,
    .app-modal-footer.app-modal-actions,
    .modal-action.app-modal-actions,
    .customer-money-modal__footer.app-modal-actions
  ) :where(.btn, button:not(.btn-close)) {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: 0;
  }
}

/* Status feedback uses text, icon and color together. */
body.app-ui-compact .badge {
  min-height: 1.625rem;
  padding: 0.3rem 0.55rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 650;
  line-height: 1.25;
}

body.app-ui-compact .alert {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  border-width: 1px;
  border-radius: var(--app-radius-sm);
  font-size: 0.875rem;
  line-height: 1.55;
}

/* Keep number strings intact inside RTL layouts. */
body.app-ui-compact :where(input[dir="ltr"], [dir="ltr"], .font-mono) {
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
}

@supports (backdrop-filter: blur(12px)) {
  body.app-ui-compact #layout-navbar {
    background: color-mix(
      in srgb,
      var(--app-color-surface) 88%,
      transparent
    ) !important;
    backdrop-filter: saturate(145%) blur(16px);
  }
}

@media (max-width: 767.98px) {
  body.app-ui-compact {
    --app-control-height: 2.75rem;
    --app-control-height-sm: 2.75rem;
  }

  body.app-ui-compact .container-xxl {
    padding-inline: 0.75rem;
  }

  body.app-ui-compact .navbar-nav .nav-link.btn-icon,
  body.app-ui-compact .layout-menu-toggle .nav-link,
  body.app-ui-compact .app-mobile-menu-close {
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
  }

  body.app-ui-compact #layout-menu .menu-item .menu-link {
    min-height: 2.75rem;
  }

  body.app-ui-compact .app-page-title {
    font-size: 1.125rem;
  }

  body.app-ui-compact .card-header,
  body.app-ui-compact .card-body,
  body.app-ui-compact .card-footer {
    padding-inline: 0.875rem;
  }

  body.app-ui-compact
    .app-filter-form
    > :where(input, select, .form-control, .form-select, .input, .select) {
    width: 100% !important;
    max-width: none !important;
  }

  body.app-ui-compact .table > :not(caption) > * > * {
    padding: 0.65rem 0.7rem;
  }

  body.app-ui-compact
    .table
    :where(.app-row-actions-header, .app-row-actions-cell) {
    min-width: 5.5rem;
  }

  body.app-ui-compact :where(.form-check, .form-check-label, .app-check-label) {
    min-height: 2.75rem;
  }

  body.app-ui-compact .select2-results__option,
  body.app-ui-compact .page-link {
    min-height: 2.75rem;
  }

  body.app-ui-compact .modal-dialog {
    margin: 0.5rem;
  }

  body.app-ui-compact div.modal {
    padding: 0.5rem;
  }

  body.app-ui-compact .modal-box {
    width: calc(100% - 1rem);
    max-height: calc(100dvh - 1rem);
    padding: 1rem;
    border-radius: 0.875rem;
  }

  body.app-ui-compact .modal-box > .app-modal-heading {
    margin: -1rem -1rem 1rem;
  }

  body.app-ui-compact
    :where(
      .modal-header,
      .app-modal-header,
      .modal-body,
      .app-modal-body,
      .modal-footer,
      .app-modal-footer
    ) {
    padding-inline: 1rem;
  }

  body.app-ui-compact
    :where(.modal-footer, .app-modal-footer, .modal-action)
    .btn {
    flex: 1 1 auto;
  }
}

@media (prefers-contrast: more) {
  body.app-ui-compact {
    --app-color-border: var(--app-color-border-strong);
    --app-focus-ring: rgba(73, 61, 191, 0.42);
  }

  body.app-ui-compact
    :where(
      .card,
      .modal-content,
      .modal-box,
      .form-control,
      .form-select,
      .input,
      .select,
      .textarea,
      .file-input
    ) {
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.app-ui-compact *,
  body.app-ui-compact *::before,
  body.app-ui-compact *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media print {
  body.app-ui-compact .card,
  body.app-ui-compact
    :where(.app-table-scroll, .table-responsive, .card-datatable) {
    border-color: #999 !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  body.app-ui-compact .table thead th {
    position: static;
  }
}

/* Adaptive searchable select: viewport-aware sizing with Popover top-layer. */
body.app-ui-compact .app-search-select {
  min-width: 0;
}

body.app-ui-compact .app-search-select__trigger {
  min-width: 0;
  min-height: var(--app-control-height);
  gap: 0.625rem;
  cursor: pointer;
}

body.app-ui-compact .app-search-select__trigger > span {
  min-width: 0;
}

body.app-ui-compact .app-search-select__dropdown {
  position: fixed !important;
  top: var(--app-select-box-top, 0);
  right: auto;
  bottom: auto;
  left: var(--app-select-box-left, 0);
  width: var(--app-select-box-width, min(22rem, calc(100vw - 1rem)));
  max-width: calc(100vw - 1rem);
  max-height: var(--app-select-box-max-height, min(24rem, calc(100dvh - 1rem)));
  margin: 0 !important;
  padding: 0;
  border-color: var(--app-color-border-strong) !important;
  background: var(--app-color-surface) !important;
  color: var(--app-color-text);
  box-shadow: var(--app-shadow-md) !important;
  overscroll-behavior: contain;
}

body.app-ui-compact .app-search-select__dropdown--above {
  transform: translateY(-100%);
}

body.app-ui-compact .app-search-select__dropdown::backdrop {
  background: transparent;
}

body.app-ui-compact .app-search-select__options {
  min-height: 0;
  scrollbar-color: var(--app-color-border-strong) transparent;
}

body.app-ui-compact .app-search-select__options [role="option"] {
  min-height: 2.5rem;
  padding: 0.625rem 0.75rem !important;
  border-radius: 0.5rem !important;
  line-height: 1.45;
}

body.app-ui-compact
  .app-search-select__options
  [role="option"][aria-selected="true"] {
  background: var(--app-color-accent) !important;
  color: #fff !important;
}

body.app-ui-compact
  .app-search-select__options
  [role="option"]:not([aria-selected="true"]):hover {
  background: var(--app-hover-bg);
}

@supports not selector(:popover-open) {
  body.app-ui-compact .app-search-select__dropdown {
    z-index: var(--bs-dropdown-zindex, 1000);
  }
}

body.app-ui-compact .select2-container {
  width: 100% !important;
}

body.app-ui-compact .select2-results > .select2-results__options {
  max-height: min(22rem, 45dvh);
  overscroll-behavior: contain;
}

/* Invoice create/edit: clear hierarchy, flexible columns and inline validation. */
body.app-ui-compact .invoice-hero__header {
  border-bottom: 1px solid var(--app-color-border);
  background: var(--app-color-surface-soft);
}

body.app-ui-compact .invoice-hero__icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: var(--app-color-accent-soft);
  color: var(--app-color-accent);
}

body.app-ui-compact .invoice-overview-grid {
  display: grid;
  grid-template-columns: minmax(20rem, 0.85fr) minmax(32rem, 1.15fr);
  align-items: stretch;
  gap: 1rem;
}

body.app-ui-compact .invoice-overview-grid--compact {
  display: block;
}

body.app-ui-compact .invoice-form-section {
  min-width: 0;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--app-color-border);
  border-radius: var(--app-radius-sm);
  background: var(--app-color-surface);
}

body.app-ui-compact .invoice-form-section--combined {
  padding: 0.75rem;
}

body.app-ui-compact .invoice-form-section > legend {
  display: flex;
  width: auto;
  align-items: center;
  gap: 0.5rem;
  float: none;
  margin: 0 0 0.875rem;
  padding: 0 0.375rem;
  color: var(--app-color-text-strong);
  font-size: 0.9375rem;
  font-weight: 750;
  line-height: 1.4;
}

body.app-ui-compact .invoice-readonly-value {
  display: flex;
  min-height: var(--app-control-height);
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--app-color-border);
  border-radius: var(--app-radius-sm);
  background: var(--app-color-surface-muted);
  color: var(--app-color-text-secondary);
  font-variant-numeric: tabular-nums;
}

body.app-ui-compact .invoice-card-header {
  align-items: flex-start !important;
  background: var(--app-color-surface);
}

body.app-ui-compact .invoice-card-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
}

body.app-ui-compact .invoice-column-picker {
  position: relative;
}

body.app-ui-compact .invoice-column-picker > summary {
  display: inline-flex;
  min-height: var(--app-control-height-sm);
  align-items: center;
  gap: 0.375rem;
  list-style: none;
  cursor: pointer;
}

body.app-ui-compact .invoice-column-picker > summary::-webkit-details-marker {
  display: none;
}

body.app-ui-compact .invoice-column-picker[open] > summary {
  border-color: var(--app-color-accent);
  box-shadow: 0 0 0 3px var(--app-focus-ring);
}

body.app-ui-compact .invoice-column-picker__menu {
  position: absolute;
  inset-block-start: calc(100% + 0.5rem);
  inset-inline-end: 0;
  z-index: var(--bs-dropdown-zindex, 1000);
  width: min(20rem, calc(100vw - 2rem));
  padding: 0.75rem;
  border: 1px solid var(--app-color-border-strong);
  border-radius: var(--app-radius-sm);
  background: var(--app-color-surface);
  box-shadow: var(--app-shadow-md);
}

body.app-ui-compact .invoice-column-picker__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.25rem 0.25rem 0.625rem;
  border-bottom: 1px solid var(--app-color-border);
}

body.app-ui-compact .invoice-column-picker__header strong,
body.app-ui-compact .invoice-column-picker__header span {
  display: block;
}

body.app-ui-compact .invoice-column-picker__header span {
  margin-top: 0.2rem;
  color: var(--app-color-text-secondary);
  font-size: 0.75rem;
  line-height: 1.45;
}

body.app-ui-compact .invoice-column-picker__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem 0.5rem;
  padding-block: 0.625rem;
}

body.app-ui-compact .invoice-column-picker__options .form-check {
  display: flex;
  min-height: 2.25rem;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.375rem;
  border-radius: 0.5rem;
}

body.app-ui-compact .invoice-column-picker__options .form-check:hover {
  background: var(--app-hover-bg);
}

body.app-ui-compact .invoice-column-picker__options .form-check-input {
  flex: 0 0 auto;
  margin: 0;
}

body.app-ui-compact .invoice-column-picker__note {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
  background: var(--app-color-surface-muted);
  color: var(--app-color-text-secondary);
  font-size: 0.75rem;
  line-height: 1.5;
}

body.app-ui-compact .invoice-lines-alert {
  max-width: 52rem;
}

body.app-ui-compact .invoice-date-input {
  direction: ltr;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

body.app-ui-compact .invoice-product-picker-table__inventory {
  width: 6.25rem;
  min-width: 6.25rem;
  max-width: 6.25rem;
}

body.app-ui-compact .invoice-product-picker-table__price {
  width: 8rem;
  min-width: 8rem;
  max-width: 8rem;
}

body.app-ui-compact .invoice-lines-scroll {
  overflow-x: auto;
  overflow-y: visible;
  border-block: 1px solid var(--app-color-border);
  background: var(--app-color-surface);
  scrollbar-color: var(--app-color-border-strong) transparent;
}

body.app-ui-compact .invoice-lines-scroll:focus-visible {
  outline: 3px solid var(--app-focus-ring);
  outline-offset: -3px;
}

body.app-ui-compact .invoice-lines-head,
body.app-ui-compact .invoice-line-row {
  width: max-content;
  min-width: 100%;
  gap: 0;
}

body.app-ui-compact .invoice-lines-head {
  min-height: 3rem;
  padding: 0;
  border-bottom: 1px solid var(--app-color-border-strong);
  background: var(--app-color-surface-muted);
}

body.app-ui-compact .invoice-lines-body {
  min-width: 0;
  min-height: 8rem;
  background: var(--app-color-surface);
}

body.app-ui-compact .invoice-line-cell {
  min-width: 0;
  padding: 0.625rem 0.5rem;
}

body.app-ui-compact .invoice-lines-head .invoice-line-cell {
  display: flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  color: var(--app-color-text-strong);
  font-size: 0.8125rem;
  font-weight: 750;
  text-align: center;
}

body.app-ui-compact .invoice-line-row {
  position: relative;
  align-items: flex-start;
  min-height: 4.5rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--app-color-border);
  background: var(--app-color-surface);
}

body.app-ui-compact .invoice-line-row:last-child {
  border-bottom: 0;
}

body.app-ui-compact .invoice-line-row:hover,
body.app-ui-compact .invoice-line-row.active {
  background: var(--app-hover-bg);
}

body.app-ui-compact .invoice-line-row.active {
  box-shadow: inset 3px 0 var(--app-color-accent);
}

[dir="rtl"] body.app-ui-compact .invoice-line-row.active {
  box-shadow: inset -3px 0 var(--app-color-accent);
}

body.app-ui-compact .invoice-line-row--invalid {
  background: color-mix(
    in srgb,
    var(--app-color-danger) 5%,
    var(--app-color-surface)
  );
}

body.app-ui-compact .invoice-line-row .invoice-line-cell {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

body.app-ui-compact .invoice-line-cell--index {
  flex: 0 0 3.25rem;
  align-items: center;
  justify-content: center !important;
}

body.app-ui-compact .invoice-line-cell--item {
  flex: 1 0 22rem;
  width: 22rem;
}

body.app-ui-compact .invoice-line-cell--inventory {
  flex: 0 0 6.25rem;
  width: 6.25rem;
  align-items: center;
}

body.app-ui-compact .invoice-inventory-value {
  display: inline-flex;
  min-width: 3rem;
  min-height: var(--app-control-height);
  align-items: center;
  justify-content: center;
  padding-inline: 0.5rem;
  border: 1px solid var(--app-color-border);
  border-radius: 0.5rem;
  background: var(--app-color-surface-muted);
  color: var(--app-color-text-strong);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

body.app-ui-compact .invoice-line-cell--description {
  flex: 0 0 18rem;
  width: 18rem;
}

body.app-ui-compact .invoice-line-cell--quantity {
  flex: 0 0 10rem;
  width: 10rem;
}

body.app-ui-compact .invoice-line-cell--unit-name {
  flex: 0 0 8rem;
  width: 8rem;
}

body.app-ui-compact .invoice-line-cell--discount {
  flex: 0 0 13rem;
  width: 13rem;
}

body.app-ui-compact .invoice-line-cell--vat {
  flex: 0 0 8.5rem;
  width: 8.5rem;
}

body.app-ui-compact .invoice-line-cell--unit-price {
  flex: 0 0 8rem;
  width: 8rem;
}

body.app-ui-compact .invoice-line-cell--total {
  flex: 0 0 10rem;
  width: 10rem;
}

body.app-ui-compact .invoice-line-cell--selling-price {
  flex: 0 0 13rem;
  width: 13rem;
}

body.app-ui-compact .invoice-line-cell--expiration {
  flex: 0 0 11rem;
  width: 11rem;
}

body.app-ui-compact .invoice-line-cell--actions {
  position: sticky;
  inset-inline-end: 0;
  flex: 0 0 4.5rem;
  width: 4.5rem;
  align-items: center;
  background: inherit;
  box-shadow: -1px 0 var(--app-color-border);
}

[dir="rtl"] body.app-ui-compact .invoice-line-cell--actions {
  box-shadow: 1px 0 var(--app-color-border);
}

body.app-ui-compact .invoice-lines-head .invoice-line-cell--actions {
  background: var(--app-color-surface-muted);
}

body.app-ui-compact .invoice-line-row .form-control,
body.app-ui-compact .invoice-line-row .form-select,
body.app-ui-compact .invoice-line-row .app-search-select__trigger {
  min-height: var(--app-control-height);
  padding-block: 0.45rem;
  border: 1px solid var(--app-color-border);
  border-radius: 0.5rem;
  background: var(--app-color-surface);
  font-size: 0.8125rem;
  box-shadow: none;
}

body.app-ui-compact .invoice-line-row .form-control:focus,
body.app-ui-compact .invoice-line-row .form-select:focus,
body.app-ui-compact
  .invoice-line-row
  .app-search-select__trigger:focus-visible {
  border-color: var(--app-color-accent);
  box-shadow: 0 0 0 3px var(--app-focus-ring);
}

body.app-ui-compact .invoice-line-row .form-control.is-invalid {
  border-color: var(--app-color-danger);
  background-image: none;
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--app-color-danger) 16%, transparent);
}

body.app-ui-compact .invoice-inline-error {
  display: flex;
  align-items: flex-start;
  gap: 0.3rem;
  margin: 0.375rem 0 0;
  color: var(--app-color-danger);
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.45;
  text-align: start;
}

body.app-ui-compact .invoice-inline-error .icon-base {
  margin-top: 0.1rem;
  flex: 0 0 auto;
}

body.app-ui-compact .invoice-discount-control {
  flex-wrap: nowrap;
}

body.app-ui-compact .invoice-discount-control .form-control {
  min-width: 0;
}

body.app-ui-compact .invoice-discount-type-select {
  width: 5rem;
  min-width: 5rem;
  flex: 0 0 5rem;
  padding-inline: 0.55rem 1.65rem;
  text-align: center;
}

body.app-ui-compact .invoice-calculated-value {
  display: flex;
  min-height: 1.25rem;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin-top: 0.35rem;
  color: var(--app-color-text-secondary);
  font-size: 0.7rem;
  line-height: 1.35;
  text-align: center;
}

body.app-ui-compact .invoice-calculated-value strong {
  color: var(--app-color-text-strong);
  font-weight: 750;
}

body.app-ui-compact .invoice-line-cell--actions .btn {
  width: 2.5rem;
  min-width: 2.5rem;
  height: 2.5rem;
  min-height: 2.5rem;
}

body.app-ui-compact .invoice-sale-margin-select {
  max-width: 5rem;
}

body.app-ui-compact .invoice-add-row-button {
  min-height: 2.75rem;
  border-top: 1px dashed var(--app-color-border);
}

@media (max-width: 1199.98px) {
  body.app-ui-compact .invoice-overview-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  body.app-ui-compact .invoice-hero__header,
  body.app-ui-compact .invoice-card-header {
    align-items: flex-start !important;
  }

  body.app-ui-compact .invoice-card-header__actions,
  body.app-ui-compact .invoice-quick-actions {
    width: 100%;
    justify-content: flex-start;
  }

  body.app-ui-compact .invoice-column-picker {
    margin-inline-start: auto;
  }

  body.app-ui-compact .invoice-column-picker__menu {
    position: fixed;
    inset-block-start: auto;
    inset-block-end: 0.75rem;
    inset-inline: 0.75rem;
    z-index: var(--bs-modal-zindex, 1055);
    width: auto;
    max-height: calc(100dvh - 1.5rem);
    overflow: auto;
  }

  body.app-ui-compact .invoice-line-cell--item {
    flex-basis: 19rem;
    width: 19rem;
  }

  body.app-ui-compact .invoice-line-cell--description {
    flex-basis: 16rem;
    width: 16rem;
  }

  body.app-ui-compact .app-search-select__options [role="option"] {
    min-height: 2.75rem;
  }
}

@media print {
  body.app-ui-compact .invoice-column-picker,
  body.app-ui-compact .invoice-line-cell--actions,
  body.app-ui-compact .invoice-add-row-button,
  body.app-ui-compact .invoice-lines-alert {
    display: none !important;
  }
}