/* Shared button contract for the CRM, control plane, onboarding and preview pages.
   Page styles own brand colours and layout; this file owns type, sizing and states. */
:root{
  --ui-font:Inter,"PingFang SC","Microsoft YaHei UI","Microsoft YaHei","Noto Sans CJK SC","Segoe UI",sans-serif;
  --ui-button-font-size:13px;
  --ui-button-height:36px;
  --ui-button-radius:8px;
  --ui-button-focus:#2f6bff;
  --ui-button-primary:#2f6bff;
  --ui-close-size:32px;
}

/* One shared appearance for window close controls, including dynamic dialogs. */
body[data-ui-page] button.ui-close-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  flex:0 0 var(--ui-close-size)!important;
  width:var(--ui-close-size)!important;
  height:var(--ui-close-size)!important;
  min-width:var(--ui-close-size)!important;
  min-height:var(--ui-close-size)!important;
  padding:0!important;
  border:1px solid #dfe5f0!important;
  border-radius:8px!important;
  background:#fff!important;
  color:#667085!important;
  font-size:20px!important;
  font-weight:400!important;
  line-height:1!important;
  cursor:pointer;
}
body[data-ui-page] button.ui-close-button:not(:disabled):hover{
  border-color:#b9caff!important;
  background:#eef3ff!important;
  color:#315ec9!important;
}

