/* 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;
}

/* Search component: solid background to prevent thumbnails from scrolling into view behind it */
[data-layer="component"][data-component-type="search"] {
  background: var(--color-background);
}

.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: 0;                               /* No gap - sidebar has margin instead */
}

.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;
  margin-right: var(--spacing-xl);      /* Gap moved to sidebar margin */
}

.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;
}

/* Selected state - keeps sidebar item highlighted when navigating content */
.sidebar-nav-item.selected {
  background-color: rgba(255, 255, 255, 0.15);
  color: #E3E2E6;
}

/* 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: 0;               /* No extra padding - outer container has gutter */
  padding-left: 0;                /* No extra padding - outer container has gutter */
  display: flex;
  flex-direction: column;
  align-items: stretch;           /* Grid fills full width */
}

.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, minmax(22vw, 1fr));
  gap: 1.5vh 1.5vh !important;        /* Equal row and column gap */
  width: 100%;                        /* Fill available width */
  justify-content: end;               /* Push grid items to the right */
}

.account-items-grid .account-item,
.account-content .account-items-grid .account-item {
  width: 100%;
  border-radius: 4px !important;      /* ALL edges rounded */
}

.account-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2.64vh 2.5vh;              /* Match sidebar nav item horizontal padding (5vh / 2 for inner) */
  min-height: 8.24vh;                 /* Match sidebar nav item height: 2.64vh * 2 + 2.96vh font */
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 4px !important;      /* ALL edges rounded */
  cursor: pointer;
  transition: all var(--transition-fast);
  outline: none;
  min-width: 22vw;                    /* Wider items but not too wide */
}

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

.account-item:focus {
  background-color: #E5E1E6;
  color: #1A1C1E;
  outline: none;
  box-shadow: none;
}

.account-item:focus .account-item-title,
.account-item:focus .account-item-value {
  color: #1A1C1E;
}

/* Pressed/active state for click feedback */
.account-item.pressed {
  transform: scale(0.97);
  background-color: rgba(255, 255, 255, 0.15);
}

/* 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: 3.333vw;               /* 64px at 1920px - same as lang-slider-track */
  height: 2.963vh;              /* 32px at 1080p - same as lang-slider-track */
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  transition: background-color var(--transition-fast);
}

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

.toggle-slider {
  position: absolute;
  top: 0.278vh;                 /* 3px at 1080p */
  left: 0.156vw;                /* 3px at 1920px */
  width: 1.354vw;               /* 26px at 1920px - same as lang-slider-thumb */
  height: 2.407vh;              /* 26px at 1080p - same as lang-slider-thumb */
  background-color: #fff;
  border-radius: 50%;
  transition: transform var(--transition-fast);
}

.toggle-switch.active .toggle-slider {
  transform: translateX(1.667vw); /* 32px at 1920px - adjusted for larger track */
}

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

/* Language Slider - EN/עב toggle like www site navbar */
.account-item.lang-slider {
  cursor: pointer;
}

.lang-slider-container {
  display: flex;
  align-items: center;
  gap: 1vh;
  direction: ltr !important;
}

.lang-slider-label {
  font-size: 1.25vw;            /* Match static-value font size */
  font-weight: 400;
  color: rgba(227, 226, 230, 0.7);
  transition: color 0.2s;
  user-select: none;
}

.lang-slider-label.active {
  color: #E3E2E6;
}

.lang-slider-track {
  width: 3.333vw;               /* 64px at 1920px */
  height: 2.963vh;              /* 32px at 1080p */
  background: rgba(255, 255, 255, 0.3);
  border-radius: 1.481vh;       /* 16px at 1080p */
  position: relative;
  transition: background-color 0.2s;
}

.account-item.lang-slider:hover .lang-slider-track {
  background: rgba(255, 255, 255, 0.4);
}

.account-item.lang-slider:focus .lang-slider-track,
.account-item:focus .toggle-switch {
  background: rgba(26, 28, 30, 0.3);  /* Dark track on light focused background */
}

.lang-slider-thumb {
  position: absolute;
  top: 0.278vh;                 /* 3px at 1080p */
  left: 0.208vw;                /* 4px at 1920px */
  width: 1.354vw;               /* 26px at 1920px */
  height: 2.407vh;              /* 26px at 1080p */
  background: #fff;
  border-radius: 50%;
  transition: left 0.2s ease;
}

