/**
 * Theme layer — overrides CMS.css .cms* classes using tokens.
 * Do not rename cms* class names; do not style CuteEditor internals globally.
 */

html {
  height: 99%;
}

html.cms-list-page,
html.cms-content-edit-page {
  height: 100%;
}

body,
td,
th {
  font-family: var(--cms-font-ui);
  font-size: var(--cms-font-size-base);
  color: var(--cms-ink);
  background-color: var(--cms-surface);
  -webkit-font-smoothing: antialiased;
}

a,
a:visited,
a:active {
  color: var(--cms-ink);
}

a:hover {
  color: var(--cms-accent);
}

input.cmsText,
select.cmsSelect {
  border: 1px solid var(--cms-chrome-border);
  border-radius: var(--cms-radius);
  padding: 4px 6px;
  font-family: var(--cms-font-ui);
}

input.cmsText:focus,
select.cmsSelect:focus {
  outline: none;
  box-shadow: var(--cms-focus-ring);
  border-color: var(--cms-accent);
}

input.cmsButton,
.formButton,
input.button {
  font-family: var(--cms-font-ui);
  font-size: var(--cms-font-size-base);
  background-color: var(--cms-chrome);
  color: var(--cms-ink);
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--cms-chrome-border);
  border-radius: var(--cms-radius);
  padding: 4px 12px;
  transition: background-color var(--cms-transition-fast), border-color var(--cms-transition-fast);
}

input.cmsButton:hover,
.formButton:hover,
input.button:hover {
  background-color: var(--cms-surface-muted);
  border-color: var(--cms-accent);
}

input.cmsButton:focus,
.formButton:focus,
input.button:focus {
  outline: none;
  box-shadow: var(--cms-focus-ring);
}

input.cmsLoginButton {
  height: auto;
  min-height: 32px;
  width: auto;
  min-width: 88px;
  font-size: var(--cms-font-size-base);
  font-weight: 600;
  border: none;
  border-radius: var(--cms-radius);
  background-color: var(--cms-accent-login);
  color: #fff;
  cursor: pointer;
  padding: 8px 20px;
  transition: background-color var(--cms-transition-fast);
}

input.cmsLoginButton:hover {
  background-color: var(--cms-accent-hover);
}

p.cmsHeader,
td.cmsHeader {
  font-family: var(--cms-font-display);
  font-size: 1.35rem;
  color: var(--cms-header-title);
  font-weight: 400;
  font-style: normal;
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}

td.cmsResultsHeader,
th.cmsResultsHeader {
  font-weight: 600;
  background: var(--cms-header-bg);
  color: var(--cms-header-text);
  padding: 8px 10px;
  cursor: pointer;
  border: none;
  font-size: var(--cms-font-size-base);
}

tr.cmsResultRow {
  background-color: var(--cms-surface);
  cursor: default;
  transition: background-color var(--cms-transition-fast);
}

tr.cmsResultRowOver {
  background-color: var(--cms-row-hover);
  cursor: pointer;
}

.errorMsg {
  font-weight: 600;
  color: var(--cms-error);
}

.HRA_Button {
  height: 28px;
  border: 1px solid var(--cms-chrome-border);
  border-radius: var(--cms-radius);
  font-family: var(--cms-font-ui);
}

/* WebForms GridView / DataGrid (HRA, Quiz) */
table[id*="Grid"],
.aspNetGrid table,
table.Grid,
.DataGrid {
  border-collapse: collapse;
  font-family: var(--cms-font-ui);
}

table[id*="Grid"] th,
.DataGridHeaderStyle,
td[class*="Header"] {
  background: var(--cms-header-bg) !important;
  color: var(--cms-header-text) !important;
}

table[id*="Grid"] tr:hover,
.DataGridItemStyle:hover {
  background: var(--cms-row-hover) !important;
}

/* Scoped editor host — layout only; no CuteEditor toolbar overrides */
.cms-editor-host {
  margin: 0 auto;
  max-width: 100%;
}

.cms-content-edit-toolbar input.button {
  min-width: 72px;
  box-sizing: border-box;
  height: auto;
  line-height: normal;
}

/* Tab pane (EditContent) — token-aligned */
.dynamic-tab-pane-control .tab-row .tab {
  font-family: var(--cms-font-ui);
  background: var(--cms-chrome);
  border-color: var(--cms-chrome-border);
  cursor: pointer;
}

.dynamic-tab-pane-control .tab-row .tab.selected {
  background: var(--cms-surface);
  border-color: var(--cms-accent);
  border-bottom-color: var(--cms-surface);
}

.dynamic-tab-pane-control .tab-row .tab a {
  color: var(--cms-ink);
  text-decoration: none;
}

.dynamic-tab-pane-control .tab-row .tab.selected a {
  color: var(--cms-accent);
  font-weight: 600;
}