/* Using Tailwind, but custom styles can be added */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body {
    font-family: 'Inter', sans-serif;
}

/* Styles for active navigation link */
.nav-link.active {
    background-color: #f3e8ff; /* bg-purple-100 */
    color: #8b5cf6; /* text-purple-700 */
}
.dark .nav-link.active {
    background-color: rgba(109, 40, 217, 0.5); /* dark:bg-purple-900/50 */
    color: #d8b4fe; /* dark:text-purple-300 */
}
.nav-link.active svg {
    color: #7c3aed; /* text-purple-600 */
}
.dark .nav-link.active svg {
    color: #a78bfa; /* dark:text-purple-400 */
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #4f46e5; /* purple-600 */
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #4338ca; /* purple-700 */
}
.dark ::-webkit-scrollbar-thumb {
    background: #6d28d9; /* purple-700 */
}
.dark ::-webkit-scrollbar-thumb:hover {
    background: #5b21b6;
}

/* Styles for input fields, as in the screenshot */
.form-input {
    width: 100%; /* ADDED: so fields take up full available width */
    padding-left: 1.5rem; /* px-6 */
    padding-right: 1.5rem; /* px-6 */
    padding-top: 0.75rem; /* py-3 */
    padding-bottom: 0.75rem; /* py-3 */
    border-width: 1px; /* border */
    border-color: #d1d5db; /* border-gray-300 */
    color: #1f2937; /* text-gray-900 */
    background-color: #f9fafb; /* bg-gray-50 */
    border-radius: 0.75rem; /* rounded-xl */
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; /* transition-colors */
    transition-duration: 300ms; /* duration-300 */
    outline: 2px solid transparent; /* focus:outline-none */
    outline-offset: 2px;
    font-size: 0.875rem; /* text-sm */
    line-height: 1.25rem;
}
.dark .form-input {
    border-color: #4b5563; /* dark:border-gray-600 */
    color: #f9fafb; /* dark:text-white */
    background-color: #374151; /* dark:bg-gray-800 */
}
.form-input::placeholder {
    color: #6b7280; /* placeholder-gray-500 */
}
.dark .form-input::placeholder {
    color: #9ca3af; /* dark:placeholder-gray-400 */
}
.form-input:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    border-color: #8b5cf6; /* focus:border-purple-500 */
    --tw-ring-color: #8b5cf6; /* focus:ring-purple-500 */
}


/* Styles for file input fields */
.form-file-input {
    display: block; /* block */
    width: 100%; /* w-full */
    font-size: 0.875rem; /* text-sm */
    color: #6b7280; /* text-gray-500 */
}
.form-file-input::-webkit-file-upload-button {
    margin-right: 1rem; /* file:mr-4 */
    padding-top: 0.5rem; /* file:py-2 */
    padding-bottom: 0.5rem; /* file:py-2 */
    padding-left: 1rem; /* file:px-4 */
    padding-right: 1rem; /* file:px-4 */
    border-radius: 0.5rem; /* file:rounded-lg */
    border-width: 0; /* file:border-0 */
    font-size: 0.875rem; /* file:text-sm */
    font-weight: 600; /* file:font-semibold */
    background-color: #f5f3ff; /* file:bg-purple-50 */
    color: #6d28d9; /* file:text-purple-700 */
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; /* transition-colors */
    transition-duration: 300ms; /* duration-300 */
}
.dark .form-file-input::-webkit-file-upload-button {
    background-color: rgba(67, 20, 150, 0.5); /* dark:file:bg-purple-900/50 */
    color: #d8b4fe; /* dark:file:text-purple-300 */
}
.form-file-input::-webkit-file-upload-button:hover {
    background-color: #ede9fe; /* hover:file:bg-purple-100 */
}
.dark .form-file-input::-webkit-file-upload-button:hover {
    background-color: #5b21b6; /* dark:hover:file:bg-purple-900 */
}


/* Styles for form section titles */
.form-section-title {
    font-size: 1.25rem; /* text-xl */
    line-height: 1.75rem;
    font-weight: 600; /* font-semibold */
    color: #1f2937; /* text-gray-800 */
    border-bottom-width: 1px; /* border-b */
    border-color: #e5e7eb; /* border-gray-200 */
    padding-bottom: 0.5rem; /* pb-2 */
}
.dark .form-section-title {
    color: #f9fafb; /* dark:text-gray-100 */
    border-color: #374151; /* dark:border-gray-700 */
}

