/* 
 * Music Logger - The Outline Inspired Theme
 * Bold, editorial, high-contrast neo-brutalist design
 */

/* ========================================
   FONTS - Import Instrument Serif + System UI
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');

/* ========================================
   CSS VARIABLES - Color Palette
   ======================================== */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --bg-dark: #000000;
    --text-primary: #000000;
    --text-secondary: #666666;
    --text-inverse: #ffffff;
    --accent-purple: #661F4F;
    --accent-blue: #04284A;
    --accent-red: #CE2C36;
    --accent-teal: #14464A;
    --accent-gold: #FFE7D1;
    --accent-violet: #7D3C9E;
    --border-color: #000000;
    --border-light: #e0e0e0;
}

/* ========================================
   BASE STYLES
   ======================================== */
body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    line-height: 1.5;
    background-color: #f8f4ff;
  background-image:
    /* Highlight accents */
    radial-gradient(ellipse 15% 20% at 75% 15%, rgba(185, 255, 68, 0.4) 0%, transparent 70%),
    radial-gradient(ellipse 10% 15% at 20% 60%, rgba(185, 255, 68, 0.3) 0%, transparent 60%),
    radial-gradient(ellipse 8% 12% at 85% 70%, rgba(185, 255, 68, 0.35) 0%, transparent 65%),
    
    /* Pink abstract shapes */
    radial-gradient(ellipse 45% 50% at 80% 20%, rgba(255, 161, 200, 0.7) 0%, transparent 70%),
    radial-gradient(ellipse 35% 40% at 15% 75%, rgba(255, 161, 200, 0.6) 0%, transparent 65%),
    radial-gradient(ellipse 25% 35% at 60% 85%, rgba(255, 161, 200, 0.5) 0%, transparent 60%),
    
    /* Purple abstract shapes */
    radial-gradient(ellipse 50% 45% at 20% 25%, rgba(188, 153, 255, 0.7) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 70% 60%, rgba(188, 153, 255, 0.6) 0%, transparent 65%),
    radial-gradient(ellipse 30% 35% at 45% 40%, rgba(188, 153, 255, 0.5) 0%, transparent 60%);
  
  background-attachment: fixed;
}

/* ========================================
   TYPOGRAPHY - Bold Editorial Style
   ======================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Instrument Serif', Georgia, serif !important;
    font-weight: 400 !important;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

h1 { font-size: 3.5rem !important; }
h2 { font-size: 2.5rem !important; }
h3 { font-size: 1.75rem !important; }

/* ========================================
   LINKS - General styling
   ======================================== */
a {
    color: var(--text-primary) !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}

a:hover {
    color: var(--accent-purple) !important;
}

/* Artist/user links - purple underlined style */
a.text-purple-600,
a.text-purple-600.hover\:underline,
a.text-purple-600.hover\:text-purple-800 {
    color: var(--accent-purple) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 2px !important;
    font-weight: 600 !important;
}

a.text-purple-600:hover {
    color: var(--accent-violet) !important;
}

/* Purple text (non-link) - keep normal size */
.text-purple-600 {
    color: var(--accent-purple) !important;
}

.text-purple-700 {
    color: var(--accent-purple) !important;
}

/* ========================================
   NAVIGATION - Clean & Bold
   ======================================== */
nav, nav.bg-white {
    background-color: var(--bg-primary) !important;
    border-bottom: 3px solid var(--border-color) !important;
    box-shadow: none !important;
}

nav > div > div > a,
nav .flex a:not([class*="bg-"]) {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-size: 0.875rem !important;
    text-decoration: none !important;
}

nav > div > div > a:hover,
nav .flex a:not([class*="bg-"]):hover {
    color: var(--accent-purple) !important;
}

