/* =====================================================
   NOTHING BUT FUN
   CLIENT PORTAL — PREMIUM BRAND THEME V3.1

   Complete replacement stylesheet
   Designed for DJ Event Planner client portal

   Primary Red:    #B40808
   Marquee Yellow: #FFC629
   Warm Cream:     #FFF7E6
   Supporting Navy:#102846
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;500;600;700;800;900&display=swap');

:root {
  --nbf-red: #B40808;
  --nbf-red-dark: #8F0505;
  --nbf-yellow: #FFC629;
  --nbf-yellow-light: #FFE18A;
  --nbf-cream: #FFF7E6;
  --nbf-cream-soft: #FFFBF4;
  --nbf-navy: #102846;
  --nbf-white: #FFFFFF;
  --nbf-border: #E9DED0;
  --nbf-shadow: 0 8px 28px rgba(70,30,10,.07);
}

/* =====================================================
   1. PAGE FOUNDATION
   ===================================================== */

html,
body#clientpages.djep-body,
body#clientpages.djep-body[style] {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--nbf-cream) !important;
  color: var(--nbf-navy) !important;
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-size: 15px;
  line-height: 1.7;
}

#djep-page {
  width: 100% !important;
  min-height: 100vh;
  background: var(--nbf-cream) !important;
  overflow-x: hidden;
}

#djep-page,
#djep-page * {
  box-sizing: border-box;
}

/* =====================================================
   2. BRANDED HEADER
   ===================================================== */

#djep-header {
  width: 100% !important;
  padding: 16px 20px 14px !important;
  background: var(--nbf-red) !important;
  text-align: center;
}

#djep-header br {
  display: none;
}

#djep-header img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: min(90%, 310px) !important;
  max-height: 175px;
  margin: 0 auto;
  object-fit: contain;
}

/* =====================================================
   3. NAVIGATION
   ===================================================== */

#djep-navbar {
  width: 100% !important;
  margin: 0 0 32px !important;
  padding: 0 16px 17px !important;
  background: var(--nbf-red) !important;
  border-top: 3px solid var(--nbf-yellow);
}

ul#djep-navigation {
  display: flex !important;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  overflow: visible !important;
}

ul#djep-navigation li {
  display: block !important;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  list-style: none !important;
}

ul#djep-navigation li a,
ul#djep-navigation li a:link,
ul#djep-navigation li a:visited {
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 118px;
  padding: 12px 20px !important;
  background: rgba(255,255,255,.13) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 7px !important;
  color: var(--nbf-white) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  letter-spacing: .02em;
  text-align: center;
  text-decoration: none !important;
  text-transform: uppercase;
  transition: background .2s, transform .2s;
}

ul#djep-navigation li a:hover {
  background: var(--nbf-red-dark) !important;
  transform: translateY(-1px);
}

ul#djep-navigation li.selected a,
ul#djep-navigation li.selected a:link,
ul#djep-navigation li.selected a:visited {
  background: var(--nbf-yellow) !important;
  border-color: var(--nbf-yellow) !important;
  color: var(--nbf-navy) !important;
}

ul#djep-navigation li.shadow {
  display: none !important;
}

/* =====================================================
   4. MAIN DASHBOARD CONTAINER
   ===================================================== */

#djep-content {
  width: calc(100% - 36px) !important;
  max-width: 1140px !important;
  margin: 0 auto 64px !important;
  padding: 40px 44px 24px !important;
  background: var(--nbf-white) !important;
  border: 1px solid var(--nbf-border);
  border-radius: 16px;
  box-shadow: var(--nbf-shadow);
  color: var(--nbf-navy) !important;
}

/* =====================================================
   5. WELCOME SECTION
   ===================================================== */

.djep-welcometextbox {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 32px !important;
  padding: 0 0 25px !important;
  border-bottom: 1px solid var(--nbf-border);
  color: var(--nbf-navy);
}

