html,
body {
     height: 90%;
     background-color: #000;
}

body {
     display: flex;
     flex-direction: column;
}

p {
     color: #fff;
}

a {
     color: #fff;
     text-decoration: none;
}

ol {
     color: #fff;
}

a:hover {
     color: #fff;
     text-decoration: underline;
}

.auth-links a {
     color: #000 !important;
     text-decoration: none;
}

.auth-links a:hover {
     color: #000 !important;
     text-decoration: underline;}

.main-wrapper {
     flex: 1;
}

h1 {
     color: #fff;
     text-align: center;
}
h2 {
     color: #fff;
     text-align: left;
}

h3 {
     color: #fff;
     text-align: center;
}

h4 {
     color: #fff;
     text-align: left;
}

.p {
     color: #fff;
}

/* Header */
header {
     background-color: #000;
     width: 90%;
     color: #ff0;
     margin-top: 5px;
     /* NEW */
}

.header-inner {
     display: flex;
     align-items: center;
     gap: 1rem;
     height: 4rem;
     padding: 0 5%;
     max-width: 100%;
}

.logo {
     margin-top: 20px;
     /* slightly reduced to stay proportional */
     height: 80px;
     /* 20% smaller */
     width: auto;
     align-content: center;
}

.logo img {
     width: 80px;
     /* reduced from 100px by ~20% */
     height: auto;
}

@media (max-width: 768px) {
     .logo img {
          width: 72px;
          /* 10% reduction for mobile */
          height: auto;
     }
}

.btn {
     background-color: #000;
     /* Black main color */
     color: #ff0;
     /* Yellow text */
     padding: 0.5rem 1.25rem;
     border: 2px solid #ff0;
     /* Yellow border */
     border-radius: 6px;
     font-weight: bold;
     cursor: pointer;
     display: inline-block;
     text-align: center;
     transition: 0.2s ease-in-out;
}

.btn:hover {
     background-color: #ff0;
     /* Yellow hover */
     color: #000;
     /* Black text */
     border-color: #ff0;
}

.members {
     color: #fff;
     padding: 1rem;
     min-width: 250px;
    max-width: 300px;
    text-align: left;
}

.list {
     color: #fff;
     list-style-type: none;
     text-align: left;
     font-size: 10px;
     padding-left: 2px;
}

/* Sidebar */
aside {
     color: #fff;
     padding: 1rem;
     min-width: 300px;
     max-width: 450px;
     background-color: #000;
}

aside a {
     color: #fff !important;
     text-decoration: none;
}

aside a:hover {
     color: #ff0 !important;
     text-decoration: underline;
}

/* Main Wrapper */
.main-wrapper {
     display: flex;
     width: 90%;
     margin: 2rem auto 0 auto;
     gap: 1rem;
}

main {
     width: 85%;
     padding: .5rem;
     background-color: #0a0446;
     color: #000;
     border: #ff0 solid 2px;
}

/* ============================================= */
/* ================ Footer START =============== */
/* ============================================= */
*,
*::before,
*::after {
     box-sizing: border-box;
}

footer {
     background-color: #000;
     color: #fff;
     padding: 1rem 5%;
     border-top: 2px solid #ff0;
     width: 100%;
     font-size: 0.85rem;
     line-height: 1.5;
     margin-top: auto;
}

.footer-grid {
     display: flex;
     flex-wrap: nowrap;
     justify-content: space-between;
     align-items: flex-start;
     gap: 2rem;
}

.footer-col,
.footer-safety {
     flex: 1;
     min-width: 0;
}

.footer-col h6 {
     margin-bottom: 0.5rem;
     font-style: italic;
     font-weight: bold;
     font-size: 0.9rem;
     color: #ff0;
}

.footer-col ul {
     list-style: none;
     padding: 0;
     margin: 0;
     font-size: 0.85rem;
}

.footer-col li {
     margin-bottom: 0.4rem;
}

.footer-col a {
     color: #ff0;
     text-decoration: none;
}

.footer-col a:hover {
     color: #fff;
     text-decoration: underline;
}

