.content-container {

      max-width: 700px;

      margin: 40px auto;

      padding: 20px;

      background-color: #2a394d;

      border-radius: 12px;

      box-shadow: 0 0 15px rgba(0,0,0,0.5);

    }



    .styled-form label {

      display: block;

      margin-top: 15px;

      font-weight: bold;

    }



    .styled-form input,

    .styled-form textarea,

    .styled-form select {

      width: 100%;

      padding: 10px;

      margin-top: 5px;

      border-radius: 8px;

      border: 1px solid #ccc;

      font-family: 'Orbitron', sans-serif;

      background-color: #1e2a38;

      color: #f0f0f0;

    }



    .styled-form button {

      margin-top: 20px;

      padding: 10px 20px;

      font-weight: bold;

      border: none;

      border-radius: 8px;

      background: linear-gradient(to right, #e75700, #ff9800);

      color: white;

      cursor: pointer;

    }



    .styled-form button:hover {

      background: linear-gradient(to right, #ff9800, #e75700);

    }

    

    .fc {

      background-color: #1e2a38;

      color: #f0f0f0;

    }



    .fc-toolbar-title {

      color: #f0f0f0;

      font-family: 'Orbitron', sans-serif;

    }



    .fc-button {

      background-color: #e75700;

      border: none;

      color: #fff;

      font-weight: bold;

      border-radius: 6px;

    }



    .fc-button:hover {

      background-color: #bb6a1e;

    }



    .fc-event {

      color: rgb(252, 250, 249) !important;

      text-shadow: none !important;

      border: none !important;

      border-radius: 4px !important;

      padding: 2px 6px !important;

      margin: 1px 0 !important;

      font-size: 20px !important;

      line-height: 1.2 !important;

      overflow: hidden !important;

      display: flex !important;

      justify-content: space-between !important;

      align-items: center !important;

    }

    /* Event title styling */

    .fc-event-title {

      font-weight: 500 !important;

      white-space: nowrap !important;

      overflow: hidden !important;

      text-overflow: ellipsis !important;

      flex: 1 !important;

      text-align: left !important;

      margin-right: 8px !important;

      white-space: nowrap !important;

    }



    .fc-event-title-container {

      display: flex !important;

      justify-content: space-between !important;

      align-items: center !important;

      width: 100% !important;

    }



    /* Event time styling */

    .fc-event-time {

      font-weight: 400 !important;

      opacity: 0.9 !important;

      flex-shrink: 0 !important;

      text-align: right !important;

      font-size: 10px !important;

    }

    .fc-daygrid-event {

      display: flex !important;

      justify-content: space-between !important;

    }



    .fc-daygrid-event .fc-event-main {

      display: flex !important;

      justify-content: space-between !important;

      width: 100% !important;

    }



    /* Different colors for different event categories */

    .fc-event[style*="background"] {

      background: #3498db !important; /* Default blue */

    }



    /* You can add specific colors for different categories */

    .fc-event:nth-child(odd) {

      background: #3498db !important; /* Blue */

    }



    .fc-event:nth-child(even) {

      background: #2ecc71 !important; /* Green */

    }



    /* Monthly view specific styling */

    .fc-dayGridMonth-view .fc-event {

      font-size: 10px !important;

      padding: 1px 3px !important;

    }



    .fc-daygrid-day-number {

      color: #f0f0f0;

    }



    .fc-event.fc-event-start.fc-event-end {

      background: #1e2a38 !important;

    }

    /* Style for finished events */

    .fc-event.event-ended {

      color: #888 !important;

      opacity: 0.7;

    }



    .fc-event.event-active {

      color: white !important;

      font-weight: bold;

    }



    .fc-event.event-upcoming {

      color: white !important;

    }



    .calendar-wrapper {

      max-width: 1000px;

      margin: 40px auto;

      padding: 20px;

      background: #2c3e50;

      border-radius: 12px;

      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

    }



    .rsvp-modal {

      position: fixed;

      top: 0; left: 0; width: 100%; height: 100%;

      background: rgba(0,0,0,0.7);

      display: none;

      justify-content: center;

      align-items: center;

      z-index: 9999;

    }



    .event-datetime {

      font-size: 16px;

      color: #f7f6f6;

      margin: 4px 0 16px 0;

      padding: 4px 6px;

      background-color: #2c3e50;

      border-radius: 4px;

      text-align: center;

    }



    .event-description {

      font-size: 16px;

      color: #f7f6f6;

      margin: 8px 0 16px 0;

      padding: 8px 12px;

      background-color: #2c3e50;

      border-radius: 4px;

      text-align: center;

    }



    .event-info {

      font-size: 16px;

      color: #f7f6f6;

      margin: 8px 0 16px 0;

      padding: 8px 12px;

      font-size: .9rem;

      background-color: #2c3e50;

      border-radius: 4px;

      text-align: center;

    }





    /* Modal container remains full screen */

    .rsvp-modal {

      position: fixed;

      top: 0; left: 0; width: 100%; height: 100%;

      background: rgba(0,0,0,0.7);

      display: none;

      justify-content: center;

      align-items: center;

      z-index: 9999;

    }



    /* Modal content box */

    .modal-content {

      background: #2c3e50;

      color: #fff;

      border-radius: 10px;

      width: min(700px, 100%);

      max-height: calc(100dvh - 48px);  /* never taller than the viewport */

      overflow-y: auto;                  /* scroll inside the dialog */

      box-sizing: border-box;

      margin: 0 auto; 

      padding: 12px;                     /* feel free to tweak */

    }



    /* Make action buttons stay visible while scrolling (optional but nice) */

    .modal-buttons {

      position: sticky;

      bottom: 0;

      background: #2c3e50;

      padding-top: 8px;

      padding-bottom: 8px;

      margin-top: 8px;

      border-top: 1px solid #444;

    }



    /* Prefer the *stable* viewport unit when supported */

    @supports (height: 100svh) {

      .rsvp-modal { height: 100svh; }

      .modal-content { max-height: calc(100svh - 48px); }

    }



    .modal-buttons button {

      padding: 10px 16px;

      background: #c57746;

      border: none;

      color: #fff;

      border-radius: 6px;

      font-weight: bold;

      font-size: 1.3rem;

      cursor: pointer;

      transition: background 0.2s ease;

    }



    .modal-buttons button:hover {

      background: #d38033;

    }

    /* RSVP Sections as grid (desktop) */

    #attendee-sections {

      display: grid;

      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));

      gap: 20px;

      margin-top: 15px;

      text-align: left;

      justify-items: center;

    }



    /* Individual RSVP box */

    .attendee-group {

      background: #1e2a38;

      border: 1px solid #444;

      border-radius: 8px;

      padding: 10px;

      width: 100%;

      max-width: 200px;

      box-sizing: border-box;

    }



    /* RSVP Headings */

    .attendee-group h4 {

      text-align: center;

      font-size: 0.9rem;

      border-bottom: 1px solid #444;

      padding-bottom: 4px;

      margin: 0 0 6px;

    }



    /* List styles */

    .attendee-group ul {

      padding-left: 20px;

      list-style: disc;

      margin: 0;

    }



    .attendee-group li {

      white-space: nowrap;

      overflow: hidden;

      text-overflow: ellipsis;

      color: #f0f0f0;

      font-size: 0.9rem;

    }



    .form-grid {

      display: grid;

      grid-template-columns: 150px 1fr;

      gap: 10px 15px;

      align-items: center;

      margin-top: 20px;

    }



    .form-grid label {

      text-align: right;

      font-weight: bold;

    }



    .form-grid input[type="text"],

    .form-grid input[type="datetime-local"],

    .form-grid input[type="number"],

    .form-grid textarea {

      width: 100%;

      padding: 8px;

      border-radius: 6px;

      border: 1px solid #ccc;

      background-color: #1e2a38;

      color: white;

      font-family: 'Orbitron', sans-serif;

    }



    .form-grid input[type="checkbox"] {

      transform: scale(1.2);

    }



    .form-grid button {

      grid-column: 2 / 3; /* Align under inputs */

      justify-self: start;

      margin-top: 10px;

    }

    .form-grid input[type="checkbox"] {

      justify-self: start;

      transform: scale(1.2);

      margin-left: 0;

    }

    .form-grid label[for="auto_assign_roles"] {

      margin-bottom: -6px;

    }



    .form-actions {

      display: flex;

      gap: 10px;

    }



    .pgv-button.alt {

      background: #555;

    }



    .pgv-button.alt:hover {

      background: #777;

    }



    .weekday-checkboxes {

      display: flex;

      justify-content: center;

      gap: 10px;

      flex-wrap: wrap;

      margin-top: 5px;

      margin-bottom: 15px;

    }

    .weekday-checkboxes label {

      background: #1e2a38;

      padding: 6px 10px;

      border-radius: 6px;

      border: 1px solid #ccc;

      font-size: 0.85rem;

      cursor: pointer;

    }

    .weekday-checkboxes input {

      margin-right: 4px;

    }

    .calendar-controls {

        display: flex;

        justify-content: center;

        align-items: center;

        gap: 20 px;

        margin-bottom: 20px;

    }

    /* Complete cleanup of list view decorations */

    /* Remove dots from all FullCalendar views */

    .fc-event-dot,

    .fc-list-event-dot,

    .fc-daygrid-event-dot,

    .fc-timegrid-event-dot {

      display: none !important;

    }



    /* Remove any event markers/bullets */

    .fc-event .fc-event-main::before,

    .fc-list-event .fc-list-event-graphic,

    .fc-list-event .fc-list-event-marker {

      display: none !important;

    }



    /* Clean up any remaining dot elements */

    .fc-event::before,

    .fc-event .fc-event-dot {

      display: none !important;

    }

    .fc-list-event-graphic,

    .fc-list-event .fc-list-event-marker {

      display: none !important;

    }



    .fc-list-table td {

      border: none !important;

      border-bottom: 1px solid #34495e !important;

    }



    .fc-list-event {

      border: none !important;

      background: #34495e !important;

    }



    .fc-list-event:hover {

      background: #3c4f66 !important;

    }

    

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

    /* Mobile Responsive Tweaks (<= 600px) */

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

    /* Mobile refinements */

      @media (max-width: 500px) {

        .modal-content {

          padding: 16px;

          width: 100%;

          max-width: 95vw;

          margin: 10px auto;

          max-height: calc(100svh - 32px);

        }

      }



    .modal-content {

      padding: 20px;

      max-width: 95vw;

      margin: 10px;

    }

    .attendee-group {

      max-width: none;

      width: 100%;

    }

    .form-grid {

      grid-template-columns: 1fr;

    }



    .form-grid label {

      text-align: left;

      margin-bottom: 4px;

    }

    .pgv-button,

    .form-actions button {

      width: 100%;

      max-width: 100%;

    }

    .form-actions {

      flex-direction: column;

      align-items: stretch;

    }



    .pgv-button.alt {

      background: #555;

    }



    .pgv-button.alt:hover {

      background: #777;

    }

    #rsvp_limit_input_wrapper {

      display: grid;

      grid-template-columns: 150px 1fr;

      gap: 10px 15px;

      grid-column: span 2;

      align-items: center;

    }

    .calendar-controls {

      flex-direction: column;

    }



    .fc-header-toolbar {

      flex-direction: column !important;

      align-items: center !important;

      gap: 10px !important;

    }

      

    .fc-toolbar-chunk {

      display: flex !important;

      justify-content: center !important;

      margin: 0 !important;

    }

      

    /* Stack the view buttons */

    .fc-toolbar-chunk:last-child {

      order: 1 !important;

    }

      

      /* Title in middle */

    .fc-toolbar-chunk:nth-child(2) {

      order: 0 !important;

      margin-bottom: 5px !important;

    }

      

      /* Navigation buttons */

    .fc-toolbar-chunk:first-child {

      order: -1 !important;

    }

      

      /* Make view buttons smaller on mobile */

    .fc-button-group .fc-button {

      font-size: 12px !important;

      padding: 5px 8px !important;

    }



    .fc-list-table td {

    padding: 8px 10px !important;

    }

    

    .fc-list-event-time {

      width: 100px !important;

      font-size: 12px !important;

      padding: 8px 10px !important;

    }

    

    .fc-list-event-title {

      font-size: 14px !important;

      padding: 8px 10px !important;

    }

    

    /* Stack time and title vertically on very small screens */

    @media (max-width: 480px) {

      .fc-list-table {

        display: block !important;

      }

      

      .fc-list-event {

        display: block !important;

        padding: 10px !important;

      }

      

      .fc-list-event-time,

      .fc-list-event-title {

        display: block !important;

        width: 100% !important;

        padding: 5px 0 !important;

      }

      

      .fc-list-event-time {

        font-weight: bold !important;

        color: #3498db !important;

        margin-bottom: 5px !important;

      }

    }



  /* Extra small screens */

  @media (max-width: 480px) {

    .fc-toolbar-chunk:last-child .fc-button-group {

      flex-wrap: wrap !important;

      gap: 5px !important;

    }

    

    .fc-button {

      font-size: 11px !important;

      padding: 4px 6px !important;

    }

  }