/* ==========================================================================
   TOOLNOVA DESIGN SYSTEM — COMPONENTS
   Every class here is product-agnostic — used by the Metadata Cleaner
   today, and intended for every future ToolNova tool without
   modification. Tool-specific visuals (e.g. a photo comparison slider,
   category pills) belong in that tool's own stylesheet and should
   compose these classes rather than duplicate them.
   ========================================================================== */

/* ---------- Glass surface (shared by cards, dialogs, dropdowns) ---------- */
.tn-glass {
  background: var(--tn-color-glass);
  backdrop-filter: var(--tn-blur-md);
  -webkit-backdrop-filter: var(--tn-blur-md);
  border: 1px solid var(--tn-color-glass-border);
}

/* ---------- Card ---------- */
.tn-card {
  border-radius: var(--tn-radius-lg);
  padding: var(--tn-space-6);
  box-shadow: var(--tn-shadow-inset-hairline), var(--tn-shadow-md);
  transition: border-color var(--tn-duration-slow) var(--tn-ease-out), box-shadow var(--tn-duration-slow) var(--tn-ease-out);
}
.tn-card:hover { border-color: rgba(255, 255, 255, 0.14); }
.tn-card--tight { padding: var(--tn-space-4); }
.tn-card__title { font-size: var(--tn-text-md); font-weight: var(--tn-weight-bold); margin-block-end: var(--tn-space-1); }
.tn-card__desc { font-size: var(--tn-text-xs); color: var(--tn-color-text-faint); margin-block-end: var(--tn-space-4); }

/* ---------- Buttons ---------- */
.tn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--tn-space-2);
  font-family: inherit; font-size: var(--tn-text-base); font-weight: var(--tn-weight-semibold);
  border-radius: var(--tn-radius-sm); padding: 11px 20px; cursor: pointer;
  border: 1px solid transparent; position: relative; overflow: hidden; white-space: nowrap;
  transition: transform var(--tn-duration-fast) var(--tn-ease-spring), box-shadow var(--tn-duration-base) var(--tn-ease-out), background var(--tn-duration-base);
}
.tn-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.tn-btn:active { transform: scale(0.97); }
.tn-btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.tn-btn--block { width: 100%; }
.tn-btn--sm { padding: 7px 14px; font-size: var(--tn-text-sm); }

.tn-btn--primary { background: var(--tn-color-coral); color: var(--tn-color-text-on-accent); box-shadow: var(--tn-shadow-glow-coral); }
.tn-btn--primary:hover { background: var(--tn-color-coral-bright); transform: translateY(-1px); }
.tn-btn--secondary { background: var(--tn-color-blue); color: #0B1220; box-shadow: var(--tn-shadow-glow-blue); }
.tn-btn--secondary:hover { transform: translateY(-1px); }
.tn-btn--gradient {
  background: linear-gradient(135deg, var(--tn-color-coral), #FF8F6B 55%, #FFAA6B);
  background-size: 200% 200%; color: var(--tn-color-text-on-accent); box-shadow: var(--tn-shadow-glow-coral);
}
.tn-btn--gradient:hover { background-position: 100% 100%; transform: translateY(-1px); }
.tn-btn--ghost { background: transparent; border-color: var(--tn-color-hairline); color: var(--tn-color-text); }
.tn-btn--ghost:hover { border-color: var(--tn-color-text-faint); background: var(--tn-color-panel-raised); }
.tn-btn--danger-ghost { background: transparent; border-color: rgba(248,113,113,0.35); color: var(--tn-color-danger); }
.tn-btn--danger-ghost:hover { background: var(--tn-color-danger-dim); }

/* Ripple micro-interaction: JS toggles .tn-rippling briefly on click,
   after setting --tn-ripple-x/--tn-ripple-y to the click coordinates. */
.tn-ripple-surface::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,0.35); inset-inline-start: var(--tn-ripple-x, 50%); inset-block-start: var(--tn-ripple-y, 50%); translate: -50% -50%; width: 8px; height: 8px; opacity: 0; pointer-events: none; }

/* Icon-only button */
.tn-icon-btn {
  width: 36px; height: 36px; border-radius: 10px; border: 1px solid transparent; background: transparent;
  color: var(--tn-color-text-muted); display: grid; place-items: center; cursor: pointer;
  transition: background var(--tn-duration-fast) var(--tn-ease-out), color var(--tn-duration-fast), border-color var(--tn-duration-fast), transform var(--tn-duration-fast) var(--tn-ease-spring);
}
.tn-icon-btn:hover { background: var(--tn-color-panel-raised); color: var(--tn-color-text); border-color: var(--tn-color-hairline); transform: translateY(-1px); }
.tn-icon-btn:active { transform: translateY(0) scale(0.94); }
.tn-icon-btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tn-icon-btn--sm { width: 30px; height: 30px; border-radius: 8px; }
.tn-icon-btn--sm svg { width: 14px; height: 14px; }

