/* CLEAN_UI_ATHENA_GLOBAL_V1
   Shared Athena Clean UI layer.
   Keep each page/board/app color palette, but normalize the component language:
   Inter typography, clean controls, subtle borders, compact radii, modal polish,
   readable active states, and consistent focus treatment. */
:root {
  --clean-ui-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --clean-ui-bg: #f8fafc;
  --clean-ui-panel: var(--athena-panel, var(--surface, #ffffff));
  --clean-ui-panel-soft: var(--athena-panel-2, var(--surface-2, #f8fafc));
  --clean-ui-text: var(--athena-ink, var(--text, #111827));
  --clean-ui-muted: var(--athena-muted, var(--muted, #64748b));
  --clean-ui-border: var(--athena-line, var(--border, rgba(15, 23, 42, .10)));
  --clean-ui-primary: var(--athena-primary, var(--primary, var(--primary-1, var(--accent, #5B4BFF))));
  --clean-ui-primary-2: var(--athena-primary-2, var(--primary2, var(--primary-2, var(--accent2, #4B3BE8))));
  --clean-ui-radius: 10px;
  --clean-ui-radius-sm: 8px;
  --clean-ui-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 10px 24px rgba(15, 23, 42, .06);
  --clean-ui-shadow-hover: 0 2px 4px rgba(15, 23, 42, .08), 0 16px 34px rgba(15, 23, 42, .10);
  --clean-ui-focus: 0 0 0 4px color-mix(in srgb, var(--clean-ui-primary) 16%, transparent);
}

html,
body {
  font-family: var(--clean-ui-font) !important;
  letter-spacing: 0;
}

body :where(button, input, select, textarea, .btn, .button, [role="button"], .pill, .badge, .tag, .chip, .card, .panel, .tile, .modalCard, .drawer, .popover, .dropdown, .dropdown-menu, table) {
  font-family: inherit !important;
  letter-spacing: 0 !important;
}

body :where(.card, .panel, .tile, .metric, .group, .item, .rowCard, .history-card, .notifyItem, .checklistItem, .table-wrap, .tableWrap, .conversation, .progress-card, .step, .col, .miniTile, .rail, .section) {
  border-radius: var(--clean-ui-radius) !important;
  border-color: var(--clean-ui-border) !important;
  box-shadow: var(--clean-ui-shadow) !important;
}

body :where(.card, .panel, .tile, .modalCard, .drawer, .popover, .dropdown, .dropdown-menu, [role="dialog"]) {
  background-color: var(--clean-ui-panel) !important;
}

body :where(.modalHeader, .modalFooter, .panel-head, .panelHead, .head, .sectionHeader, .colHeader, thead th, .table th) {
  background-color: var(--clean-ui-panel-soft) !important;
  border-color: var(--clean-ui-border) !important;
}

body :where(.title, .modalTitle, .cardTitle, .sectionTitle, .railTitle, .colName, h1, h2, h3) {
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

body :where(.subtitle, .hint, .muted, .meta, .colMeta, .cardDesc, .sectionDesc, .railHint, .statNote, .tDesc, small) {
  color: var(--clean-ui-muted) !important;
  font-weight: 600 !important;
}

body :where(button, .btn, .button, [role="button"], input[type="button"], input[type="submit"], input[type="file"]::file-selector-button) {
  min-height: 34px;
  border-radius: var(--clean-ui-radius-sm) !important;
  font-weight: 750 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body :where(.btn:not(.primary):not(.danger), button:not(.primary):not(.danger):not([type="submit"]):not(.iconBtn):not(.treeToggle), .button:not(.primary):not(.danger), [role="button"]:not(.primary):not(.danger)) {
  background: var(--clean-ui-panel) !important;
  background-image: none !important;
  color: color-mix(in srgb, var(--clean-ui-text) 86%, #64748b 14%) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--clean-ui-text) 86%, #64748b 14%) !important;
  border: 1px solid var(--clean-ui-border) !important;
}

body :where(.btn.primary, button.primary, button[type="submit"], .button.primary, [role="button"].primary) {
  background: linear-gradient(135deg, var(--clean-ui-primary), var(--clean-ui-primary-2)) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--clean-ui-primary) 20%, transparent) !important;
}

body :where(.btn.danger, button.danger, .button.danger) {
  background: #ffffff !important;
  background-image: none !important;
  color: #b91c1c !important;
  -webkit-text-fill-color: #b91c1c !important;
  border-color: rgba(220, 38, 38, .24) !important;
}

body :where(button:hover, .btn:hover, .button:hover, [role="button"]:hover, .card:hover, .tile:hover) {
  filter: none !important;
  transform: translateY(-1px);
  box-shadow: var(--clean-ui-shadow-hover) !important;
}

body :where(input, select, textarea, .select, .multiSelect, .msMenu, .ql-container, .ql-toolbar) {
  border-radius: var(--clean-ui-radius) !important;
  border: 1px solid var(--clean-ui-border) !important;
  background: var(--clean-ui-panel) !important;
  color: var(--clean-ui-text) !important;
  -webkit-text-fill-color: var(--clean-ui-text) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
}

body :where(input, select) {
  min-height: 36px;
}

body :where(textarea) {
  line-height: 1.45;
}

body :where(input:focus, select:focus, textarea:focus, .select:focus, .multiSelect:focus-within, .msMenu:focus-within, .ql-container:focus-within, button:focus-visible, .btn:focus-visible, a:focus-visible) {
  outline: none !important;
  border-color: color-mix(in srgb, var(--clean-ui-primary) 45%, var(--clean-ui-border)) !important;
  box-shadow: var(--clean-ui-focus), 0 1px 2px rgba(15, 23, 42, .04) !important;
}

body :where(.modal::backdrop, dialog::backdrop) {
  background: rgba(15, 23, 42, .48) !important;
  backdrop-filter: blur(3px);
}

body :where(.modalCard, dialog[open] > form, dialog[open] > .modalCard, [role="dialog"]) {
  border-radius: 12px !important;
  border: 1px solid var(--clean-ui-border) !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .22) !important;
  overflow: hidden;
}

body :where(.modalHeader, .modalFooter) {
  padding: 12px 14px !important;
}

body :where(table) {
  border-radius: var(--clean-ui-radius) !important;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

body :where(thead th, .table th) {
  font-size: 11px;
  font-weight: 800 !important;
  text-transform: uppercase;
  color: var(--clean-ui-muted) !important;
}

body :where(.active, .selected, [aria-selected="true"], [aria-pressed="true"]) {
  border-color: color-mix(in srgb, var(--clean-ui-primary) 45%, transparent) !important;
}

body :where(.active, .selected, [aria-selected="true"], [aria-pressed="true"]) :where(span, small, b, strong, p, div, svg) {
  color: inherit;
  stroke: currentColor;
}

body :where(.ql-toolbar button, .ql-toolbar .ql-picker-label) {
  min-height: 30px !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transform: none !important;
}

body :where(.ql-toolbar button:hover, .ql-toolbar button.ql-active, .ql-toolbar .ql-picker-label:hover, .ql-toolbar .ql-picker-label.ql-active) {
  background: color-mix(in srgb, var(--clean-ui-primary) 10%, #ffffff) !important;
  color: var(--clean-ui-primary-2) !important;
  -webkit-text-fill-color: var(--clean-ui-primary-2) !important;
}

@media (max-width: 720px) {
  body :where(.modalCard, dialog[open] > form, dialog[open] > .modalCard, [role="dialog"]) {
    width: min(96vw, 720px) !important;
  }
  body :where(button, .btn, .button, [role="button"]) {
    min-height: 38px;
  }
}