#2e2e2e
#3f693f;
#729a6f;

/* ===================================
 TESTIMONIAL BOX
 =================================== */

body.index-page .quote-box {
  position: fixed;                        /* Stays in place even when scrolling */
  right: 60px;
  top: 400px;
  width: 420px;
  max-width: calc(50% - 80px);            /* Takes half screen minus padding */
  z-index: 10;
}

@media (max-width: 1100px) {
  body.index-page .login-container {
    grid-template-columns: 1fr;           /* Stack on smaller screens */
    padding: 30px;
  }
  body.index-page .quote-box {
    position: static;                     /* Back to normal flow */
    grid-column: 1;
    margin: 40px 0;
    max-width: 100%;
  }
}

/* ===================================
   SIGNUP FORM STYLING (matches inputs)
   =================================== */

/* Scoped to login/signup page only */
body.index-page .auth-wrapper input[type="email"],
body.index-page .auth-wrapper input[type="password"],
body.index-page .auth-wrapper input[type="text"],
body.index-page .auth-wrapper select {
  width: 100%;
  padding: 14px;
  border: 1px solid #555;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 1rem;
}

body.index-page .login-container,
body.index-page .login-container *,
body.index-page .login-container *::placeholder {
  color: #ffffff !important; 
}

/* Links */
body.index-page .login-container a {
  color: #81c784 !important;
}

body.index-page .login-container a:hover {
  color: #a5d6a7 !important;
}

/* Secondary/gray text */
body.index-page .login-container input::placeholder,
body.index-page .login-container .author-title,
body.index-page .login-container .footer,
body.index-page .login-container select option[value=""] {
  color: #cccccc !important; /* Light gray for placeholders */
}

/* Ensure dropdown options are white on dark background */
body.index-page .login-container select option {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
}

body.index-page .login-container select option:hover {
  background-color: #2e7d32 !important; /* Green highlight */
}

/* Fix dropdown text to white on dark background */
#signup-role,
#signup-golf-club {
  color: #ffffff !important; /* Selected value white */
}

#signup-role option,
#signup-golf-club option {
  background-color: #1a1a1a !important; /* Dark background for dropdown list */
  color: #ffffff !important;           /* White text for all options */
  padding: 10px;
}

/* Hover/focus on options (better UX) */
#signup-role option:hover,
#signup-golf-club option:hover {
  background-color: #2e7d32 !important; /* Green highlight on hover */
}

/* Selected option (if browser shows it) */
#signup-role option:checked,
#signup-golf-club option:checked {
  background-color: #4caf50 !important;
  color: white !important;
}

/* Ensure placeholder/default option is visible */
body.index-page option[value=""] {
  color: #cccccc !important; /* Light gray for "Select Role" / "Select Golf Club" */
}

/* Button text */
body.index-page .signin-btn,
body.index-page .signup-btn {
  color: white !important;
}

body.index-page .auth-header {
  text-align: center;
  margin-bottom: 30px;
}

body.index-page .auth-logo {
  max-width: 220px;          /* Adjust this to fit your logo perfectly */
  height: auto;
  display: block;
  margin: 0 auto 16px auto;  /* Centers it with space below */
  transition: transform 0.3s ease;
}

body.index-page .auth-logo:hover {
  transform: scale(1.05);    /* Subtle hover effect */
}

body.index-page select {
  width: 100%;
  padding: 14px;
  border: 1px solid #555;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.1);
  color: black;
  font-size: 1rem;
  appearance: none; /* Remove default arrow */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23aaa' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

body.index-page select:focus {
  outline: none;
  border-color: #4caf50;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

body.index-page select option {
  background-color: #1a1a1a;
  color: white;
}

/* ===================================
   LOGIN PAGE BACKGROUND (index.html only)
   =================================== */

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: 'Inter', sans-serif;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6)),
              url('AppImages/10f9b0d6aa0b475d66eee4ea4d41a6b9f921aae1-1600x1067-1.jpg') center/cover no-repeat fixed;
  color: #ffffff;
  display: flex;
  flex-direction: column;
}

.login-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 60px 40px 40px 60px;
}
.login-box {
  width: 420px;
  max-width: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 40px;
  border-radius: 16px;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  font-size: 1.8rem;
  font-weight: 700;
}
.logo i {
  color: #4caf50;
  margin-right: 12px;
  font-size: 2rem;
}
.auth-tabs {
  display: flex;
  margin-bottom: 30px;
  border-bottom: 1px solid #555;
}
.auth-tab {
  flex: 1;
  padding: 12px;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}
.auth-tab.active {
  color: #4caf50;
  border-bottom: 3px solid #4caf50;
}
.auth-tab:hover {
  color: #81c784;
}
.auth-form {
  display: none;
}
.auth-form.active {
  display: block;
}
.form-group {
  margin-bottom: 24px;
}
label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}

input::placeholder, select option {
  color: #aaa;
}
.signin-btn, .signup-btn {
  width: 100%;
  padding: 14px;
  background-color: #2e7d32;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}
.signin-btn:hover, .signup-btn:hover {
  background-color: #1b5e20;
}
.request-access {
  text-align: center;
  margin-top: 24px;
  font-size: 0.95rem;
}
.request-access a {
  color: #81c784;
  text-decoration: none;
}
.request-access a:hover {
  text-decoration: underline;
}
.quote-box {
  align-self: flex-end;
  max-width: 420px;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 30px;
  border-radius: 16px;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  margin: 0 60px 60px 0;
}
.quote {
  font-size: 1.4rem;
  font-style: italic;
  line-height: 1.6;
  margin-bottom: 20px;
}
.author {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 1rem;
}
.author-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #666;
}
.author-name {
  font-weight: 600;
}
.author-title {
  color: #aaa;
  font-size: 0.9rem;
}
.footer {
  text-align: center;
  font-size: 0.85rem;
  color: #aaa;
  padding: 15px 0;
  background-color: rgba(0, 0, 0, 0.3);
}
@media (max-width: 1100px) {
  .login-container {
    padding: 30px;
    align-items: center;
  }
  .login-box {
    align-self: center;
    width: 100%;
    max-width: 420px;
  }
  .quote-box {
    align-self: center;
    margin: 60px 0;
  }
}
@media (max-width: 768px) {
  body.index-page .login-box {
    padding: 30px;
  }
  body.index-page .quote {
    font-size: 1.2rem;
  }
}


/* ===================================
   GENERAL STYLES (shared across all pages)
   =================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: #f5f5f5;
  color: #1a1a1a;
  min-height: 100vh;
  font-weight: 400;
  line-height: 1.5;
}

/* Main layout */
.app-container {
  display: flex;
  min-height: 100vh;
}


/* Main content */
.main-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 30px;
  background-color: #ffffff;
  position: relative;
}


/* ==============================================
 DASHBOARD
 ============================================== */

/* Dashboard Title */
.dashboard-title {
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e0e0e0;
}

.dashboard-title h1 {
  font-size: 2.4rem;
  font-weight: 700;
  color: #0d0d0d;
  margin: 0;
}

.dashboard-title p {
  font-size: 1.1rem;
  color: #555555;
  margin: 4px 0 0 0;
  font-weight: 500;
}

#club-name-subtitle {
  font-weight: 600;
  color: #0d0d0d;
}

body.dashboard-page .back-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-weight: 500;
  background-color: #2e7d32;
  cursor: pointer;
  transition: background 0.2s;
  color: #ffffff;
}

/* Main grid layout */
body.dashboard-page .main-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 24px;
  margin-top: 24px;
  align-items: start;
}

/* Cards */
body.dashboard-page 
.conditions-card,
.weather-card,
.club-info,
.nearby-card {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  text-align: center;
  margin: 12px;
}

body.dashboard-page
.conditions-card h3,
.weather-card h3,
.club-info h2,
.nearby-card h3 {
  color: #0d0d0d;
  margin-bottom: 16px;
  font-size: 1.5rem;
  font-weight: 600;
}

/* Weather Card */
  body.dashboard-page .weather-card {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

  body.dashboard-page .weather-card h3 {
  margin-bottom: 12px;
  font-size: 1.3rem;
}

  body.dashboard-page .weather-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: nowrap;
}

  body.dashboard-page .weather-icon {
  font-size: 3.8rem;
}

  body.dashboard-page .weather-temp {
  font-size: 2.6rem;
  font-weight: 700;
  color: #0d0d0d;
}

  body.dashboard-page .weather-desc {
  font-size: 1.05rem;
  color: #444;
  margin-top: 4px;
}

  body.dashboard-page .weather-details {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

  body.dashboard-page .weather-details div {
  background-color: #e8f5e8;
  padding: 10px 16px;
  border-radius: 10px;
  min-width: 90px;
}

  body.dashboard-page .weather-details p {
  font-size: 0.8rem;
  color: #555;
  margin-bottom: 4px;
}

  body.dashboard-page .weather-details span {
  font-size: 1.05rem;
  color: #0d0d0d;
  font-weight: 600;
}

#weather-loading {
  color: #666;
  font-style: italic;
  font-size: 0.95rem;
}


