/* Layer 10: Component Layer */
/* Component shell (search input, filters, etc) aligned below navbar */

[data-layer="component"] {
  position: fixed;
  top: var(--navbar-bottom);
  left: 0;
  right: 0;
  height: auto;
  z-index: var(--z-component);
  padding: 4.444vh var(--gutter) 2.963vh; /* 48px top, 32px bottom at 1080p */
  background: transparent;
}

.component-container {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  max-width: 100%;
  margin: 0;
}

.component-search {
  flex: 1;
  max-width: 54.688vw; /* 1050px at 1920px */
}

.component-input,
.search-input {
  width: 100%;
  min-height: 6.667vh;           /* 72px at 1080p */
  padding: 2.222vh 1.667vw;      /* 24px top/bottom at 1080p, 32px left/right at 1920px */
  font-size: 2.292vw;           /* 44px at 1920px (2x) */
  font-weight: 400;
  line-height: 2.593vh;         /* 28px at 1080p */
  color: #E3E2E6;
  background-color: #1A1C1E;
  border: 0.104vw solid rgba(255, 255, 255, 0.2); /* 2px at 1920px */
  border-radius: 4px;
  outline: none;
  transition: all 0.2s ease;
}

.component-input::placeholder,
.search-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.component-input:focus,
.component-input.focused,
.search-input:focus,
.search-input.focused {
  background-color: #1A1C1E;
  border-color: rgba(255, 255, 255, 0.2);
  outline: none;
  box-shadow: none;
}

.component-filters {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.component-filter-button {
  height: 3.333vh;              /* 36px at 1080p */
  padding: 0 var(--spacing-md);
  background: rgba(255, 255, 255, 0.1);
  border: 0.052vw solid rgba(255, 255, 255, 0.2); /* 1px at 1920px */
  border-radius: 18px;
  color: var(--color-text-secondary);
  font-size: 1.458vw;           /* 28px at 1920px (2x) */
  cursor: pointer;
  transition: all var(--transition-fast);
}

.component-filter-button:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--color-text-primary);
}

.component-filter-button.active {
  background: var(--focus-ring-color);
  color: #000;
  border-color: var(--focus-ring-color);
}

.component-filter-button.focused {
  outline: 0.104vw solid var(--focus-ring-color); /* 2px at 1920px */
  outline-offset: 0.104vw; /* 2px at 1920px */
}

/* Account Screen Styles */
[data-layer="component"][data-component-type="account"] {
  padding: 2.222vh var(--gutter); /* 24px at 1080p */
  height: 88.149vh;  /* 100vh - 11.851vh = 952px at 1080p */
  overflow: hidden;
}

.account-container {
  display: flex;
  height: 100%;
  gap: var(--spacing-xl);
}

.account-sidebar {
  flex: 0 0 34.375%;                    /* Another 25% wider (27.5 * 1.25 = 34.375) */
  min-width: 37.5vh;                    /* Increased min-width (30 * 1.25) */
  max-width: 51.25vh;                   /* Increased max-width (41 * 1.25) */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  overflow-y: auto;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 1.5vh;                   /* ~16px at 1080p */
  padding: 2.64vh 5vh;          /* 10% taller (2.4 * 1.10 = 2.64) */
  font-size: 2.96vh;            /* ~32px at 1080p */
  font-weight: 500;
  color: #E3E2E6;
  background-color: transparent;
  border-radius: 0.37vh;        /* ~4px at 1080p */
  cursor: pointer;
  transition: all var(--transition-fast);
  outline: none;
}

.sidebar-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.22vh;                /* ~24px at 1080p */
  height: 2.22vh;               /* ~24px at 1080p */
  flex-shrink: 0;
}

.sidebar-nav-icon--large {
  width: 2.96vh;                /* ~32px at 1080p - matches nav title font-size */
  height: 2.96vh;
}

.sidebar-nav-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.sidebar-nav-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Focus/hover state - full highlight for keyboard navigation */
.sidebar-nav-item:hover,
.sidebar-nav-item:focus,
.sidebar-nav-item:focus-visible {
  background-color: #E5E1E6;
  color: #1A1C1E;
  outline: none;
  box-shadow: none;
}

