/* Video info panel hyperlink & highlight styling */
/* RADICAL APPROACH: Style only links inside the explicit .desc-md container (the description markdown) */

/* Base style for description markdown links */
#info-panel .desc-md a {
  background: #ffffff !important; /* white background */
  color: #000000 !important;      /* black text */
  padding: 0 1px;
  text-decoration: underline !important; /* always underlined */
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  border-radius: 0;
  transition: background .15s ease, color .15s ease;
}

/* Hover / focus state keeps same semantics but can slightly darken bg for affordance */
#info-panel .desc-md a:hover,
#info-panel .desc-md a:focus {
  background: #f2f2f2 !important;
  color: #000000 !important;
  text-decoration-thickness: 2px;
}

/* Other markdown-generated tags container(s) (e.g., tags_html spans) can be opted-in later if needed */

/* Highlight marks (regex matches) anywhere in info panel */
#info-panel mark {
  background: #ffc208 !important; /* match_dot_color from settings.json */
  color: #000 !important; /* black text for contrast */
  font-weight: bold;
  padding: 0 2px;
  border-radius: 2px;
}

/* User text selection inside info panel (different from <mark>) */
#info-panel ::selection {
  background: #ffc208; /* match_dot_color */
  color: #000; /* black text */
}
#info-panel ::-moz-selection {
  background: #ffc208;
  color: #000;
}

/* Footer panel text selection (mirror info panel) */
/* Use the footer container class and the footer text id (either will match). */
.footer-box ::selection,
#footer-text ::selection {
  background: #ffc208; /* match_dot_color */
  color: #000;
}
.footer-box ::-moz-selection,
#footer-text ::-moz-selection {
  background: #ffc208;
  color: #000;
}

/* Share button flash animation */
@keyframes shareFlashBg {
  0%   { background-color: var(--share-start,#ffc208); color:#000; }
  40%  { background-color: #000; color:#fff; }
  100% { background-color: var(--share-start,#ffc208); color:#000; }
}

.share-btn.share-flash {
  animation: shareFlashBg 0.6s ease-in-out;
}

/* Copied label fade (reinforce inline transition) */
#share-copied-label { transition: opacity .35s ease; }

/* Extend yellow selection styling to other panels */
#settings-div ::selection,
#channels-div ::selection,
#channel-info ::selection,
.main-section ::selection,
#settings-div ::-moz-selection,
#channels-div ::-moz-selection,
#channel-info ::-moz-selection,
.main-section ::-moz-selection {
  background: #ffc208;
  color: #000;
}

/* Global fallback (anything not caught above) */
.app-layout ::selection { background:#ffc208; color:#000; }
.app-layout ::-moz-selection { background:#ffc208; color:#000; }

/* Force inside Plotly SVG/text (legend, titles). Plotly injects its own elements, so use attribute selectors */
.main-section .main-svg text::selection,
.main-section .main-svg tspan::selection { background:#ffc208; color:#000; }
.main-section .main-svg text::-moz-selection,
.main-section .main-svg tspan::-moz-selection { background:#ffc208; color:#000; }

/* Tab button refinements */
.tab-button {
  height: 26px !important; /* requested height */
  padding: 0 0px !important; /* horizontal space; no vertical needed due to fixed height */
  margin: 0 0px 10px 0px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  letter-spacing: .5px;
  font-size: 12px;
  line-height: 1;
  box-sizing: border-box;
}
.tab-button img { display:block; }

/* Hide vertical scrollbar in tabbed widget box specifically (content still accessible) */
.tabbed-widget-box {
  scrollbar-width: none; /* Firefox */
}
.tabbed-widget-box::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

/* Remove top & side padding on the widget-box that houses the tabs so bar is truly flush */
.tabbed-widget-box.widget-box, .widget-box.tabbed-widget-box {
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Ensure content area below tab bar retains original horizontal padding */
.tabbed-widget-box #tab-contents {
  padding: 10px 14px 12px 14px; /* mimic prior interior spacing */
  box-sizing: border-box;
}

/* Let the tab bar sit over the rounded corners cleanly */
.tabbed-widget-box.widget-box .file-tab-bar {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

/* ================= File Tab Bar Aesthetic ================= */
.file-tab-bar {
  display: flex;
  gap: 2px;
  background: #000;
  padding: 1px 0 0 0; /* reduced top padding for shorter bar */
  border-bottom: 4px solid #000;
  user-select: none;
  margin: 0 0 8px 0; /* remove side gutters */
  width: 100%;
  box-sizing: border-box;
  align-items: flex-end; /* tabs sit on baseline */
  overflow-y: auto; /* allow vertical scrollbar if needed (will be black themed) */
}

.file-tab {
  background: #000000;
  color: #fff; /* white inactive text */
  border: 1px solid #ffc300;
  border-bottom: 1px solid #000;
  padding: 4px 14px 3px 14px; /* reduced height */
  font-size: 12px; /* keep readable but more compact */
  font-weight: 600;
  letter-spacing: 0.5px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  cursor: pointer;
  position: relative;
  top: 1px;
  transition: background .15s, color .15s;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.file-tab:hover {
  background: #655400;
  color: #fff;
}

.file-tab.active-tab {
  background: #ffc300;
  color: #000; /* black active text */
  border: 2px solid #000000;
  border-color: #ffc300 #ffc300 #ffc300 #ffc300;
  border-bottom: 1px solid #ffc300; /* visually merges with content */
  box-shadow: 0 -1px 0 #ffc300 inset, 0 2px 4px -2px #000;
}

.file-tab:focus { outline: none; }

@media (max-width: 700px) {
  .file-tab { padding: 6px 8px 4px 8px; font-size: 11px; }
}

/* Black scrollbar styling for the tab bar (in case it overflows) */
.file-tab-bar::-webkit-scrollbar { width: 10px; height: 10px; }
.file-tab-bar::-webkit-scrollbar-track { background: #000; }
.file-tab-bar::-webkit-scrollbar-thumb { background: #000; border-radius: 0; }
.file-tab-bar { scrollbar-color: #000 #000; }