/* Shared, additive foundation. Keep call state, visibility and control sizes in
   their owning components; theme colors come from the existing theme tokens. */
:root {
  --dp-font-family: Arial, Helvetica, sans-serif;
  --dp-space-xs: 4px;
  --dp-space-sm: 8px;
  --dp-space-md: 12px;
  --dp-space-lg: 16px;
  --dp-focus-color: var(--blue, #007eb8);
}
html[data-dp-theme="dark"] {
  --dp-focus-color: var(--ui-text, #eceef0);
}

html[data-dp-theme] body :is(main, dialog, #dialWidget, #incoming) {
  font-family: var(--dp-font-family);
}
html[data-dp-theme] body :is(main, dialog, #dialWidget, #incoming)
  :is(button, input, select, textarea) {
  font-family: inherit;
}
html[data-dp-theme] body :is(main, dialog, #dialWidget, #incoming)
  :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
html[data-dp-theme] body > header :focus-visible,
html[data-dp-theme] body .dp-navigation :focus-visible {
  outline: 3px solid var(--dp-focus-color) !important;
  outline-offset: 3px !important;
}

/* Match the legacy theme selector's specificity so disabled values stay legible
   even when component styles have their own !important input colors. */
html[data-dp-theme][data-dp-theme] body:not(#dp-legacy-theme):not(#dp-legacy-type)
  :is(input, select, textarea, button):disabled {
  background-color: var(--ui-disabled, #e9ebed) !important;
  color: var(--ui-disabled-text, #626b76) !important;
  -webkit-text-fill-color: var(--ui-disabled-text, #626b76) !important;
  border-color: var(--ui-border, #dfe2e5) !important;
  opacity: 1 !important;
  cursor: not-allowed;
}
html[data-dp-theme] body :is(input, textarea):disabled::placeholder {
  color: var(--ui-disabled-text, #626b76);
  -webkit-text-fill-color: var(--ui-disabled-text, #626b76);
  opacity: 1;
}

html[data-dp-theme] body :is(dialog, .incoming-box) {
  box-sizing: border-box;
  min-width: 0;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-block: var(--dp-space-lg);
}
html[data-dp-theme] body :is(dialog, .incoming-box)
  :is(form, fieldset, label, .grid, .row) {
  min-width: 0;
}
html[data-dp-theme] body :is(dialog, .incoming-box)
  :is(input, select, textarea, audio) {
  max-width: 100%;
  box-sizing: border-box;
}
html[data-dp-theme] body :is(.dp-vm-footer, .routing-actions, .customer-form-actions) {
  flex-wrap: wrap;
  gap: var(--dp-space-sm);
}
html[data-dp-theme] body :is(.table-wrap, .routing-table, .dp-vm-scroll, .activity-table-wrap) {
  max-width: 100%;
  overscroll-behavior-x: contain;
}

/* Equal columns and centered labels without changing key height, visibility,
   or the connected-call layout maintained by dialpad-ui/call-controls. */
html[data-dp-theme] body #dialWidget #keys {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
html[data-dp-theme] body #dialWidget #keys button.key {
  box-sizing: border-box;
  min-width: 0;
  text-align: center;
  touch-action: manipulation;
  font-variant-numeric: tabular-nums;
}
html[data-dp-theme] body #dialWidget :is(.dp-number-entry, .dial-head, .actions, .dp-control-grid) > * {
  min-width: 0;
}
html[data-dp-theme] body #dialWidget :is(#callState, #ccMessage, #dpPartyNumber) {
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  /* Respect the visual viewport height already measured by the mobile script.
     An embedded supervisor dialpad has a separate full-frame layout. */
  html[data-dp-theme]:not(.supervisor-dialpad-only):not(.dp-floating) body #dialWidget#dialWidget {
    max-width: calc(100vw - 24px) !important;
    max-height: max(120px, calc(var(--dp-visible-height, 100dvh) - var(--dp-mobile-header, 72px) - 104px)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scroll-padding-block: 56px 72px;
  }
  html[data-dp-theme] body .incoming-box {
    max-height: calc(var(--dp-visible-height, 100dvh) - 24px);
    padding: var(--dp-space-lg);
    overflow-wrap: anywhere;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-dp-theme],
  html[data-dp-theme] body *,
  html[data-dp-theme] body *::before,
  html[data-dp-theme] body *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  html[data-dp-theme] {
    --dp-focus-color: Highlight;
  }
}

#foundationConnection:not([hidden]), #foundationLoadStatus:not(:empty) {padding:12px 16px;margin:8px;border:1px solid var(--ui-border,#dfe2e5);border-radius:8px;background:var(--ui-surface,#fff);color:var(--ui-text,#153550);overflow-wrap:anywhere;}
#foundationConnection[hidden] {display:none!important;}
#foundationLoadStatus button {width:auto;min-height:36px;margin:4px 8px;}