.account-content {
  flex: 1;
  overflow-y: auto;
  padding-right: var(--spacing-md);
  padding-left: 10vw;             /* Adjusted for 34.375% sidebar, content still at ~45vw */
}

.account-section {
  margin-bottom: var(--spacing-xl);
}

.account-section-title {
  font-size: 4.07vh;            /* ~44px at 1080p */
  font-weight: 300;             /* Light weight per user request */
  color: #E3E2E6;
  margin-bottom: var(--spacing-md);
}

.account-items-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
}

.account-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2.64vh var(--spacing-md);  /* Same vertical padding as sidebar pills */
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--transition-fast);
  outline: none;
}

.account-item:hover,
.account-item:focus {
  background-color: rgba(255, 255, 255, 0.1);
}

.account-item:focus {
  outline: none;
  box-shadow: none;
}

/* Disabled state for account items (e.g., Log Out when not logged in) */
.account-item.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.account-item.disabled:hover,
.account-item.disabled:focus {
  background-color: rgba(255, 255, 255, 0.05);
}

.account-item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.37vh;                  /* 4px at 1080p */
}

.account-item-title {
  font-size: 1.666vw;           /* 32px at 1920px (2x) */
  font-weight: 500;
  color: #E3E2E6;
}

.account-item-value {
  font-size: 1.354vw;           /* 26px at 1920px (2x) */
  color: rgba(227, 226, 230, 0.7);
}

.account-item-arrow {
  margin-left: var(--spacing-md);
  font-size: 2.5vw;             /* 48px at 1920px (2x) */
  color: rgba(227, 226, 230, 0.5);
}

.account-item.toggle {
  cursor: pointer;
}

.toggle-switch {
  position: relative;
  width: 2.5vw;                 /* 48px at 1920px */
  height: 2.222vh;              /* 24px at 1080p */
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  transition: background-color var(--transition-fast);
}

.toggle-switch.active {
  background-color: #A8C8FF;
}

.toggle-slider {
  position: absolute;
  top: 0.185vh;                 /* 2px at 1080p */
  left: 0.104vw;                /* 2px at 1920px */
  width: 1.042vw;               /* 20px at 1920px */
  height: 1.852vh;              /* 20px at 1080p */
  background-color: #fff;
  border-radius: 50%;
  transition: transform var(--transition-fast);
}

.toggle-switch.active .toggle-slider {
  transform: translateX(1.25vw); /* 24px at 1920px */
}

.account-item.select .account-item-value {
  color: #A8C8FF;
  font-weight: 500;
}

@media (max-width: 1280px) {
  .account-items-grid {
    grid-template-columns: 1fr;
  }
}

.error-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--spacing-xl);
}

.error-message {
  font-size: 1.876vw;           /* 36px at 1920px (2x) */
  color: rgba(227, 226, 230, 0.7);
  text-align: center;
}

/* Account Dialog Root - container for dialogs within the layer system */
.account-dialog-root {
  /* Empty by default, only contains content when dialog is shown */
}

/* Account Dialog Styles - matches JetStream StandardDialog */
.account-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.account-dialog-overlay.visible {
  opacity: 1;
}

.account-dialog {
  background-color: #E5E1E6;
  border-radius: 0;             /* square corners */
  padding: 4.444vh;             /* uniform margins: 48px at 1080p */
  min-width: 39.584vw;          /* 760px at 1920px (2x width) */
  max-width: 44.584vw;          /* 856px at 1920px (2x width) */
  min-height: 51.556vh;         /* taller to match reference (~30% more) */
  transform: scale(0.95);
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column;
}

.account-dialog-overlay.visible .account-dialog {
  transform: scale(1);
}

.account-dialog-title {
  font-size: 2.5vw;             /* 48px at 1920px (2x) */
  font-weight: 400;             /* not bold */
  color: #1A1C1E;
  margin-bottom: 2.667vh;       /* line space after title */
  padding-left: 0.417vw;        /* 8px at 1920px */
}

.account-dialog-text {
  font-size: 1.56vw;            /* 30px at 1920px */
  font-weight: 400;
  line-height: 1.5;
  color: #1A1C1E;
  margin-bottom: 2.667vh;       /* line space below text */
  padding: 0 0.417vw;           /* 0 8px at 1920px */
}