h1.djep-h1 {
  margin: 0 0 16px !important;
  color: var(--nbf-red) !important;
  font-family: 'Bebas Neue', Impact, sans-serif !important;
  font-size: clamp(36px, 4.5vw, 48px) !important;
  font-weight: 400 !important;
  line-height: 1.12 !important;
  letter-spacing: .01em;
}

h2.djep-h2 {
  margin: 24px 0 9px !important;
  color: var(--nbf-red) !important;
  font-family: 'Bebas Neue', Impact, sans-serif !important;
  font-size: 29px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
}

h2.djep-h2 u {
  text-decoration: none !important;
}

.djep-welcometextbox p {
  margin: 10px 0 15px !important;
  color: var(--nbf-navy) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.85 !important;
}

.djep-welcometextbox strong {
  color: var(--nbf-red);
  font-weight: 800;
}

/* =====================================================
   6. EVENT AND EMAIL SECTIONS
   ===================================================== */

.djep-eventlistbox,
.djep-latestemailsbox {
  width: 100% !important;
  margin: 26px 0 !important;
  padding: 25px !important;
  background: var(--nbf-white) !important;
  border: 1px solid var(--nbf-border);
  border-radius: 12px;
  box-shadow: 0 3px 14px rgba(70,30,10,.035);
}

.djep-titlebar,
.djep-titlebarsmall,
.djep-titlebarsmaller {
  width: 100% !important;
  height: auto !important;
  margin: 0 0 22px !important;
  padding: 15px 18px !important;
  background: var(--nbf-cream) !important;
  border: 0 !important;
  border-left: 5px solid var(--nbf-red) !important;
  border-radius: 5px;
  color: var(--nbf-red) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
}

/* =====================================================
   7. UPCOMING EVENT CARD
   ===================================================== */

.djep-singleeventdiv {
  width: 100% !important;
  margin: 0 !important;
  padding: 25px !important;
  background: var(--nbf-cream-soft) !important;
  border: 1px solid var(--nbf-border);
  border-radius: 10px;
  color: var(--nbf-navy);
  font-size: 14px !important;
}

.djep-singleeventdiv b {
  color: var(--nbf-red);
  font-size: 16px;
  font-weight: 800;
}

.djep-singleeventdiv table {
  width: 100% !important;
  border-collapse: separate;
}

.djep-singleeventdiv td {
  padding: 6px !important;
  color: var(--nbf-navy);
  font-size: 14px !important;
  line-height: 1.7;
}

/* =====================================================
   8. CALENDAR DATE — OVERLAP FIX
   ===================================================== */

.calendar {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 88px !important;
  min-width: 88px;
  height: 106px !important;
  margin: 0 auto;
  padding: 0 !important;
  background: var(--nbf-white) !important;
  border: 1px solid var(--nbf-border) !important;
  border-radius: 9px !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.06);
  overflow: hidden;
  text-align: center;
}

.calendar .month {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 5px 0 !important;
  background: var(--nbf-red) !important;
  background-image: none !important;
  color: white !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  text-transform: uppercase;
}

.calendar .day {
  display: block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  background: none !important;
  color: var(--nbf-navy) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 32px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
}

.calendar .year {
  display: block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 0 5px !important;
  color: #667085 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

/* =====================================================
   9. EVENT ACTION BUTTONS
   ===================================================== */

a.djep-planeventbutton,
a.djep-eventdetailsbutton,
a.djep-paymentbutton,
a.djep-readviewbutton,
a.djep-viewallbutton {
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  min-width: 110px;
  min-height: 44px;
  margin: 4px !important;
  padding: 12px 17px !important;
  background: var(--nbf-yellow) !important;
  background-image: none !important;
  border: 1px solid #E7AF00 !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  color: var(--nbf-navy) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  text-align: center;
  text-decoration: none !important;
  text-shadow: none !important;
  filter: none !important;
  cursor: pointer;
  transition: background .2s, transform .2s;
}

a.djep-planeventbutton:hover,
a.djep-eventdetailsbutton:hover,
a.djep-paymentbutton:hover,
a.djep-readviewbutton:hover,
a.djep-viewallbutton:hover {
  background: var(--nbf-yellow-light) !important;
  color: var(--nbf-navy) !important;
  transform: translateY(-1px);
}

/* Smaller email action buttons */

a.djep-readviewbutton,
a.djep-viewallbutton {
  min-width: 75px;
  padding: 9px 14px !important;
}

/* =====================================================
   10. EMAIL HISTORY
   ===================================================== */

#listtable-emails {
  width: 100% !important;
  border-collapse: collapse;
}

