@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :where(#airygen-root, #airygen-editor-root) {
    all: revert;
    font-family:
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      "Helvetica Neue",
      Arial,
      sans-serif;
    line-height: inherit;
    min-height: 100vh;
    width: 100%;
  }

  :where(#airygen-root[data-locale^="zh"], #airygen-editor-root[data-locale^="zh"]) {
    font-family:
      "Microsoft JhengHei",
      "Microsoft YaHei",
      "Noto Sans CJK TC",
      "Noto Sans CJK SC",
      "PingFang TC",
      "PingFang SC",
      sans-serif;
  }

  :where(#airygen-root[data-locale^="ja"], #airygen-editor-root[data-locale^="ja"]) {
    font-family:
      "Hiragino Sans",
      "Yu Gothic UI",
      "Yu Gothic",
      "Meiryo",
      "Noto Sans CJK JP",
      sans-serif;
  }

  :where(#airygen-root[data-locale^="ko"], #airygen-editor-root[data-locale^="ko"]) {
    font-family:
      "Apple SD Gothic Neo",
      "Malgun Gothic",
      "NanumGothic",
      "Noto Sans CJK KR",
      sans-serif;
  }

  :where(#airygen-root[data-locale^="hi"], #airygen-editor-root[data-locale^="hi"]) {
    font-family:
      "Nirmala UI",
      "Kohinoor Devanagari",
      "Noto Sans Devanagari",
      sans-serif;
  }

  :where(#airygen-root[data-locale^="bn"], #airygen-editor-root[data-locale^="bn"]) {
    font-family:
      "Nirmala UI",
      "Kohinoor Bangla",
      "Noto Sans Bengali",
      sans-serif;
  }

  :where(#airygen-root[data-locale^="ur"], #airygen-editor-root[data-locale^="ur"]) {
    font-family:
      "Nirmala UI",
      "Noto Nastaliq Urdu",
      "Segoe UI",
      sans-serif;
  }

  :where(#airygen-root[data-locale^="th"], #airygen-editor-root[data-locale^="th"]) {
    font-family:
      "Thonburi",
      "Leelawadee UI",
      "Noto Sans Thai",
      sans-serif;
  }

  :where(.airygen-wrap) {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
  }

  :where(#wpcontent).airygen-wpcontent {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  :where(#airygen-root, #airygen-editor-root) *,
  :where(#airygen-root, #airygen-editor-root) *::before,
  :where(#airygen-root, #airygen-editor-root) *::after {
    @apply box-border;
  }

  :where(#airygen-root, #airygen-editor-root) button,
  :where(#airygen-root, #airygen-editor-root) input,
  :where(#airygen-root, #airygen-editor-root) select,
  :where(#airygen-root, #airygen-editor-root) textarea {
    font: inherit;
    color: inherit;
  }

  :where(#airygen-root, #airygen-editor-root) button {
    @apply inline-flex items-center justify-center cursor-pointer align-middle;
    background-color: transparent;
    border: inherit;
  }

  :where(#airygen-root, #airygen-editor-root) a {
    color: inherit;
    text-decoration: none;
  }

  :where(#airygen-root, #airygen-editor-root) ul,
  :where(#airygen-root, #airygen-editor-root) ol {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  :where(#airygen-root, #airygen-editor-root) h1,
  :where(#airygen-root, #airygen-editor-root) h2,
  :where(#airygen-root, #airygen-editor-root) h3,
  :where(#airygen-root, #airygen-editor-root) h4,
  :where(#airygen-root, #airygen-editor-root) h5,
  :where(#airygen-root, #airygen-editor-root) h6 {
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
  }

  :where(#airygen-root, #airygen-editor-root) h2,
  .airygen-admin-root h2 {
    text-transform: capitalize;
  }

  :where(#airygen-root, #airygen-editor-root) p {
    margin: 0;
  }

  :where(#airygen-root, #airygen-editor-root) table {
    border-collapse: collapse;
    width: 100%;
  }

  :where(#airygen-root, #airygen-editor-root) img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  :where(#airygen-root, #airygen-editor-root) input[type='checkbox'],
  .airygen-admin-root input[type='checkbox'] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    @apply h-4 w-4 rounded-sm border border-slate-300 bg-slate-50 align-middle transition;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 0.65rem 0.65rem;
    box-shadow: none;
    margin: 0;
  }

  :where(#airygen-root, #airygen-editor-root) input[type='checkbox']::before,
  :where(#airygen-root, #airygen-editor-root) input[type='checkbox']::after,
  .airygen-admin-root input[type='checkbox']::before,
  .airygen-admin-root input[type='checkbox']::after {
    content: none !important;
    display: none !important;
  }

  :where(#airygen-root, #airygen-editor-root) input[type='checkbox']:checked,
  .airygen-admin-root input[type='checkbox']:checked {
    border-color: #00a0e9;
    background-color: #00a0e9;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.59.59a1 1 0 0 1 1.32 1.5l-6 5a1 1 0 0 1-1.32 0l-3-3a1 1 0 0 1 1.42-1.42L5 5.17 10.59.59Z' fill='%23fff'/%3E%3C/svg%3E");
  }

  :where(#airygen-root, #airygen-editor-root) input[type='checkbox']:focus-visible,
  .airygen-admin-root input[type='checkbox']:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 160, 233, 0.35);
  }

  :where(#airygen-root, #airygen-editor-root) input[type='radio'],
  .airygen-admin-root input[type='radio'] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    @apply h-4 w-4 rounded-full border border-slate-300 bg-slate-50 align-middle transition;
    box-shadow: none;
    margin: 0;
  }

  :where(#airygen-root, #airygen-editor-root) input[type='radio']::before,
  :where(#airygen-root, #airygen-editor-root) input[type='radio']::after,
  .airygen-admin-root input[type='radio']::before,
  .airygen-admin-root input[type='radio']::after {
    content: none !important;
    display: none !important;
  }

  :where(#airygen-root, #airygen-editor-root) input[type='radio']:checked,
  .airygen-admin-root input[type='radio']:checked {
    border-color: #00a0e9;
    background-image: radial-gradient(circle at center, #00a0e9 0%, #00a0e9 40%, transparent 45%);
    background-color: #fff;
  }

  :where(#airygen-root, #airygen-editor-root) input[type='radio']:focus-visible,
  .airygen-admin-root input[type='radio']:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 160, 233, 0.35);
  }
}

@layer components {
  :where(#airygen-root, #airygen-editor-root) .airygen_h1_title,
  .airygen-admin-root .airygen_h1_title {
    @apply text-xl font-bold text-slate-900;
  }

  :where(#airygen-root, #airygen-editor-root) .airygen_h1_description,
  .airygen-admin-root .airygen_h1_description {
    @apply mt-2 text-sm text-slate-500;
  }

  :where(#airygen-root, #airygen-editor-root) .airygen_h2_title,
  .airygen-admin-root .airygen_h2_title {
    @apply text-lg font-semibold text-gray-800;
  }

  :where(#airygen-root, #airygen-editor-root) .airygen_h3_title,
  .airygen-admin-root .airygen_h3_title {
    @apply inline-flex items-center gap-2 text-sm font-medium text-gray-800;
  }

  :where(#airygen-root, #airygen-editor-root) .airygen-field,
  .airygen-admin-root .airygen-field {
    @apply block w-full rounded-lg border border-gray-300 bg-gray-50 p-2 text-xs text-gray-900 placeholder:text-gray-400 shadow-none transition focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-500;
  }

  :where(#airygen-root, #airygen-editor-root) .airygen-field:disabled,
  .airygen-admin-root .airygen-field:disabled {
    @apply cursor-not-allowed bg-gray-100 text-gray-500;
  }

  :where(#airygen-root, #airygen-editor-root) .airygen-field-select,
  .airygen-admin-root .airygen-field-select {
    @apply block w-full rounded-lg border border-gray-300 bg-gray-50 p-2 text-xs text-gray-900 placeholder:text-gray-400 shadow-none transition focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-500 appearance-none pr-10 bg-right bg-no-repeat;
    background-image: linear-gradient(45deg, transparent 50%, #64748b 50%), linear-gradient(135deg, #64748b 50%, transparent 50%), linear-gradient(to right, #d1d5db, #d1d5db);
    background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px), calc(100% - 2.4rem) 50%;
    background-size: 5px 5px, 5px 5px, 1px 60%;
  }

  :where(#airygen-root, #airygen-editor-root) .airygen-field-select:disabled,
  .airygen-admin-root .airygen-field-select:disabled {
    @apply cursor-not-allowed bg-gray-100 text-gray-500;
  }

  :where(#airygen-root, #airygen-editor-root) .airygen-input--compact,
  .airygen-admin-root .airygen-input--compact {
    width: 80px;
  }

  :where(#airygen-root, #airygen-editor-root) .airygen-input-group-field,
  .airygen-admin-root .airygen-input-group-field {
    @apply p-0 text-center text-xs text-slate-700;
    background-color: #f9fafb;
    border-color: rgb(209 213 219 / var(--tw-border-opacity));
    border: 0 !important;
    box-shadow: none !important;
  }

  :where(#airygen-root, #airygen-editor-root) .airygen-color-palette,
  .airygen-admin-root .airygen-color-palette {
    border: 0 !important;
  }

  :where(#airygen-root, #airygen-editor-root) .airygen-code-inline,
  .airygen-admin-root .airygen-code-inline {
    background-color: #ffffff;
    border: 1px solid #f9e49a;
    border-radius: 4px;
    padding: 0.1rem 0.25rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 0.75rem;
    color: #633a00;
  }

  /* 自訂 Topic Cluster 節點樣式 */
  :where(#airygen-root) .airygen-topic-cluster__node {
    width: 240px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 12px 16px;
    background: #f8fafc;
    border: 2px solid #3b82f6;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.2s;
  }

  :where(#airygen-root) .airygen-topic-cluster__node:hover {
    border-color: #2563eb;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    background: #ffffff;
  }

  :where(#airygen-root) .airygen-topic-cluster__node-label {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    text-align: center;
    word-break: break-word;
  }

  /* ReactFlow Controls 樣式保留 */
  :where(#airygen-root) .react-flow__controls {
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
  }

  :where(#airygen-root) .react-flow__controls-button {
    background: #fefefe;
    border: 1px solid #eee;
    border-bottom: none;
    box-sizing: content-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    cursor: pointer;
    user-select: none;
    padding: 5px;
  }

  :where(#airygen-root) .react-flow__controls-button:hover {
    background: #f4f4f4;
  }

  :where(#airygen-root) .react-flow__controls-button:last-child {
    border-bottom: 1px solid #eee;
  }

  :where(#airygen-root) .react-flow__controls-button svg {
    width: 100%;
    max-width: 12px;
    max-height: 12px;
  }

  :where(#airygen-root) .airygen-topic-cluster__mindmap .react-flow__node {
    cursor: grab;
    pointer-events: all !important;
  }

  :where(#airygen-root) .airygen-topic-cluster__mindmap .react-flow__node:active {
    cursor: grabbing;
  }

  :where(#airygen-root) .airygen-topic-cluster__mindmap .react-flow__node.selected {
    box-shadow: 0 0 0 2px #3b82f6;
  }
}