/**
 * jQuery UI — dialog, datepicker, autocomplete
 * @see docs/ui-redesign/design-system.md §16, §22
 */

body.app-body .ui-widget {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
}

body.app-body .ui-widget input,
body.app-body .ui-widget select,
body.app-body .ui-widget textarea,
body.app-body .ui-widget button {
  font-family: inherit;
  font-size: var(--font-size-sm);
}

/* Datepicker */
body.app-body .ui-datepicker {
  width: auto;
  min-width: 18rem;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-card);
  box-shadow: var(--shadow-overlay);
  z-index: var(--z-overlay) !important;
}

body.app-body .ui-datepicker .ui-datepicker-header {
  padding: var(--space-2);
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-surface-zebra);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

body.app-body .ui-datepicker .ui-datepicker-prev,
body.app-body .ui-datepicker .ui-datepicker-next {
  top: var(--space-2);
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-card);
  cursor: pointer;
}

body.app-body .ui-datepicker table {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-sm);
}

body.app-body .ui-datepicker td a,
body.app-body .ui-datepicker td span {
  padding: 0.35rem;
  text-align: center;
  border-radius: var(--radius-xs);
}

body.app-body .ui-datepicker td a:hover,
body.app-body .ui-datepicker td a.ui-state-active {
  background: var(--color-sidebar-active-bg);
  color: var(--color-sidebar-text-active);
}

body.app-body .ui-datepicker .ui-state-default {
  border: none;
  background: transparent;
  color: var(--color-text-primary);
}

/* Dialog */
body.app-body .ui-dialog {
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-card);
  box-shadow: var(--shadow-modal);
  z-index: var(--z-overlay) !important;
}

body.app-body .ui-dialog .ui-dialog-titlebar {
  padding: var(--space-3) var(--space-4);
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

body.app-body .ui-dialog .ui-dialog-titlebar-close {
  right: var(--space-3);
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-card);
}

body.app-body .ui-dialog .ui-dialog-content {
  padding: var(--space-4);
  color: var(--color-text-primary);
}

body.app-body .ui-dialog .ui-dialog-buttonpane {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-zebra);
}

body.app-body .ui-dialog .ui-dialog-buttonpane button {
  min-height: var(--form-control-height);
  margin: 0 0 0 var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

body.app-body .ui-dialog .ui-dialog-buttonpane button:first-child {
  margin-left: 0;
}

body.app-body .ui-widget-overlay {
  background: rgba(15, 23, 42, 0.4);
  opacity: 1;
  z-index: calc(var(--z-overlay) - 1) !important;
}

/* Autocomplete */
body.app-body .ui-autocomplete {
  max-height: 16rem;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-card);
  box-shadow: var(--shadow-overlay);
  z-index: var(--z-overlay) !important;
}

body.app-body .ui-menu-item-wrapper {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

body.app-body .ui-menu-item-wrapper.ui-state-active {
  border: none;
  background: var(--color-surface-zebra);
  color: var(--color-text-primary);
}