/* ============================================================
   440MUSIC DASHBOARD THEME (Clean + Optimized)
   Black • Yellow • Grey • Blue • Red
   ============================================================ */

/* GLOBAL OVERRIDES */
body {
     background-color: #000;
     color: #ffff00;
     margin: 0;
     padding: 0;
}

/* Remove Tailwind background overrides */
.bg-white,
.bg-gray-100,
.bg-gray-800,
.bg-gray-900 {
     background-color: #000 !important;
}

.text-gray-600,
.text-gray-700,
.text-gray-800,
.text-gray-900 {
     color: #ffff00 !important;
}

/* ============================================================
   HEADER
   ============================================================ */

.dashboard-header {
     background: #000;
     border-bottom: 2px solid #ffff00;
     padding: 6px 12px;
}

.dashboard-header h1,
.dashboard-header h2,
.dashboard-header h3 {
     color: #ffff00;
     margin: 0;
}

/* ============================================================
   LAYOUT GRID — SIDEBAR + MAIN CONTENT
   ============================================================ */

.dashboard-layout {
     display: grid;
     grid-template-columns: 260px 1fr;
     min-height: calc(100vh - 60px);
     /* space underneath main nav */
     gap: 0;
}

/* ============================================================
   SIDEBAR
   ============================================================ */

.dashboard-sidebar {
     width: 260px;
     background: #000;
     border-right: 2px solid #ffff00;
     padding: 20px;
}

.sidebar-logo {
     text-align: center;
     margin-bottom: 20px;
}

.sidebar-logo-img {
     width: 140px;
     height: auto;
}

.sidebar-nav {
     display: flex;
     flex-direction: column;
     gap: 12px;
}

.sidebar-link {
     display: block;
     padding: 10px 14px;
     border: 1px solid #ffff00;
     border-radius: 4px;
     color: #ffff00;
     text-decoration: none;
     font-weight: bold;
}

.sidebar-link:hover,
.sidebar-link.active {
     background: #ffff00;
     color: #000;
}

.logout-btn {
     background: none;
     border: 1px solid #ffff00;
     color: #ffff00;
     padding: 10px;
     width: 100%;
     text-align: left;
     border-radius: 4px;
     cursor: pointer;
}

.logout-btn:hover {
     background: #ffff00;
     color: #000;
}

/* ============================================================
   MAIN CONTENT AREA
   ============================================================ */

.dashboard-main {
     padding: 30px;
     background: #0a0446;
     /* deep dark blue for contrast */
     min-height: 100%;
}

/* ============================================================
   PROFILE HEADER (Image + Welcome)
   ============================================================ */

.profile-header {
     display: flex;
     align-items: center;
     gap: 18px;
     margin-bottom: 30px;
}

.profile-photo {
     width: 70px;
     height: 70px;
     border-radius: 50%;
     border: 3px solid #ffff00;
     object-fit: cover;
}

.profile-welcome h1 {
     font-size: 1.8rem;
     margin: 0;
     color: #ffff00;
}

.profile-welcome p {
     margin-top: 4px;
     color: #ffff00;
}

/* ============================================================
   DASHBOARD WIDGET CARDS
   ============================================================ */

.dashboard-widgets {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     gap: 16px;
     margin-top: 20px;
}

.widget-box {
     background: #111;
     border: 2px solid #ffff00;
     padding: 18px;
     border-radius: 6px;
     color: #ffff00;
     box-shadow: 0 0 8px #ff0;
}

.widget-box h3 {
     margin-top: 0;
     margin-bottom: 10px;
     font-size: 1.3rem;
}

/* ============================================================
   FORMS
   ============================================================ */

.dashboard-box input,
.dashboard-box textarea,
.dashboard-box select {
     background-color: #000 !important;
     color: #ffff00 !important;
     border: 1px solid #ffff00 !important;
     border-radius: 4px;
     padding: 10px;
}

.dashboard-box label {
     color: #ffff00;
     font-weight: bold;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn-yellow {
     background: #ffff00;
     color: #000;
     border: 2px solid #ffff00;
     font-weight: bold;
     padding: 10px 20px;
     border-radius: 4px;
     cursor: pointer;
}

.btn-yellow:hover {
     background: #000;
     color: #ffff00;
}

/* ============================================================
   DASHBOARD CARDS (for legacy grid pages)
   ============================================================ */

.dashboard-card {
     background: #111;
     border: 2px solid #ffff00;
     padding: 20px;
     border-radius: 6px;
     color: #ffff00;
     box-shadow: 0 0 10px #ff0;
     min-height: 140px;
     transition: 0.3s;
}

.dashboard-card:hover {
     background: #ffff00;
     color: #000;
     transform: translateY(-3px);
}

.dashboard-card h3 {
     margin-bottom: 10px;
     font-size: 1.4rem;
}

/* ============================================================
   PAGE CONTENT WRAPPER
   ============================================================ */

.page-content {
     padding: 20px;
}

/* Sidebar Navigation Links */
.dashboard-sidebar .sidebar-link {
     display: block;
     padding: 10px 14px;
     border: 1px solid #ffff00;
     border-radius: 4px;
     color: #ffff00;
     text-decoration: none;
     font-weight: bold;
     background: #000;
     transition: 0.2s;
}

.dashboard-sidebar .sidebar-link:hover,
.dashboard-sidebar .sidebar-link:focus {
     background: #ffff00 !important;
     color: #000 !important;
}

/* Logout button consistent with sidebar links */
.dashboard-sidebar .logout-btn {
     display: block;
     width: 100%;
     background: #000;
     color: #ffff00;
     padding: 10px 14px;
     text-align: left;
     border: 1px solid #ffff00;
     border-radius: 4px;
     cursor: pointer;
}

.dashboard-sidebar .logout-btn:hover {
     background: #ffff00 !important;
     color: #000 !important;
}

.form-group {
     margin-bottom: 15px;
}

.form-group label {
     color: #ffff00;
     font-weight: bold;
}

.form-control {
     width: 100%;
     padding: 10px;
     margin-top: 6px;
     background: #000;
     border: 1px solid #ffff00;
     border-radius: 4px;
     color: #ffff00;
}

.profile-photo {
     width: 120px;
     height: auto;
     border-radius: 50%;
     border: 2px solid #ffff00;
}

.band-profile-image {
     width: 270px;
     height: auto;
     border-radius: 6px;
}

/* Mobile + Tablet */
@media screen and (max-width: 768px) {
     .band-profile-image {
          width: 45px;
          height: auto;
     }
}

.success {
     border: 2px solid #00ff00;
     background-color: #e6ffe6;
     color: #225500;
}