/* Styles for buttons */
.btn-primary {
    padding-left: 1.5rem; /* px-6 */
    padding-right: 1.5rem; /* px-6 */
    padding-top: 0.625rem; /* py-2.5 */
    padding-bottom: 0.625rem; /* py-2.5 */
    background-color: #7c3aed; /* bg-purple-600 */
    color: #ffffff; /* text-white */
    font-weight: 600; /* font-semibold */
    border-radius: 0.75rem; /* rounded-xl */
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; /* transition-colors */
    transition-duration: 300ms; /* duration-300 */
    outline: 2px solid transparent; /* focus:outline-none */
    outline-offset: 2px;
}
.btn-primary:hover {
    background-color: #6d28d9; /* hover:bg-purple-700 */
}
.btn-primary:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: #8b5cf6; /* focus:ring-purple-500 */
    --tw-ring-offset-color: #ffffff; /* focus:ring-offset-2 */
}

.btn-secondary {
    padding-left: 1.5rem; /* px-6 */
    padding-right: 1.5rem; /* px-6 */
    padding-top: 0.625rem; /* py-2.5 */
    padding-bottom: 0.625rem; /* py-2.5 */
    background-color: #e5e7eb; /* bg-gray-200 */
    color: #1f2937; /* text-gray-800 */
    font-weight: 600; /* font-semibold */
    border-radius: 0.75rem; /* rounded-xl */
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; /* transition-colors */
    transition-duration: 300ms; /* duration-300 */
    outline: 2px solid transparent; /* focus:outline-none */
    outline-offset: 2px;
}
.btn-secondary:hover {
    background-color: #d1d5db; /* hover:bg-gray-300 */
}
.dark .btn-secondary {
    background-color: #374151; /* dark:bg-gray-700 */
    color: #e5e7eb; /* dark:text-gray-200 */
}
.dark .btn-secondary:hover {
    background-color: #4b5563; /* dark:hover:bg-gray-600 */
}
.btn-secondary:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: #8b5cf6; /* focus:ring-purple-500 */
    --tw-ring-offset-color: #ffffff; /* focus:ring-offset-2 */
}

/* Light theme specific styles */
html:not(.dark) .bg-gray-100 {
    background-color: #ffffff;
}

html:not(.dark) .text-gray-800 {
    color: #1f2937;
}

html:not(.dark) .bg-white {
    background-color: #ffffff;
    box-shadow: 0 15px 30px -8px rgba(0, 0, 0, 0.2), 0 6px 12px -4px rgba(0, 0, 0, 0.1);
}

html:not(.dark) .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

html:not(.dark) .border-gray-200 {
    border-color: #e5e7eb;
}

html:not(.dark) .text-purple-600 {
    color: #6d28d9;
}

html:not(.dark) .text-purple-800 {
    color: #581c87;
}

html:not(.dark) .text-gray-500 {
    color: #4b5563;
}

html:not(.dark) .nav-link {
    color: #4b5563;
}

html:not(.dark) .nav-link:hover {
    background-color: #f3e8ff;
    color: #6d28d9;
}

html:not(.dark) .nav-link svg {
    color: #6b7280;
}

html:not(.dark) .nav-link:hover svg {
    color: #6d28d9;
}

html:not(.dark) .bg-gray-200 {
    background-color: #e5e7eb;
}

html:not(.dark) .text-gray-700 {
    color: #374151;
}

html:not(.dark) .hover\:bg-gray-300:hover {
    background-color: #d1d5db;
}

html:not(.dark) .form-input {
    background-color: #ffffff;
    border-color: #d1d5db;
    color: #1f2937;
}

html:not(.dark) .form-input::placeholder {
    color: #6b7280;
}

html:not(.dark) .form-file-input {
    color: #4b5563;
}

html:not(.dark) .form-file-input::-webkit-file-upload-button {
    background-color: #ede9fe;
    color: #6d28d9;
}

html:not(.dark) .form-file-input::-webkit-file-upload-button:hover {
    background-color: #d8b4fe;
}

html:not(.dark) .form-section-title {
    color: #1f2937;
    border-color: #e5e7eb;
}

