/* Shared workspace controls. Navigation, data links and document previews keep
 * their own layout; commands share the home workspace's visual vocabulary. */
:root {
  --ui-font: "Aptos", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --ui-primary: #b65032;
  --ui-primary-hover: #984229;
  --ui-primary-soft: #f5e2da;
  --ui-accent-ink: #984229;
  --ui-surface: #fbfcfa;
  --ui-soft: #eef2ee;
  --ui-ink: #30403a;
  --ui-muted: #627068;
  --ui-line: #cbd3cd;
  --ui-danger: #a73543;
  --ui-danger-soft: #fbecef;
  --ui-success: #52683d;
  --ui-radius: 4px;
  --v2-accent: var(--ui-primary);
  --admin-v2-accent: var(--ui-primary);
  --oa-brand: var(--ui-primary);
  --oa-brand-strong: var(--ui-primary-hover);
  --brand: var(--ui-primary);
  --brand-strong: var(--ui-primary-hover);
}

/* 36px commands, 32px compact toolbar controls, 28px row actions. */
:is(#app, #modal-root, body:has(#admin-app), #login-view, .login-shell, #verify-root) :is(
  .btn, .button, .oa-primary-button, .oa-secondary-button, .create-application,
  .enhanced-button, .hr-button, .workflow-app-button, .pw-button, .conflict-button,
  .client-action-button, .opposite-action-button, .task-action-button,
  .bulletin-action-button, .market-action-button, .finance-action-button,
  .schedule-create-button, .clue-period-button, .clue-mark-public,
  .case-document-download-button, .head-repository-sort, .archive-primary-button,
  .message-system-announcement, .message-mark-read, .hr-salary-pill,
  .project-filing-button, .filing-approval-apply, .filing-conflict-preview,
  .login-submit, .address-query, .address-reset, .meeting-primary-button, .meeting-submit-button,
  .meeting-cancel-button, .analytics-button,
  [data-filing-action="open-contract-workspace"],
  [class$="-dialog"] > footer > button, [class$="-modal"] > footer > button,
  .workflow-detail-decision button, .workflow-detail-modal footer button
) {
  --control-kind: command;
  --control-bg: var(--ui-surface);
  --control-border: var(--ui-line);
  --control-text: var(--ui-ink);
  --control-hover-bg: var(--ui-primary-soft);
  --control-hover-border: var(--ui-primary);
  --control-hover-text: var(--ui-accent-ink);
  box-sizing: border-box !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px !important;
  height: 36px !important;
  width: auto;
  min-width: 0;
  max-width: 100%;
  padding: 0 12px !important;
  border: 1px solid var(--control-border) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--control-bg) !important;
  background-image: none !important;
  color: var(--control-text) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 18px !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  text-indent: 0 !important;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}

/* Primary means creating, submitting or confirming, not filtering/navigation. */
:is(#app, #modal-root, body:has(#admin-app), #login-view, .login-shell, #verify-root) :is(
  .btn-primary, .btn-strong, .button.primary, .oa-primary-button, .create-application,
  .enhanced-button.primary, .hr-button.primary, .workflow-app-button.primary,
  .pw-button.primary, .conflict-button-primary, .login-submit, .analytics-button.primary,
  .meeting-submit-button, .meeting-primary-button:not([data-meeting-action="screen-sort"]), .home-settings-confirm,
  .project-filing-button, .filing-approval-apply, .schedule-create-button,
  .client-action-button[data-client-list-action="create"],
  .opposite-action-button[data-opposite-action="create"],
  .task-action-button[data-task-action="create"],
  .market-action-button[data-market-action="open-form"],
  .archive-primary-button[data-enhanced-action="archive-open-add"],
  [data-filing-action="open-contract-workspace"],
  [class$="-dialog"] > footer > button.primary,
  [class$="-modal"] > footer > button.primary,
  .workflow-detail-decision button.primary, .workflow-detail-modal button.primary
) {
  --control-bg: var(--ui-primary);
  --control-border: var(--ui-primary);
  --control-text: #fff;
  --control-hover-bg: var(--ui-primary-hover);
  --control-hover-border: var(--ui-primary-hover);
  --control-hover-text: #fff;
}