#listtable-emails td {
  padding: 15px 12px !important;
  border-bottom: 1px solid var(--nbf-border);
  color: var(--nbf-navy);
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  line-height: 1.6;
}

#listtable-emails tr:hover {
  background: var(--nbf-cream-soft);
}

/* =====================================================
   11. GENERAL LINKS AND FORM ELEMENTS
   ===================================================== */

#djep-content a:not([class]) {
  color: var(--nbf-red);
  text-underline-offset: 3px;
}

#djep-content input:not([type="checkbox"]):not([type="radio"]),
#djep-content select,
#djep-content textarea {
  max-width: 100%;
  border-radius: 7px;
  font-family: 'Montserrat', sans-serif;
}

#djep-content input:focus-visible,
#djep-content select:focus-visible,
#djep-content textarea:focus-visible,
#djep-content a:focus-visible {
  outline: 3px solid var(--nbf-yellow);
  outline-offset: 3px;
}

/* =====================================================
   12. SPACING REFINEMENTS
   ===================================================== */

.djep-latestemailsbox {
  margin-bottom: 0 !important;
}

#djep-content > br {
  display: none;
}

/* =====================================================
   13. MOBILE RESPONSIVENESS
   ===================================================== */

@media (max-width: 767px) {

  #djep-header {
    padding: 15px 12px !important;
  }

  #djep-header img {
    max-width: 85% !important;
  }

  #djep-navbar {
    margin-bottom: 18px !important;
    padding: 0 10px 15px !important;
  }

  ul#djep-navigation li {
    flex: 1 1 120px;
  }

  ul#djep-navigation li a,
  ul#djep-navigation li a:link,
  ul#djep-navigation li a:visited {
    min-width: 0;
    padding: 11px 9px !important;
    font-size: 12px !important;
  }

  #djep-content {
    width: calc(100% - 20px) !important;
    margin: 0 auto 35px !important;
    padding: 25px 17px 18px !important;
    border-radius: 10px;
  }

  h1.djep-h1 {
    font-size: 36px !important;
  }

  h2.djep-h2 {
    font-size: 26px !important;
  }

  .djep-welcometextbox p {
    font-size: 14px !important;
  }

  .djep-eventlistbox,
  .djep-latestemailsbox {
    padding: 15px !important;
  }

  .djep-singleeventdiv {
    padding: 15px !important;
  }

  .djep-singleeventdiv .col-xs-12 {
    width: 100% !important;
    float: none !important;
  }

  .djep-singleeventdiv p[align="right"] {
    text-align: center !important;
  }

  a.djep-planeventbutton,
  a.djep-eventdetailsbutton,
  a.djep-paymentbutton {
    min-width: 95px;
    padding: 10px !important;
  }

  #listtable-emails td {
    padding: 12px 6px !important;
    font-size: 12px;
  }
}

/* =====================================================
   14. ACCESSIBILITY
   ===================================================== */

@media (prefers-reduced-motion: reduce) {
  ul#djep-navigation li a,
  a.djep-planeventbutton,
  a.djep-eventdetailsbutton,
  a.djep-paymentbutton,
  a.djep-readviewbutton,
  a.djep-viewallbutton {
    transition: none;
  }
}

/* =====================================================
   END — NOTHING BUT FUN V3.1
   ===================================================== */