/* ==============================================
GOLF CLUB NETWORK
 ============================================== */
body.dashboard-page .nearby-card {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);

}

body.dashboard-page .nearby-card h3 {
  margin: 0 0 12px 0;
  font-size: 1.4em;
  color: #2e7d32;
}

body.dashboard-page  .nearby-card .note {
  font-size: 0.95em;
  color: #666;
  margin-bottom: 16px;
}

body.dashboard-page  .nearby-scroll-container {
  background: #f9f9f9;
  border-radius: 8px;
  border: 1px solid #eee;
  max-height: 200px;            /* Adjustable - increase for more visible rows */
  overflow-y: auto;
  padding: 8px;
  scrollbar-width: thin;
  scrollbar-color: #ccc #f9f9f9;
}

body.dashboard-page  .nearby-scroll-container::-webkit-scrollbar {
  width: 8px;
}

body.dashboard-page .nearby-scroll-container::-webkit-scrollbar-track {
  background: #f9f9f9;
}

body.dashboard-page .nearby-scroll-container::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 8px;
}

body.dashboard-page .nearby-scroll-container::-webkit-scrollbar-thumb:hover {
  background: #aaa;
}

#nearby-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

#nearby-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 14px;            /* Reduced padding by ~50% */
  border-radius: 6px;
  margin-bottom: 4px;           /* Tighter spacing between rows */
  background: white;
  border: 1px solid #eee;
  transition: all 0.2s ease;
  cursor: pointer;
  min-height: 38px;             /* Enforced much shorter height (~50% reduction) */
  font-size: 0.92em;            /* Slightly smaller text to fit */
}

#nearby-list li:hover {
  background: #f0f7f0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transform: translateX(3px);
}

#nearby-list .club-name {
  font-weight: 600;
  color: #000000;
  text-align: left;
  flex: 2.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.98em;            /* Slightly smaller for compactness */
}

#nearby-list .club-distance {
  color: #555;
  text-align: left;
  flex: 1.3;
  padding-left: 10px;
  white-space: nowrap;
  font-size: 0.88em;
}

#nearby-list .club-status {
  font-weight: bold;
  padding: 3px 10px;            /* Smaller status pill */
  border-radius: 16px;
  min-width: 70px;
  text-align: center;
  font-size: 0.85em;
}

/* Status colors */
body.dashboard-page .club-status.open {
  background-color: #e8f5e9;
  color: #2e7d32;
}

body.dashboard-page .club-status.closed {
  background-color: #ffebee;
  color: #c62828;
}

/* Loading state */
#nearby-list .loading {
  text-align: center;
  color: #777;
  padding: 20px;
  font-style: italic;
}

body.dashboard-page .nearby-scroll-container.has-more::after {
  content: "Scroll for more...";
  display: block;
  text-align: center;
  color: #888;
  font-size: 0.85em;
  padding: 8px 0;
  pointer-events: none;
}

body.dashboard-page .network-search {
  position: relative;
  margin-bottom: 16px;
}

#network-search-input {
  width: 100%;
  padding: 12px 40px 12px 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  background: white;
  transition: all 0.3s ease;
  color: #222 !important;          
  background: white !important;
  border: 1px solid #ccc !important;
}

#network-search-input:focus {
  outline: none;
  border-color: #4caf50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
}

body.dashboard-page .search-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #777;
  font-size: 1.2rem;
}

body.dashboard-page .no-results {
  text-align: center;
  color: #888;
  padding: 30px;
  font-style: italic;
}



/* ==============================================
 COURSE STATUS
 ============================================== */
body.dashboard-page .toggle-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 20px 0;
}

body.dashboard-page .toggle-label {
  font-weight: 600;
  font-size: 1.1em;
  text-align: center;
}

/* Base styles for both toggle and read-only indicator */
body.dashboard-page .status-toggle,
#read-only-status {
  padding: 12px 40px !important;
  border: none !important;
  border-radius: 50px !important;
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  color: white !important;
  min-width: 280px !important;
  text-align: center !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; /* subtle depth */
}

/* Open state */
body.dashboard-page .status-toggle.open,
#read-only-status.open {
  background-color: #2e7d32 !important; /* your exact green */
}

/* Closed state */
body.dashboard-page .status-toggle.closed,
#read-only-status.closed {
  background-color: #c62828 !important; /* your exact red */
}

/* Hover only on editable toggle */
#status-toggle:hover {
  opacity: 0.9 !important;
  transform: scale(1.03) !important;
}

/* Read-only version: no hover, default cursor */
#read-only-status {
  cursor: default !important;
  pointer-events: none !important;
}


/* ==============================================
 RESTRICTIONS
 ============================================== */
body.dashboard-page .restrictions-row {
  justify-content: center !important; /* force centering */
}

body.dashboard-page .toggle-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap; /* prevent text wrapping inside label */
}

body.dashboard-page .toggle-label-text {
  text-align: left;
  font-weight: 500;
  color: #333;
}

body.dashboard-page .restrictions-toggles.read-only {
  display: none !important;
}

body.dashboard-page .restrictions-toggles .restrictions-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

body.dashboard-page .restrictions-row .toggle-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap; /* prevent text wrapping */
}

body.dashboard-page .restrictions-row .toggle-label-text {
  text-align: left;
  font-weight: 500;
  color: #333;
}

body.dashboard-page .restrictions-list {
  margin-left: 0; /* ensure no extra centering */
}

body.dashboard-page .toggle-switch input[type="checkbox"] {
  margin-right: 10px;
}

body.dashboard-page .restrictions-toggles.read-only {
  display: none !important;
}

body.dashboard-page .fas, .fa-solid {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 1.2em; /* optional: make icons a bit bigger for visibility */
  margin-right: 8px;
}

/* ==============================================
 VIEW CLUB INFORMATION BUTTON
 ============================================== */
body.dashboard-page .view-club-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  background: #0066cc;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin: 12px;
}

body.dashboard-page .view-club-btn:hover {
  background: #0052a3;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 102, 204, 0.25);
}

body.dashboard-page .view-club-info-wrapper {
  text-align: center;
  margin: 16px 0 24px 0; /* top reduced from 24px to 16px */
}


/* ==============================================
 CLUB OVERVIEW
 ============================================== */

/* Container - just handles layout, no height limit */
body.dashboard-page .overview-cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 12px;
}

/* Card - fixed max height, flex column layout */
body.dashboard-page .overview-card {
  flex: 1 1 300px;
  min-width: 300px;
  max-width: 500px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 420px;                /* Total card height - adjust as needed */
}