:is(#app, #modal-root, body:has(#admin-app), #login-view, .login-shell, #verify-root) :is(
  .btn, .button, .oa-primary-button, .oa-secondary-button, .create-application,
  .enhanced-button, .hr-button, .workflow-app-button, .pw-button, .conflict-button,
  .client-action-button, .opposite-action-button, .task-action-button,
  .bulletin-action-button, .market-action-button, .finance-action-button,
  .schedule-create-button, .clue-period-button, .clue-mark-public,
  .case-document-download-button, .head-repository-sort, .archive-primary-button,
  .message-system-announcement, .message-mark-read, .hr-salary-pill,
  .project-filing-button, .filing-approval-apply, .filing-conflict-preview,
  .login-submit, .address-query, .address-reset, .meeting-primary-button, .meeting-submit-button,
  .meeting-cancel-button, .analytics-button,
  [data-filing-action="open-contract-workspace"],
  [class$="-dialog"] > footer > button, [class$="-modal"] > footer > button,
  .workflow-detail-decision button, .workflow-detail-modal footer button
):hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--control-hover-bg) !important;
  border-color: var(--control-hover-border) !important;
  color: var(--control-hover-text) !important;
}

:is(#app, #modal-root, body:has(#admin-app), #login-view) :is(.btn-danger, .button.danger, .enhanced-button.danger, .hr-button.danger, .pw-button.danger) {
  --control-bg: var(--ui-danger-soft);
  --control-border: #ddb4bc;
  --control-text: var(--ui-danger);
  --control-hover-bg: var(--ui-danger);
  --control-hover-border: var(--ui-danger);
  --control-hover-text: #fff;
}

:is(#app, #modal-root, body:has(#admin-app)) :is(.btn-success, .enhanced-button.success, .pw-button.success) {
  --control-bg: var(--ui-success);
  --control-border: var(--ui-success);
  --control-text: #fff;
  --control-hover-bg: #405331;
  --control-hover-border: #405331;
  --control-hover-text: #fff;
}

/* Icon fonts remain on icon elements; text commands use the workspace font. */
:is(#app, #modal-root, body:has(#admin-app), #login-view, .login-shell, #verify-root) :is(button, .button, .hr-button):not(.icon):not(.iconfont) {
  font-family: var(--ui-font) !important;
  letter-spacing: 0 !important;
}

:is(#app, #modal-root, body:has(#admin-app), #login-view, .login-shell, #verify-root) :is(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--ui-primary) !important;
  outline-offset: 2px !important;
}

:is(#app, #modal-root, body:has(#admin-app), #login-view, .login-shell, #verify-root) :is(button, .button):disabled,
:is(#app, #modal-root, body:has(#admin-app), #login-view, .login-shell, #verify-root) [aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: .5 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Compact commands and icon tools within existing toolbar layouts. */
:is(#app, #modal-root) :is(
  .client-action-button, .opposite-action-button, .task-action-button,
  .bulletin-action-button, .market-action-button, .finance-action-button,
  .schedule-create-button, .clue-period-button, .clue-mark-public,
  .case-document-download-button, .head-repository-sort, .archive-primary-button,
  .message-system-announcement, .message-mark-read, .hr-salary-pill,
  .enhanced-button.small, .hr-toolbar .hr-button, .button.small, .meeting-primary-button
) {
  min-height: 32px !important;
  height: 32px !important;
  width: auto !important;
  flex-shrink: 0;
}

:is(#app, #modal-root, body:has(#admin-app)) :is(
  .oa-icon-button, .icon-button, .client-icon-button, .opposite-icon-button,
  .task-icon-button, .clue-icon-button, .schedule-icon-button, .finance-icon-button,
  .case-document-icon-button, .archive-icon-button, .collection-icon-button,
  .bulletin-icon-button, .market-icon-button, .btn-icon, .enhanced-button.icon-only,
  .warehousing-icon-button, .meeting-icon-button
) {
  --control-kind: icon;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-muted) !important;
  flex: 0 0 32px;
}

:is(#app, #modal-root) :is(.client-icon-button, .opposite-icon-button, .task-icon-button, .clue-icon-button, .schedule-icon-button,
  .finance-icon-button, .case-document-icon-button, .archive-icon-button, .collection-icon-button,
  .bulletin-icon-button, .market-icon-button, .warehousing-icon-button, .meeting-icon-button) :is(.icon, .iconfont) { font-size: 16px !important; }

/* Search is a single joined control, rather than a floating oversized icon. */
:is(#app, #modal-root, body:has(#admin-app)) :is(
  .oa-icon-button, .icon-button, .client-icon-button, .opposite-icon-button,
  .task-icon-button, .clue-icon-button, .schedule-icon-button, .finance-icon-button,
  .case-document-icon-button, .archive-icon-button, .collection-icon-button,
  .bulletin-icon-button, .market-icon-button, .warehousing-icon-button, .meeting-icon-button
):hover:not(:disabled) {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary) !important;
  color: var(--ui-primary) !important;
}