/* ---------- Badge ---------- */
.tn-badge { display: inline-flex; align-items: center; gap: var(--tn-space-1); font-size: var(--tn-text-2xs); font-weight: var(--tn-weight-bold); text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 10px; border-radius: var(--tn-radius-pill); }
.tn-badge--neutral { background: var(--tn-color-hairline); color: var(--tn-color-text-faint); }
.tn-badge--info { background: var(--tn-color-blue-dim); color: var(--tn-color-blue); }
.tn-badge--success { background: var(--tn-color-mint-dim); color: var(--tn-color-mint); }
.tn-badge--warning { background: var(--tn-color-amber-dim); color: var(--tn-color-amber); }
.tn-badge--danger { background: var(--tn-color-danger-dim); color: var(--tn-color-danger); }

/* ---------- Toggle switch ---------- */
.tn-switch { position: relative; width: 36px; height: 20px; flex-shrink: 0; cursor: pointer; }
.tn-switch input { opacity: 0; width: 100%; height: 100%; position: absolute; margin: 0; cursor: pointer; z-index: 1; }
.tn-switch__track { position: absolute; inset: 0; background: var(--tn-color-hairline); border-radius: var(--tn-radius-pill); transition: background var(--tn-duration-fast); }
.tn-switch__thumb { position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: translate var(--tn-duration-base) var(--tn-ease-spring); }
.tn-switch input:checked ~ .tn-switch__track { background: var(--tn-color-coral); }
.tn-switch input:checked ~ .tn-switch__thumb { translate: 16px 0; }
[dir="rtl"] .tn-switch input:checked ~ .tn-switch__thumb { translate: -16px 0; }
.tn-switch input:focus-visible ~ .tn-switch__track { outline: 2px solid var(--tn-color-coral); outline-offset: 2px; }

/* ---------- Checkbox pill (selectable option card) ---------- */
.tn-option-pill { display: flex; align-items: center; gap: var(--tn-space-3); padding: var(--tn-space-3); border-radius: var(--tn-radius-sm); border: 1px solid var(--tn-color-hairline); cursor: pointer; transition: border-color var(--tn-duration-fast), transform var(--tn-duration-fast) var(--tn-ease-spring); }
.tn-option-pill:hover { border-color: var(--tn-color-blue); transform: translateX(2px); }
[dir="rtl"] .tn-option-pill:hover { transform: translateX(-2px); }
.tn-option-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tn-option-pill__icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; background: var(--tn-color-blue-dim); }
.tn-option-pill__icon svg { width: 15px; height: 15px; stroke: var(--tn-color-blue); fill: none; stroke-width: 1.7; }
.tn-option-pill__body { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.tn-option-pill__title { font-size: var(--tn-text-sm); font-weight: var(--tn-weight-semibold); }
.tn-option-pill__desc { font-size: var(--tn-text-2xs); color: var(--tn-color-text-faint); }
.tn-option-pill__check { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--tn-color-hairline); flex-shrink: 0; position: relative; transition: background var(--tn-duration-fast), border-color var(--tn-duration-fast); }
.tn-option-pill input:checked ~ .tn-option-pill__check { background: var(--tn-color-coral); border-color: var(--tn-color-coral); }
.tn-option-pill input:checked ~ .tn-option-pill__check::after { content: ''; position: absolute; inset-inline-start: 5px; top: 2px; width: 4px; height: 8px; border: solid var(--tn-color-text-on-accent); border-width: 0 2px 2px 0; transform: rotate(40deg); }
.tn-option-pill input:focus-visible ~ .tn-option-pill__check { outline: 2px solid var(--tn-color-coral); outline-offset: 2px; }

/* ---------- Tabs ---------- */
.tn-tabs { display: flex; gap: var(--tn-space-1); border-block-end: 1px solid var(--tn-color-hairline); }
.tn-tabs--full .tn-tab { flex: 1; }
.tn-tab { background: transparent; border: none; color: var(--tn-color-text-faint); font-family: inherit; font-size: var(--tn-text-sm); font-weight: var(--tn-weight-semibold); padding: var(--tn-space-2) var(--tn-space-1); cursor: pointer; position: relative; }
.tn-tab::after { content: ''; position: absolute; inset-inline: 0; block-size: 2px; inset-block-end: -1px; background: var(--tn-color-coral); transform: scaleX(0); transition: transform var(--tn-duration-base) var(--tn-ease-out); border-radius: 2px; }
.tn-tab[aria-selected="true"] { color: var(--tn-color-text); }
.tn-tab[aria-selected="true"]::after { transform: scaleX(1); }