/* Header - fixed size, never grows */
body.dashboard-page .overview-card-header {
  flex-shrink: 0;
  padding: 16px 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Content - this is the ONLY part that scrolls */
body.dashboard-page .overview-card-content {
  flex: 1 1 auto;                   /* Grow to fill remaining space */
  max-height: 100%;                 /* Fill available height */
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 28px 20px 20px;     /* Right padding for scrollbar */
  box-sizing: border-box;
}

/* Scrollbar styling - make it visible */
body.dashboard-page .overview-card-content::-webkit-scrollbar {
  width: 8px;
}

body.dashboard-page .overview-card-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

body.dashboard-page .overview-card-content::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

body.dashboard-page .overview-card-content::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Firefox scrollbar */
body.dashboard-page .overview-card-content {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

body.dashboard-page .overview-event-card .overview-card-header {
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  color: #1565c0;
}

body.dashboard-page .overview-renovation-card .overview-card-header {
  background: linear-gradient(135deg, #ffebee, #ffcdd2);
  color: #c62828;
}

body.dashboard-page .overview-card-header h3 {
  margin: 0;
  font-size: 1.3rem;
}

/* Content styling */
body.dashboard-page .overview-card-content {
  padding: 20px;
}

body.dashboard-page 
.overview-event-list,
.overview-renovation-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

body.dashboard-page 
.overview-event-list li,
.overview-renovation-list li {
  padding: 16px 0;
  border-bottom: 1px solid #eee;
  transition: background 0.2s;
}

body.dashboard-page 
.overview-event-list li:hover,
.overview-renovation-list li:hover {
  background: #f9f9f9;
}

body.dashboard-page 
.overview-event-list li:last-child,
.overview-renovation-list li:last-child {
  border-bottom: none;
}

body.dashboard-page 
.overview-event-list li strong,
.overview-renovation-list li strong {
  font-size: 1.1rem;
  color: inherit;
}

body.dashboard-page 
.event-date,
.renovation-date {
  margin-top: 4px;
  color: #555;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

body.dashboard-page 
.overview-renovation-list li small {
  display: block;
  margin-top: 6px;
  color: #757575;
  font-size: 0.9rem;
}

body.dashboard-page 
.overview-empty-message {
  text-align: center;
  margin-top: 20px;
  color: #757575;
  font-style: italic;
  font-size: 0.95rem;
}


/* ==============================================
 CLUB INFO
 ============================================== */

/* CLUB LOGO ----------------------------------------------------------------------------------------*/

body.club-information-page .dashboard-header-row {
  display: flex;
  justify-content: space-between;     /* Title left, logo right */
  align-items: flex-start;            /* Align tops - logo starts higher */
  gap: 32px;
  margin-bottom: 32px;
  flex-wrap: wrap;                    /* Stacks on small screens */
}

/* Title takes available space on left */
body.club-information-page .dashboard-title {
  flex: 1;
  max-width: 60%;
}

body.club-information-page .dashboard-title p {
  margin: 0;
  font-size: 1.1rem;
  color: #555;
}

/* Responsive - stack on small screens */
@media (max-width: 768px) {
  .dashboard-header-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
  }

  body.club-information-page .club-logo-container {
    margin: 0 auto;
  }
}
body.club-information-page .dashboard-header-row {
  display: flex;
  align-items: flex-end;           /* Key: aligns bottoms of logo and text */
  gap: 32px;                       /* Space between logo and title */
  margin-bottom: 5px;
}

/* Fixed-size logo container */
body.club-information-page .club-logo-container {
  flex-shrink: 0;
  width: 220px;                       /* Your fixed width */
  height: 220px;                      /* Your fixed height */
  display: flex;
  align-items: flex-start;            /* Align top of logo container */
  justify-content: center;
  background: #ffffff;                /* Light green fallback */
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  overflow: hidden;
  margin-top: -20px;                  /* Moves logo UP above subtitle line */
}

/* Logo image inside container */
body.club-information-page .club-logo-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

body.club-information-page .club-logo.editable {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

body.club-information-page .club-logo-image {
  width: 100%;
  height: 100%;
  object-fit: contain;         /* Keeps proportions */
  display: block;
}

body.club-information-page
.club-logo:hover 
.club-logo-wrapper {
  transform: scale(1.03);
}

body.club-information-page .club-logo .edit-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  color: white;
  font-size: 2.5rem;
}

body.club-information-page .club-logo:hover .edit-overlay {
  opacity: 1;
}

body.club-information-page .club-logo:not(.editable-allowed):hover::after {
  content: "Edit restricted (GM/Secretary only)";
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
}

/* Responsive - stack centered on small screens */
@media (max-width: 768px) {
  .dashboard-header-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
  }

  body.club-information-page .club-logo-container {
    margin: 0 auto;
    margin-top: 0;                    /* Reset upward shift on mobile */
  }
}

/* CLUB DETAILS --------------------------------------------------- */

/* === Club Info Section - Overall === */


body.club-information-page .main-content {
  max-width: flex;
  margin: 0 auto;
  padding: 40px 20px;
}

/* Hero with banner upload */
body.club-information-page .club-hero {
    position: relative;
    height: 400px;
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  }

body.club-information-page .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    z-index: 1;
  }

body.club-information-page .club-hero-content {
    position: relative;
    z-index: 2;
  }

body.club-information-page .hero-banner-trigger {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 3;
  width: 48px;
  height: 48px;
  background: rgba(0,0,0,0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s;
}

body.club-information-page .club-hero:hover .hero-banner-trigger {
  opacity: 1;
}

body.club-information-page .hero-banner-trigger i {
  color: white;
  font-size: 1.4rem;
}

body.club-information-page .hero-edit-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  color: white;
  z-index: 2; /* above hero-overlay but below logo */
  cursor: pointer;
  pointer-events: none; /* clicks pass through to logo by default */
}

body.club-information-page .hero-edit-overlay .hero-edit-content {
  text-align: center;
}

body.club-information-page .hero-edit-overlay i {
  margin-bottom: 12px;
}

body.club-information-page .club-banner-upload {
  display: none;
}

body.club-information-page .club-hero:hover .hero-edit-overlay {
  display: flex;
  pointer-events: auto; /* enable clicks on overlay when hovering hero (not logo) */
}

body.club-information-page .logo-punchthrough {
  position: relative;
  z-index: 3; /* logo sits above overlay */
}

body.club-information-page .logo-punchthrough:hover ~ .hero-edit-overlay {
  display: none !important; /* hide banner overlay when hovering logo */
}

body.club-information-page .club-logo-hero {
  width: 180px;
  height: 180px;
  margin: 0 auto 20px;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid rgba(255,255,255,0.9);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  cursor: pointer;
  position: relative;
  z-index: 4; /* above everything */
}

body.club-information-page .club-logo-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.club-information-page .club-logo-hero .edit-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}
body.club-information-page .club-logo-hero:hover .edit-overlay {
  opacity: 1;
}
body.club-information-page .club-logo-hero .edit-overlay i {
  color: white;
  font-size: 2rem;
}
body.club-information-page .club-logo-upload {
  display: none;
}
@media (max-width: 768px) {
  body.club-information-page .club-hero {
    height: 300px;
  }
  body.club-information-page .club-hero h1 {
    font-size: 2.5rem;
  }
  body.club-information-page .club-logo-hero {
    width: 140px;
    height: 140px;
  }
}


body.club-information-page .info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

body.club-information-page .info-card {
  background: white;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  border: 1px solid #729a6f;
}

body.club-information-page .info-card h2 {
  font-family: 'Playfair Display', serif;
  color: #2e2e2e;
  font-size: 1.8rem;
  margin-bottom: 24px;
  border-bottom: 2px solid #3f693f;
  padding-bottom: 12px;
}

body.club-information-page .info-table {
  width: 100%;
  border-collapse: collapse;
}

body.club-information-page .info-table tr {
  border-bottom: 1px solid #f0f0f0;
}

body.club-information-page .label-cell {
  display: flex;
  align-items: center;
  font-weight: 600;
  color: #444;
  width: 75%; /* gives more room for label + icon */
  padding-right: 16px;
}

body.club-information-page .label-cell .icon-label {
  margin-right: 16px; /* ← increased gap between icon and label text */
  font-size: 1.1rem;
  color: #2e7d32;
  min-width: 24px; /* keeps icons aligned even if some are wider */
  text-align: center;
}

body.club-information-page .value-cell {
  text-align: right; /* aligns text/values to right */
  color: #333;
  font-weight: 500;
}

/* Push edit inputs and readonly values fully right */
body.club-information-page .value-cell .edit-input,
body.club-information-page .value-cell .field-value {
  margin-left: auto; /* pushes to far right */
  display: inline-block;
}

.edit-input {
  width: 160px; /* fixed width so they don't stretch full card */
  padding: 8px 12px;
  font-size: 0.95rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  text-align: right;
}

.field-value {
  font-weight: 700;
  color: #2e7d32;
  min-width: 100px;
  text-align: right;
}

.multi-input-row {
  display: flex;
  gap: 8px;
  justify-content: flex-end; /* pushes all inputs to right */
}

.multi-input-row .edit-input.small {
  width: 80px; /* smaller for multi fields */
}

body.club-information-page .info-table td {
  padding: 14px 0;
  border-bottom: 1px solid #f0e9df;
  vertical-align: middle;
}

body.club-information-page .info-table .label {
  font-weight: 600;
  color: #2e2e2e;
  width: 40%;
}

body.club-information-page .info-table .value {
  color: #5c4b3c;
}

body.club-information-page .edit-btn, .save-btn, .cancel-btn {
  padding: 10px 24px;
  border-radius: 6px;
  border: none;
  font-weight: 600;
  cursor: pointer;
}

body.club-information-page .edit-btn {
  background: #2e2e2e;
  color: white;
}

body.club-information-page .save-btn {
  background: #2e7d32;
  color: white;
}

body.club-information-page .cancel-btn {
  background: #ccc;
  color: #333;
}
@media (max-width: 768px) {
  body.club-information-page .info-grid {
    grid-template-columns: 1fr;
  }
  
  body.club-information-page .club-hero {
    height: 300px;
  }
  
  body.club-information-page .club-hero h1 {
    font-size: 2.5rem;
  }
}

/* Full-width Green Fees card */
.info-card.full-width {
  grid-column: 1 / -1; /* spans full grid width */
  margin-top: 32px;
  padding: 24px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  border: 1px solid #e0d8c9;
}

.info-card.full-width h2 {
  font-family: 'Playfair Display', serif;
  color: #4a3728;
  font-size: 1.8rem;
  margin-bottom: 24px;
  border-bottom: 2px solid #d4b88e;
  padding-bottom: 12px;
}

/* Ensure table rows in green fees card look good */
.info-card.full-width .info-table td {
  padding: 16px 0;
}

/* Right-align values in green fees */
.info-card.full-width .value-cell {
  text-align: right;
  min-width: 200px;
}

/* ----------------------------------------------------------------------------------- */

/* ==============================================
   SIDEBAR
   ============================================== */
.sidebar {
  width: 240px;
  background-color: #1f1f1f;
  color: #a3b2a9;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.sidebar-header {
  padding: 20px;
  text-align: center;
  background: #1f1f1f; /* Optional: match your login box color */
  border-bottom: 1px solid #1f1f1f;
}