.footer-safety {
     background-color: #111;
     padding: .5rem;
     border-left: 2px solid #ff0;
     color: #fff;
}

.footer-safety h5 {
     margin-bottom: 0.6rem;
     color: #ff0;
     font-size: 0.95rem;
     font-weight: bold;
}

.footer-safety ol {
     padding-left: 1rem;
     margin: 0;
     font-size: 0.85rem;
     color: #fff;
}

.footer-safety li {
     margin-bottom: 0.4rem;
}

.footer-bottom {
     border-top: 1px solid #ff0;
     padding-top: 1rem;
     text-align: center;
     font-size: 0.75rem;
     color: #ccc;
}

.footer-note {
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     align-items: center;
     gap: 5px;
}

.footer-note .line {
     text-align: center;
}

@media (max-width: 768px) {
     .footer-grid {
          flex-direction: column;
          gap: 2rem;
     }

     .footer-col,
     .footer-safety {
          flex: 1 1 80%;
          width: 80%;
     }

     .footer-note {
          text-align: center;
     }
}

/* ================ Footer END ================== */


/* Artist Sidebar Navigation */
.artist-menu {
     list-style: none;
     padding: 0;
     margin: 0;
}

.artist-menu li {
     margin-bottom: 1rem;
}

.artist-menu a,
.artist-menu button {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     color: #fff;
     background: none;
     border: none;
     cursor: pointer;
     text-decoration: none;
     font-size: 1rem;
     width: 100%;
     text-align: left;
}

.artist-menu a:hover,
.artist-menu button:hover {
     color: #ff0;
     text-decoration: underline;
}

.artist-menu .icon {
     width: 20px;
     height: 20px;
     stroke: currentColor;
}

/* User Profile */
.user-profile {
     background-color: #000;
     border: 1px solid #ffff00;
     color: #ffff00;
}

.user-profile p {
     margin: 0.5rem 0;
     color: #000;
}

.user-profile a {
     color: #fff;
     background-color: #000;
     padding: 0.3rem 0.75rem;
     border-radius: 5px;
     text-decoration: none;
     display: inline-block;
     margin-top: 0.5rem;
}

.user-profile a:hover {
     background-color: #ff0;
     color: #000;
}

.profile-photo {
     width: 100px;
     height: auto;
     border-radius: 50%;
     display: block;
     margin: 0.5rem 0;
}

/* Dashboard Grid */
.dashboard-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1rem;
     width: 100%;
     align-items: start;
     justify-items: stretch;
     /* <-- FIX */
     box-sizing: border-box;
}

/* Responsive fallback: stack boxes on smaller screens */
@media (max-width: 768px) {
     .dashboard-grid {
          grid-template-columns: 1fr;
     }
}

.dashboard-box {
     background-color: #000;
     color: #fff;
     padding: 20px;
     box-shadow: -2px -2px 2px #ffd700, 2px 2px 2px #ffd700;
     border-radius: 5px;

     width: 100%;
     /* full column width */
     height: auto;
     min-width: unset;
     /* <-- FIX */
     min-height: 180px;
     /* keep height, height is fine */

     box-sizing: border-box;
     display: block;
     border: 3px solid gold;
     overflow: hidden;
}

/* Welcome Layout */
.welcome-layout {
     display: flex;
     width: 100%;
     max-width: 1400px;
     margin: .5rem;
     gap: .2rem;
}

.welcome-side {
     flex: 0 0 10%;
     background-color: #000;
}

.welcome-main {
     flex: 0 0 60%;
}

@media (max-width: 768px) {
     .welcome-layout {
          flex-direction: column;
     }

     .welcome-side {
          flex: 0 0 auto;
          width: 100%;
     }

     .welcome-main {
          width: 100%;
     }
}

/* Ad Banner */
.ad-banner-section {
     text-align: center;
     height: auto;
     width: 250px;
}

.ad-banner-title {
     color: #ff0;
     margin-bottom: 0.5rem;
}

.ad-banner-frame {
     width: 100%;
     max-width: 400px;
     margin: 0 auto 1rem;
     display: block;
     height: auto;
}

