@import '@angular/cdk/overlay-prebuilt.css';

@keyframes profile-card-in {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

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

@layer base {
  :root {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 262.1 83.3% 57.8%;
    --primary-foreground: 210 20% 98%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 262.1 83.3% 57.8%;
    --radius: 0.5rem;
  }

  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-feature-settings:
      'rlig' 1,
      'calt' 1;
  }
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: hsl(var(--background));
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--muted));
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.5);
}

/* Custom utilities */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.workspace-bright-theme {
  --background: 220 14% 92%;
  --foreground: 222 16% 18%;
  --card: 220 18% 97%;
  --card-foreground: 222 16% 18%;
  --popover: 0 0% 100%;
  --popover-foreground: 222 16% 18%;
  --primary: 214 72% 50%;
  --primary-foreground: 0 0% 100%;
  --secondary: 220 14% 88%;
  --secondary-foreground: 222 16% 18%;
  --muted: 220 12% 85%;
  --muted-foreground: 220 10% 38%;
  --accent: 220 14% 90%;
  --accent-foreground: 222 16% 18%;
  --destructive: 0 72% 56%;
  --destructive-foreground: 0 0% 100%;
  --border: 220 12% 78%;
  --input: 220 12% 78%;
  --ring: 214 72% 50%;
  --radius: 0.375rem;
}

.theme-icon-slot {
  display: none;
}

.theme-icon-slot[data-theme-visible='true'] {
  display: inline-flex;
}

.theme-settings__workspace {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(16rem, 19rem) minmax(0, 1fr);
  align-items: stretch;
  min-height: 0;
}

.theme-settings__sidebar {
  position: sticky;
  top: 0;
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 0.75rem;
}

.theme-settings__main {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: 1rem;
}

.theme-settings--fullscreen .theme-settings__workspace {
  gap: 0.75rem;
  grid-template-columns: minmax(15rem, 16.5rem) minmax(0, 1fr);
  align-items: stretch;
}

.theme-studio-fullscreen-shell {
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--muted-foreground) / 0.6) hsl(var(--card) / 0.75);
}

.theme-studio-fullscreen-shell::-webkit-scrollbar {
  width: 10px;
}

.theme-studio-fullscreen-shell::-webkit-scrollbar-track {
  border-radius: 999px;
  background: hsl(var(--card) / 0.75);
}

.theme-studio-fullscreen-shell::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: hsl(var(--muted-foreground) / 0.6);
  background-clip: padding-box;
}

.theme-studio-fullscreen-shell::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--primary) / 0.45);
  background-clip: padding-box;
}

.theme-settings--fullscreen .theme-settings__sidebar {
  gap: 0.75rem;
}

.theme-settings--fullscreen .theme-settings__sidebar .theme-studio-card:last-child {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.theme-settings--fullscreen .theme-settings__main {
  gap: 0.875rem;
}

.theme-settings--fullscreen .theme-studio-card {
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.05);
}

.theme-settings--fullscreen .theme-settings__hero-grid {
  gap: 0.5rem;
}

.theme-settings--fullscreen .theme-settings__hero-stat {
  border-radius: 0.5rem;
  padding: 0.65rem 0.75rem;
}

.theme-settings--fullscreen .theme-settings__hero-label {
  font-size: 0.64rem;
}

.theme-settings--fullscreen .theme-settings__hero-value {
  margin-top: 0.3rem;
  font-size: 0.9rem;
}

.theme-settings--fullscreen .theme-settings__workspace-tab,
.theme-settings--fullscreen .theme-settings__entry-button {
  border-radius: 0.5rem;
  padding: 0.72rem 0.8rem;
}

.theme-settings--fullscreen .theme-settings__search-input {
  border-radius: 0.5rem;
  padding: 0.72rem 0.85rem;
}

.theme-settings--fullscreen .theme-settings__entry-list {
  max-height: none;
  min-height: 0;
  flex: 1 1 auto;
}

.theme-studio-card {
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  background: hsl(var(--card));
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.05);
}

.theme-settings__hero-grid {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.theme-settings__hero-stat {
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  background: hsl(var(--secondary) / 0.3);
  padding: 0.75rem 0.875rem;
}

.theme-settings__hero-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}

.theme-settings__hero-value {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.95rem;
  color: hsl(var(--foreground));
}

.theme-settings__workspace-tab {
  display: block;
  width: 100%;
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  background: hsl(var(--secondary) / 0.25);
  padding: 0.75rem 0.875rem;
  text-align: left;
  transition:
    background-color 160ms ease,
    border-color 160ms ease;
}

.theme-settings__workspace-tab:hover {
  background: hsl(var(--secondary) / 0.45);
}

.theme-settings__workspace-tab--active {
  border-color: hsl(var(--primary) / 0.35);
  background: hsl(var(--primary) / 0.08);
}

.theme-settings__workspace-tab-title {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  color: hsl(var(--foreground));
}

.theme-settings__workspace-tab-description {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.76rem;
  line-height: 1.45;
  color: hsl(var(--muted-foreground));
}

.theme-settings__search-input {
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  background: hsl(var(--secondary));
  padding: 0.65rem 0.8rem;
  font-size: 0.875rem;
  color: hsl(var(--foreground));
  outline: none;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
}

.theme-settings__search-input:focus {
  border-color: hsl(var(--primary) / 0.4);
  box-shadow: 0 0 0 1px hsl(var(--primary) / 0.2);
}

.theme-settings__entry-list {
  display: flex;
  max-height: min(60vh, 34rem);
  flex-direction: column;
  gap: 0.5rem;
  overflow: auto;
  padding-right: 0.15rem;
}

.theme-settings__entry-button {
  display: block;
  width: 100%;
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  background: hsl(var(--secondary) / 0.25);
  padding: 0.75rem 0.875rem;
  text-align: left;
  transition:
    background-color 160ms ease,
    border-color 160ms ease;
}

.theme-settings__entry-button:hover {
  background: hsl(var(--secondary) / 0.45);
}

.theme-settings__entry-button--active {
  border-color: hsl(var(--primary) / 0.35);
  background: hsl(var(--primary) / 0.08);
}

@media (max-width: 1279px) {
  .theme-settings__hero-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .theme-settings__workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .theme-settings__sidebar {
    position: static;
  }

  .theme-settings__entry-list {
    max-height: 24rem;
  }
}

@media (max-width: 640px) {
  .theme-settings__hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

[data-theme-key][data-theme-linked='true'] {
  cursor: pointer;
}

[data-theme-key][data-theme-picker-active='true'] {
  cursor: crosshair;
}

[data-theme-key][data-theme-picker-hovered='true'] {
  outline: 2px solid hsl(var(--primary));
  outline-offset: -2px;
  box-shadow: inset 0 0 0 9999px hsl(var(--primary) / 0.08);
}

[data-theme-key][data-theme-picker-selected='true'] {
  outline: 2px solid hsl(var(--primary));
  outline-offset: -2px;
  box-shadow:
    0 0 0 3px hsl(var(--primary) / 0.18),
    inset 0 0 0 9999px hsl(var(--primary) / 0.06);
}