.sidebar-logo {
  max-width: 180px;
  height: auto;
  opacity: 0;
  transform: scale(0.95);
  animation: logoFade 0.6s forwards;
}

@keyframes logoFade {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.sidebar-logo:hover {
  transform: scale(1.05);    /* Subtle hover effect */
}

.sidebar-header h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #a3b2a9;
}

.sidebar-nav {
  flex-grow: 1;
  padding: 15px 0;
}

.sidebar-nav > ul > li > a,
.sidebar-nav > ul > li > a.dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 12px;                     /* Space between icon and text */
  padding: 12px 20px;            /* Consistent padding */
  color: #dedede;
  text-decoration: none;
  font-size: 1rem;
  transition: background 0.2s;
  position: relative;            /* Needed for absolute arrow positioning */
}

/* Icons - force consistent size */
.sidebar-nav i {
  width: 20px;                /* Fixed width for all icons */
  text-align: center;         /* Centers icon content */
  font-size: 1.1rem;          /* Slightly larger for visibility */
  flex-shrink: 0;             /* Prevents icon from shrinking */
}


.sidebar-nav a:hover {
  background-color: #3f693f;
  color: white;
}

.sidebar-nav a.active {
  background-color: #729a6f;
  color: white;
  font-weight: 600;
}

/* Dropdown */
.sidebar-dropdown > a.dropdown-toggle {
  padding: 12px 20px;
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start; /* Force left alignment */
}

.dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 25px;
  color: #a3b2a9;
  text-decoration: none;
  font-size: 1.0rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.dropdown-toggle:hover {
  background-color: #3f693f;
  color: white;
}


.sidebar-dropdown.active .dropdown-toggle .arrow {
  transform: rotate(180deg);
}

/* Dropdown arrow alignment */
.dropdown-toggle .fa-chevron-down.arrow {
  position: absolute;
  right: 20px;                   /* Aligns with main item right padding */
  top: 50%;
  transform: translateY(-50%);   /* Vertically centered */
  font-size: 0.9rem;
  color: #dedede;
  transition: transform 0.3s ease;
}

/* Rotate arrow when dropdown is open */
.sidebar-dropdown.active > a.dropdown-toggle .fa-chevron-down.arrow {
  transform: translateY(-50%) rotate(180deg);
}

.dropdown-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: #1f1f1f;
  margin-left: 20px;
  border-left: 4px solid #3f693f; /* Optional accent line */
  padding: 0;
}

.sidebar-dropdown.active .dropdown-menu {
  max-height: 300px;
}

.sidebar-nav .dropdown-menu > li > a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px 10px 36px;
  color: #dedede;
  text-decoration: none;
  font-size: 0.95rem;
  transition: background 0.2s;
}

.sidebar-nav .dropdown-menu > li > a:hover {
  background: rgba(255,255,255,0.1);
}

/* User Profile - Smaller picture, name & role stacked */
.user-profile {
  display: flex;
  align-items: centre;
  padding: 10px 10px;
  margin: 10px;
  background-color: #1f4d2e;
  border-radius: 10px;
  border: 1px solid #2e7d32;
  gap: 12px;
  position: relative;
}

/* Smaller profile picture */
.profile-picture.editable {
  position: relative;
  width: 43px;
  height: 43px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  z-index: 20;
}

.profile-picture.editable:hover {
  opacity: 0.9;
}

#profile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.edit-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
  color: white;
  font-size: 1rem;
  pointer-events: none;
}

.profile-picture.editable:hover .edit-overlay {
  opacity: 1;
}

/* Name and Role - stacked, shrink to fit */
.profile-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0; /* Allows text to shrink */
}

.user-name {
  font-weight: 700;
  font-size: 0.8rem;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.user-role {
  font-size: 0.72rem;
  color: #c0e0c0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  margin-top: 2px;
}

/* Logout icon */
.profile-logout-icon {
  margin-left: auto;
  background: none;
  border: none;
  color: #a3b2a9;
  font-size: 1.1rem;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.3s, color 0.3s;
}

.profile-logout-icon:hover {
  opacity: 1;
  color: #ffffff;
}

/* ==============================================
   DASHBOARD & GENERAL COMPONENTS
   ============================================== */
.dashboard-title {
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e0e0e0;
}

.dashboard-title h1 {
  font-size: 2.4rem;
  font-weight: 700;
  color: #0d0d0d;
  margin: 0;
}

.dashboard-title p {
  font-size: 1.1rem;
  color: #555;
  margin: 4px 0 0;
  font-weight: 500;
}


/* ==============================================
   TASKS & PROGRESS SECTION (COMPACT VERSION)
   ============================================== */
body.greens-dashboard-page .conditions-card {
  padding: 16px 20px;
}

  body.greens-dashboard-page .progress-container {
  margin: 12px 0;
}

  body.greens-dashboard-page .progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  margin-bottom: 4px;
}

  body.greens-dashboard-page .progress-bar {
  height: 8px;
  background-color: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

  body.greens-dashboard-page .progress-fill {
  width: 0%;
  background-color: #4caf50;
  height: 100%;
  transition: width 0.3s;
}

  body.greens-dashboard-page .task-input {
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  align-items: end;
}

  body.greens-dashboard-page .task-input input,
  body.greens-dashboard-page .task-input select,
  body.greens-dashboard-page .task-input button {
  height: 36px;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 0.9rem;
  box-sizing: border-box;
}

  body.greens-dashboard-page .task-input button#add-task-btn {
  background-color: #4caf50;
  color: white;
  border: none;
  cursor: pointer;
  font-weight: 600;
}

  body.greens-dashboard-page .task-input button#add-task-btn:hover {
  background-color: #388e3c;
}

  body.greens-dashboard-page .task-list li {
  padding: 10px 0;
}

/* DAILY COURSE CONDITIONS */

body.greens-dashboard-page .conditions-section {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 24px;
  margin-bottom: 32px;
}

body.greens-dashboard-page .conditions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e0e0e0;
}

body.greens-dashboard-page .conditions-header h4 {
  margin: 0;
  font-size: 1.25rem;
  color: #000000;
  font-weight: 600;
}

body.greens-dashboard-page .last-updated {
  font-size: 0.9rem;
  color: #666;
  font-style: italic;
}

/* Conditions List - Row-based */
body.greens-dashboard-page .conditions-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.greens-dashboard-page .condition-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

body.greens-dashboard-page .condition-row:last-child {
  border-bottom: none;
}

body.greens-dashboard-page .condition-label {
  font-size: 1rem;
  font-weight: 500;
  color: #333;
  flex: 1;
}

body.greens-dashboard-page .condition-select,
body.greens-dashboard-page .condition-readonly {
  width: 160px;
  padding: 8px 12px;
  font-size: 1rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  text-align: right;
  box-sizing: border-box;
}

body.greens-dashboard-page .condition-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23333' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
}

body.greens-dashboard-page .condition-readonly {
  font-weight: 700;
  color: #000000;
  background: #e8f5e8;
  border: 1px solid #c3e6cb;
}

body.greens-dashboard-page .condition-label .icon {
  margin-right: 8px;
  color: #000000;
  font-size: 1.1rem;
  opacity: 0.9;
}

/* Optional: Make icons slightly larger in read-only mode */
body.greens-dashboard-page :not(.is-editable) .condition-label .icon {
  font-size: 1.2rem;
}

/* Optional: Add subtle hover effect on rows */
body.greens-dashboard-page .condition-row:hover {
  background: #f0f8f0;
  transition: background 0.2s;
}

/* Edit mode (manager) */
body.greens-dashboard-page .is-editable .condition-select {
  display: block;
}

body.greens-dashboard-page .is-editable .condition-readonly {
  display: none;
}

body.greens-dashboard-page .is-editable .save-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

/* Read-only mode */
body.greens-dashboard-page :not(.is-editable) .condition-select,
body.greens-dashboard-page :not(.is-editable) .save-area {
  display: none;
}

body.greens-dashboard-page :not(.is-editable) .condition-readonly {
  display: block;
}

/* Save button */
body.greens-dashboard-page .save-btn {
  padding: 12px 32px;
  background: #2e7d32;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  font-size: 1rem;
}

body.greens-dashboard-page .save-btn:hover {
  background: #1b5e20;
}

body.greens-dashboard-page .save-status {
  margin-top: 8px;
  font-style: italic;
  color: #666;
}



/* Save button - only show when editable */
body.greens-dashboard-page .save-btn {
  display: none;
}

body.greens-dashboard-page .is-editable .save-btn {
  display: inline-block;
}.condition-input {
  width: 140px;           /* fixed small width */
  padding: 6px 10px;
  font-size: 0.95rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  text-align: right;
}

body.greens-dashboard-page body.greens-dashboard-page .condition-input:disabled {
  background: #f0f0f0;
    color: #777;
    cursor: not-allowed;
  }

