/* =========================================================
   YouTube Studio 1:1 Larpify Custom Styles
   ========================================================= */

/* Inline Editable elements */
.larp-editable {
  cursor: pointer;
  border-radius: 4px;
  position: relative;
}

/* While editing */
.larp-input {
  background: #1f1f1f !important;
  color: #fff !important;
  border: 1px solid #3ea6ff !important;
  border-radius: 4px !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  padding: 2px 6px !important;
  margin: -3px -7px !important;
  outline: none !important;
  box-shadow: 0 0 8px rgba(62, 166, 255, 0.4) !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 60px !important;
  display: inline-block !important;
  z-index: 99999 !important;
  position: relative !important;
}

/* Tooltip / Hovercard: pure native YouTube Studio 1:1 wrapper */
.aplos-hovercard {
  display: none !important;
  opacity: 0 !important;
  transition: opacity 0.05s ease;
  pointer-events: none !important; /* Critical: allows seamless mouse tracking without flicker */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  z-index: 10000 !important;
  user-select: none;
}

.aplos-hovercard.visible {
  display: block !important;
  opacity: 1 !important;
}

/* Allow mouse interaction only when actively editing a day */
.aplos-hovercard.editing {
  pointer-events: auto !important;
}

/* Authentic YouTube Studio Hovercard Box */
#yta-hovercard-container,
#yta-hovercard-container.yta-hovercard {
  background: #212121 !important;
  border: 1px solid #383838 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
  font-family: "Roboto", "Noto", sans-serif !important;
  padding: 10px 14px !important;
  min-width: 130px !important;
  max-width: 260px !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

#title.style-scope.yta-hovercard,
.yta-hovercard #title {
  font-family: "Roboto", "Noto", sans-serif !important;
  font-size: 12px !important;
  line-height: 16px !important;
  color: #aaa !important;
  margin-bottom: 4px !important;
  font-weight: 400 !important;
}

#value.style-scope.yta-hovercard,
.yta-hovercard #value {
  font-family: "Roboto", "Noto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 24px !important;
  line-height: 32px !important;
}

/* Chart Area Fill: transparent blue like on YouTube */
path.area,
.area.yta-line-chart-base,
svg.aplos-chart path.area {
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  display: block !important;
  visibility: visible !important;
}

/* Native-styled inline day edit input */
#larp-day-edit-input {
  background: #1f1f1f !important;
  border: 1px solid #3ea6ff !important;
  color: #41b4d9 !important;
  font-family: var(--ytcp-font-family-roboto), "Roboto", sans-serif !important;
  font-size: 24px !important;
  line-height: 32px !important;
  font-weight: 400 !important;
  border-radius: 4px !important;
  padding: 0 4px !important;
  margin: 0 !important;
  width: 140px !important;
  outline: none !important;
  box-shadow: 0 0 6px rgba(62, 166, 255, 0.4) !important;
}

svg.aplos-chart {
  cursor: crosshair !important;
}

/* Let mouse events hit svg.aplos-chart / mouseCapturePane seamlessly */
svg.aplos-chart .seriesGroups path,
svg.aplos-chart .dot-follow-layer,
svg.aplos-chart .chart-annotation-layer,
svg.aplos-chart .annotationRow {
  pointer-events: none !important;
}

svg.aplos-chart .mouseCapturePane {
  pointer-events: auto !important;
  cursor: crosshair !important;
}

svg.aplos-chart g.x.axis g.tick {
  cursor: pointer !important;
  pointer-events: auto !important;
}

.aplos-a11y-content {
  display: none !important;
}

/* Dot follow guideline and point: hidden by default */
.dot-follow-layer {
  display: none;
  opacity: 0;
  transition: opacity 0.1s ease;
  pointer-events: none;
}

/* Image uploadable hover effect */
.larp-image-editable {
  cursor: pointer;
  position: relative;
}