/* Site title in nav */
nav a.text-xl,
nav .text-xl {
    font-family: 'Instrument Serif', Georgia, serif !important;
    font-size: 1.5rem !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* ========================================
   CARDS - Bold Borders & High Contrast
   ======================================== */
.bg-white {
    background-color: var(--bg-primary) !important;
    border: 2px solid var(--border-color) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Card hover effect - offset shadow */
.song-card,
.post-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    border: 2px solid var(--border-color) !important;
    border-radius: 0 !important;
}

.song-card .relative .items-center {
    bottom: 12px;
    left: 12px;
}

.song-card:hover,
.post-card:hover {
    transform: translate(-4px, -4px) !important;
    box-shadow: 8px 8px 0 0 var(--border-color) !important;
}

/* ========================================
   BUTTONS - Solid, Bold, No Rounded
   ======================================== */
button[class*="bg-purple"],
button[class*="bg-green"],
button[class*="bg-blue"],
button[class*="bg-red"],
a[class*="bg-purple-600"],
a[class*="bg-green-600"],
a[class*="bg-blue-600"],
a[class*="bg-red-600"],
input[type="submit"],
.btn {
    border-radius: 0 !important;
    border: 2px solid var(--border-color) !important;
    box-shadow: 4px 4px 0 0 var(--border-color) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-size: 0.875rem !important;
    transition: transform 0.1s ease, box-shadow 0.1s ease !important;
    color: var(--text-inverse) !important;
    background-color: var(--accent-purple) !important;
}

button[class*="bg-purple"]:hover,
button[class*="bg-green"]:hover,
button[class*="bg-blue"]:hover,
button[class*="bg-red"]:hover,
a[class*="bg-purple-600"]:hover,
a[class*="bg-green-600"]:hover,
a[class*="bg-blue-600"]:hover,
a[class*="bg-red-600"]:hover,
input[type="submit"]:hover,
.btn:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0 0 var(--border-color) !important;
    color: var(--text-inverse) !important;
    background-color: #4a1639 !important;
}

button[class*="bg-purple"]:active,
a[class*="bg-purple-600"]:active,
input[type="submit"]:active,
.btn:active {
    transform: translate(2px, 2px) !important;
    box-shadow: 2px 2px 0 0 var(--border-color) !important;
}

/* Green buttons */
button[class*="bg-green"],
a[class*="bg-green"] {
    background-color: var(--accent-teal) !important;
}

button[class*="bg-green"]:hover,
a[class*="bg-green"]:hover {
    background-color: #0d3533 !important;
}

/* Blue buttons */
button[class*="bg-blue"],
a[class*="bg-blue"] {
    background-color: var(--accent-blue) !important;
}

button[class*="bg-blue"]:hover,
a[class*="bg-blue"]:hover {
    background-color: #021a30 !important;
}

/* Red buttons */
button[class*="bg-red"],
a[class*="bg-red"] {
    background-color: var(--accent-red) !important;
}

button[class*="bg-red"]:hover,
a[class*="bg-red"]:hover {
    background-color: #a12029 !important;
}

/* Secondary/gray buttons */
button[class*="bg-gray-200"],
a[class*="bg-gray-200"] {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border: 2px solid var(--border-color) !important;
}