body.greens-dashboard-page .save-btn {
  padding: 10px 24px;
  background: #2e2e2e;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

body.greens-dashboard-page .save-btn:hover {
  background: #3f693f;
}

body.greens-dashboard-page .save-btn:disabled {
  background: #a5d6a7;
  cursor: not-allowed;
}


/* History Trigger (compact header) */
body.greens-dashboard-page .history-trigger {
  margin-top: 32px;
}

body.greens-dashboard-page .history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #2e2e2e;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  user-select: none;
}

body.greens-dashboard-page .history-header:hover {
  background: #3f693f;
  transform: translateY(-2px);
}

body.greens-dashboard-page .history-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: #ffffff;
  font-size: 1.1rem;
}

body.greens-dashboard-page .history-icon {
  color: #ffffff;
  font-size: 1.2rem;
}

body.greens-dashboard-page .history-count {
  font-size: 0.9rem;
  color: #ffffff;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 12px;
}

body.greens-dashboard-page .open-icon {
  color: #ffffff;
  font-size: 1rem;
}

/* Modal Overlay */
body.greens-dashboard-page .history-modal {
  position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    pointer-events: none; /* prevents clicks when closed */
  }

body.greens-dashboard-page .history-modal.active {
  display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

body.greens-dashboard-page .modal-content {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 1100px;
  max-height: 85vh;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  transform: scale(1);
  transition: transform 0.3s;
}

body.greens-dashboard-page .history-modal.active .modal-content {
  transform: scale(1);
}

body.greens-dashboard-page .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: #3f693f;
  color: white;
}

body.greens-dashboard-page .modal-header h3 {
  margin: 0;
  font-size: 1.3rem;
}

body.greens-dashboard-page .modal-close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 1.8rem;
  cursor: pointer;
  padding: 0 12px;
}

body.greens-dashboard-page .modal-close-btn:hover {
  color: #ffdddd;
}

body.greens-dashboard-page .modal-body {
  padding: 20px;
  max-height: calc(85vh - 70px);
  overflow-y: auto;
}

body.greens-dashboard-page .history-loading,
body.greens-dashboard-page .history-empty {
  text-align: center;
  padding: 40px 20px;
  color: #666;
  font-style: italic;
}

body.greens-dashboard-page .history-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}

body.greens-dashboard-page .history-table th,
body.greens-dashboard-page .history-table td {
  padding: 12px 16px;
  text-align: center;
  font-size: 0.9rem;
  border-bottom: 1px solid #eee;
}

body.greens-dashboard-page .history-table th {
  background: #f0f8f0;
  font-weight: 600;
  color: #2e7d32;
}

body.greens-dashboard-page .history-table tr:hover {
  background: #f9f9f9;
}

/* Scrollbar style */
body.greens-dashboard-page .modal-body::-webkit-scrollbar {
  width: 8px;
}

body.greens-dashboard-page .modal-body::-webkit-scrollbar-track {
  background: #f1f1f1;
}

body.greens-dashboard-page .modal-body::-webkit-scrollbar-thumb {
  background: #a5d6a7;
  border-radius: 4px;
}

body.greens-dashboard-page .modal-body::-webkit-scrollbar-thumb:hover {
  background: #81c784;
}