/* ---------- Dialog / Modal ---------- */
.tn-dialog-overlay {
  position: fixed; inset: 0; z-index: var(--tn-z-dialog);
  background: rgba(0, 0, 0, 0.55); backdrop-filter: var(--tn-blur-sm); -webkit-backdrop-filter: var(--tn-blur-sm);
  display: grid; place-items: center; padding: var(--tn-space-6);
}
.tn-dialog {
  width: 100%; max-width: 440px; border-radius: var(--tn-radius-lg);
  background: var(--tn-color-panel); border: 1px solid var(--tn-color-glass-border);
  box-shadow: var(--tn-shadow-lg); padding: var(--tn-space-6);
  animation: tn-spring-in var(--tn-duration-slow) var(--tn-ease-spring) both;
}
.tn-dialog__title { font-size: var(--tn-text-lg); font-weight: var(--tn-weight-bold); margin-block-end: var(--tn-space-2); }
.tn-dialog__body { font-size: var(--tn-text-sm); color: var(--tn-color-text-muted); line-height: var(--tn-leading-relaxed); margin-block-end: var(--tn-space-6); }
.tn-dialog__actions { display: flex; justify-content: flex-end; gap: var(--tn-space-3); }
[dir="rtl"] .tn-dialog__actions { justify-content: flex-start; }

/* ---------- Slider (range input) ---------- */
.tn-slider-field { display: flex; flex-direction: column; gap: var(--tn-space-2); }
.tn-slider-field__header { display: flex; justify-content: space-between; align-items: center; }
.tn-slider-field__label { font-size: var(--tn-text-xs); font-weight: var(--tn-weight-semibold); color: var(--tn-color-text-muted); }
.tn-slider-field__value { font-family: var(--tn-font-mono); font-size: var(--tn-text-xs); color: var(--tn-color-coral); }
.tn-slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: var(--tn-radius-pill);
  background: var(--tn-color-hairline); outline: none; cursor: pointer;
}
.tn-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--tn-color-coral);
  border: 2px solid var(--tn-color-panel); box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  transition: transform var(--tn-duration-fast) var(--tn-ease-spring);
}
.tn-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.tn-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--tn-color-coral); border: 2px solid var(--tn-color-panel); cursor: pointer; }

/* ---------- Table ---------- */
.tn-table { width: 100%; border-collapse: collapse; font-size: var(--tn-text-sm); }
.tn-table td, .tn-table th { padding: var(--tn-space-2) var(--tn-space-1); border-block-end: 1px solid var(--tn-color-hairline); vertical-align: top; text-align: start; }
.tn-table th { color: var(--tn-color-text-faint); font-weight: var(--tn-weight-semibold); font-size: var(--tn-text-2xs); text-transform: uppercase; letter-spacing: 0.04em; }
.tn-table td:first-child { color: var(--tn-color-text-faint); font-weight: var(--tn-weight-medium); width: 42%; }
.tn-table td.tn-table__mono { font-family: var(--tn-font-mono); font-size: var(--tn-text-xs); word-break: break-word; }
.tn-table__row-enter { animation: tn-slide-in-start var(--tn-duration-base) var(--tn-ease-out) both; }
.tn-table__row-removed td.tn-table__mono { color: var(--tn-color-text-faint); text-decoration: line-through; }
.tn-table__row-removed { animation: tn-row-strike var(--tn-duration-base) var(--tn-ease-out); }
@keyframes tn-row-strike { from { background: var(--tn-color-coral-dim); } to { background: transparent; } }

/* ---------- Form fields ---------- */
.tn-form-field { display: flex; flex-direction: column; gap: var(--tn-space-2); }
.tn-label { font-size: var(--tn-text-xs); font-weight: var(--tn-weight-semibold); color: var(--tn-color-text-muted); }
.tn-input, .tn-select {
  background: var(--tn-color-panel-raised); border: 1px solid var(--tn-color-hairline); color: var(--tn-color-text);
  padding: 9px 12px; border-radius: var(--tn-radius-sm); font-size: var(--tn-text-sm); font-family: inherit;
  transition: border-color var(--tn-duration-fast);
}
.tn-input:focus, .tn-select:focus { border-color: var(--tn-color-coral); outline: none; }
.tn-select { cursor: pointer; appearance: none; -webkit-appearance: none; background-repeat: no-repeat; background-position: right 12px center; background-size: 11px; padding-inline-end: 34px; }
[dir="rtl"] .tn-select { background-position: left 12px center; }

