@layer theme {
  @import 'tailwindcss/theme.css';
}

@layer base {
  .twp {
    @import 'tailwindcss/preflight.css';
  }

  .twp.no-twp {
    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
      all: revert-layer;
    }
  }
}

@layer components;

@layer utilities {
  @import 'tailwindcss/utilities.css';
}

/* Tech Tree canvas: dark tactical chrome for React Flow controls. */
.tech-tree-canvas .react-flow__controls {
  button {
    background: rgba(0, 0, 0, 0.72);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    border-radius: 0;
    &:hover {
      background: rgba(0, 0, 0, 0.92);
      color: #ffffff;
    }
    svg { fill: currentColor; }
  }
}
.tech-tree-canvas .react-flow__attribution {
  background: transparent;
  a { color: rgba(255, 255, 255, 0.35); }
}

/* Tech Tree: dark thin scrollbars for the panel and its dropdowns. */
.tech-tree-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;

  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  &::-webkit-scrollbar-track {
    background: transparent;
  }
  &::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 0;
  }
  &::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
  }
}