/*-- Notification Bell CSS --*/
  .notification-bell {
    position: relative;
    cursor: pointer;
    font-size: 1.4rem;
    color: #333;
  }
  .notification-bell:hover { color: #4caf50; }
  .notification-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #f44336;
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .notification-dropdown {
    position: absolute;
    top: 50px;
    right: 0;
    width: 320px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
    display: none;
  }
  .notification-header {
    padding: 12px 16px;
    background: #4caf50;
    color: white;
    font-weight: 600;
    border-radius: 12px 12px 0 0;
  }
  #notification-list { padding: 8px 0; }
  .notification-item {
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    font-size: 0.95rem;
  }
  .notification-item:hover { background-color: #f8f9fa; }
  .notification-item.overdue { background-color: #ffebee; }
  .notification-item.today { background-color: #e8f5e8; }
  .notification-item strong { display: block; margin-bottom: 4px; }


/* ==============================================
   TIMELINE STYLES
   ============================================== */
  body.greens-dashboard-page .timeline-container {
  margin-top: 30px;
  background: #f8f9fa;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

  body.greens-dashboard-page .timeline-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 0.9rem;
  color: #555;
  position: relative;
}

  body.greens-dashboard-page .timeline-header::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  height: 1px;
  background: #ddd;
}

  body.greens-dashboard-page .timeline-grid {
  position: relative;
  height: 600px;
  background: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 59px,
    #eee 59px,
    #eee 60px
  );
  border-radius: 12px;
  overflow: hidden;
}

  body.greens-dashboard-page .timeline-row {
  position: absolute;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

  body.greens-dashboard-page .timeline-bar {
  height: 40px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  position: relative;
  width: 100%;
  margin: 10px 0;
}

/* Task-specific colors */
  body.greens-dashboard-page .timeline-bar.turf-greens { background: #2e7d32; }
  body.greens-dashboard-page .timeline-bar.turf-fairways { background: #4caf50; }
  body.greens-dashboard-page .timeline-bar.turf-collars { background: #66bb6a; }
  body.greens-dashboard-page .timeline-bar.turf-surrounds { background: #81c784; }
  body.greens-dashboard-page .timeline-bar.bunkers { background: #ffeb3b; color: #333; }
  body.greens-dashboard-page .timeline-bar.irrigation { background: #1e88e5; }
  body.greens-dashboard-page .timeline-bar.machinery { background: #212121; }
  body.greens-dashboard-page .timeline-bar.holiday { background: #9e9e9e; }
  body.greens-dashboard-page .timeline-bar.hardware { background: #ff9800; }
  body.greens-dashboard-page .timeline-bar.paths { background: #424242; }
  body.greens-dashboard-page .timeline-bar.car-park { background: #616161; }

@media (max-width: 768px) {
  body.greens-dashboard-page .timeline-grid {
    height: 800px;
  }
  body.greens-dashboard-page .timeline-row {
    height: 80px;
  }
}


/* ==============================================
   RESPONSIVE
   ============================================== */
@media (max-width: 1024px) {
  .main-grid {
    grid-template-columns: 1fr;
  }
}

/* Preview */
.restrictions-preview {
  margin-top: 30px;
}

.restrictions-preview h4 {
  color: #0d0d0d;
  margin-bottom: 12px;
  font-weight: 600;
}

#restrictions-list {
  list-style: none;
  padding: 0;
  max-width: 500px;
  margin: 0 auto;
  text-align: left;
}

#restrictions-list li {
  background-color: #e8f5e8;
  margin: 8px 0;
  padding: 10px 18px;
  border-radius: 8px;
  color: #333;
  font-size: 1.05rem;
}

#restrictions-list li:before {
  content: "Warning: ";
  margin-right: 8px;
}

#restrictions-list .no-restrictions {
  background: none;
  text-align: center;
  font-style: italic;
  color: #4caf50;
  font-size: 1.15rem;
}

#restrictions-list .no-restrictions:before {
  content: "Checkmark: ";
  color: #4caf50;
  font-weight: bold;
}

/* Responsive */
@media (max-width: 1024px) {
  .main-grid {
    grid-template-columns: 1fr;
  }
}

  
/* Forecast - Horizontal, no heading, top of page */
  body.greens-dashboard-page .forecast-grid-super-compact {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  margin: 10px 0 30px 0;
  padding: 0 10px;
}

  body.greens-dashboard-page .forecast-day-super-compact {
  text-align: center;
  padding: 12px 8px;
  background-color: #f0f8f0;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
  font-size: 0.9rem;
}

  body.greens-dashboard-page .day-name {
  font-weight: 600;
  color: #0d0d0d;
  margin-bottom: 6px;
}

  body.greens-dashboard-page .forecast-icon {
  font-size: 1.8rem;
  margin: 8px 0;
}

  body.greens-dashboard-page .temps {
  font-weight: 700;
  color: #2e7d32;
  font-size: 1rem;
}

  body.greens-dashboard-page .precip, .wind {
  font-size: 0.85rem;
  color: #555;
  margin-top: 4px;
}


/* Greens Page - Two boxes side by side */
  body.greens-dashboard-page .greens-dual-boxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 30px;
}

/* Course Conditions List */
  body.greens-dashboard-page .conditions-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 10px;
}

  body.greens-dashboard-page .condition-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 16px;
  background-color: #f0f8f0;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

  body.greens-dashboard-page .condition-label {
  color: #0d0d0d;
  font-weight: 500;
}

  body.greens-dashboard-page .condition-value {
  color: #2e7d32;
  font-weight: 700;
}

/* Budget Chart Container */
  body.greens-dashboard-page .budget-chart-container {
  position: relative;
  height: 260px;
  margin: 20px 0;
}

/* Budget Summary */
  body.greens-dashboard-page .budget-summary {
  text-align: center;
  margin-top: 10px;
  font-size: 0.95rem;
}

  body.greens-dashboard-page .budget-total {
  font-size: 1.2rem;
  font-weight: 600;
  color: #0d0d0d;
  margin-bottom: 6px;
}

  body.greens-dashboard-page .budget-spent {
  color: #c62828;
  font-weight: 600;
}

  body.greens-dashboard-page .budget-remaining {
  color: #2e7d32;
  font-weight: 600;
}

/* View Expenditure Button */
  body.greens-dashboard-page .view-expenditure-btn {
  display: block;
  margin: 20px auto 10px auto;
  padding: 10px 20px;
  background-color: #2e2e2e;
  color: white;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 8px;
  width: fit-content;
  transition: background-color 0.3s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

  body.greens-dashboard-page .view-expenditure-btn:hover {
  background-color: #729a6f;
}


/* Expenditure Page - Compact Layout */
/* Summary Cards - Horizontal Row */
  body.expenditure-page .expenditure-summary-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 20px 0 24px 0;
}

  body.expenditure-page .summary-card {
  background-color: #f8f9fa;
  padding: 16px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

  body.expenditure-page .summary-card h4 {
  font-size: 0.95rem;
  color: #666;
  margin-bottom: 8px;
}

  body.expenditure-page .summary-card p {
  font-size: 1.4rem;
  font-weight: 700;
  color: #0d0d0d;
  margin: 0;
}

  body.expenditure-page .summary-card.spent p {
  color: #c62828;
}

  body.expenditure-page .summary-card.remaining p {
  color: #2e7d32;
}

/* Main Row - Table + Chart */
  body.expenditure-page .expenditure-main-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 30px;
}

  body.expenditure-page .expenditure-table-container {
  overflow-x: auto;
}

  body.expenditure-page .budget-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

  body.expenditure-page .budget-table th, .budget-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #e0e0e0;
}

  body.expenditure-page .budget-table th {
  background-color: #f0f0f0;
  font-weight: 600;
}

  body.expenditure-page .budget-table .spent-cell {
  min-width: 100px;
}

  body.expenditure-page .budget-table .total-row {
  font-weight: 700;
  background-color: #f0f8f0;
}

/* Chart Container */
  body.expenditure-page .expenditure-chart-container {
  position: relative;
  height: 300px;
}


/* Responsive */
@media (max-width: 1024px) {
  .expenditure-summary-row {
    grid-template-columns: 1fr;
  }
  .expenditure-main-row {
    grid-template-columns: 1fr;
  }
}

/* Expenditure Log System */
  body.expenditure-page .log-form {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

  body.expenditure-page .log-form input, .log-form select {
  flex: 1;
  min-width: 120px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 0.95rem;
}

  body.expenditure-page .log-form button {
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.3s;
}

  body.expenditure-page .log-form button:hover {
  background-color: #388e3c;
}

  body.expenditure-page .log-table-container {
  overflow-x: auto;
}

  body.expenditure-page .log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

  body.expenditure-page .log-table th, .log-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #e0e0e0;
}

  body.expenditure-page .log-table th {
  background-color: #f0f0f0;
  font-weight: 600;
}

  body.expenditure-page .log-table .delete-btn {
  color: #c62828;
  cursor: pointer;
  font-size: 1.1rem;
  background: none;
  border: none;
  transition: color 0.3s;
}

  body.expenditure-page .log-table .delete-btn:hover {
  color: #b71c1c;
}


/* Move testimonial box up from footer */
  body.index-page .login-container {
  justify-content: flex-start;
  padding-bottom: 100px;
}

  body.index-page .quote-box {
  margin-top: 60px;
  margin-bottom: 60px;
}

  body.index-page .footer {
  position: relative;
  margin-top: auto;
}

/* Custom dropdown input */
  .custom-dropdown input {
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  height: 42px;
  box-sizing: border-box;
}

/* Custom Dropdown - Matches your design */
.custom-dropdown {
  position: relative;
}

.custom-dropdown input {
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
}

.dropdown-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 6px 6px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  display: none;
}

.dropdown-list div {
  padding: 10px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dropdown-list div:hover {
  background-color: #f0f0f0;
}

.dropdown-list .delete-task {
  color: #c62828;
  font-size: 0.9rem;
  opacity: 0.7;
}

.dropdown-list .delete-task:hover {
  opacity: 1;
}


/* ==============================================
  WEEK PLANNER STYLES
 ============================================== */
  body.greens-tasks-page .day-btn {
  padding: 10px 20px;
  border: 2px solid #ddd;
  background-color: #ffffff;
  color: #333;
  border-radius: 30px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 100px;
}

  body.greens-tasks-page .day-btn:hover {
  background-color: #f0f8f0;
  border-color: #4caf50;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

  body.greens-tasks-page .day-btn.active {
  background-color: #4caf50;
  color: white;
  border-color: #4caf50;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

#week-summary > div {
  padding: 10px 18px;
  background-color: #e8f5e8;
  color: #2e7d32;
  border-radius: 30px;
  font-size: 0.95rem;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  min-width: 140px;
  text-align: center;
}

/* Week Planner - Enhanced Visuals */
  body.greens-tasks-page .day-btn {
  padding: 12px 24px;
  border: 2px solid #e0e0e0;
  background-color: #ffffff;
  color: #333;
  border-radius: 30px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

  body.greens-tasks-page .day-btn:hover {
  background-color: #f5fff5;
  border-color: #4caf50;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(76, 175, 80, 0.15);
}

  body.greens-tasks-page .day-btn.active {
  background-color: #4caf50;
  color: white;
  border-color: #4caf50;
  box-shadow: 0 6px 16px rgba(76, 175, 80, 0.3);
}

/* Modern Week Planner Styles */
  body.greens-tasks-page .week-planner-modern {
  background: #f9fbfa;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

  body.greens-tasks-page .week-selector-bar {
  background: #ffffff;
  padding: 12px;
  border-radius: 10px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}

  body.greens-tasks-page .selector-btn {
  padding: 8px 16px;
  background: #e8f5e8;
  color: #1a3c34;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s;
}

  body.greens-tasks-page .selector-btn:hover {
  background: #d0e8d0;
  transform: translateY(-1px);
}

  body.greens-tasks-page .selector-select {
  padding: 8px 12px;
  border: 1px solid #d0e0d0;
  border-radius: 8px;
  background: white;
  font-size: 0.95rem;
  color: #1a3c34;
  min-width: 160px;
}

  body.greens-tasks-page .copy-btn {
  padding: 8px 20px;
  background: #4caf50;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s;
}

  body.greens-tasks-page .copy-btn:hover {
  background: #388e3c;
  transform: translateY(-1px);
}

/* Modern Compact Day Cards */
  body.greens-tasks-page .planner-day-modern {
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  transition: all 0.2s ease;
  border-left: 4px solid transparent;
}

  body.greens-tasks-page .planner-day-modern:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

  body.greens-tasks-page .planner-day-modern.today {
  border-left-color: #4caf50;
}

  body.greens-tasks-page .planner-day-modern h4 {
  margin: 0 0 10px;
  font-size: 1.1rem;
  color: #1a3c34;
  font-weight: 600;
}

  body.greens-tasks-page .task-count-badge {
  display: inline-block;
  padding: 4px 12px;
  background: #e8f5e8;
  color: #1a3c34;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 12px;
}

  body.greens-tasks-page .works-summary {
  font-size: 0.85rem;
  color: #444;
  line-height: 1.4;
  margin-bottom: 12px;
}

  body.greens-tasks-page .staffing-summary {
  font-size: 0.85rem;
  color: #1a3c34;
  background: #f0f8f0;
  padding: 8px 12px;
  border-radius: 8px;
  border-left: 3px solid #4caf50;
}


/* Single Day Card - Consistent Modern Style */
  body.greens-tasks-page .single-day-card-modern {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

  body.greens-tasks-page .single-day-card-modern h3 {
  font-size: 1.6rem;
  color: #1a3c34;
  margin-bottom: 16px;
  text-align: center;
}

  body.greens-tasks-page .back-btn {
  padding: 8px 20px;
  background: #e8f5e8;
  color: #1a3c34;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

  body.greens-tasks-page .back-btn:hover {
  background: #d0e8d0;
}

/* Responsive */
  @media (max-width: 768px) {
    body.greens-tasks-page .week-summary {
    grid-template-columns: 1fr;
  }
    body.greens-tasks-page .week-selector-bar {
    flex-direction: column;
    gap: 8px;
  }
}

/* ==============================================
  DAILY PLANNER CARDS STYLES
 ============================================== */
  body.greens-tasks-page .planner-day {
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border-left: 5px solid #4caf50;
}

  body.greens-tasks-page .planner-day h4 {
  margin: 0 0 12px 0;
  color: #2e7d32;
  font-size: 1.1rem;
  font-weight: 600;
}

  body.greens-tasks-page .planner-entry {
  margin-bottom: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
}

  body.greens-tasks-page .planner-entry.works {
  background-color: #e8f5e8;
  border-left: 4px solid #4caf50;
}

  body.greens-tasks-page .planner-entry.staffing {
  background-color: #fff3e0;
  border-left: 4px solid #ff9800;
}

  body.greens-tasks-page .planner-entry.equipment {
  background-color: #ffebee;
  border-left: 4px solid #f44336;
}

  body.greens-tasks-page .planner-entry strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.85rem;
  color: #555;
}

/* ==============================================
 NOTIFICATION BELL STYLES
 ============================================== */
.notification-bell {
  position: relative;
  cursor: pointer;
  font-size: 1.4rem;
  color: #333;
  margin-left: 16px;
}

.notification-bell:hover {
  color: #4caf50;
}

.notification-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #f44336;
  color: white;
  font-size: 0.7rem;
  font-weight: bold;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-dropdown {
  position: absolute;
  top: 50px;
  right: 0;
  width: 320px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  z-index: 1000;
  max-height: 400px;
  overflow-y: auto;
}

.notification-header {
  padding: 12px 16px;
  background: #4caf50;
  color: white;
  font-weight: 600;
  border-radius: 12px 12px 0 0;
}

#notification-list {
  padding: 8px 0;
}

.notification-item {
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  font-size: 0.95rem;
}

.notification-item:hover {
  background-color: #f8f9fa;
}

.notification-item.overdue {
  background-color: #ffebee;
}

.notification-item.today {
  background-color: #e8f5e8;
}

.notification-item strong {
  display: block;
  margin-bottom: 4px;
}

/* Fix dropdown text color */
#week-selector {
  color: #000 !important; /* Black text */
  background: white;
}
#week-selector option {
  color: #000; /* Black text for options */
  background: white;
}

/* ==============================================
   TIMELINE STYLES
   ============================================== */
  body.greens-tasks-page .timeline-container {
  margin-top: 30px;
  background: #f8f9fa;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

  body.greens-tasks-page .timeline-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 0.9rem;
  color: #555;
  position: relative;
}

  body.greens-tasks-page .timeline-header::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  height: 1px;
  background: #ddd;
}

  body.greens-tasks-page .timeline-grid {
  position: relative;
  height: 600px;
  background: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 59px,
    #eee 59px,
    #eee 60px
  );
  border-radius: 12px;
  overflow: hidden;
}

  body.greens-tasks-page .timeline-row {
  position: absolute;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

  body.greens-tasks-page .timeline-bar {
  height: 40px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  position: relative;
  width: 100%;
  margin: 10px 0;
}

/* Task-specific colors */
  body.greens-tasks-page .timeline-bar.turf-greens { background: #2e7d32; }
  body.greens-tasks-page .timeline-bar.turf-fairways { background: #4caf50; }
  body.greens-tasks-page .timeline-bar.turf-collars { background: #66bb6a; }
  body.greens-tasks-page .timeline-bar.turf-surrounds { background: #81c784; }
  body.greens-tasks-page .timeline-bar.bunkers { background: #ffeb3b; color: #333; }
  body.greens-tasks-page .timeline-bar.irrigation { background: #1e88e5; }
  body.greens-tasks-page .timeline-bar.machinery { background: #212121; }
  body.greens-tasks-page .timeline-bar.holiday { background: #9e9e9e; }
  body.greens-tasks-page .timeline-bar.hardware { background: #ff9800; }
  body.greens-tasks-page .timeline-bar.paths { background: #424242; }
  body.greens-tasks-page .timeline-bar.car-park { background: #616161; }

@media (max-width: 768px) {
    body.greens-tasks-page .timeline-grid {
    height: 800px;
  }
    body.greens-tasks-page .timeline-row {
    height: 80px;
  }
}

  body.greens-tasks-page .quick-tab {
  padding: 8px 16px;
  background: #f0f0f0;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}
  body.greens-tasks-page .quick-tab.active {
  background: #4caf50;
  color: white;
}

  body.greens-tasks-page .accordion-header {
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 8px 0;
}
  body.greens-tasks-page .accordion-content {
  display: none;
}
  body.greens-tasks-page .accordion-content.open {
  display: block;
}
  body.greens-tasks-page select {
  color: #000 !important;          /* Black text */
}

  select option {
  color: #000 !important;          /* Black text in dropdown options */
  background: white;               /* White background for readability */
}



/* ==============================================
   5. TASKS & PROGRESS SECTION (COMPACT VERSION)
   ============================================== */
  body.greens-tasks-page .conditions-card {
  padding: 12px 16px !important;
  margin-bottom: 16px !important;
}

  body.greens-tasks-page.progress-container {
  margin: 8px 0 !important;
}

  body.greens-tasks-page .progress-label {
  font-size: 0.75rem !important;
  margin-bottom: 2px !important;
}

  body.greens-tasks-page .progress-bar {
  height: 6px !important;
  border-radius: 3px !important;
}

  body.greens-tasks-page .task-input {
  margin-bottom: 8px sk-inputimportant;
  gap: 6px !important;
}

  body.greens-tasks-page .task-input input,
  .task-input select,
  .task-input button {
  height: 32px !important;
  font-size: 0.85rem !important;
  padding: 6px 8px !important;
}

  body.greens-tasks-page .task-list li {
  padding: 8px 0 !important;
  font-size: 0.9rem !important;
}

  body.greens-tasks-page .task-input label {
  font-size: 0.75rem !important;
  margin-bottom: 2px !important;
}

  body.greens-tasks-page .dropdown-list div {
  padding: 8px 10px !important;  
  font-size: 0.85rem !important; 
  cursor: pointer;
}

  body.greens-tasks-page .dropdown-list div:hover {
  background-color: #f0f0f0;
}
  body.greens-tasks-page h3 {
  margin: 0 0 8px 0 !important;
  font-size: 1.2rem !important;
}

  body.greens-tasks-page .task-list li {
  padding: 6px 0 !important;           
  font-size: 0.8rem !important;      
  border-bottom: 1px solid #eee !important;
}

  body.greens-tasks-page .task-list .mainRow {
  gap: 8px !important;                 
  align-items: flex-start !important;  
}

  body.greens-tasks-page .task-list .meta {
  gap: 4px !important;                
  flex-wrap: wrap !important;
}

  body.greens-tasks-page .task-list .badge {                   
  padding: 2px 6px !important;
  font-size: 0.7rem !important;
  min-width: auto !important;
}

  body.greens-tasks-page .task-list strong {
  font-size: 0.9rem !important;       
}

  body.greens-tasks-page .task-list span {                      
  font-size: 0.75rem !important;
}

  body.greens-tasks-page .task-list .toggle-details-btn {
  font-size: 0.8rem !important;
  padding: 2px 8px !important;
  margin-top: 4px !important;
}

  body.greens-tasks-page .detailsDiv {
  padding-top: 6px !important;
  margin-left: 32px !important;    
  font-size: 0.8rem !important;
}

  body.greens-tasks-page .detailsDiv button {
  font-size: 0.8rem !important;
  padding: 4px 8px !important;
}

  body.greens-tasks-page .detailsDiv .grid {
  gap: 6px !important;
  margin-top: 8px !important;
}

  body.greens-tasks-page .detailsDiv img {
  height: 80px !important;             
}

/* Week Planner / Calendar View Buttons /*
/* Tab Buttons Container */
  body.greens-tasks-page .view-tab-container {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  border-bottom: 2px solid #e0e0e0;
  padding-bottom: 4px; /* small breathing room */
}

/* Individual Tab Buttons */
  body.greens-tasks-page .view-tab {
  padding: 10px 24px;
  font-size: 1rem;
  font-weight: 600;
  color: #555;
  background: #f8f9fa;
  border: 2px solid #ddd;
  border-radius: 8px 8px 0 0; /* rounded top only */
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  bottom: -2px; /* lifts active tab above border */
}

/* Hover state */
  body.greens-tasks-page .view-tab:hover {
  background: #e9f5f0;
  border-color: #a8d5c2;
  color: #2e7d32;
}

/* Active tab */
  body.greens-tasks-page .view-tab.active {
  background: #2e7d32;           /* golf green */
  color: white;
  border-color: #2e7d32;
  border-bottom: none;           /* connects to content */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Optional: slight animation on active */
  body.greens-tasks-page .view-tab.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 4px;
  background: #2e7d32;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    body.greens-tasks-page .view-tab-container {
    flex-direction: column;
    gap: 8px;
  }

    body.greens-tasks-page .view-tab {
    width: 100%;
    border-radius: 8px;
    text-align: center;
  }

    body.greens-tasks-page .view-tab.active {
    border-bottom: 2px solid #2e7d32;
  }
}


/* ==============================================
                  CLUB CALENDAR
 ============================================== */

  #calendar-wrapper {
    max-width: 1400px;
    margin: 40px auto;
    padding: 0 20px;
  }

    body.club-calendar-page .fc .fc-toolbar-title {
    font-size: 1.6rem;
    font-weight: 600;
    color: #000000;
  }

    body.club-calendar-page .fc-button-primary {
    background-color: #729a6f;
    border-color: #729a6f;
  }

    body.club-calendar-page .fc-button-primary:hover {
    background-color: #3f693f;
    border-color: #3f693f;
  }

    body.club-calendar-page .fc-button-primary:disabled {
    background-color: #729a6f;
    border-color: #729a6f;
  }


  body.club-calendar-page .fc .fc-button-primary.fc-button-active,
  body.club-calendar-page .fc .fc-button.fc-button-active {
  background-color: #3f693f !important; /* Darker golf green - change this to any color */
  border-color: #3f693f !important;
  color: white !important;
}


  body.club-calendar-page .fc .fc-button-primary.fc-button-active:hover {
  background-color: #3f693f !important; /* Even darker on hover */
}


  body.club-calendar-page .fc .fc-button-primary.fc-button-active:focus {
  box-shadow: none !important;
}

    body.club-calendar-page .fc .fc-daygrid-day.fc-day-today {
    background: #e8f5e8;
  }

    body.club-calendar-page .fc .fc-daygrid-event {
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

    body.club-calendar-page .fc-event-club {
    background-color: #1976d2;
    border-color: #1976d2;
    color: white;
  }

    body.club-calendar-page .fc-event-renovation {
    background-color: #d32f2f;
    border-color: #d32f2f;
    color: white;
  }

    body.club-calendar-page .legend {
    margin: 20px 0;
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
  }

    body.club-calendar-page .legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
  }

    body.club-calendar-page .legend-color {
    width: 16px;
    height: 16px;
    border-radius: 4px;
  }



/* Event create modal */

body.club-calendar-page .modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

body.club-calendar-page .modal-content {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  overflow: hidden;
}

body.club-calendar-page .modal-header {
  background: #2e7d32;
  color: white;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

body.club-calendar-page .modal-header h2 {
  margin: 0;
  font-size: 1.4rem;
}

body.club-calendar-page .close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 1.6rem;
  cursor: pointer;
}

body.club-calendar-page .modal-body {
  padding: 24px;
}

body.club-calendar-page .form-group {
  margin-bottom: 20px;
}

body.club-calendar-page .form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: #333;
}

body.club-calendar-page .form-group input,
body.club-calendar-page .form-group select,
body.club-calendar-page .form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
}

body.club-calendar-page .form-group textarea {
  resize: vertical;
  min-height: 80px;
}

body.club-calendar-page .checkbox-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.club-calendar-page .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

body.club-calendar-page .form-actions button {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

#modal-cancel {
  background: #e0e0e0;
  color: #333;
}

#modal-cancel:hover {
  background: #d0d0d0;
}

#modal-save {
  background: #2e7d32;
  color: white;
}

#modal-save:hover {
  background: #1b5e20;
}

#modal-delete {
  background: #d32f2f;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

#modal-delete:hover {
  background: #b71c1c;
}

/*-----DAILY REPORT-----*/

body.daily-report-page .conditions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

body.daily-report-page .condition-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  text-align: center;
}

body.daily-report-page .condition-label {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
}

body.daily-report-page .condition-label .icon {
  margin-right: 8px;
  color: #2e7d32;
  font-size: 1.1rem;
}

body.daily-report-page .condition-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: #2e7d32;
  padding: 8px;
  background: #e8f5e8;
  border-radius: 6px;
}

 /* MESSAGE CENTRE */ 

#message-modal {
  backdrop-filter: blur(4px);
}

#message-modal  .delete-convo-btn {
  background: none;
  border: none;
  color: #ff8787;
  cursor: pointer;
  font-size: 1.1rem;
  opacity: 1;
  transition: opacity 0.2s;
}

#message-modal .delete-convo-btn:hover {
  opacity: 1;
}

#message-modal .conversation-list {
  opacity: 1 !important;
  background: #3a3a3a 
}

#message-modal .conversation-item:hover .delete-convo-btn {
  opacity: 1 !important;
  background: #3a3a3a 
}

#message-modal .conversation-item strong {
  color: #333;
}

#message-modal .conversation-item small {
  font-size: 0.9rem;
}


/* Sent message bubble */
#message-list div[style*="background: #e8f5e8"] {
  background: #3f693f !important;
  color: white !important;
}

