/* Shared action styles. Loaded last so every page uses the same button states. */
:root {
  --action-blue: #1677e8;
  --action-blue-hover: #0965d3;
  --action-text: #28465f;
  --action-border: #d5e2ed;
  --action-surface: #f3f8fd;
  --action-focus: #1879dd;
  --action-radius: 10px;
}

.app-shell .button,
.login-page .button {
  position: relative;
  box-sizing: border-box;
  min-height: 44px;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--action-border);
  border-radius: var(--action-radius);
  color: var(--action-text);
  background: #fff;
  box-shadow: 0 1px 2px rgba(27, 60, 92, .04);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  transform: none;
  transition: background-color .16s ease, border-color .16s ease,
    color .16s ease, box-shadow .16s ease;
  -webkit-tap-highlight-color: transparent;
}

.app-shell .button:hover:not(:disabled),
.login-page .button:hover:not(:disabled) {
  border-color: #afcce5;
  color: #145f9f;
  background: var(--action-surface);
  box-shadow: 0 2px 5px rgba(27, 60, 92, .06);
  transform: none;
}

.app-shell .button.primary,
.login-page .button.primary {
  border-color: var(--action-blue);
  color: #fff;
  background: var(--action-blue);
  box-shadow: 0 3px 8px rgba(22, 119, 232, .16);
}

.app-shell .button.primary:hover:not(:disabled),
.login-page .button.primary:hover:not(:disabled) {
  border-color: var(--action-blue-hover);
  color: #fff;
  background: var(--action-blue-hover);
  box-shadow: 0 4px 10px rgba(22, 119, 232, .2);
}