body[data-ui-page="admin"]{--ui-button-focus:#2457d6;--ui-button-primary:#2457d6}
body[data-ui-page="onboarding"]{--ui-button-focus:#246bfd;--ui-button-primary:#246bfd}
body[data-ui-page="wecom"]{--ui-button-focus:#07934c;--ui-button-primary:#07934c}

body[data-ui-page] button,
body[data-ui-page] input[type="file"]::file-selector-button{
  font-family:var(--ui-font);
  line-height:1.4;
}

/* Text buttons use one reading size. Icon-only controls retain their glyph size. */
body[data-ui-page] button:not([aria-label]):not([data-ui-kind="icon"]):not([class*="icon-button"]):not([class*="-icon"]){
  font-size:var(--ui-button-font-size)!important;
}

/* Standard action buttons; local colour rules continue to distinguish brand and danger. */
body[data-ui-page] :is(
  .ui-button,.app-button,.primary-button,.secondary-button,.danger-button,.text-button,
  .task-edit-actions button,.aicrm-prompt-button,.dialog-actions button,
  .editor-actions button,.step-actions button,.application-entry-actions button,
  .actions button,.preview-head button,.preview-error button,
  .action-center-pane-toolbar button,.next-best-action-actions button,
  .sales-dashboard-item-editor button,.sales-dashboard-personal-item button,
  .sales-dashboard-personal-create button,.sales-dashboard-tabs button,
  .action-center-tabs button,.sidebar-nav button,.nav-item
){
  min-height:var(--ui-button-height);
  border-radius:var(--ui-button-radius);
  font-family:var(--ui-font);
  font-weight:600;
  line-height:1.4;
  white-space:normal;
  overflow-wrap:anywhere;
}

.ui-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:7px 13px;
  border:1px solid var(--line-strong,#d5dce8);
  background:#fff;
  color:#475467;
  cursor:pointer;
}
.ui-button--primary{border-color:var(--ui-button-primary);background:var(--ui-button-primary);color:#fff}
.ui-button--secondary{border-color:var(--line-strong,#d5dce8);background:#fff;color:#475467}
.ui-button--ghost{border-color:transparent;background:transparent;color:inherit}
.ui-button--danger{border-color:#f1c7c3;background:#fff4f2;color:#b42318}
body[data-ui-page] .ui-button--icon{width:var(--ui-button-height);padding:0;flex:0 0 var(--ui-button-height);font-size:20px!important;line-height:1}
body[data-ui-page] .ui-button--table{min-height:30px;padding:4px 8px}

body[data-ui-page] button:not(:disabled):not([aria-disabled="true"]){
  transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .1s ease,opacity .15s ease;
}
body[data-ui-page] button:not(:disabled):not([aria-disabled="true"]):hover{filter:brightness(.97)}
body[data-ui-page] button:not(:disabled):not([aria-disabled="true"]):active{transform:translateY(1px);filter:brightness(.94)}
body[data-ui-page] button:focus-visible,
body[data-ui-page] input[type="file"]:focus-visible{
  outline:2px solid var(--ui-button-focus);
  outline-offset:2px;
}
body[data-ui-page] button:disabled,
body[data-ui-page] button[aria-disabled="true"]{
  cursor:not-allowed;
  opacity:.56;
  box-shadow:none;
  transform:none;
}
body[data-ui-page] button[aria-busy="true"],
body[data-ui-page] button.is-loading{cursor:progress;opacity:.7}
body[data-ui-page] button[aria-busy="true"]:active,
body[data-ui-page] button.is-loading:active{transform:none}
body[data-ui-page] button[aria-label]{min-width:32px;min-height:32px}

/* Keep icon glyphs legible instead of shrinking them to the text-button size. */
body[data-ui-page] :is(
  .task-edit-head button,.dialog-close,.aicrm-prompt-close,
  .next-best-actions-header button,.sales-dashboard-actions button,
  .sales-dashboard-detail-dialog>header>button,
  .data-group-window-actions button,.skill-add,.tree-toggle,
  #refreshSalesDashboard,.business-config-dialog-close
){font-size:20px!important;line-height:1}

/* File picker is a secondary action in every form. */
body[data-ui-page] input[type="file"]::file-selector-button{
  min-height:28px;
  margin-right:10px;
  padding:4px 10px;
  border:1px solid var(--line-strong,#d5dce8);
  border-radius:6px;
  background:#f8fafc;
  color:#344054;
  font-size:var(--ui-button-font-size);
  font-weight:600;
  cursor:pointer;
}
body[data-ui-page] input[type="file"]::file-selector-button:hover{background:#eef3ff;border-color:#aebff2}

/* Compact table operations are a deliberate size variant, never 8–10px text. */
body[data-ui-page] :is(
  .sales-dashboard-record-query,.sales-dashboard-direct-table button,
  .table-sort-button,.methodology-source-actions button,
  .catalog-material-import button,.copy-button
){font-size:var(--ui-button-font-size)!important;line-height:1.4}

body[data-ui-page] :is(
  .task-edit-actions,.dialog-actions,.editor-actions,.step-actions,
  .application-entry-actions,.preview-error-actions,.preview-head-actions,
  .sales-dashboard-personal-item footer,.next-best-action-actions
){flex-wrap:wrap}

@media(max-width:900px){
  :root{--ui-button-font-size:14px;--ui-button-height:40px;--ui-close-size:40px}
  body[data-ui-page] .ui-button--table{min-height:34px}
  body[data-ui-page] button[aria-label]{min-width:40px;min-height:40px}
  body[data-ui-page] :is(
    .task-edit-head button,.dialog-close,.aicrm-prompt-close,
    .next-best-actions-header button,.sales-dashboard-actions button,
    .sales-dashboard-detail-dialog>header>button
  ){min-width:40px!important;min-height:40px!important}
  body[data-ui-page] :is(.task-edit-actions,.dialog-actions,.editor-actions,.step-actions,.application-entry-actions){gap:8px}
  body[data-ui-page] :is(.task-edit-actions,.dialog-actions,.editor-actions,.step-actions,.application-entry-actions)>button{max-width:100%;min-width:0}
  body[data-ui-page] :is(.preview-head-actions,.preview-error-actions){flex-wrap:wrap}
  body[data-ui-page="preview"] .preview-head{height:auto;min-height:58px;gap:8px;padding-block:8px}
  body[data-ui-page="preview"] .preview-body{height:calc(100dvh - 74px)}
}

@media(prefers-reduced-motion:reduce){
  body[data-ui-page] button{transition:none!important}
}