/* KG Portal V11.2 R11.3.3 — full-width admin workspace redesign. */

html[data-kg-theme="dark"] {
  --kg-r1132-surface: #15191a;
  --kg-r1132-surface-soft: #101415;
  --kg-r1132-surface-raised: #1b2021;
  --kg-r1132-line: #3d4547;
  --kg-r1132-line-strong: #566064;
  --kg-r1132-ink: #f5f1ea;
  --kg-r1132-muted: #c0b9af;
  --kg-r1132-accent: #e47859;
  --kg-r1132-accent-soft: #2a1e1a;
  --kg-r1132-count: #e1b56f;
}

html[data-kg-theme="light"] {
  --kg-r1132-surface: #fffaf3;
  --kg-r1132-surface-soft: #f4ede4;
  --kg-r1132-surface-raised: #fffdf9;
  --kg-r1132-line: #cfc3b5;
  --kg-r1132-line-strong: #a99b8c;
  --kg-r1132-ink: #24211d;
  --kg-r1132-muted: #625b52;
  --kg-r1132-accent: #a94f39;
  --kg-r1132-accent-soft: #f3ddd3;
  --kg-r1132-count: #8d5b25;
}

/* R11.3.3: remove the legacy centered-column constraint on administration. */
html[data-kg-theme] .mainContent:has(.adminPageFrame) {
  padding-inline: clamp(24px, 2.6vw, 48px) !important;
}

html[data-kg-theme] .mainContent .adminPageFrame,
html[data-kg-theme] .mainContent .adminPageFrame > :where(.pageHeader, .adminSectionTabs, .adminTabs, .adminKpis, .adminSplit, .card),
html[data-kg-theme] .mainContent .adminPageFrame .v9AutomationSettings {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

html[data-kg-theme] .mainContent .adminPageFrame {
  box-sizing: border-box;
  padding: 0 0 48px !important;
  font-size: 16px;
}

html[data-kg-theme] .mainContent .adminPageFrame > .pageHeader {
  margin-bottom: 18px !important;
}

html[data-kg-theme] .mainContent .adminPageFrame > .pageHeader h1 {
  font-size: clamp(1.7rem, 2.1vw, 2.35rem) !important;
  letter-spacing: -0.025em;
}

html[data-kg-theme] .mainContent .adminPageFrame > .pageHeader p,
html[data-kg-theme] .mainContent .adminPageFrame .sectionTitle p {
  max-width: 78ch !important;
  font-size: 0.95rem !important;
  line-height: 1.65 !important;
}

html[data-kg-theme] .mainContent .adminPageFrame .adminSectionTabs,
html[data-kg-theme] .mainContent .adminPageFrame .adminTabs {
  display: flex !important;
  gap: 6px !important;
  padding: 6px !important;
  overflow-x: auto;
  border: 1px solid var(--kg-r1132-line) !important;
  border-radius: 14px !important;
  background: var(--kg-r1132-surface-soft) !important;
  box-shadow: none !important;
}

html[data-kg-theme] .mainContent .adminPageFrame :where(.adminSectionTabs, .adminTabs) button {
  min-height: 42px !important;
  padding: 0 18px !important;
  color: var(--kg-r1132-muted) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  white-space: nowrap;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-kg-theme] .mainContent .adminPageFrame :where(.adminSectionTabs, .adminTabs) button.active {
  color: var(--kg-r1132-ink) !important;
  background: var(--kg-r1132-surface-raised) !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1) !important;
}

/* Automation cards become compact horizontal work rows on desktop. */
html[data-kg-theme] .mainContent .v9AutomationSettings {
  padding: clamp(20px, 2vw, 30px) !important;
  border: 1px solid var(--kg-r1132-line) !important;
  border-radius: 18px !important;
  background: var(--kg-r1132-surface-raised) !important;
  box-shadow: 0 14px 38px rgba(18, 21, 22, 0.09) !important;
}

html[data-kg-theme] .mainContent .v9AutomationSettings .sectionTitle {
  align-items: flex-start !important;
  margin-bottom: 20px !important;
  padding-bottom: 18px !important;
  border-bottom: 1px solid var(--kg-r1132-line) !important;
}

html[data-kg-theme] .mainContent .v9AutomationSettings .sectionTitle h2 {
  margin-top: 5px !important;
  font-size: clamp(1.25rem, 1.55vw, 1.65rem) !important;
  letter-spacing: -0.018em;
}

html[data-kg-theme] .mainContent .v9AutomationSettings .v9AutomationSettingsGrid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