#app #filing-form [data-filing-action="open-contract-workspace"] { border-radius: var(--ui-radius) !important; }

:is(#app, #modal-root) :is(.client-search, .opposite-search, .task-search, .clue-search, .schedule-search,
  .bulletin-search, .market-search, .finance-search, .project-search, .work-search,
  .collection-search, .case-document-search, .head-repository-search, .archive-search,
  .message-search, .message-center-search, .meeting-search, .warehousing-search,
  .hr-search, .filing-approval-search, .express-search) {
  min-height: 32px !important;
  height: 32px !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important;
}

:is(#app, #modal-root) :is(.client-search, .opposite-search, .task-search, .clue-search, .schedule-search,
  .bulletin-search, .market-search, .finance-search, .project-search, .work-search,
  .collection-search, .case-document-search, .head-repository-search, .archive-search,
  .message-search, .message-center-search, .meeting-search, .warehousing-search,
  .hr-search, .filing-approval-search, .express-search) > input {
  min-width: 0;
  height: 32px !important;
  flex: 1 1 auto;
  border-radius: 4px 0 0 4px !important;
}

:is(#app, #modal-root) :is(.client-search, .opposite-search, .task-search, .clue-search, .schedule-search,
  .bulletin-search, .market-search, .finance-search, .project-search, .work-search,
  .collection-search, .case-document-search, .head-repository-search, .archive-search,
  .message-search, .message-center-search, .meeting-search, .warehousing-search,
  .hr-search, .filing-approval-search, .express-search) > button {
  --control-kind: search;
  width: 34px !important;
  min-width: 34px !important;
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid var(--ui-primary) !important;
  border-radius: 0 4px 4px 0 !important;
  background: var(--ui-primary) !important;
  color: #fff !important;
  flex: 0 0 34px;
}

:is(#app, #modal-root) :is(.client-toolbar, .opposite-toolbar, .task-toolbar, .clue-toolbar, .schedule-toolbar,
  .bulletin-toolbar, .market-toolbar, .finance-toolbar, .collection-toolbar, .archive-toolbar,
  .hr-toolbar, .express-toolbar, .case-document-toolbar, .head-repository-toolbar,
  .warehousing-toolbar, .meeting-toolbar, .message-center-toolbar) {
  height: auto !important;
  min-height: 32px !important;
  row-gap: 8px;
}

/* Tabs and page selectors are choices, not primary commands. */
:is(#app, #modal-root) :is(.pagination, [class$="-pagination"], .pager) :is(button, .page-number, b) {
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-ink) !important;
  font-size: 12px !important;
}

:is(#app, #modal-root) :is(.pagination, [class$="-pagination"], .pager) :is(button.active, .page-number.active, b) {
  background: var(--ui-primary) !important;
  border-color: var(--ui-primary) !important;
  color: #fff !important;
}

:is(#app, #modal-root) :is(.file-chip, .head-repository-chip, .hr-subtabs button, .enhanced-tabs button,
  .calculator-tabs button, .tool-site, [data-schedule-action="mode"], [data-schedule-action="list-scope"],
  [data-schedule-action="expiry"], [data-clue-action="subview"], [data-tool-action="calculator-tab"]) {
  border-radius: var(--ui-radius) !important;
  background: var(--ui-soft) !important;
  color: var(--ui-ink) !important;
}

:is(#app, #modal-root) :is(.file-chip, .head-repository-chip, .hr-subtabs button, .enhanced-tabs button,
  .calculator-tabs button, .tool-site, [data-schedule-action="mode"], [data-schedule-action="list-scope"],
  [data-schedule-action="expiry"], [data-clue-action="subview"], [data-tool-action="calculator-tab"]).active,
:is(#app, #modal-root) :is(.task-sidebar, .work-sidebar, .clue-sidebar, .schedule-sidebar, .hr-sidebar,
  .express-sidebar, .repo-sidebar, .repo-tree, .tool-sidebar, .collection-sidebar,
  .message-sidebar, .message-center-sidebar, .meeting-sidebar, .hr-tree) button.active,
