/**
 * vendor-overrides.css
 * ---------------------
 * CSS rules that override third-party component DOM we don't control:
 *   - Mantine UI (.mantine-*)
 *   - Webkit scrollbar pseudo-elements
 *   - [data-mantine-color-scheme="light"] overrides on third-party selectors
 *
 * These rules CANNOT be converted to Tailwind utility classes because they
 * target selectors owned by external libraries.
 */

/* ===== Mantine: Tooltip single-line ===== */
.mantine-Tooltip-tooltip {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  max-width: min(80vw, 520px);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== Mantine: nested panel card resets ===== */
.tc-panel-card .mantine-Paper-root[data-with-border],
.tc-panel-card .mantine-Card-root[data-with-border],
.mantine-Paper-root[data-with-border] .mantine-Paper-root[data-with-border],
.mantine-Paper-root[data-with-border] .mantine-Card-root[data-with-border],
.mantine-Card-root[data-with-border] .mantine-Paper-root[data-with-border],
.mantine-Card-root[data-with-border] .mantine-Card-root[data-with-border] {
  border-radius: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  background: var(--tc-color-surface-inline) !important;
}

/* ===== Mantine: Button variant overrides ===== */
.mantine-Button-root[data-variant="subtle"] {
  background: transparent !important;
}

/* ===== Mantine: asset-panel component sizing ===== */
.asset-panel-shell .mantine-Button-root {
  min-height: 22px;
  padding-inline: 8px;
}

.asset-panel-shell .mantine-ActionIcon-root {
  width: 22px;
  min-width: 22px;
  height: 22px;
}

.asset-panel-shell .mantine-SegmentedControl-root {
  min-height: 22px;
}

.asset-panel-shell .mantine-SegmentedControl-label {
  min-height: 20px;
  padding-inline: 7px;
}

.asset-panel-shell .mantine-Tabs-tab {
  min-height: 24px;
  padding: 0 8px;
}

.asset-panel-shell .mantine-Badge-root {
  min-height: 16px;
  padding-inline: 6px;
}

.asset-panel-shell .mantine-Input-input,
.asset-panel-shell .mantine-Select-input {
  min-height: 24px;
  padding-inline: 8px;
}

/* ===== Mantine: ai-character-library component sizing ===== */
.ai-character-library-root .mantine-ActionIcon-root,
.ai-character-library-detail-root .mantine-ActionIcon-root {
  width: 24px;
  min-width: 24px;
  height: 24px;
}

.ai-character-library-root .mantine-Input-input,
.ai-character-library-detail-root .mantine-Input-input {
  min-height: 24px;
}

/* ===== Light theme: Mantine AppShell overrides ===== */
:root[data-mantine-color-scheme="light"] .mantine-AppShell-main {
  background:
    radial-gradient(circle at 15% 15%, rgba(59,130,246,0.15), transparent 45%),
    radial-gradient(circle at 80% 0%, rgba(14,165,233,0.12), transparent 40%),
    var(--mantine-color-body) !important;
}

:root[data-mantine-color-scheme="light"] .mantine-AppShell-header,
:root[data-mantine-color-scheme="light"] .mantine-AppShell-navbar,
:root[data-mantine-color-scheme="light"] .mantine-AppShell-aside {
  background: rgba(255, 255, 255, 0.86) !important;
  border: none !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ===== Light theme: Mantine Button overrides ===== */
:root[data-mantine-color-scheme="light"] .mantine-Button-root[data-variant="outline"] {
  border: none !important;
  background: rgba(59, 130, 246, 0.06) !important;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}
:root[data-mantine-color-scheme="light"] .mantine-Button-root[data-variant="outline"]:hover {
  border: none !important;
  background: rgba(59, 130, 246, 0.12) !important;
}
:root[data-mantine-color-scheme="light"] .mantine-Button-root[data-variant="light"] {
  border: none !important;
  background: rgba(15, 23, 42, 0.03) !important;
}
:root[data-mantine-color-scheme="light"] .mantine-Button-root[data-variant="light"]:hover {
  border: none !important;
  background: rgba(15, 23, 42, 0.05) !important;
}

/* ===== Light theme: Mantine Paper overrides ===== */
:root[data-mantine-color-scheme="light"] .mantine-Paper-root[data-with-border]:not(.template-panel-shell):not(.template-panel-card):not(.template-space):not(.template-detail) {
  border: none !important;
  box-shadow: 0 15px 40px rgba(15, 23, 42, 0.08);
}

/* ===== Light theme: Webkit scrollbar ===== */
:root[data-mantine-color-scheme="light"] *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
:root[data-mantine-color-scheme="light"] *::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.14);
  border-radius: 8px;
}
:root[data-mantine-color-scheme="light"] *::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 23, 42, 0.25);
}
:root[data-mantine-color-scheme="light"] *::-webkit-scrollbar-track {
  background: transparent;
}

/* ===== Light theme: UX panel scrollbar ===== */
:root[data-mantine-color-scheme="light"] [data-ux-panel] {
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 23, 42, 0.25) transparent;
}
:root[data-mantine-color-scheme="light"] [data-ux-panel] *::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
:root[data-mantine-color-scheme="light"] [data-ux-panel] *::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.2);
  border-radius: 8px;
}
:root[data-mantine-color-scheme="light"] [data-ux-panel] *::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 23, 42, 0.35);
}
:root[data-mantine-color-scheme="light"] [data-ux-panel] *::-webkit-scrollbar-track {
  background: transparent;
}

/* ===== Light theme: compact data-attribute Mantine overrides ===== */
[data-compact="true"] .mantine-Button-root {
  padding: 4px 8px !important;
}
[data-compact="true"] .mantine-NumberInput-input,
[data-compact="true"] .mantine-TextInput-input,
[data-compact="true"] textarea {
  padding: 6px 8px !important;
}
[data-compact="true"] .mantine-Stack-root {
  gap: 6px !important;
}
[data-compact="true"] .mantine-Group-root {
  gap: 6px !important;
}