html[data-kg-theme] .mainContent .v9AutomationSettings .v9AutomationChannel {
  display: grid !important;
  grid-template-columns: minmax(220px, 1.25fr) minmax(170px, 1fr) minmax(170px, 1fr) minmax(130px, .72fr) minmax(270px, 1.45fr) minmax(138px, auto) !important;
  align-items: end !important;
  gap: 14px !important;
  min-height: 0 !important;
  padding: 16px 18px !important;
  border-color: var(--kg-r1132-line) !important;
  border-radius: 14px !important;
  background: var(--kg-r1132-surface) !important;
  box-shadow: 0 5px 18px rgba(18, 21, 22, 0.06) !important;
}

html[data-kg-theme] .mainContent .v9AutomationSettings .v9AutomationChannelHead {
  align-self: center !important;
  min-width: 0;
  gap: 10px !important;
}

html[data-kg-theme] .mainContent .v9AutomationSettings .v9AutomationChannelHead > div {
  min-width: 0;
}

html[data-kg-theme] .mainContent .v9AutomationSettings .v9AutomationChannel h3 {
  overflow: hidden;
  margin: 0 !important;
  font-size: 1rem !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-kg-theme] .mainContent .v9AutomationSettings .v9AutomationChannelHead p {
  overflow: hidden;
  margin: 4px 0 0 !important;
  font-size: 0.78rem !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-kg-theme] .mainContent .v9AutomationSettings .v9AutomationChannel > label {
  display: grid !important;
  gap: 7px !important;
  min-width: 0;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
}

html[data-kg-theme] .mainContent .v9AutomationSettings .v9AutomationChannel select {
  width: 100% !important;
  min-height: 42px !important;
  padding-inline: 11px !important;
  font-size: 0.86rem !important;
  border-radius: 9px !important;
}

html[data-kg-theme] .mainContent .v9AutomationSettings .v9AutomationToggles {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-self: stretch !important;
  gap: 7px 12px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
}

html[data-kg-theme] .mainContent .v9AutomationSettings .v9AutomationToggles label {
  display: grid !important;
  grid-template-columns: 16px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0;
  font-size: 0.74rem !important;
  line-height: 1.25 !important;
}

html[data-kg-theme] .mainContent .v9AutomationSettings .v9AutomationChannel > button:last-child {
  align-self: end !important;
  min-height: 42px !important;
  padding: 0 16px !important;
  white-space: nowrap;
  border-radius: 10px !important;
}

@media (max-width: 1500px) {
  html[data-kg-theme] .mainContent .v9AutomationSettings .v9AutomationChannel {
    grid-template-columns: minmax(210px, 1.1fr) repeat(3, minmax(150px, 1fr)) minmax(260px, 1.35fr) !important;
  }

  html[data-kg-theme] .mainContent .v9AutomationSettings .v9AutomationChannel > button:last-child {
    grid-column: 5;
  }
}

