/* ============================================
   components.css - UI Component Library
   ============================================
   Token -> Component -> Module

   This file defines reusable component classes
   that consume design tokens and derived variables.
   All visual properties (color, background, border,
   shadow, radius, transition) live here.

   Modules should use these classes directly in HTML
   instead of defining their own visual styles.
   ============================================ */

/* ============================================
   1. Button Base
   ============================================ */

.primary-btn,
.secondary-btn,
.ghost-btn,
.btn-danger,
.btn-success,
.btn-warning {
  border-radius: var(--radius-sm);
  transition:
    transform var(--transition-base),
    background var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base),
    box-shadow var(--transition-base),
    opacity var(--transition-base);
}

/* ============================================
   2. Button Variants
   ============================================ */

/* --- Primary --- */
.primary-btn {
  background: var(--accent-fill-strong);
  color: var(--text-on-accent);
  border: var(--border-card-width, 1px) solid color-mix(in srgb, var(--brand-primary-strong) 72%, transparent);
  box-shadow: var(--shadow-glow);
}

.primary-btn:hover {
  transform: translateY(-1px);
  filter: saturate(108%);
}

.primary-btn:active {
  transform: translateY(0);
  filter: saturate(100%);
}

.primary-btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* --- Secondary --- */
.secondary-btn {
  background: var(--control-fill);
  border: var(--border-card-width, 1px) solid var(--glass-edge);
  color: var(--text-secondary);
  box-shadow: var(--shadow-sm), var(--shadow-inset);
}

.secondary-btn:hover {
  background: var(--control-fill-hover);
  border-color: var(--accent-border);
  color: var(--accent-text);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md), var(--shadow-inset);
}

.secondary-btn:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm), var(--shadow-inset);
}

.secondary-btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* --- Ghost --- */
.ghost-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
}

.ghost-btn:hover {
  background: color-mix(in srgb, var(--brand-primary) 8%, transparent);
  border-color: var(--glass-edge);
  color: var(--accent-text);
}

.ghost-btn:active {
  background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
}

.ghost-btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* --- Danger --- */
.btn-danger {
  background: var(--danger-fill);
  border-color: var(--danger-border);
  color: var(--danger-text);
}

.btn-danger:hover {
  background: color-mix(in srgb, var(--status-danger) 16%, var(--surface-panel) 84%);
}

/* --- Success --- */
.btn-success {
  background: var(--success-fill);
  border-color: var(--success-border);
  color: var(--success-text);
}

.btn-success:hover {
  background: color-mix(in srgb, var(--status-success) 16%, var(--surface-panel) 84%);
}

/* --- Warning --- */
.btn-warning {
  background: var(--warning-fill);
  border-color: var(--warning-border);
  color: var(--warning-text);
}

.btn-warning:hover {
  background: color-mix(in srgb, var(--brand-accent) 16%, var(--surface-panel) 84%);
}

/* ============================================
   3. Icon Buttons
   ============================================ */

.icon-btn,
.icon-btn-sm,
.icon-btn-md,
.close-btn {
  border-radius: var(--radius-sm);
  background: var(--control-fill);
  border: var(--border-card-width, 1px) solid var(--glass-edge);
  color: var(--text-secondary);
  box-shadow: var(--shadow-sm), var(--shadow-inset);
  transition:
    transform var(--transition-base),
    background var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base),
    box-shadow var(--transition-base),
    opacity var(--transition-base);
}

.icon-btn:hover,
.icon-btn-sm:hover,
.icon-btn-md:hover,
.close-btn:hover {
  background: var(--control-fill-hover);
  border-color: var(--accent-border);
  color: var(--accent-text);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md), var(--shadow-inset);
}

.close-btn:active {
  background: color-mix(in srgb, var(--surface-glass-strong) 100%, transparent);
  transform: translateY(0);
}

/* ============================================
   4. Form Inputs
   ============================================ */

.form-input {
  background: color-mix(in srgb, var(--input-bg) 94%, transparent);
  border: var(--border-card-width, 1px) solid var(--input-border);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-inset);
}

.form-input::placeholder {
  color: var(--text-soft);
}

.form-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--brand-primary) 44%, var(--input-border));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--brand-primary) 14%, transparent),
    var(--shadow-inset);
}

.form-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================
   5. Panels
   ============================================ */

.panel {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--panel-sheen) 100%, transparent) 0%,
      transparent 100%
    ),
    var(--panel-fill);
  border: var(--border-panel-width, 1px) solid var(--glass-edge);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm), var(--shadow-inset);
  backdrop-filter: blur(var(--blur-sm)) saturate(118%);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(118%);
}

.panel:hover {
  border-color: var(--glass-edge-strong);
  box-shadow: var(--shadow-md), var(--shadow-inset);
}

.panel-strong {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--panel-sheen) 100%, transparent) 0%,
      transparent 100%
    ),
    var(--panel-fill-strong);
  border: var(--border-panel-width, 1px) solid var(--glass-edge-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), var(--shadow-inset);
  backdrop-filter: blur(var(--blur-md)) saturate(118%);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(118%);
}