.app-shell .button.ghost { background: #fff; }
.app-shell .button.ghost:hover:not(:disabled) { background: var(--action-surface); }
.app-shell .button.dark { border-color: #203b55; color: #fff; background: #203b55; }
.app-shell .button.dark:hover:not(:disabled) { border-color: #152d44; color: #fff; background: #152d44; }
.app-shell .button.light { color: #23496b; background: #fff; }
.app-shell .button.danger { border-color: #bd3c49; color: #fff; background: #bd3c49; }
.app-shell .button.danger:hover:not(:disabled) { border-color: #a82c39; color: #fff; background: #a82c39; }
.app-shell .button.danger.ghost { border-color: #efcbd0; color: #b63644; background: #fff; }
.app-shell .button.danger.ghost:hover:not(:disabled) { border-color: #df9da6; color: #a82c39; background: #fff4f5; }

.app-shell .button:is(.small, .compact),
.app-shell :is(.reference-product-actions, .reference-overview-actions,
  .result-assistant-bar, .recommendation-score, .custom-request-card) .button {
  min-height: 36px;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 9px;
  font-size: 12px;
}
.app-shell .button.large,
.login-page .button { min-height: 48px; font-size: 15px; }

.button-icon { display: block; width: 18px; height: 18px; flex: 0 0 18px; }
.button:is(.small, .compact) .button-icon { width: 16px; height: 16px; flex-basis: 16px; }

/* Hovering and loading never move the control or change its width. */
.app-shell .button:active,
.login-page .button:active { box-shadow: inset 0 1px 3px rgba(20, 48, 77, .12); }
.app-shell .button.loading,
.login-page .button.loading { overflow: hidden; opacity: .8; cursor: wait; }
.app-shell .button.loading::after,
.login-page .button.loading::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 35%;
  height: 3px;
  content: '';
  border: 0;
  border-radius: 2px;
  background: currentColor;
  animation: action-progress 1.15s ease-in-out infinite;
}
@keyframes action-progress { from { transform: translateX(-110%); } to { transform: translateX(290%); } }

.app-shell .button:disabled,
.app-shell .button:is(.primary, .danger, .dark, .light, .ghost):disabled,
.login-page .button:disabled,
.login-page .button.primary:disabled,
.page-selector :is(.send-button, .chat-send-button, .dada-choice-list button):disabled {
  border-color: #dce5ed;
  color: #6f8396;
  background: #edf2f7;
  box-shadow: none;
  opacity: 1;
  transform: none;
  cursor: not-allowed;
}

.app-shell :is(.button, .icon-button, .text-danger, .dada-free-chat,
  .assistant-shortcuts button, .selection-methods button, .selection-text-examples button,
  .dada-choice-list button, .difference-toolbar button, .text-intake-options button,
  .reference-tabs button, .send-button, .chat-send-button):focus-visible,
.login-page .button:focus-visible,
.page-selector .composer-upload:focus-within,
.pagination a:focus-visible {
  outline: 2px solid var(--action-focus);
  outline-offset: 3px;
}

/* Compact icon actions still have a clear, centered hit area. */
.app-shell .icon-button {
  display: inline-flex;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: 1px solid var(--action-border);
  border-radius: 10px;
  color: #537998;
  background: #f8fbfe;
  text-decoration: none;
  transition: background-color .16s ease, border-color .16s ease;
}
.app-shell .icon-button:hover { border-color: #a9cce9; color: #166eb9; background: #edf6ff; }
.product-table :is(th, td):last-child:not([colspan]) {
  position: sticky;
  right: 0;
  z-index: 1;
  min-width: 60px;
  width: 60px;
  text-align: center;
  background: #fff;
  box-shadow: -6px 0 8px -8px rgba(36, 75, 108, .25);
}
.product-table th:last-child { z-index: 2; }
.product-table tbody tr:hover td:last-child { background: #f8fbfe; }
.sidebar-user form { margin: 0; }
.app-shell .sidebar-user .icon-button { border-color: transparent; color: #d1e5f4; background: transparent; }
.app-shell .sidebar-user .icon-button:hover { border-color: rgba(211, 235, 255, .24); color: #fff; background: rgba(211, 235, 255, .1); }

/* Dada choices and selection methods use quiet outlines, not competing CTAs. */
.page-selector :is(.selection-methods button, .dada-choice-list button,
  .selection-text-examples button),
.app-shell :is(.difference-toolbar button, .text-intake-options button) {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 11px;
  border-color: #d1e3f2;
  color: #356b94;
  background: #f8fbfe;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.page-selector .selection-methods button { min-height: 40px; padding: 8px 14px; border-radius: 10px; font-size: 14px; }
.page-selector .selection-methods .button-icon { width: 16px; height: 16px; flex-basis: 16px; }
.page-selector .dada-choice-list button { min-height: 36px; padding: 7px 12px; }
.page-selector :is(.selection-methods button, .selection-text-examples button, .dada-choice-list button):hover:not(:disabled),
.app-shell :is(.difference-toolbar button, .text-intake-options button):hover:not(:disabled) {
  border-color: #93c2e6;
  color: #1768ab;
  background: #eef7ff;
}
.page-selector .selection-methods button[aria-pressed='true'],
.app-shell .difference-toolbar button.active {
  border-color: #85bde9;
  color: #1265a9;
  background: #e8f4ff;
  box-shadow: inset 0 0 0 1px rgba(37, 128, 203, .04);
}

.page-selector .assistant-selection .send-button,
.page-selector .composer-chat-input .chat-send-button {
  gap: 8px;
  border: 1px solid var(--action-blue);
  color: #fff;
  background: var(--action-blue);
  box-shadow: 0 2px 5px rgba(22, 119, 232, .14);
  font-weight: 600;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.page-selector .assistant-selection .send-button { flex: 0 0 auto; margin-left: 0; }
.page-selector .assistant-selection .send-button:hover:not(:disabled),
.page-selector .composer-chat-input .chat-send-button:hover:not(:disabled) {
  border-color: var(--action-blue-hover);
  background: var(--action-blue-hover);
}
.page-selector .assistant-selection .send-button:disabled,
.page-selector .composer-chat-input .chat-send-button:disabled {
  border-color: #dce5ed;
  color: #6f8396;
  background: #edf2f7;
  box-shadow: none;
}

.page-selector .assistant-selection .composer-upload {
  position: relative;
  box-sizing: border-box;
  gap: 8px;
  border-color: #cee0ef;
  color: #216fae;
  background: #f5faff;
  font-weight: 600;
}
.page-selector .assistant-selection .composer-upload:hover { border-color: #95bfe0; background: #eaf5ff; }
/* Keep the native file input focusable instead of hiding it from the keyboard. */
.page-selector .composer-upload input {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

.app-shell .text-danger,
.page-selector .assistant-shortcuts button,
.page-selector .dada-free-chat {
  box-sizing: border-box;
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
  text-decoration: none;
}
.app-shell .text-danger:hover { color: #a82c39; background: #fff2f3; }
.page-selector .assistant-shortcuts button:hover,
.page-selector .dada-free-chat:hover { color: #1768ab; background: #eef7ff; }
.page-selector .assistant-shortcuts [data-clear-chat] { padding: 5px 10px; border-color: #dce8f2; color: #527590; background: #f8fbfe; }

/* Action groups wrap with a consistent gap instead of touching adjacent controls. */
.app-shell :is(.form-actions, .hero-actions, .product-actions, .conclusion-actions,
  .knowledge-index-actions, .reference-product-actions) { flex-wrap: wrap; gap: 10px; }
.app-shell .section-toolbar { flex-wrap: wrap; gap: 12px; }
.app-shell .filter-bar { min-width: 0; flex-wrap: wrap; align-items: center; gap: 8px; }
.app-shell :is(.filter-bar select, .filter-bar .search-box, .knowledge-search select, .global-search) { box-sizing: border-box; min-height: 44px; }
.app-shell .sticky-submit > div { display: flex; flex-wrap: wrap; gap: 10px; }
.app-shell .request-decision-form .button { align-self: end; }
.app-shell .request-decision-form input { box-sizing: border-box; min-height: 44px; }
.page-selector .selection-workbench-head .overview-status { flex-shrink: 0; white-space: nowrap; }
.app-shell .account-reset-form .button { flex-shrink: 0; }
.app-shell .pagination a,
.app-shell .pagination span { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; padding: 7px 12px; border-radius: 9px; font-size: 12px; }
.app-shell .pagination a:hover { border-color: #9ac2e5; color: #1768ab; background: #edf6ff; }

/* Preserve light-on-dark hero actions. */
.app-shell .assistant-home-copy .button.ghost { border-color: rgba(255, 255, 255, .3); color: #fff; background: rgba(255, 255, 255, .08); }
.app-shell .assistant-home-copy .button.ghost:hover:not(:disabled) { border-color: rgba(255, 255, 255, .5); color: #fff; background: rgba(255, 255, 255, .16); }

@media (max-width: 760px) {
  .app-shell .button { min-height: 44px; padding: 10px 14px; font-size: 13px; }
  .app-shell .button:is(.small, .compact),
  .app-shell :is(.reference-product-actions, .reference-overview-actions,
    .result-assistant-bar, .recommendation-score, .custom-request-card) .button { min-height: 40px; padding: 8px 12px; font-size: 12px; }
  .app-shell .top-actions { flex-wrap: wrap; gap: 8px; }
  .app-shell .filter-bar { align-items: stretch; }
  .app-shell .filter-bar .button { width: 100%; }
  .app-shell .icon-button { width: 40px; height: 40px; flex-basis: 40px; }
  .app-shell .request-decision-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-shell .request-decision-form > label { grid-column: 1 / -1; min-width: 0; }
  .app-shell .request-decision-form input { min-width: 0; width: 100%; }
  .app-shell .request-decision-form .button { width: 100%; }
  .page-selector :is(.dada-choice-list button, .selection-text-examples button),
  .app-shell :is(.text-intake-options button, .difference-toolbar button) { min-height: 40px; }
  .page-selector .assistant-selection .send-button { min-height: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell .button,
  .login-page .button,
  .page-selector :is(.send-button, .chat-send-button, .composer-upload,
    .selection-methods button, .selection-text-examples button, .dada-choice-list button) { transition: none; }
  .app-shell .button.loading::after,
  .login-page .button.loading::after { width: 100%; animation: none; }
}