/* Hebrew active state - thumb moves to right */
.lang-slider-container[data-lang="Hebrew"] .lang-slider-thumb {
  left: calc(3.333vw - 1.354vw - 0.208vw); /* track width - thumb width - padding */
}

.lang-slider-container[data-lang="Hebrew"] .lang-slider-label.lang-en {
  color: rgba(227, 226, 230, 0.5);
}

.lang-slider-container[data-lang="Hebrew"] .lang-slider-label.lang-he {
  color: #E3E2E6;
}

.lang-slider-container[data-lang="English"] .lang-slider-label.lang-en,
.lang-slider-container:not([data-lang]) .lang-slider-label.lang-en {
  color: #E3E2E6;
}

.lang-slider-container[data-lang="English"] .lang-slider-label.lang-he,
.lang-slider-container:not([data-lang]) .lang-slider-label.lang-he {
  color: rgba(227, 226, 230, 0.5);
}

/* Toggle "On" label */
.toggle-on-label {
  font-size: 1.25vw;            /* Match static-value font size */
  font-weight: 400;
  color: rgba(227, 226, 230, 0.7);
  margin-inline-start: 1vh;     /* Use logical property for RTL support */
}

.toggle-switch.active + .toggle-on-label {
  color: #E3E2E6;
}

/* Toggle "On" label when item is focused - dark text on light background */
.account-item:focus .toggle-on-label {
  color: #1A1C1E;
}

/* Language slider labels when item is focused - dark text on light background */
.account-item:focus .lang-slider-label {
  color: rgba(26, 28, 30, 0.6) !important;
}

.account-item:focus .lang-slider-label.active {
  color: #1A1C1E !important;
}

/* Static item styles (no arrow, no hover action) */
.account-item.static {
  cursor: default;
}

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

.account-item.static:focus {
  background-color: #E5E1E6;
  color: #1A1C1E;
  outline: none;
  box-shadow: none;
}

/* Static item value - right-aligned like toggles */
.account-item-value.static-value {
  font-size: 1.25vw;            /* Smaller font for version/email values */
  font-weight: 400;
  color: rgba(227, 226, 230, 0.7);
  margin-left: auto;
  flex-shrink: 0;
}

.account-item:focus .account-item-value.static-value {
  color: rgba(26, 28, 30, 0.7);
}

.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,
.account-dialog-button.secondary {
  background-color: #C9C5CA;
  color: #1A1C1E;
}

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

/* 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);
}

/* RTL support for Hebrew */
[dir="rtl"] .component-input,
[dir="rtl"] .search-input {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .component-input::placeholder,
[dir="rtl"] .search-input::placeholder {
  direction: rtl;
  text-align: right;
}

/* Hebrew (RTL) font weight adjustments - Hebrew appears heavier at same weight */
[dir="rtl"] .account-item-title,
[dir="rtl"] .sidebar-nav-item {
  font-weight: 400;
}

/* Keep version numbers, emails, and other technical values LTR in RTL mode */
[dir="rtl"] .account-item-value {
  direction: ltr;
  unicode-bidi: embed;
}

/* RTL support for account screen layout */
[dir="rtl"] .account-container {
  direction: rtl;
}

[dir="rtl"] .account-sidebar {
  margin-right: 0;
  margin-left: var(--spacing-xl);
}

[dir="rtl"] .account-content {
  direction: rtl;
}

[dir="rtl"] .account-section-title {
  text-align: right;
}

/* Ensure account items maintain consistent sizing in RTL */
[dir="rtl"] .account-items-grid {
  direction: rtl;
  justify-content: start;
}

[dir="rtl"] .account-item {
  direction: rtl;
}

/* Keep toggle and language slider controls LTR for consistent behavior */
[dir="rtl"] .toggle-switch,
[dir="rtl"] .lang-slider-container {
  direction: ltr;
}

/* Toggle "On" label margin handled by margin-inline-start in base style */

/* Adjust static value margin for RTL */
[dir="rtl"] .account-item-value.static-value {
  margin-left: 0;
  margin-right: auto;
}

/* Sidebar nav item icon and text order in RTL */
[dir="rtl"] .sidebar-nav-item {
  direction: rtl;
}