/* Received message bubble */
#message-list div[style*="background: #f0f0f0"] {
  background: #3a3a3a !important;
  color: #e0e0e0 !important;
}

/* Input focus */
#message-input:focus {
  border-color: #729a6f !important;
  box-shadow: 0 0 0 3px rgba(114, 154, 111, 0.3);
}

/* Sent message bubble */
#message-list div[data-is-sent="true"] {
  background: #3f693f !important;
  color: white !important;
}

/* Received message bubble */
#message-list div[data-is-sent="false"] {
  background: #3a3a3a !important;
  color: #e0e0e0 !important;
}

/* Search button hover */
#search-users-btn:hover {
  background: #729a6f !important;
}

/* New message panel header */
/* New Message Panel – force light text on dark background */
#new-message-panel,
#new-message-panel * {
  color: #e0e0e0 !important; /* main text */
}

#new-message-panel label,
#new-message-panel h3 {
  color: #ffffff !important; /* brighter for labels & title */
}

#new-message-panel select,
#new-message-panel input,
#new-message-panel button {
  color: #e0e0e0 !important;
  background: #333 !important; /* dark inputs */
  border-color: #555 !important;
}

#new-message-panel select option {
  background: #333 !important;
  color: #e0e0e0 !important;
}

#new-message-panel #search-results {
  color: #e0e0e0 !important;
  background: #242424 !important;
}