.row {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
 }
 
 .col-sm-4 {
     flex: 0 0 33.3333%;
     max-width: 33.3333%;
     box-sizing: border-box;
     padding: 0.5rem;
 }
 
 @media (max-width: 768px) {
     .col-sm-4 {
         flex: 0 0 100%;
         max-width: 100%;
     }
 }
 .ad-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-bottom: 1rem;
      text-align: center;
 }

 .ad-col {
      width: 30%;
      box-sizing: border-box;
      margin-bottom: 1rem;
 }

 /* Responsive: Stack on small screens */
 @media (max-width: 768px) {
      .ad-col {
           width: 100%;
      }
 }

 form .form-row {
      display: flex;
      align-items: center;
      margin-bottom: 0.75rem;
      gap: 0.75rem;
      font-size: 0.9rem;
 }

 form .form-row label {
      width: 140px;
      text-align: right;
      font-weight: 600;
      font-size: 0.9rem;
 }

 form .form-row input,
 form .form-row select {
      flex: 1;
      padding: 0.4rem 0.6rem;
      border-radius: 4px;
      border: 1px solid #ccc;
      font-size: 0.9rem;
      width: 100%;
      box-sizing: border-box;
 }

 form .form-row.terms {
      align-items: flex-start;
 }

 .dashboard-box {
      width: 100%;
      max-width: 500px;
      margin: auto;
      background-color: #000;
      color: #fff;
      padding: 1.5rem;
      box-sizing: border-box;
 }


 .container {
      width: 100%;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
      padding: 1rem 0;
      box-sizing: border-box;}

           .calendar-container {
                text-align: center;
                padding: 1px;
           }
     
           .calendar-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 1px;
          }
     
           .calendar-nav a {
                margin: 0 1px;
                text-decoration: none;
                color: #ffff00;
           }
     
           .calendar-grid {
                display: grid;
                grid-template-columns: repeat(7, 1fr);
                gap: 1px;
           }
     
           .calendar-day-header {
                font-weight: bold;
                padding: 1px;
                background-color: #000;
                border-bottom: gold solid 1px;
                              font-size: .85em;
          }
     
           .calendar-cell {
                padding: 1px;
                background-color: #000;
                border: 1px solid gold;
                text-align: center;
                font-size: .80em;
           }
     
           .calendar-cell.empty {
                background-color: transparent;
                border: none;
           }


.contact-flex {
     display: flex;
     gap: 2rem;
}

.contact-left,
.contact-right {
     width: 50%;
}

@media (max-width: 768px) {
     .contact-flex {
          flex-direction: column;
     }

     .contact-left,
     .contact-right {
          width: 100%;
     }
}

.band-list-row {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     margin-bottom: 20px;
}

.band-item {
     background: #000;
     border: 2px solid #ffff00;
     padding: 8px 16px;
     border-radius: 6px;
     color: #ffff00;
     font-weight: bold;
     text-decoration: none;
}

.band-item:hover {
     background: #000;
     color: #ff0;
}

          style sheet  merge 

                    .btn {
                         display: inline-block;
                         padding: 10px 18px;
                         border-radius: 6px;
                         font-weight: bold;
                         text-decoration: none;
                         border: 2px solid gold;
                         background: #000;
                         color: gold;
                         transition: 0.3s;
                    }
          
                    .btn:hover {
                         background: gold;
                         color: #000;
                    }
          
                    /* Blue edit button option */
                    .btn-blue {
                         border: 2px solid gold;
                         color: #1e90ff;
                    }
          
                    .btn-blue:hover {
                         background: #1e90ff;
                         color: #000;
                    }
          
                    /* Gold back button option */
                    .btn-gold {
                         border-color: gold;
                         color: gold;
                    }
          
                    .btn-gold:hover {
                         background: gold;
                         color: #000;
                    }

                                        .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;
                                             }
                                        }

    .autocomplete-dropdown {
        background: #000;
        border: 1px solid #ff0;
        position: absolute;
        width: 100%;
        z-index: 1000;
    }

    .autocomplete-dropdown div {
        padding: 8px;
        cursor: pointer;
    }

    .autocomplete-dropdown div:hover {
        background: #222;
    }