/* KG Portal V11.2 R11.3.4 — align administration tabs and restore four channel cards. */

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;
}

/* 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;
  }
}

/*
 * R11.3.4 layout contract:
 * - Setup uses the same centered administration frame as /admin.
 * - Section tabs, page header and setup cards share one left edge.
 * - Four channels render as a calm 2 x 2 card grid on desktop.
 */
html[data-kg-theme] .mainContent .setupAdminPageFrame {
  width: min(1240px, 100%) !important;
  max-width: 1240px !important;
  margin-inline: auto !important;
}

html[data-kg-theme]
  .mainContent
  .setupAdminPageFrame
  > :where(.pageHeader, .adminSectionTabs, .v9AutomationSettings) {
  box-sizing: border-box;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html[data-kg-theme]
  .mainContent
  .setupAdminPageFrame
  > :where(.pageHeader, .v9AutomationSettings) {
  width: 100% !important;
  max-width: none !important;
}

html[data-kg-theme]
  .mainContent
  .setupAdminPageFrame
  > .adminSectionTabs {
  align-self: flex-start !important;
  margin-bottom: 20px !important;
}

html[data-kg-theme]
  .mainContent
  .setupAdminPageFrame
  .v9AutomationSettingsGrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 18px !important;
}

html[data-kg-theme]
  .mainContent
  .setupAdminPageFrame
  .v9AutomationChannel {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: auto auto auto auto !important;
  align-content: start !important;
  align-items: start !important;
  gap: 15px 16px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 20px !important;
}

html[data-kg-theme]
  .mainContent
  .setupAdminPageFrame
  .v9AutomationChannelHead {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}

html[data-kg-theme]
  .mainContent
  .setupAdminPageFrame
  .v9AutomationChannel
  > label:nth-of-type(1) {
  grid-column: 1 !important;
  grid-row: 2 !important;
}

html[data-kg-theme]
  .mainContent
  .setupAdminPageFrame
  .v9AutomationChannel
  > label:nth-of-type(2) {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

html[data-kg-theme]
  .mainContent
  .setupAdminPageFrame
  .v9AutomationToggles {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px 16px !important;
  min-width: 0 !important;
}

html[data-kg-theme]
  .mainContent
  .setupAdminPageFrame
  .v9AutomationChannel
  > label:nth-of-type(3) {
  grid-column: 1 !important;
  grid-row: 4 !important;
  align-self: end !important;
}

html[data-kg-theme]
  .mainContent
  .setupAdminPageFrame
  .v9AutomationChannel
  > button:last-child {
  grid-column: 2 !important;
  grid-row: 4 !important;
  align-self: end !important;
  justify-self: end !important;
  width: auto !important;
  min-width: 150px !important;
}

@media (max-width: 980px) {
  html[data-kg-theme]
    .mainContent
    .setupAdminPageFrame
    .v9AutomationSettingsGrid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 640px) {
  html[data-kg-theme]
    .mainContent
    .setupAdminPageFrame
    .v9AutomationChannel {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
  }

  html[data-kg-theme]
    .mainContent
    .setupAdminPageFrame
    .v9AutomationChannel
    > :where(.v9AutomationChannelHead, label, .v9AutomationToggles, button:last-child) {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  html[data-kg-theme]
    .mainContent
    .setupAdminPageFrame
    .v9AutomationToggles {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-kg-theme]
    .mainContent
    .setupAdminPageFrame
    .v9AutomationChannel
    > button:last-child {
    justify-self: stretch !important;
    width: 100% !important;
  }
}