/* ============================================
   6. Tab System
   ============================================ */

.tab-track {
  background: color-mix(in srgb, var(--surface-glass) 96%, transparent);
  border: var(--border-card-width, 1px) solid var(--glass-edge);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm), var(--shadow-inset);
  backdrop-filter: blur(var(--blur-sm)) saturate(118%);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(118%);
}

.tab {
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  transition:
    color var(--transition-base),
    background var(--transition-base),
    box-shadow var(--transition-base);
}

.tab:hover {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
}

.tab.is-active {
  color: var(--text-on-accent);
  background: var(--accent-fill-strong);
  box-shadow: var(--shadow-glow);
}


/* ============================================
   8. Chip & Badge
   ============================================ */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-xs);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  background: var(--control-fill);
  border: var(--border-card-width, 1px) solid var(--glass-edge);
  color: var(--text-secondary);
}

.chip-primary {
  background: var(--accent-fill);
  border-color: var(--accent-border);
  color: var(--accent-text);
}

.chip-danger {
  background: var(--danger-fill);
  border-color: var(--danger-border);
  color: var(--danger-text);
}

.chip-success {
  background: var(--success-fill);
  border-color: var(--success-border);
  color: var(--success-text);
}

.chip-warning {
  background: var(--warning-fill);
  border-color: var(--warning-border);
  color: var(--warning-text);
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-2xs);
  border-radius: var(--radius-pill);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  background: var(--accent-fill-strong);
  color: var(--text-on-accent);
}

.badge-danger {
  background: var(--status-danger);
}

.badge-success {
  background: var(--status-success);
}

/* ============================================
   9. Toast
   ============================================ */

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--text-body-sm);
  color: var(--text-main);
  background: color-mix(in srgb, var(--surface-elevated) 80%, transparent);
  border: var(--border-card-width, 1px) solid var(--glass-edge);
  box-shadow: var(--shadow-md), inset 0 1px 0 var(--sheen-20);
  backdrop-filter: blur(var(--blur-md)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(150%);
}

.toast-info {
  background: color-mix(in srgb, var(--accent-fill) 80%, transparent);
  border-color: var(--accent-border);
  color: var(--accent-text);
}

.toast-success {
  background: color-mix(in srgb, var(--success-fill) 80%, transparent);
  border-color: var(--success-border);
  color: var(--success-text);
}

.toast-danger {
  background: color-mix(in srgb, var(--danger-fill) 80%, transparent);
  border-color: var(--danger-border);
  color: var(--danger-text);
}

.toast-warning {
  background: color-mix(in srgb, var(--warning-fill) 80%, transparent);
  border-color: var(--warning-border);
  color: var(--warning-text);
}

/* ============================================
   10. List Item
   ============================================ */

.list-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  transition:
    background var(--transition-fast),
    color var(--transition-fast);
}

.list-item:hover {
  background: color-mix(in srgb, var(--brand-primary) 6%, transparent);
}

.list-item.is-active {
  background: var(--accent-fill);
  color: var(--accent-text);
  border: var(--border-card-width, 1px) solid var(--accent-border);
}

/* ============================================
   11. Empty State
   ============================================ */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-2xl) var(--space-lg);
  color: var(--text-tertiary);
  text-align: center;
}

.empty-state-icon {
  font-size: var(--text-display);
  opacity: 0.5;
}

.empty-state-text {
  font-size: var(--text-body);
}

/* ============================================
   12. Scrollbar Utilities
   ============================================ */

.scroll-thin::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.scroll-thin::-webkit-scrollbar-track {
  background: transparent;
}
.scroll-thin::-webkit-scrollbar-thumb {
  background: var(--border-subtle);
  border-radius: var(--radius-xs);
}
.scroll-thin::-webkit-scrollbar-thumb:hover {
  background: var(--border-soft);
}

.scroll-thin-sm::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.scroll-thin-sm::-webkit-scrollbar-track {
  background: transparent;
}
.scroll-thin-sm::-webkit-scrollbar-thumb {
  background: var(--border-subtle);
  border-radius: var(--radius-xs);
}
.scroll-thin-sm::-webkit-scrollbar-thumb:hover {
  background: var(--border-soft);
}

/* ============================================
   13. Focus Ring
   ============================================ */

.focus-ring:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
}

.focus-ring-inset:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--brand-primary) 30%, transparent);
}

/* ============================================
   14. Tooltip Base
   ============================================ */

.tooltip-base {
  position: absolute;
  background: var(--surface-overlay);
  border: var(--border-card-width, 1px) solid var(--glass-edge);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md), var(--shadow-inset);
  color: var(--text-primary);
  font-size: var(--text-body-sm);
  z-index: var(--z-tooltip);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.tooltip-base.is-visible {
  opacity: 1;
}