html:not(.dark) .summary-grid {
    color: #374151;
}

html:not(.dark) #theme-toggle {
    background-color: #e5e7eb;
    color: #4b5563;
}

html:not(.dark) #theme-toggle:hover {
    background-color: #d1d5db;
}

html:not(.dark) #theme-toggle svg {
    stroke: #1f2937;
}

html:not(.dark) .text-red-500 {
    color: #dc2626;
}
html:not(.dark) .text-red-700 {
    color: #b91c1c;
}

html:not(.dark) .bg-red-500 {
    background-color: #dc2626;
}

html:not(.dark) .hover\:bg-red-600:hover {
    background-color: #b91c1c;
}

html:not(.dark) .text-gray-200 {
    color: #6b7280;
}

html:not(.dark) .text-gray-300 {
    color: #4b5563;
}

html:not(.dark) .text-gray-400 {
    color: #374151;
}

html:not(.dark) .text-gray-600 {
    color: #374151;
}

html:not(.dark) .bg-gray-50 {
    background-color: #f9fafb;
}

html:not(.dark) .bg-gray-300 {
    background-color: #d1d5db;
}

html:not(.dark) .focus\:ring-gray-300:focus {
    --tw-ring-color: #9ca3af;
}

html:not(.dark) .text-gray-900 {
    color: #1a202c;
}

html:not(.dark) .text-white {
    color: #ffffff;
}

html:not(.dark) .dark\:text-gray-400 {
    color: #4b5563;
}

html:not(.dark) .dark\:text-gray-200 {
    color: #374151;
}

html:not(.dark) .dark\:bg-gray-800 {
    background-color: #ffffff;
}

html:not(.dark) .dark\:border-gray-700 {
    border-color: #e5e7eb;
}

html:not(.dark) .dark\:bg-gray-900 {
    background-color: #ffffff;
}

html:not(.dark) .bg-red-100 {
    background-color: #fee2e2;
}

html:not(.dark) .border-red-500 {
    border-color: #dc2626;
}

/* Custom styles for withdrawal modal tabs */
#withdrawal-modal .active-tab-border {
    border-color: #8b5cf6;
    color: #8b5cf6;
}
.dark #withdrawal-modal .active-tab-border {
    border-color: #a78bfa;
    color: #a78bfa;
}

/* NEW: Explicitly set text color to black for badges in light theme for readability */
html:not(.dark) .bg-yellow-100.text-yellow-800 { color: #000000; }
html:not(.dark) .bg-green-100.text-green-800 { color: #000000; }
html:not(.dark) .bg-red-100.text-red-800 { color: #000000; }
html:not(.dark) .bg-gray-100.text-gray-800 { color: #000000; }

/* NEW: Ensure icon colors are distinct in light theme */
/* These rules target the SVG directly within the colored background/text combination */
html:not(.dark) .bg-purple-100.text-purple-600 svg { fill: #6d28d9; stroke: none; }
html:not(.dark) .bg-green-100.text-green-600 svg { fill: #16a34a; stroke: none; }
html:not(.dark) .bg-blue-100.text-blue-600 svg { fill: #2563eb; stroke: none; }
/* For dark theme, ensure they are also filled (currentColor pulls from parent text color) */
.dark .bg-purple-100.text-purple-600 svg { fill: currentColor; stroke: none; }
.dark .bg-green-100.text-green-600 svg { fill: currentColor; stroke: none; }
.dark .bg-blue-100.text-blue-600 svg { fill: currentColor; stroke: none; }

/* Drag and drop visual feedback */
.performer-item.dragging,
.track-item.dragging {
    opacity: 0.5;
}

/* For highlighting the drop position */
.performer-item.drag-over-above,
.track-item.drag-over-above {
    border-top: 2px solid #8b5cf6; /* purple-500 */
    margin-top: -2px; /* Adjust to not increase element height and cause jumpiness */
}

.performer-item.drag-over-below,
.track-item.drag-over-below {
    border-bottom: 2px solid #8b5cf6; /* purple-500 */
    margin-bottom: -2px; /* Adjust to not increase element height */
}

.dark .performer-item.drag-over-above,
.dark .track-item.drag-over-above,
.dark .performer-item.drag-over-below,
.dark .track-item.drag-over-below {
    border-color: #a78bfa; /* purple-400 for dark mode */
}