.account-dialog-buttons {
  display: flex;
  gap: 1.481vh;                 /* 16px at 1080p */
  justify-content: center;      /* centered buttons */
  margin-top: auto;             /* push to bottom of flex column */
  padding-top: 2.667vh;         /* controlled gap above buttons */
}

.account-dialog-button {
  padding: 2.222vh 5vw;         /* 24px top/bottom at 1080p, 96px left/right at 1920px */
  font-size: 1.458vw;           /* 28px at 1920px (2x) */
  font-weight: 500;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  outline: none;
}

.account-dialog-button.primary {
  background-color: #1A1C1E;
  color: #E5E1E6;
}

.account-dialog-button.primary:hover,
.account-dialog-button.primary:focus {
  background-color: #2A2C2E;
}

.account-dialog-button.secondary {
  background-color: #C9C5CA;
  color: #1A1C1E;
}

.account-dialog-button.secondary:hover,
.account-dialog-button.secondary:focus {
  background-color: #B9B5BA;
}

.account-dialog-button:focus {
  outline: 0.104vw solid #A8C8FF; /* 2px at 1920px */
  outline-offset: 0.104vw;        /* 2px at 1920px */
}

/* Search Preview Styles - YouTube channel preview in vertical list format */
.search-preview-container {
  margin-top: 2.963vh; /* 32px at 1080p */
  /* Width inherited from parent .component-search which has max-width: 54.688vw */
}

.search-preview-header {
  margin-bottom: 1.481vh; /* 16px at 1080p */
}

.search-preview-label {
  font-size: 1.852vh; /* ~20px at 1080p */
  font-weight: 500;
  color: rgba(227, 226, 230, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.search-preview-item {
  display: flex;
  align-items: center;
  gap: 2.222vh; /* 24px at 1080p */
  padding: 2.222vh 2.5vw; /* 24px vertical, 48px horizontal at 1920px */
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--transition-fast);
  outline: none;
}

.search-preview-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.search-preview-item.focused {
  background-color: #E5E1E6;
}

.search-preview-item.focused .search-preview-item-title,
.search-preview-item.focused .search-preview-item-description {
  color: #1A1C1E;
}

.search-preview-item-icon {
  flex-shrink: 0;
  width: 7.407vh; /* 80px at 1080p */
  height: 7.407vh;
  border-radius: 50%;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.1);
}

.search-preview-item-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-preview-item-avatar-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(168, 200, 255, 0.3) 0%, rgba(168, 200, 255, 0.1) 100%);
}

.search-preview-item-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.556vh; /* 6px at 1080p */
}

.search-preview-item-title {
  font-size: 2.5vh; /* ~27px at 1080p */
  font-weight: 500;
  color: #E3E2E6;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-preview-item-stats {
  font-size: 1.667vh; /* ~18px at 1080p */
  font-weight: 500;
  color: rgba(168, 200, 255, 0.9); /* Light blue accent color */
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-preview-item.focused .search-preview-item-stats {
  color: rgba(26, 28, 30, 0.7);
}

.search-preview-item-description {
  font-size: 1.852vh; /* ~20px at 1080p */
  font-weight: 400;
  color: rgba(227, 226, 230, 0.7);
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-preview-item-add {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.556vh; /* 60px at 1080p */
  height: 5.556vh;
  background-color: transparent;
  border: 0.185vh solid rgba(255, 255, 255, 0.2); /* 2px at 1080p */
  border-radius: 50%;
  color: rgba(227, 226, 230, 0.7);
  cursor: pointer;
  transition: all var(--transition-fast);
  outline: none;
}

.search-preview-item-add:hover {
  background-color: rgba(100, 200, 100, 0.2);
  border-color: rgba(100, 200, 100, 0.5);
  color: #64c864;
}

.search-preview-item-add.focused {
  background-color: #64c864;
  border-color: #64c864;
  color: #fff;
  outline: 0.185vh solid #fff;
  outline-offset: 0.185vh;
}

.search-preview-item-add svg {
  width: 2.222vh; /* 24px at 1080p */
  height: 2.222vh;
}

/* When item is focused but add button is not, dim the add button */
.search-preview-item.focused .search-preview-item-add:not(.focused) {
  border-color: rgba(26, 28, 30, 0.3);
  color: rgba(26, 28, 30, 0.5);
}