/* ============================================
   15. Divider
   ============================================ */

.divider {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-sm) 0;
}

.divider-soft {
  border-color: var(--glass-edge);
}

.divider-strong {
  border-color: var(--border-strong);
}

/* ============================================
   16. Pixel Theme Overrides
   ============================================
   Pixel-stepped borders via border-image.
   A 3×3 cross-shaped SVG replaces the browser's
   default border rendering — corners become
   square notches instead of smooth arcs.

   !important is required because the border:
   shorthand resets border-image to none.

   Only active on data-skin='voxel'.
   ============================================ */

/* --- Pixel border-image source (light/dark) --- */
:root[data-skin='voxel'] {
  --pixel-border: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='3'%3E%3Cpath d='M1 0h1v1h1v1h-1v1h-1v-1h-1v-1h1z' fill='%23000'/%3E%3C/svg%3E") 1;
}

:root[data-skin='voxel'][data-theme='dark'] {
  --pixel-border: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='3'%3E%3Cpath d='M1 0h1v1h1v1h-1v1h-1v-1h-1v-1h1z' fill='%23fff'/%3E%3C/svg%3E") 1;
}

/* --- 16a. Apply pixel border to ALL bordered elements --- */
:root[data-skin='voxel'] :is(
  /* components.css */
  .panel, .panel-strong,
  .primary-btn, .secondary-btn,
  .btn-danger, .btn-success, .btn-warning,
  .form-input, .tab-track, .toast, .chip,
  .tooltip-base, .list-item.is-active,
  .icon-btn, .icon-btn-sm, .icon-btn-md, .close-btn,
  /* app.css — full-border elements */
  .summary-tile-border, .npc-tile-border,
  .save-slot, .world-card-item,
  .dcv-section, .dcv-section-content,
  .dcv-toolbar-btn,
  .dcv-subitem, .dcv-field-input, .dcv-field-select,
  .dcv-field-preview, .dcv-field-json-input,
  .dcv-multi-item-input, .dcv-input,
  .dcv-add-modal-input, .dcv-add-modal-textarea,
  .dcv-cognitive-warning, .dcv-cognitive-warning-item,
  .dcv-highlight-box, .dcv-count-badge,
  /* app.css — design cards */
  .design-p1-round-answer-card,
  .design-p1-thinking,
  .design-p1-question-card,
  /* account.css */
  .account-avatar--guest, .account-avatar--signed-in,
  .account-avatar--premium,
  .account-status-dot, .account-badge--pro,
  .account-conflict-card, .account-conflict-card__btn,
  .account-center-panel, .account-card,
  .settings-account-row,
  /* settings-tabs.css */
  .api-advanced-toggle-row,
  .step-reset-btn, .step1-reset-btn,
  .fn-group, .fn-resident-virtual-content,
  .fn-group-count,
  /* theme.css */
  .debug-runtime-status,
  /* renderers.css */
  .choice-panel
) {
  border-image: var(--pixel-border) !important;
}

/* --- 16b. Partial borders → full borders for voxel theme --- */
:root[data-skin='voxel'] :is(
  .design-chat-header,
  .dcv-toolbar,
  .save-manager-header,
  .save-panel-header, .save-panel-footer,
  .world-card-panel,
  .chat-input-area,
  .settings-global-io
) {
  border: var(--border-card-width, 1px) solid var(--border-color) !important;
  border-image: var(--pixel-border) !important;
}

:root[data-skin='voxel'] :is(
  #settings-modal .settings-header,
  #settings-modal .settings-body,
  #settings-modal .settings-left-column,
  #debug-modal .debug-tabs,
  #debug-modal .modal-actions
) {
  border: var(--border-card-width, 1px) solid var(--border-color) !important;
  border-image: var(--pixel-border) !important;
}

/* --- 16c. Exclude borderless elements --- */
:root[data-skin='voxel'] :is(
  .ghost-btn, .slot-btn, .wc-btn,
  .save-manager-close-btn, .account-center-close,
  .dcv-act-btn, .dcv-subitem-close-btn, .doc-preview-remove,
  .msg-action-btn, .plan-apply-btn, .plan-details-toggle,
  .plan-preview-expand, .design-action-btn, .design-apply-main-btn,
  .design-chat-tab, .design-p1-custom-input,
  .chat-send-btn, .chat-execute-btn,
  .contact-action-btn, .contact-delete-btn,
  .cp-delete-btn, .sms-action-btn, .sms-confirm-btn, .sms-send-btn,
  .summary-action-btn, .wci-s3-del-btn,
  .map-bubble-btn, .map-control-btn, .map-modal-btn, .map-modal-close-x,
  .launcher-intro-continue, .launcher-nav-item,
  .response-view-btn,
  .function-calls-bar, .pending-field-approve, .pending-field-reject,
  .npc-delete-btn, .npc-select-btn,
  .divider, .divider-soft, .divider-strong, hr
) {
  border-image: none !important;
}