#new-message-panel #search-users-btn {
  color: white !important;
}

#message-input {
  resize: none;
  overflow-y: auto;
  min-height: 44px;
  max-height: 120px;
}

@keyframes badgePulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(244,67,54,0.7); }
  70% { transform: scale(1.4); box-shadow: 0 0 0 10px rgba(244,67,54,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(244,67,54,0); }
}

.message-badge.visible {
  display: flex !important;
  animation: badgePulse 1.5s ease-out 2;
}

.message-badge.new-message {
  animation: badgePulse 1.2s ease-in-out 2; /* pulse twice */
  background: #ff4444 !important; /* brighter red for new */
}

@keyframes envelopePulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.message-icon.new-message {
  animation: envelopePulse 1s ease-in-out 3;
}
.message-icon .message-badge[style*="display: flex"] {
  display: flex !important;
}


/* ============================================================
   MOBILE NAVIGATION — Off-Canvas Sidebar
   ============================================================ */

.mobile-topbar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: #1f1f1f;
  z-index: 200;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.hamburger-btn {
  background: none;
  border: none;
  color: #dedede;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 8px;
  line-height: 1;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.hamburger-btn:hover {
  color: #ffffff;
}

.mobile-topbar-logo {
  height: 36px;
  width: auto;
}

.mobile-topbar-spacer {
  flex: 1;
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 299;
}

.sidebar-overlay.active {
  display: block;
}

body.sidebar-is-open {
  overflow: hidden;
}

@media (max-width: 768px) {
  .mobile-topbar {
    display: flex;
  }

  .app-container {
    flex-direction: row;
    padding-top: 56px;
    min-height: calc(100vh - 56px);
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: -270px;
    width: 260px;
    height: 100vh;
    z-index: 300;
    transition: left 0.27s ease;
    overflow-y: auto;
    overflow-x: hidden;
    flex-shrink: 0;
  }

  .sidebar.mobile-open {
    left: 0;
  }

  .main-content {
    width: 100%;
    padding: 16px;
    overflow-x: hidden;
  }

  .dashboard-title h1 {
    font-size: 1.8rem;
  }

  /* --- Dashboard page --- */
  body.dashboard-page .main-grid {
    grid-template-columns: 1fr;
  }

  /* --- Club information page --- */
  body.club-information-page .dashboard-header-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  body.club-information-page .club-logo-container {
    margin: 0 auto;
    margin-top: 0;
    width: 150px;
    height: 150px;
  }

  /* --- Greens dashboard — 7-day forecast, narrow to 4 cols --- */
  body.greens-dashboard-page .forecast-grid-super-compact {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }

  /* --- Tasks page tab bar --- */
  body.greens-tasks-page .view-tab-container {
    flex-direction: column;
    gap: 6px;
  }

  body.greens-tasks-page .view-tab {
    width: 100%;
    border-radius: 8px;
    text-align: center;
  }

  /* --- Flex stat rows wrap on mobile --- */
  .stats-row,
  .stat-cards {
    flex-wrap: wrap;
  }

  .stat-card {
    min-width: 140px;
    flex: 1 1 calc(50% - 12px);
  }

  /* --- Notification dropdown — keep inside screen on mobile --- */
  .notification-dropdown {
    width: calc(100vw - 32px);
    max-width: 300px;
    right: 0;
  }
}