.larp-image-editable:hover::after {
  content: "📷";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* 4-card layout adjustment for key-metric-cards */
yta-key-metric-card-group,
#cards.yta-key-metric-card-group,
#card-group.yta-key-metric-card-group {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  width: 100% !important;
}

tp-yt-paper-item.yta-key-metric-card {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  cursor: pointer !important;
}


/* Discrete Larpify Toolbar */
#larpify-toolbar {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100000;
  font-family: Roboto, Arial, sans-serif;
}

#larpify-toggle-btn {
  background: #212121;
  color: #fff;
  border: 1px solid #3e3e3e;
  border-radius: 24px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  transition: all 0.2s ease;
  user-select: none;
}

#larpify-toggle-btn:hover {
  background: #2a2a2a;
  border-color: #3ea6ff;
}

#larpify-panel {
  display: none;
  position: absolute;
  bottom: calc(100% + 12px);
  right: 0;
  width: 350px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  background: #1f1f1f;
  border: 1px solid #383838;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.75);
  padding: 18px;
  color: #f1f1f1;
  font-size: 13px;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

#larpify-panel::-webkit-scrollbar {
  width: 6px;
}

#larpify-panel::-webkit-scrollbar-track {
  background: transparent;
}

#larpify-panel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 4px;
}

#larpify-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.45);
}

#larpify-panel.open {
  display: block;
  animation: larpFadeIn 0.18s ease-out;
}

@keyframes larpFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.larp-panel-header {
  position: sticky;
  top: -18px;
  background: #1f1f1f;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid #333;
  padding-top: 2px;
  padding-bottom: 10px;
  margin-top: -2px;
  margin-bottom: 14px;
}

.larp-panel-close {
  background: none;
  border: none;
  color: #aaa;
  cursor: pointer;
  font-size: 18px;
}

.larp-panel-close:hover {
  color: #fff;
}

.larp-section {
  margin-bottom: 14px;
}

.larp-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #888;
  margin-bottom: 8px;
  font-weight: 600;
}

.larp-btn-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.larp-btn {
  background: #2b2b2b;
  color: #fff;
  border: 1px solid #3d3d3d;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.15s ease;
}

.larp-btn:hover {
  background: #383838;
  border-color: #3ea6ff;
  color: #3ea6ff;
}

.larp-btn.active {
  background: rgba(62, 166, 255, 0.2) !important;
  border-color: #3ea6ff !important;
  color: #3ea6ff !important;
  font-weight: 600 !important;
}

.larp-btn.gold {
  border-color: #ffd700;
  color: #ffd700;
  font-weight: 600;
}

.larp-btn.gold:hover {
  background: rgba(255, 215, 0, 0.15);
}

.larp-btn.viral {
  border-color: rgba(255, 78, 69, 0.6);
  color: #ff8a80;
  font-weight: 500;
}

.larp-btn.viral:hover {
  background: rgba(255, 78, 69, 0.15);
  border-color: #ff4e45;
  color: #ff5252;
}

.larp-btn.steady {
  border-color: rgba(43, 166, 64, 0.6);
  color: #4ade80;
  font-weight: 500;
}

.larp-btn.steady:hover {
  background: rgba(43, 166, 64, 0.15);
  border-color: #2ba640;
  color: #2ba640;
}

.larp-badge {
  font-size: 11px;
  opacity: 0.85;
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
}

.larp-hint {
  font-size: 11px;
  color: #888;
  line-height: 1.4;
  margin-top: 10px;
}

/* Screenshot Mode: completely hide anything related to larpify */
body.screenshot-mode #larpify-toolbar,
body.screenshot-mode .larp-editable:hover {
  display: none !important;
  outline: none !important;
  background: transparent !important;
}

/* =========================================================
   YouTube Studio 1:1 Typography
   ========================================================= */

/* Main Header Banner: "Twój kanał uzyskał..." - 1:1 YouTube Studio (Roboto 700, 24px) */
#title.yta-personalized-overview-header,
yta-personalized-overview-header #title {
  font-family: "Roboto", "Arial", sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
  line-height: 32px !important;
  color: #ffffff !important;
  -webkit-font-smoothing: antialiased !important;
  margin: 0 auto !important;
  text-align: center !important;
  padding-top: 18px !important;
  padding-bottom: 16px !important;
}

