/*
  A basic dark theme for VolumePlay based on the CSS
  variables used in the original index.html
*/
:root {
  --bg-darkest: #111827; /* gray-900 */
  --bg-medium: #1F2937; /* gray-800 */
  --bg-darkest-op: rgba(31, 41, 55, 0.8);
  --bg-highlight: #374151; /* gray-700 */
  --bg-highlight-hover: #4B5563; /* gray-600 */

  --text-main: #D1D5DB; /* gray-300 */
  --text-bright: #F9FAFB; /* gray-50 */
  --text-secondary: #9CA3AF; /* gray-400 */
  
  --text-highlight: #5EEAD4; /* teal-300 */
  --highlight-ring: #5EEAD4;
  --highlight-bg: #115E59; /* teal-800 */
  --highlight-text: #F9FAFB;

  --divider-color: #374151; /* gray-700 */

  /* Specific styles from original app */
  --feed-pill-bg: #312E81; /* indigo-900 */
  --feed-pill-text: #E0E7FF; /* indigo-100 */
  --feed-pill-hover-bg: #3730A3; /* indigo-800 */
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Style for the main navigation selection */
.main-nav-selected {
  background-color: var(--highlight-bg);
  color: var(--highlight-text);
  font-weight: 600;
}

/* Style for favorited items */
.fav-selected {
  color: #FACC15; /* amber-400 */
}

/* For the prose/article view in the modal */
.prose-invert {
  color: var(--text-main);
}
/* Base color for links in prose */
.prose-invert a {
  color: var(--text-highlight);
}
/* Hover color for links in prose */
.prose-invert a:hover {
  color: #99F6E4; /* teal-200 */
}
.prose-invert h1, .prose-invert h2, .prose-invert h3, .prose-invert h4 {
  color: var(--text-bright);
}
.prose-invert strong {
  color: var(--text-bright);
}
.prose-invert blockquote {
  color: var(--text-secondary);
  border-left-color: var(--text-secondary);
}
.prose-invert code {
  color: #F0ABFC; /* fuchsia-300 */
}

/* Custom scrollbar for webkit (Chrome, Safari) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg-darkest);
}
::-webkit-scrollbar-thumb {
  background: var(--bg-highlight);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--bg-highlight-hover);
}


/* ---------------------------------------------------------------- */
/* --- NEW CONSOLIDATED FIXES: Icons and Underlines --- */
/* ---------------------------------------------------------------- */

/* Fix 1: Material Icons Alignment (line-height fix) */
.material-icons {
    line-height: 1; 
    vertical-align: middle;
    display: inline-flex;
}

/* Fix 2: Global Underline Suppression for ALL Links */
/* Use !important to override Tailwind's base/utility classes like hover:underline. */
a, a:hover, a:focus {
    text-decoration: none !important;
    transition: color 150ms ease-in-out; /* Enable smooth color transition */
}

/* Fix 3: Ensure Specific Link Color Changes on Hover (Tags and Titles) */

/* a) Hover fix for Filter Tags (Sidebar and Main Feed Author Pills) */
/* These are the elements that use text-[var(--text-highlight)] */
.inline-block.text-[var(--text-highlight)]:hover,
.inline-block.text-[var(--text-highlight)]:focus {
    /* Explicitly set the hover color change to replace the missing underline cue. */
    color: var(--text-bright) !important; 
}

/* b) Hover fix for Title Links (e.g., video titles in the main feed) */
/* These are the elements that rely on the generic 'hover:underline' Tailwind class */
.flex-1 h3 a:hover, 
.flex-1 h3 a:focus,
.text-md a.hover\:underline:hover,
.text-md a.hover\:underline:focus {
    /* If the title's base color is text-[var(--text-bright)], change it to text-secondary for feedback. */
    color: var(--text-secondary) !important;
}

/* c) Reinforce Prose Hover Color (Modal Description Links) */
/* Already defined above, but we reinforce that the color change is the only effect. */
.prose-invert a:hover {
    text-decoration: none !important;
    color: #99F6E4; /* teal-200 */
}