:is(#app, #modal-root) [data-tool-action="search-category"].active {
  border-color: var(--ui-primary) !important;
  background: var(--ui-primary-soft) !important;
  color: var(--ui-primary) !important;
  border-radius: var(--ui-radius) !important;
}

/* Preserve menu placement and table stickiness; standardize only presentation. */
:is(#app, #modal-root) :is([class$="-row-menu"], [class$="-row-popover"], .enhanced-operation-popover,
  .client-export-menu, .client-import-menu, .opposite-export-menu) {
  border-color: var(--ui-line) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important;
}

:is(#app, #modal-root) :is([class$="-row-menu"], [class$="-row-popover"], .enhanced-operation-popover) :is(button, a) {
  display: block;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ui-ink) !important;
  font-size: 12px !important;
}

:is(#app, #modal-root) :is([class$="-row-menu"], [class$="-row-popover"], .enhanced-operation-popover) :is(button, a):hover {
  background: var(--ui-primary-soft) !important;
  color: var(--ui-primary) !important;
}

:is(#app, #modal-root) :is([class$="-row-menu"], .enhanced-operation-popover) .danger { color: var(--ui-danger) !important; }

/* Align list surfaces with home without changing columns or row heights. */
:is(#app, #modal-root) :is(.client-table, .opposite-table, .warehousing-table, .task-table, .clue-table,
  .schedule-table, .bulletin-table, .meeting-table, .finance-table, .hr-table,
  .enhanced-table, .case-document-table, .collection-table, .head-repository-table,
  .express-table, .market-table, .repo-table) th {
  background: var(--ui-soft) !important;
  color: var(--ui-ink) !important;
  border-color: #dfe5df !important;
}

:is(#app, #modal-root) :is(.client-table, .opposite-table, .warehousing-table, .task-table, .clue-table,
  .schedule-table, .bulletin-table, .meeting-table, .finance-table, .hr-table,
  .enhanced-table, .case-document-table, .collection-table, .head-repository-table,
  .express-table, .market-table, .repo-table) tbody tr:hover td { background: #f3f6f2 !important; }

/* Form footers and login use the same control vocabulary at their appropriate size. */
:is(#app, #modal-root) #filing-form .filing-actions .btn,
:is(#app, #modal-root) .workflow-app-actions .workflow-app-button {
  min-height: 36px !important;
  height: 36px !important;
  border-radius: var(--ui-radius) !important;
  font-size: 12px !important;
}

.login-shell { background: #f2f4f1; font-family: var(--ui-font); }
.login-shell .login-panel { border-color: var(--ui-line); border-radius: 5px; box-shadow: 0 6px 22px rgba(28,36,33,.055); }
.login-shell .login-submit { width: 100% !important; height: 44px !important; min-height: 44px !important; }
.login-shell .login-heading h1 { color: #1c2421; }
.login-shell .login-heading p { letter-spacing: 0; }
.login-shell .login-field input:focus { border-color: var(--ui-primary); box-shadow: 0 0 0 2px var(--ui-primary-soft); }
.public-verify-body { background: #f2f4f1; color: var(--ui-ink); font-family: var(--ui-font); }
.public-verify-header { background: var(--ui-surface); border-color: var(--ui-line); }

:is(#app, #modal-root) .enhanced-page {
  --enhanced-accent: var(--ui-primary);
  --enhanced-accent-strong: var(--ui-primary-hover);
  --enhanced-line: #dfe5df;
  --enhanced-line-strong: var(--ui-line);
  --enhanced-canvas: #f2f4f1;
  --enhanced-text: var(--ui-ink);
  --enhanced-muted: var(--ui-muted);
}

:is(#app, #modal-root) :is(.client-section > header, .workflow-app-section > header,
  .workflow-general-section > header, .hr-section-title) {
  color: var(--ui-ink) !important;
  background: var(--ui-surface) !important;
  border-color: var(--ui-line) !important;
}
:is(#app, #modal-root) .client-section > header { border-left-color: var(--ui-primary) !important; }
:is(#app, #modal-root) :is(.client-modal, .workflow-app-page, .hr-modal, .enhanced-modal) label { color: var(--ui-ink); }
:is(#app, #modal-root) :is(.btn, .button, .enhanced-button, .workflow-app-button, .hr-button,
  .client-action-button, .opposite-action-button, .task-action-button, .meeting-primary-button):active:not(:disabled) {
  filter: brightness(.94);
}

:is(#app, #modal-root) :is(.home-mode-option, .home-function-card, .meeting-background-choice) {
  border-radius: 4px !important;
  border-color: var(--ui-line) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-ink) !important;
  box-shadow: none !important;
}
:is(#app, #modal-root) :is(.home-mode-option, .home-function-card).selected {
  border-color: var(--ui-primary) !important;
  background: var(--ui-primary-soft) !important;
}
:is(#app, #modal-root) :is(.home-mode-option, .home-function-card).selected::after { background: var(--ui-primary) !important; }

:is(#app, #modal-root) :is(.workflow-app-heading, .workflow-general-header, .client-modal-head,
  .client-person-dialog > header, .meeting-dialog > header, .schedule-modal > header,
  .clue-modal > header, .task-modal > header, .seal-modal > header,
  .seal-application-title, .filing-heading, .filing-contract-workspace-head,
  .enhanced-modal > header, .enhanced-drawer > header, .hr-modal > header, .home-settings-header) {
  background: var(--ui-soft) !important;
  background-image: none !important;
  color: var(--ui-ink) !important;
  border-bottom: 1px solid var(--ui-line) !important;
}

:is(#app, #modal-root) :is(.workflow-app-heading, .workflow-general-header, .client-modal-head,
  .client-person-dialog > header, .meeting-dialog > header, .schedule-modal > header,
  .clue-modal > header, .task-modal > header, .seal-modal > header, .seal-application-title,
  .filing-heading, .filing-contract-workspace-head, .enhanced-modal > header, .hr-modal > header, .home-settings-header) :is(h1, h2, h3) {
  color: var(--ui-ink) !important;
  font-family: var(--ui-font) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

:is(#app, #modal-root) :is(.workflow-app-heading, .workflow-general-header, .client-modal-head,
  .client-person-dialog > header, .meeting-dialog > header, .schedule-modal > header,
  .clue-modal > header, .task-modal > header, .seal-modal > header, .seal-application-title,
  .enhanced-modal > header, .hr-modal > header, .home-settings-header) > button {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--ui-radius) !important;
  background: transparent !important;
  color: var(--ui-muted) !important;
}

:is(#app, #modal-root) :is(.workflow-app-page, .client-modal, .opposite-form-dialog, .enhanced-form, .hr-form,
  .schedule-modal, .clue-modal, .meeting-dialog, .task-modal) :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), select, textarea
) {
  border-color: var(--ui-line) !important;
  border-radius: var(--ui-radius) !important;
  color: var(--ui-ink) !important;
  font-family: var(--ui-font) !important;
}

:is(#app, #modal-root) :is(.workflow-app-page, .client-modal, .opposite-form-dialog, .enhanced-form, .hr-form) :is(input, select, textarea):focus {
  border-color: var(--ui-primary) !important;
  box-shadow: 0 0 0 2px var(--ui-primary-soft) !important;
}

:is(#app, #modal-root) .meeting-date-cell.active { background: var(--ui-primary) !important; border-radius: 4px !important; color: #fff !important; }
:is(#app, #modal-root) .hr-back { border-radius: 4px !important; background: var(--ui-soft) !important; color: var(--ui-ink) !important; }
:is(#app, #modal-root, body:has(#admin-app)) :is(.page-title, .oa-dashboard-heading h1, .oa-project-heading h1) { letter-spacing: 0 !important; }

@media (max-width: 820px) {
  #app .create-application { width: 36px !important; min-width: 36px !important; padding: 0 !important; }
  #app .create-application > span { display: none !important; }
  #app :is(.client-toolbar-left, .client-toolbar-right, .opposite-toolbar-left, .opposite-toolbar-right,
    .task-toolbar-left, .task-toolbar-right, .clue-toolbar-left, .clue-toolbar-right,
    .schedule-toolbar-left, .schedule-toolbar-right, .finance-toolbar-left, .finance-toolbar-right,
    .bulletin-toolbar-left, .bulletin-toolbar-right) { flex-wrap: wrap; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  :is(#app, #modal-root, body:has(#admin-app), #login-view, .login-shell, #verify-root) :is(button, .button) { transition: none !important; }
}