/* Subtitle under Banner: "Występują tymczasowe problemy..." - Roboto 400, 14px */
#subtitle.yta-personalized-overview-header,
yta-personalized-overview-header #subtitle {
  font-family: "Roboto", "Arial", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  letter-spacing: normal !important;
  color: var(--ytcp-text-secondary, #aaa) !important;
  -webkit-font-smoothing: antialiased !important;
  text-align: center !important;
  padding-bottom: 16px !important;
}

/* Key Metric Cards Total Numbers ("201,9 tys.", "1,1 tys.", "+703") - 1:1 YouTube Studio (Roboto 700, 24px) */
.yta-key-metric-card #metric-total,
yta-key-metric-block #metric-total,
#metric-total,
.metric-total {
  font-family: "Roboto", "Arial", sans-serif !important;
  font-weight: 700 !important;
  font-size: 24px !important;
  line-height: 32px !important;
  letter-spacing: normal !important;
  color: #f1f1f1 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Key Metric Card Labels ("Wyświetlenia", "Czas oglądania", "Subskrybenci", "Szacunkowe przychody" / "Estimated revenue") - Roboto 500, 12px */
.yta-key-metric-card #metric-label,
yta-key-metric-block #metric-label,
#metric-label,
#ESTIMATED_REVENUE-tab #metric-label,
#ESTIMATED_REVENUE-tab.iron-selected #metric-label,
#ESTIMATED_REVENUE-tab #metric-label-container,
#ESTIMATED_REVENUE-tab #metric-label-container > div,
#SUBSCRIBERS_NET_CHANGE-tab #metric-label,
#EXTERNAL_WATCH_TIME-tab #metric-label,
#EXTERNAL_VIEWS-tab #metric-label {
  font-family: "Roboto", "Arial", sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  line-height: 18px !important;
  letter-spacing: normal !important;
  color: var(--ytcp-text-secondary, #aaa) !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Comparison / Subtext in Cards ("O 47,9 tys. więcej niż zwykle") - Roboto 400, 12px (Not bold, not italic) */
.yta-key-metric-card #comparison,
yta-key-metric-block #comparison,
.yta-key-metric-card .comparison-text,
#comparison,
#comparison-subtext,
#performance-label,
.yta-key-metric-card #comparison-label-content {
  font-family: "Roboto", "Arial", sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: var(--ytcp-text-secondary, #aaa) !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Navigation Drawer Entity / Channel Name ("remin") - Roboto 400, 12px */
#entity-name,
.entity-name,
ytcp-navigation-drawer #entity-name,
ytcp-navigation-drawer .entity-name {
  font-family: "Roboto", "Arial", sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--ytcp-text-secondary, #aaa) !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Realtime Card ("W czasie rzeczywistym") */
.yta-latest-activity-card #title,
yta-title-subtitle-header #title {
  font-family: "Roboto", "Arial", sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 26px !important;
  color: #f1f1f1 !important;
}

.yta-latest-activity-card .card-subtitle,
.yta-latest-activity-card .subtitle {
  font-family: "Roboto", "Arial", sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--ytcp-text-secondary, #aaa) !important;
}

.yta-latest-activity-card .metric-value,
#realtime-views,
.realtime-views-count,
yta-realtime-card #metric-total {
  font-family: "Roboto", "Arial", sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 28px !important;
  color: #f1f1f1 !important;
}

/* Section Title ("Twoje najlepsze treści w tym okresie") */
.section-title,
.table-title,
yta-personalized-overview-bottom-card #title {
  font-family: "Roboto", "Arial", sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 26px !important;
  color: #f1f1f1 !important;
}

/* ==========================================================================
   YouTube Studio Event Annotation Icons & Interactive Picker
   ========================================================================== */

.aplos-icon-group {
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
}

.aplos-icon-group:not(.empty-slot):hover {
  filter: brightness(1.28);
}

.aplos-icon-group {
  cursor: pointer !important;
  pointer-events: all !important;
}

.aplos-icon-group .slot-hitbox {
  cursor: pointer !important;
  pointer-events: all !important;
  fill: #000000 !important;
  opacity: 0.001 !important;
}

.aplos-icon-group.empty-slot {
  cursor: pointer !important;
  pointer-events: all !important;
}

.aplos-icon-group.empty-slot .empty-slot-preview {
  transition: stroke 0.15s ease, fill 0.15s ease;
  pointer-events: none;
}

.aplos-icon-group.empty-slot .empty-slot-plus {
  transition: fill 0.15s ease;
  pointer-events: none;
}

.aplos-icon-group.empty-slot:hover .empty-slot-preview {
  stroke: rgba(255, 255, 255, 0.45) !important;
  fill: rgba(255, 255, 255, 0.12) !important;
}

.aplos-icon-group.empty-slot:hover .empty-slot-plus {
  fill: rgba(255, 255, 255, 0.85) !important;
}

.aplos-icon-group:hover rect.aplos-rect-shape,
.aplos-icon-group:hover g.aplos-yt-short-shape path {
  filter: brightness(1.25);
}

/* Icon Picker Dropdown Modal */
#larp-icon-picker {
  position: fixed;
  z-index: 10002;
  background: #282828;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.85);
  width: 270px;
  padding: 0 0 8px 0;
  font-family: "Roboto", "Arial", sans-serif;
  color: #fff;
  display: none;
  animation: larpPickerIn 0.14s cubic-bezier(0, 0, 0.2, 1);
  user-select: none;
}