button[class*="bg-gray-200"]:hover,
a[class*="bg-gray-200"]:hover {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* Tab buttons - no 3D effect */
nav button,
.border-b button,
button.border-b-2,
button.border-transparent {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    color: var(--text-primary) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: 600 !important;
}

nav button:hover,
.border-b button:hover,
button.border-b-2:hover,
button.border-transparent:hover {
    transform: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    color: var(--accent-purple) !important;
}

/* Active tab */
button.border-purple-600,
button.text-purple-600 {
    border-bottom: 3px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Small text buttons (delete, hide, etc) */
button.text-xs,
button.text-sm,
button.text-red-500,
button.text-purple-600 {
    border: none !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    background-color: transparent !important;
    font-weight: 500 !important;
}

button.text-xs:hover,
button.text-sm:hover,
button.text-red-500:hover,
button.text-purple-600:hover {
    transform: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

button.text-red-500 {
    color: var(--accent-red) !important;
}

button.text-red-500:hover {
    color: #a12029 !important;
}

/* ========================================
   PROFILE AVATAR - Fix purple on purple
   ======================================== */
.bg-purple-100.rounded-full,
.w-16.h-16.bg-purple-100,
.w-14.h-14.bg-purple-100,
div[class*="bg-purple-100"][class*="rounded-full"] {
    background-color: var(--bg-dark) !important;
    border: 2px solid var(--border-color) !important;
}

.bg-purple-100 .text-purple-600,
.bg-purple-100 span {
    color: var(--text-inverse) !important;
}

/* Artist placeholder squares */
.artist-placeholder,
div[class*="bg-gradient-to-br"][class*="from-purple"] {
    border: 2px solid var(--border-color) !important;
    border-radius: 0 !important;
    background: var(--accent-blue) !important;
    color: var(--text-inverse) !important;
}

.artist-placeholder span,
div[class*="bg-gradient-to-br"] span {
    color: var(--text-inverse) !important;
}

/* ========================================
   IMAGES - Duotone Effect
   ======================================== */
.artist-thumb,
.post-card img,
.song-card img {
    border: 2px solid var(--border-color) !important;
    border-radius: 0 !important;
    filter: grayscale(30%) contrast(1.1);
    transition: filter 0.2s ease !important;
}

.artist-thumb:hover,
.post-card img:hover,
.song-card img:hover {
    filter: grayscale(0%) contrast(1);
}

/* ========================================
   BADGES & TAGS - Solid, No Rounded
   ======================================== */
span[class*="bg-purple-100"],
span[class*="bg-blue-100"],
span[class*="bg-green-100"],
span[class*="bg-red-100"],
span[class*="bg-yellow-100"],
span[class*="bg-orange-100"],
span[class*="bg-gray-100"] {
    border-radius: 0 !important;
    border: 1px solid var(--border-color) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.05em !important;
}

/* Genre badge */
span.bg-purple-100 {
    background-color: var(--accent-purple) !important;
}

span.bg-purple-100.text-purple-700,
span.bg-purple-100 {
    color: var(--text-inverse) !important;
}

/* Mood badge */
span.bg-blue-100 {
    background-color: var(--accent-blue) !important;
}

span.bg-blue-100.text-blue-700,
span.bg-blue-100 {
    color: var(--text-inverse) !important;
}

/* Frequency badges */
span.bg-red-100 {
    background-color: var(--accent-red) !important;
    color: var(--text-inverse) !important;
}

span.bg-orange-100 {
    background-color: #ea580c !important;
    color: var(--text-inverse) !important;
}

span.bg-yellow-100 {
    background-color: #ca8a04 !important;
    color: var(--text-inverse) !important;
}

span.bg-green-100 {
    background-color: var(--accent-teal) !important;
    color: var(--text-inverse) !important;
}

span.bg-gray-100 {
    background-color: #374151 !important;
    color: var(--text-inverse) !important;
}

/* ========================================
   INPUTS - Clean, Bold Borders
   ======================================== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="search"],
select,
textarea {
    background-color: var(--bg-primary) !important;
    border: 2px solid var(--border-color) !important;
    border-radius: 0 !important;
    color: var(--text-primary) !important;
    font-size: 1rem !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent-purple) !important;
    outline: none !important;
    box-shadow: 4px 4px 0 0 var(--accent-purple) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-secondary) !important;
}

/* ========================================
   TABLES - Clean Grid
   ======================================== */
table {
    border: 2px solid var(--border-color) !important;
}

thead tr {
    background-color: var(--bg-dark) !important;
    color: var(--text-inverse) !important;
}

th {
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-size: 0.75rem !important;
    border-bottom: 2px solid var(--border-color) !important;
    color: var(--text-inverse) !important;
}

tbody tr {
    border-bottom: 1px solid var(--border-light) !important;
}

tbody tr:hover,
.hover\:bg-gray-50:hover {
    background-color: var(--bg-secondary) !important;
}

/* ========================================
   TABS - Underline Style
   ======================================== */
.border-b-2.border-purple-600 {
    border-color: var(--border-color) !important;
    border-width: 3px !important;
}

.border-b nav,
.border-b {
    border-color: var(--border-color) !important;
}

/* ========================================
   STAR RATINGS
   ======================================== */
.text-yellow-500 {
    color: #000000 !important;
    text-shadow: none !important;
}

/* ========================================
   MODALS - Bold Frame
   ======================================== */
#artistModal .bg-white,
.modal-content {
    border: 3px solid var(--border-color) !important;
    border-radius: 0 !important;
    box-shadow: 12px 12px 0 0 rgba(0,0,0,0.2) !important;
}

.bg-black.bg-opacity-60 {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

/* ========================================
   CAPTION/QUOTE BLOCKS
   ======================================== */
.border-l-4.border-purple-400,
.border-l-4 {
    border-color: var(--border-color) !important;
    border-width: 4px !important;
    background-color: var(--bg-secondary) !important;
}

/* ========================================
   PROFILE HEADER
   ======================================== */
.rounded-full {
    border-radius: 0 !important;
}

/* ========================================
   STATS BOXES
   ======================================== */
.text-center.px-4 {
    border-left-color: var(--border-color) !important;
}

/* ========================================
   MARQUEE - Bold Uppercase
   ======================================== */
.marquee-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    background-color: var(--bg-dark) !important;
    border-top: 3px solid var(--border-color);
    border-bottom: 3px solid var(--border-color);
    padding: 1rem 0;
}

.marquee-content {
    display: inline-block;
    animation: marquee 25s linear infinite;
    font-family: 'Instrument Serif', Georgia, serif !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-inverse) !important;
}

.marquee-content span {
    display: inline-block;
    padding: 0 2rem;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.marquee-container:hover .marquee-content {
    animation-play-state: paused;
}

/* ========================================
   ARTIST GRID - Clean Squares
   ======================================== */
.artist-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0 !important;
    border: 2px solid var(--border-color);
}

@media (max-width: 1024px) { .artist-grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 768px) { .artist-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px) { .artist-grid { grid-template-columns: repeat(3, 1fr); } }

.artist-thumb {
    aspect-ratio: 1;
    object-fit: cover;
    width: 100%;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
    border: 1px solid var(--border-color) !important;
}

.artist-thumb:hover {
    opacity: 0.8;
    z-index: 10;
}

/* ========================================
   FOOTER
   ======================================== */
footer {
    border-top: 3px solid var(--border-color) !important;
    background-color: var(--bg-primary) !important;
}

footer a {
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-size: 0.75rem !important;
}

/* ========================================
   TEXT COLORS - Override for Contrast
   ======================================== */
.text-gray-800,
.text-gray-700,
.text-gray-600 {
    color: var(--text-primary) !important;
}

.text-gray-500,
.text-gray-400 {
    color: var(--text-secondary) !important;
}

/* ========================================
   SHADOWS - Remove soft shadows
   ======================================== */
.shadow-lg,
.shadow-xl,
.shadow-2xl,
.shadow {
    box-shadow: none !important;
}

/* ========================================
   ROUNDED CORNERS - Remove all
   ======================================== */
.rounded-lg,
.rounded-xl,
.rounded-2xl,
.rounded-md,
.rounded {
    border-radius: 0 !important;
}

/* ========================================
   BACKGROUND COLORS - Clean White
   ======================================== */
.bg-gray-50 {
    background-color: var(--bg-secondary) !important;
}

.bg-purple-50,
.bg-blue-50,
.bg-green-50,
.bg-red-50 {
    background-color: var(--bg-secondary) !important;
}

/* ========================================
   ALERT/NOTICE BOXES
   ======================================== */
div.bg-green-50,
div.bg-red-50 {
    border: 2px solid var(--border-color) !important;
    border-radius: 0 !important;
}

/* ========================================
   SOCIAL LINKS
   ======================================== */
.text-pink-600 {
    color: var(--accent-red) !important;
}

.text-blue-600 {
    color: var(--accent-blue) !important;
}

/* ========================================
   SCROLLBAR - Minimal
   ======================================== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--text-primary);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* ========================================
   ANIMATIONS - Subtle
   ======================================== */
.transition {
    transition: all 0.15s ease !important;
}

/* ========================================
   SPECIAL ELEMENTS
   ======================================== */

/* Loading spinner */
.animate-spin {
    border-color: var(--border-color) !important;
    border-top-color: transparent !important;
}

/* Empty states */
.text-gray-300 {
    color: var(--border-light) !important;
}

/* Comment section styling */
#commentsList .bg-gray-50,
.bg-gray-50.rounded {
    border: 1px solid var(--border-color) !important;
}

/* Comment input area */
.flex.gap-2 input[type="text"] {
    flex: 1;
}

/* ========================================
   POST ARTIST THUMBNAILS
   ======================================== */
.post-artist-thumb {
    width: 60px !important;
    height: 60px !important;
    object-fit: cover;
    border: 2px solid var(--border-color) !important;
    border-radius: 0 !important;
}

/* Gradient placeholder for post artist */
.post-artist-thumb.bg-gradient-to-br,
div.w-14.h-14.bg-gradient-to-br,
div[class*="from-purple-400"][class*="to-pink-400"] {
    background: var(--accent-blue) !important;
}

div[class*="from-purple-400"][class*="to-pink-400"] span {
    color: var(--text-inverse) !important;
}