@use "../../styles/tokens" as t;
@use "../../styles/mixins" as m;

@include m.scoped {
  .page { color: t.$text; padding-bottom: 32px; min-width: 0; }
  .headerActions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
  .dirty { @include m.text(13, t.$weight-medium); color: t.$text-soft; display: flex; align-items: center; gap: 8px;
    &::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: t.$warning; }
  }
  .divider { height: 3px; margin-top: 20px; border-radius: t.$radius-pill; background: t.$surface; box-shadow: t.$shadow-track; }
  .layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; margin-top: 20px; align-items: start; }
  .sections { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .card, .preview, .navigation { background: t.$surface; border: 1px solid t.$border; border-radius: t.$radius-2xl; box-shadow: t.$shadow-card; overflow: hidden; min-width: 0; }
  .card[hidden] { display: none; }
  .navigation { display: flex; flex-direction: column; gap: 3px; padding: 8px;
    button { @include m.button-reset; @include m.wp-reset-button; border: 1px solid transparent; transition: background-color t.$duration t.$ease, border-color t.$duration-fast t.$ease; display: flex; align-items: center; gap: 10px; padding: 9px 10px; width: 100%; border-radius: t.$radius-lg; color: t.$text-soft; @include m.text(13, t.$weight-semibold); text-align: left;
      > span:nth-child(2) { flex: 1; }
      small { @include m.text(11, t.$weight-semibold); padding: 2px 6px; border-radius: t.$radius-pill; background: t.$surface-subtle; }
      &:hover { background: t.$hover-surface; border-color: t.$hover-border; }
      &:focus-visible { @include m.focus-ring; }
      &.active { color: t.$primary-strong; background: t.$primary-surface; box-shadow: t.$shadow-chip-pressed; }
    }
  }
  .navIcon { display: flex; padding: 5px; border-radius: t.$radius-sm; background: t.$surface; svg { width: 16px; height: 16px; } }
  .card header { padding: 16px; border-bottom: 1px solid t.$border-hairline; }
  .card h2 { margin: 0; @include m.text(15, t.$weight-bold); }
  .card p, .hint { color: t.$text-soft; @include m.text(12, t.$weight-medium); line-height: 1.6; }
  .fields { display: flex; flex-direction: column; gap: 16px; padding: 16px; }
  .field { display: flex; flex-direction: column; gap: 7px; min-width: 0; @include m.text(13, t.$weight-semibold);
    input, select { @include m.wp-reset-control; @include m.field-surface; width: 100%; min-width: 0; height: 40px; padding: 0 10px; color: t.$text; @include m.text(13, t.$weight-medium); &:focus { @include m.focus-ring; } }
    select { appearance: auto; }
    input[type=color] { padding: 4px; }
  }
  .field small, .toggle small { display: block; color: t.$text-soft; @include m.text(12, t.$weight-medium); line-height: 1.5; }
  .toggle { display: flex; align-items: flex-start; gap: 11px; padding: 4px 0 12px; @include m.text(13, t.$weight-semibold); border-bottom: 1px solid t.$border-hairline;
    input[type=checkbox] { @include m.wp-reset-control; position: relative; flex: 0 0 36px; width: 36px; height: 22px; padding: 0; border-radius: t.$radius-pill; background: t.$border; box-shadow: t.$shadow-track; cursor: pointer;
      &::before { content: ''; display: block; position: absolute; box-sizing: border-box; width: 16px; height: 16px; margin: 0; padding: 0; mask: none; float: none; left: 3px; top: 3px; border-radius: 50%; background: t.$surface; box-shadow: none; transition: transform .15s ease; }
      &:checked { background: t.$primary; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08); &::before { content: ''; transform: translateX(14px); } &::after { display: none; } }
      &:focus-visible { outline: 2px solid t.$primary-border-strong; outline-offset: 2px; }
    }
  }
  .modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
    label { @include m.field-surface; display: flex; align-items: center; gap: 7px; padding: 12px 8px; cursor: pointer; @include m.text(12, t.$weight-semibold); }
    .selected { border-color: t.$primary-border; background: t.$primary-surface; color: t.$primary-strong; }
    input[type=radio] { @include m.wp-reset-control; position: relative; flex: 0 0 16px; width: 16px; height: 16px; min-width: 16px; padding: 0; border: 1px solid t.$border-field; border-radius: 50%; background: t.$surface; cursor: pointer;
      &::before { content: none; }
      &:checked::before { content: ''; display: block; position: absolute; width: 8px; height: 8px; margin: 0; float: none; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: t.$primary; }
      &:focus { border-color: t.$border-field; }
      &:focus-visible { @include m.focus-ring; }
    }
  }
  .preview { position: sticky; top: var(--wp-admin--admin-bar--height, 32px); align-self: start; display: flex; flex-direction: column; height: calc(100vh - var(--wp-admin--admin-bar--height, 32px) - 16px); height: calc(100dvh - var(--wp-admin--admin-bar--height, 32px) - 16px); }
  .previewHead { display: flex; flex-shrink: 0; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid t.$border-hairline; }
  .live { display: flex; align-items: center; gap: 8px; @include m.text(14, t.$weight-bold); &::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: t.$success; } }
  .previewMeta { display: block; padding-left: 15px; margin-top: 3px; color: t.$text-soft; @include m.text(12, t.$weight-medium); }
  .preview > p { flex-shrink: 0; margin: 12px 16px; }
  .frame { display: block; flex: 1; min-height: 0; border: 0; width: 100%; height: auto; background: t.$surface; }
  .embed textarea { @include m.field-surface; display: block; width: calc(100% - 32px); box-sizing: border-box; margin: 16px; padding: 12px; color: t.$text-soft; font-family: ui-monospace, monospace; font-size: 12px; resize: vertical; &:focus { @include m.focus-ring; } }
  .embedActions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 0 16px; @include m.text(12, t.$weight-medium); color: t.$text-soft; }
  .embed .hint { padding: 0 16px 10px; }
  .error, .notice { padding: 12px; border-radius: t.$radius-md; @include m.text(13, t.$weight-medium); }
  .error { color: t.$danger-text; background: t.$danger-surface; }
  .notice { color: t.$success-text; background: t.$success-surface; }
  .colorControl { display: flex; gap: 8px; input[type=color] { width: 44px; flex-shrink: 0; } }
  @media (max-width: 900px) { .layout { grid-template-columns: minmax(0, 1fr); } .preview { position: static; } .navigation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 480px) { .navigation { grid-template-columns: 1fr; } }
}