#larp-icon-picker.open {
  display: block;
}

@keyframes larpPickerIn {
  from { opacity: 0; transform: scale(0.96) translateY(4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.larp-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px 8px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px 10px 0 0;
}

.larp-picker-title {
  font-size: 12px;
  font-weight: 500;
  color: #f1f1f1;
}

.larp-picker-close {
  background: transparent;
  border: none;
  color: #aaa;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.larp-picker-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.larp-picker-list {
  list-style: none;
  margin: 6px 0 0 0;
  padding: 0;
}

.larp-picker-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.1s;
}

.larp-picker-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.larp-picker-item-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.larp-picker-item-text {
  display: flex;
  flex-direction: column;
}

.larp-picker-item-name {
  font-size: 13px;
  font-weight: 500;
  color: #f1f1f1;
}

.larp-picker-item-sub {
  font-size: 11px;
  color: #aaa;
}

.larp-picker-number-section {
  padding: 6px 14px 10px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 4px;
}

.larp-picker-number-title {
  font-size: 11px;
  font-weight: 500;
  color: #aaa;
  margin-bottom: 6px;
}

.larp-picker-pills {
  display: flex;
  align-items: center;
  gap: 6px;
}

.larp-picker-pill {
  background: #383838;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
  font-family: Roboto, sans-serif;
  cursor: pointer;
  transition: all 0.1s;
}

.larp-picker-pill:hover {
  background: #4a4a4a;
  border-color: #3ea6ff;
}

.larp-picker-custom-input {
  width: 44px;
  background: #1e1e1e;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  padding: 4px 6px;
  text-align: center;
  font-family: Roboto, sans-serif;
  box-sizing: border-box;
}

.larp-picker-custom-input:focus {
  outline: none;
  border-color: #3ea6ff;
}

/* Realtime 48h interactive bars */
yta-realtime-chart path.bar {
  transition: opacity 0.12s ease, fill 0.12s ease;
  cursor: pointer;
}

yta-realtime-chart path.bar:hover {
  opacity: 0.8 !important;
  fill: #65d5f7 !important;
  stroke: #ffffff !important;
  stroke-width: 0.5px !important;
}

/* Realtime card video rows hover effect */
yta-latest-activity-card .row.layout.horizontal:hover {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
}