/* ---------- Dropdown / menu ---------- */
.tn-menu { min-width: 180px; border-radius: var(--tn-radius-md); padding: var(--tn-space-2); background: var(--tn-color-panel); border: 1px solid var(--tn-color-glass-border); box-shadow: var(--tn-shadow-lg); animation: tn-scale-in var(--tn-duration-base) var(--tn-ease-out) both; }
.tn-menu__item { display: flex; align-items: center; gap: var(--tn-space-2); width: 100%; text-align: start; background: transparent; border: none; color: var(--tn-color-text); font-family: inherit; font-size: var(--tn-text-sm); padding: var(--tn-space-2) var(--tn-space-3); border-radius: var(--tn-radius-sm); cursor: pointer; }
.tn-menu__item:hover, .tn-menu__item[aria-selected="true"] { background: var(--tn-color-panel-raised); }
.tn-menu__item svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; flex-shrink: 0; }
.tn-menu__divider { height: 1px; background: var(--tn-color-hairline); margin: var(--tn-space-2) 0; }

/* ---------- Tooltip ---------- */
.tn-tooltip {
  position: absolute; z-index: var(--tn-z-tooltip); background: var(--tn-color-panel-raised);
  color: var(--tn-color-text); font-size: var(--tn-text-2xs); font-weight: var(--tn-weight-medium);
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--tn-color-glass-border);
  box-shadow: var(--tn-shadow-sm); white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateY(4px); transition: opacity var(--tn-duration-fast), transform var(--tn-duration-fast);
}
.tn-tooltip--visible { opacity: 1; transform: translateY(0); }

/* ---------- Toast ---------- */
.tn-toast-region { position: fixed; inset-block-end: var(--tn-space-6); inset-inline: 0; z-index: var(--tn-z-toast); display: flex; justify-content: center; pointer-events: none; }
.tn-toast {
  background: var(--tn-color-panel-raised); border: 1px solid var(--tn-color-glass-border); border-radius: var(--tn-radius-pill);
  padding: 11px 20px; font-size: var(--tn-text-sm); font-weight: var(--tn-weight-semibold);
  display: flex; align-items: center; gap: var(--tn-space-2); box-shadow: var(--tn-shadow-lg);
  opacity: 0; transform: translateY(20px); transition: opacity var(--tn-duration-base) var(--tn-ease-out), transform var(--tn-duration-base) var(--tn-ease-spring);
}
.tn-toast--visible { opacity: 1; transform: translateY(0); }
.tn-toast--success .tn-toast__icon { stroke: var(--tn-color-mint); }
.tn-toast--error .tn-toast__icon { stroke: var(--tn-color-danger); }
.tn-toast__icon { width: 16px; height: 16px; fill: none; stroke-width: 2.2; }

/* ---------- Empty state ---------- */
.tn-empty { text-align: center; padding: var(--tn-space-10) var(--tn-space-4); color: var(--tn-color-text-faint); }
.tn-empty__icon { width: 44px; height: 44px; margin-inline: auto var(--tn-space-3); margin-block-end: var(--tn-space-3); opacity: 0.5; }
.tn-empty__title { font-size: var(--tn-text-sm); font-weight: var(--tn-weight-semibold); color: var(--tn-color-text-muted); margin-block-end: var(--tn-space-1); }
.tn-empty__desc { font-size: var(--tn-text-xs); }

/* ---------- Processing / AI activity ---------- */
.tn-orb { position: relative; width: 64px; height: 64px; display: grid; place-items: center; }
.tn-orb__core { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--tn-color-coral-bright), var(--tn-color-coral)); box-shadow: 0 0 30px 4px rgba(255,107,107,0.55); animation: tn-pulse-scale 1.6s var(--tn-ease-in-out) infinite; }
.tn-orb__ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--tn-color-coral); opacity: 0.5; animation: tn-ring-expand 1.8s ease-out infinite; }
.tn-orb__ring--2 { animation-delay: 0.6s; }
.tn-progress-bar { width: 180px; height: 3px; border-radius: 3px; background: var(--tn-color-hairline); overflow: hidden; }
.tn-progress-bar__fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--tn-color-blue), var(--tn-color-coral)); border-radius: 3px; transition: width var(--tn-duration-slow) var(--tn-ease-out); }

/* ---------- Language selector (header) ---------- */
.tn-lang-select { position: relative; }
.tn-lang-trigger { display: flex; align-items: center; gap: 6px; }
.tn-lang-trigger svg:last-child { width: 10px; height: 10px; }