@media (max-width: 1180px) {
  html[data-kg-theme] .mainContent .v9AutomationSettings .v9AutomationChannel {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html[data-kg-theme] .mainContent .v9AutomationSettings .v9AutomationChannelHead,
  html[data-kg-theme] .mainContent .v9AutomationSettings .v9AutomationToggles {
    grid-column: 1 / -1 !important;
  }

  html[data-kg-theme] .mainContent .v9AutomationSettings .v9AutomationChannel > button:last-child {
    grid-column: auto !important;
  }
}

@media (max-width: 720px) {
  html[data-kg-theme] .mainContent:has(.adminPageFrame) {
    padding-inline: 14px !important;
  }

  html[data-kg-theme] .mainContent .v9AutomationSettings {
    padding: 16px !important;
  }

  html[data-kg-theme] .mainContent .v9AutomationSettings .v9AutomationChannel {
    grid-template-columns: 1fr !important;
    padding: 15px !important;
  }

  html[data-kg-theme] .mainContent .v9AutomationSettings .v9AutomationChannelHead,
  html[data-kg-theme] .mainContent .v9AutomationSettings .v9AutomationToggles,
  html[data-kg-theme] .mainContent .v9AutomationSettings .v9AutomationChannel > button:last-child {
    grid-column: 1 !important;
  }

  html[data-kg-theme] .mainContent .v9AutomationSettings .v9AutomationToggles {
    grid-template-columns: 1fr !important;
  }
}

/* Permission editor: scrolling stays inside the dialog and text never fades. */
html[data-kg-theme] .adminPermissionModalV112 {
  color: var(--kg-r1132-ink) !important;
  background: var(--kg-r1132-surface-raised) !important;
  scrollbar-gutter: stable both-edges;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

html[data-kg-theme] .adminPermissionModalV112 :where(h2, h3, b, strong, label) {
  color: var(--kg-r1132-ink) !important;
  opacity: 1 !important;
}

html[data-kg-theme] .adminPermissionModalV112 :where(p, small, em) {
  color: var(--kg-r1132-muted) !important;
  opacity: 1 !important;
}

html[data-kg-theme] .adminPermissionModalV112 :where(input, select, textarea) {
  color: var(--kg-r1132-ink) !important;
  border-color: var(--kg-r1132-line-strong) !important;
  background: var(--kg-r1132-surface-soft) !important;
}

/* Permission roster: these are selectable accounts, not pale primary buttons. */
html[data-kg-theme]
  .mainContent
  .adminPageFrame
  .permissionRosterV112
  > button {
  min-height: 70px;
  color: var(--kg-r1132-ink) !important;
  border: 1px solid var(--kg-r1132-line) !important;
  border-left: 4px solid var(--kg-r1132-accent) !important;
  background: var(--kg-r1132-surface) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12) !important;
  opacity: 1 !important;
}

html[data-kg-theme]
  .mainContent
  .adminPageFrame
  .permissionRosterV112
  > button:hover {
  color: var(--kg-r1132-ink) !important;
  border-color: var(--kg-r1132-accent) !important;
  background: var(--kg-r1132-accent-soft) !important;
  transform: translateY(-1px);
}

html[data-kg-theme]
  .mainContent
  .adminPageFrame
  .permissionRosterV112
  > button
  > span:nth-child(2)
  b {
  color: var(--kg-r1132-ink) !important;
  font-size: 0.86rem !important;
  font-weight: 760 !important;
  line-height: 1.35 !important;
  opacity: 1 !important;
}

html[data-kg-theme]
  .mainContent
  .adminPageFrame
  .permissionRosterV112
  > button
  > span:nth-child(2)
  small {
  color: var(--kg-r1132-muted) !important;
  font-size: 0.76rem !important;
  font-weight: 620 !important;
  line-height: 1.4 !important;
  opacity: 1 !important;
}

html[data-kg-theme]
  .mainContent
  .adminPageFrame
  .permissionRosterV112
  > button
  > strong {
  color: var(--kg-r1132-count) !important;
  font-size: 1.12rem !important;
  opacity: 1 !important;
}

html[data-kg-theme]
  .mainContent
  .adminPageFrame
  .permissionRosterV112
  > button
  > strong
  small {
  color: var(--kg-r1132-muted) !important;
  font-size: 0.72rem !important;
  opacity: 1 !important;
}

html[data-kg-theme] .mainContent .adminPageFrame .permissionItemV112,
html[data-kg-theme] .mainContent .adminPageFrame .matrixRow {
  color: var(--kg-r1132-ink) !important;
}

html[data-kg-theme]
  .mainContent
  .adminPageFrame
  .permissionItemV112
  :where(span, b, strong, label),
html[data-kg-theme]
  .mainContent
  .adminPageFrame
  .matrixRow
  :where(span, b, strong) {
  color: var(--kg-r1132-ink) !important;
  opacity: 1 !important;
}

html[data-kg-theme]
  .mainContent
  .adminPageFrame
  .permissionItemV112
  :where(small, em),
html[data-kg-theme] .mainContent .adminPageFrame .matrixRow small {
  color: var(--kg-r1132-muted) !important;
  opacity: 1 !important;
}

/* Safe account removal retained from R11.3.1. */
html[data-kg-theme] .accountDeletePanelV113 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 18px 0;
  padding: 15px 16px;
  color: var(--kg-r1132-ink) !important;
  border: 1px solid rgba(210, 84, 70, 0.62);
  border-radius: 13px;
  background: rgba(210, 84, 70, 0.1);
}

html[data-kg-theme] .accountDeletePanelV113 p {
  max-width: 680px;
  margin: 4px 0 0;
  color: var(--kg-r1132-muted) !important;
  opacity: 1 !important;
}

html[data-kg-theme] .dangerButtonV113 {
  flex: 0 0 auto;
  color: #ffffff !important;
  border-color: #a93e34 !important;
  background: #a93e34 !important;
}

html[data-kg-theme] .dangerButtonV113:disabled {
  opacity: 0.48 !important;
}

/* Per-channel automation setup: neutral surfaces, larger labels, no navy block. */
html[data-kg-theme]
  .mainContent
  .v9AutomationSettings
  .v9AutomationSettingsGrid {
  gap: 16px !important;
}

html[data-kg-theme] .mainContent .v9AutomationSettings .v9AutomationChannel {
  color: var(--kg-r1132-ink) !important;
  border: 1px solid var(--kg-r1132-line-strong) !important;
  background: var(--kg-r1132-surface) !important;
  box-shadow: 0 7px 22px rgba(0, 0, 0, 0.12) !important;
}

html[data-kg-theme]
  .mainContent
  .v9AutomationSettings
  .v9AutomationChannel
  :where(h3, label) {
  color: var(--kg-r1132-ink) !important;
  opacity: 1 !important;
}

html[data-kg-theme] .mainContent .v9AutomationSettings .v9AutomationChannel h3 {
  font-size: 0.96rem !important;
  font-weight: 780 !important;
  line-height: 1.35 !important;
}

html[data-kg-theme] .mainContent .v9AutomationSettings .v9AutomationChannel p {
  color: var(--kg-r1132-muted) !important;
  font-size: 0.78rem !important;
  line-height: 1.45 !important;
  opacity: 1 !important;
}

html[data-kg-theme]
  .mainContent
  .v9AutomationSettings
  .v9AutomationChannel
  > label {
  font-size: 0.77rem !important;
  font-weight: 720 !important;
  line-height: 1.4 !important;
}

html[data-kg-theme]
  .mainContent
  .v9AutomationSettings
  .v9AutomationChannel
  select {
  min-height: 40px;
  color: var(--kg-r1132-ink) !important;
  font-size: 0.79rem !important;
  font-weight: 640 !important;
  border-color: var(--kg-r1132-line-strong) !important;
  background: var(--kg-r1132-surface-soft) !important;
}

html[data-kg-theme="dark"]
  .mainContent
  .v9AutomationSettings
  .v9AutomationChannel
  option {
  color: #f5f1ea;
  background: #101415;
}

html[data-kg-theme] .mainContent .v9AutomationSettings .v9AutomationToggles {
  color: var(--kg-r1132-ink) !important;
  border: 1px solid var(--kg-r1132-line) !important;
  background: var(--kg-r1132-surface-soft) !important;
  box-shadow: none !important;
}

html[data-kg-theme]
  .mainContent
  .v9AutomationSettings
  .v9AutomationToggles
  label,
html[data-kg-theme]
  .mainContent
  .v9AutomationSettings
  .v9AutomationToggles
  span {
  color: var(--kg-r1132-ink) !important;
  font-size: 0.79rem !important;
  font-weight: 680 !important;
  line-height: 1.45 !important;
  opacity: 1 !important;
}

html[data-kg-theme]
  .mainContent
  .v9AutomationSettings
  .v9AutomationToggles
  input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--kg-r1132-accent);
}

html[data-kg-theme]
  .mainContent
  .v9AutomationSettings
  .v9AutomationChannel
  > button:last-child {
  min-height: 40px;
  color: #ffffff !important;
  font-size: 0.8rem !important;
  font-weight: 760 !important;
  border-color: #a6533d !important;
  background: #a6533d !important;
}

/* Manual activation fallback retained and made readable in both themes. */
html[data-kg-theme] .manualInviteLinkV1131 {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
  color: var(--kg-r1132-ink) !important;
  border: 1px solid rgba(209, 109, 80, 0.72);
  border-radius: 12px;
  background: var(--kg-r1132-accent-soft) !important;
}

html[data-kg-theme] .manualInviteLinkV1131 :where(h3, p, small) {
  margin: 0;
  color: var(--kg-r1132-ink) !important;
  opacity: 1 !important;
}

html[data-kg-theme] .manualInviteLinkV1131 small {
  color: var(--kg-r1132-muted) !important;
}

html[data-kg-theme] .manualInviteUrlV1131 {
  width: 100%;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--kg-r1132-ink) !important;
  border-color: var(--kg-r1132-line-strong) !important;
  background: var(--kg-r1132-surface) !important;
}

html[data-kg-theme] .manualInviteActionsV1131 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

html[data-kg-theme] .manualInviteActionsV1131 button {
  width: auto;
}

html[data-kg-theme] .manualInviteStatusV1131 {
  font-weight: 750;
  color: #278a66 !important;
}

@media (max-width: 760px) {
  html[data-kg-theme] .accountDeletePanelV113 {
    align-items: stretch;
    flex-direction: column;
  }

  html[data-kg-theme] .manualInviteActionsV1131 button {
    width: 100%;
  }

  html[data-kg-theme]
    .mainContent
    .adminPageFrame
    .permissionRosterV112
    > button {
    min-height: 66px;
  }
}