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

/* ==========================================================================
   GRA Schedule & Agenda - Custom Plugin CSS (v1.5.0)
   Branding: Gulf Response Alliance (https://www.gulfresponsealliance.org/)
   Balanced 4-Column Layout (100px Time + ALL / WORKSHOPS / DEMONSTRATIONS)
   ========================================================================== */

:root {
  --gra-font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --gra-dark: #2F2F2F;
  --gra-dark-hover: #1f1f1f;
  --gra-navy: #07005D;
  --gra-light-bg: #FFFFFF;
  --gra-border-color: #E5E7EB;
  --gra-border-dark: #374151;
  --gra-text-primary: #1F2937;
  --gra-text-muted: #6B7280;
  
  /* Category Colors */
  --gra-workshop-bg: #F2F0FF;
  --gra-workshop-text: #334155;
  --gra-workshop-badge: #E5E2FF;
  --gra-workshop-border: #392BFD;

  --gra-demo-bg: #E8F4FD;
  --gra-demo-text: #1E88E5;
  --gra-demo-badge: #E0F2FE;
  --gra-demo-border: #BAE6FD;

  --gra-general-bg: #EEF2FF;
  --gra-general-text: #07005D;
  --gra-general-badge: #E0E7FF;

  --gra-tbd-bg: #AEFDE5;
  --gra-tbd-text: #064E3B;
  --gra-tbd-border: #6EE7B7;
  
  /* Popup Theme */
  --gra-popup-accent: #0284C7;
}

/* Global Container & Box-Sizing */
.gra-schedule-wrapper {
  font-family: var(--gra-font-family) !important;
  font-size: 16px !important;
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 16px;
  color: var(--gra-text-primary);
  box-sizing: border-box;
  overflow-x: hidden;
}

.gra-schedule-wrapper *,
.gra-schedule-wrapper *::before,
.gra-schedule-wrapper *::after {
  box-sizing: border-box;
  border-radius: 0 !important; /* Flat 90-degree rectangular system */
  box-shadow: none !important; /* Flat design system without drop shadows */
}

/* Top Day Navigation Tabs */
.gra-day-tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px !important;
  flex-wrap: wrap;
  background: transparent;
  padding: 0;
  border: none;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.gra-day-tab {
  background-color: #F2F2F2 !important;
  color: var(--gra-navy) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 14px 28px !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  font-family: inherit;
}

.gra-day-tab:hover {
  background-color: #E2F4FE !important;
  color: var(--gra-navy) !important;
}

.gra-day-tab.active {
  background-color: #21B3FD !important;
  color: #FFFFFF !important;
}

.gra-day-full {
  display: inline;
}

.gra-day-short {
  display: none;
}

.gra-time-slot-group {
  display: contents;
}

.gra-mobile-time-header {
  display: none;
}

/* Category Filter Bar (Mobile) */
.gra-filter-bar {
  display: none !important;
}

/* Grid Column Headers (Desktop 4-Column Layout) */
.gra-schedule-grid-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.gra-grid-headers {
  display: grid;
  grid-template-columns: 100px 1fr 1fr 1fr;
  border-bottom: 2px solid var(--gra-border-color);
}

.gra-header-time-spacer {
  background: #FAFAFA;
  border-right: 1px solid var(--gra-border-color);
  padding: 0;
}

.gra-show-all-btn {
  background-color: #F3F4F6 !important;
  color: #4B5563 !important;
  border: none !important;
  border-right: 1px solid var(--gra-border-color) !important;
  border-radius: 0 !important;
  width: 100%;
  padding: 16px 12px;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gra-show-all-btn:hover {
  background-color: #E5E7EB !important;
  color: #07005D !important;
}

.gra-show-all-btn.active {
  background-color: var(--gra-navy) !important;
  color: #FFFFFF !important;
}

.gra-show-all-btn.active:hover {
  background-color: #050046 !important;
  color: #FFFFFF !important;
}

.gra-grid-header {
  padding: 16px 20px;
  text-align: center;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: none;
  border-radius: 0 !important;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
}

.gra-grid-header.workshops {
  background-color: var(--gra-workshop-bg) !important;
  color: var(--gra-workshop-text) !important;
  border-right: 1px solid var(--gra-border-color) !important;
}

.gra-grid-header.workshops:hover {
  background-color: #E5E2FF !important;
  color: #392BFD !important;
}

.gra-grid-header.workshops.active {
  background-color: #392BFD !important;
  color: #FFFFFF !important;
}

.gra-grid-header.workshops.active:hover {
  background-color: #2D20D6 !important;
  color: #FFFFFF !important;
}

.gra-grid-header.demonstrations {
  background-color: var(--gra-demo-bg) !important;
  color: var(--gra-demo-text) !important;
}

.gra-grid-header.demonstrations:hover {
  background-color: #E0F2FE !important;
  color: #1E88E5 !important;
}

.gra-grid-header.demonstrations.active {
  background-color: #21B3FD !important;
  color: #FFFFFF !important;
}

.gra-grid-header.demonstrations.active:hover {
  background-color: #0284C7 !important;
  color: #FFFFFF !important;
}

/* Schedule Body Rows & Unified CSS Grid Timeline (4-Column Layout) */
.gra-schedule-body {
  display: grid;
  grid-template-columns: 100px 1fr 1fr 1fr;
  grid-auto-rows: minmax(75px, auto);
  position: relative;
  border-bottom: 2px solid var(--gra-border-color);
  background: #FFFFFF;
}

/* Background Time Grid Lines */
.gra-grid-bg-line {
  grid-column: 1 / span 4;
  border-bottom: 1px dashed #E5E7EB;
  pointer-events: none;
  z-index: 1;
}

.gra-time-label {
  padding: 14px 8px;
  font-weight: 800 !important;
  font-size: 18px !important;
  color: var(--gra-navy) !important;
  border-right: 1px solid var(--gra-border-color);
  border-bottom: 1px dashed #E5E7EB;
  background: #FAFAFA;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  border-radius: 0 !important;
  z-index: 2;
  grid-column: 1;
}

/* Column Slots with Height Duration Spanning */
.gra-column-slot {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 75px;
  height: 100%;
  box-sizing: border-box;
  transition: all 0.2s ease;
  z-index: 3;
}

.gra-column-slot.workshops {
  grid-column: 3;
  border-right: 1px solid var(--gra-border-color);
  background: #FAFBFD;
}

.gra-column-slot.demonstrations {
  grid-column: 4;
  background: #FAFBFD;
}

.gra-column-slot.full-width {
  grid-column: 2;
  border-right: 1px solid var(--gra-border-color);
  background: #FAFBFD;
  z-index: 4;
}

.gra-column-slot.hidden,
.gra-card.hidden,
.gra-tbd-card.hidden {
  display: none !important;
}

.gra-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 0 !important;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.22s ease-in-out;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
  box-shadow: none !important;
  flex: 1 1 auto;
  width: 100%;
  box-sizing: border-box;
  min-height: fit-content;
}

.gra-card:hover {
  transform: translateY(-2px);
  border-color: #94A3B8;
  z-index: 10;
}

.gra-card.workshop-card {
  border-left: 4px solid #392BFD !important;
}

.gra-card.workshop-card.selected {
  background-color: #F2F0FF !important;
  border-color: #392BFD !important;
}

.gra-card.demo-card {
  border-left: 4px solid var(--gra-demo-text);
}

.gra-card.demo-card.selected {
  background-color: #F0F7FF;
  border-color: var(--gra-demo-text);
}

.gra-card.general-card {
  border-left: 4px solid var(--gra-navy);
}

.gra-card.general-card.selected {
  background-color: #EEF2FF;
  border-color: var(--gra-navy);
}

.gra-card.offset-30-min {
  margin-top: 37.5px;
}

.gra-card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gra-badge {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 0 !important;
  text-transform: uppercase;
}

.gra-badge.workshop {
  background: #E5E2FF !important;
  color: #392BFD !important;
}

.gra-badge.demo {
  background: var(--gra-demo-badge);
  color: var(--gra-demo-text);
}

.gra-badge.general {
  background: var(--gra-general-badge);
  color: var(--gra-navy);
}

/* Checkbox Toggle Button */
.gra-checkbox-btn {
  width: 22px !important;
  height: 22px !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 0 !important;
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: all 0.2s ease !important;
  color: transparent !important;
}

.gra-card.selected .gra-checkbox-btn {
  background: #07005D !important;
  background-color: #07005D !important;
  border-color: #07005D !important;
  color: #FFFFFF !important;
}

.gra-checkbox-btn svg {
  width: 14px;
  height: 14px;
  opacity: 0;
  stroke-width: 3;
  transition: opacity 0.2s ease;
}

.gra-card.selected .gra-checkbox-btn svg {
  opacity: 1;
}

.gra-card-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  line-height: 1.35 !important;
  margin: 1px 0 2px 0;
}

.gra-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px !important;
  color: var(--gra-text-muted) !important;
  flex-wrap: wrap;
}

.gra-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.gra-meta-item svg {
  width: 13px;
  height: 13px;
  color: var(--gra-text-muted);
}

.gra-card-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: auto;
  padding-top: 4px;
}

/* Clickable Micro Button Pill ("View Details ->") */
.gra-card-action-btn {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0284C7 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: #F1F5F9 !important;
  border: none !important;
  padding: 4px 10px !important;
  transition: all 0.2s ease !important;
}

.gra-card-action-btn .gra-arrow {
  font-size: 7px !important;
  display: inline-block;
  line-height: 1;
  margin-left: 2px;
  transition: transform 0.2s ease;
}

.gra-card:hover .gra-card-action-btn {
  background: #07005D !important;
  color: #FFFFFF !important;
  border: none !important;
}

.gra-card:hover .gra-card-action-btn .gra-arrow {
  transform: translateX(2px);
}

/* Time to be Confirmed (TBD) Section */
.gra-tbd-section {
  margin-top: 40px;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0;
}

.gra-tbd-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #065F46 !important;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.gra-tbd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.gra-tbd-card {
  background: #AEFDE5 !important;
  background-color: #AEFDE5 !important;
  border: 1px solid #6EE7B7 !important;
  border-radius: 0 !important;
  padding: 16px 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: none !important;
}

.gra-tbd-card:hover {
  transform: translateY(-2px);
  border-color: #10B981 !important;
}

.gra-tbd-card-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #064E3B !important;
  margin-bottom: 6px;
}

.gra-tbd-card-meta {
  font-size: 14px !important;
  color: #047857 !important;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Bottom Action Bar & Download Button */
.gra-bottom-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 36px;
}

.gra-download-note {
  font-size: 15px !important;
  color: var(--gra-text-muted) !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-align: center;
  font-weight: 500;
}

.gra-download-note svg {
  color: #0284C7;
  flex-shrink: 0;
}

.gra-download-btn {
  background-color: #21B3FD !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 16px 42px !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  box-shadow: none !important;
}

.gra-download-btn:hover {
  background-color: #07005D !important;
  color: #FFFFFF !important;
  transform: translateY(-2px);
}

/* Modal Popup Overlay */
.gra-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(7, 0, 93, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  padding: 20px;
}

.gra-modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* Modal Popup Container */
.gra-modal-container {
  background: #FFFFFF;
  border-radius: 0 !important;
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.25s ease;
  padding: 32px 36px;
  font-size: 16px !important;
  box-shadow: none !important;
}

.gra-modal-overlay.open .gra-modal-container {
  transform: translateY(0) scale(1);
}

.gra-modal-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: #F1F5F9;
  border: none;
  border-radius: 0 !important;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #64748B;
  font-size: 20px !important;
  transition: all 0.2s ease;
}

.gra-modal-close-btn:hover {
  background: var(--gra-navy);
  color: #FFFFFF;
}

.gra-modal-badge {
  display: inline-block;
  margin-bottom: 16px;
}

.gra-modal-hero-graphic {
  width: 100%;
  height: 200px;
  background: #F1F5F9;
  border-radius: 0 !important;
  display: none;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  overflow: hidden;
}

.gra-modal-hero-graphic.has-image {
  display: flex;
}

.gra-modal-hero-graphic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gra-modal-title {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: var(--gra-navy) !important;
  line-height: 1.3 !important;
  margin-bottom: 16px;
}

.gra-modal-meta-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 15px !important;
  color: #475569 !important;
  margin-bottom: 20px;
}

.gra-modal-meta-item strong {
  color: var(--gra-navy);
  font-weight: 700;
}

.gra-modal-divider {
  height: 1px;
  background: #E2E8F0;
  margin: 20px 0;
}

.gra-modal-description {
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: #334155 !important;
  margin-bottom: 28px;
}

/* Speaker Section */
.gra-modal-section-label {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em;
  color: #0284C7 !important;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.gra-speaker-box {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.gra-speaker-avatar {
  width: 56px;
  height: 56px;
  border-radius: 0 !important;
  background: #CBD5E1;
  object-fit: cover;
  flex-shrink: 0;
}

.gra-speaker-name {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--gra-navy) !important;
}

.gra-speaker-title {
  font-size: 14px !important;
  color: #64748B !important;
}

/* Partner Organizations List */
.gra-partners-list {
  list-style-type: disc;
  padding-left: 20px;
  margin-bottom: 28px;
  color: #334155 !important;
  font-size: 15px !important;
}

.gra-partners-list li {
  margin-bottom: 4px;
}

/* Sub-schedule List inside Popup */
.gra-subschedule-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.gra-subschedule-group-title {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--gra-navy) !important;
  margin-top: 12px;
  margin-bottom: 4px;
}

.gra-subschedule-item {
  display: flex;
  gap: 16px;
  font-size: 15px !important;
  color: #334155 !important;
}

.gra-subschedule-time {
  font-weight: 700 !important;
  width: 110px;
  flex-shrink: 0;
  color: #0284C7 !important;
}

/* Print Container Screen Hiding */
#gra-print-container {
  display: none !important;
}

/* Print / PDF Export Styles */
@media print {
  @page {
    size: auto;
    margin: 12mm;
  }

  html, body {
    background: #FFFFFF !important;
    color: #000000 !important;
    height: auto !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body > *:not(#gra-print-container) {
    display: none !important;
  }

  .gra-schedule-wrapper,
  .gra-modal-overlay,
  .gra-bottom-bar,
  header, footer, nav, sidebar, .elementor {
    display: none !important;
  }

  #gra-print-container {
    display: block !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #FFFFFF !important;
    color: #000000 !important;
    font-family: var(--gra-font-family), system-ui, sans-serif !important;
  }

  #gra-print-container * {
    visibility: visible !important;
  }

  /* Light Brand Blue Header Block */
  .gra-print-header {
    background-color: #F0F9FF !important; /* Soft light brand blue */
    border: 1px solid #BAE6FD !important;
    border-left: 6px solid #0284C7 !important; /* Brand blue accent bar */
    padding: 16px 20px !important;
    margin-bottom: 24px !important;
    border-radius: 0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .gra-print-title {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0369A1 !important; /* Brand dark blue text */
    margin-bottom: 4px !important;
    line-height: 1.3 !important;
  }

  .gra-print-subtitle {
    font-size: 14px !important;
    color: #0C4A6E !important;
    font-weight: 600 !important;
  }

  .gra-print-day-header {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #07005D !important;
    background: #F8FAFC !important;
    padding: 8px 12px !important;
    border-left: 4px solid #392BFD !important;
    margin: 20px 0 12px 0 !important;
    break-after: avoid !important;
    page-break-after: avoid !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .gra-print-item {
    border: 1px solid #E2E8F0 !important;
    border-radius: 0 !important;
    padding: 12px 16px !important;
    margin-bottom: 10px !important;
    background: #FFFFFF !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  .gra-print-item-title {
    font-weight: 700 !important;
    font-size: 15px !important;
    color: #0F172A !important;
    margin-bottom: 4px !important;
  }

  .gra-print-item-meta {
    font-size: 13.5px !important;
    color: #475569 !important;
    line-height: 1.4 !important;
  }

  /* Category Badges for Print View */
  .gra-print-badge {
    display: inline-block !important;
    padding: 2px 8px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    border-radius: 4px !important;
    margin-right: 6px !important;
    letter-spacing: 0.05em !important;
    vertical-align: middle !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .gra-print-badge.workshop {
    background-color: #E5E2FF !important;
    color: #392BFD !important;
    border: 1px solid #392BFD !important;
  }

  .gra-print-badge.demo {
    background-color: #E0F2FE !important;
    color: #0369A1 !important;
    border: 1px solid #38BDF8 !important;
  }

  .gra-print-badge.general {
    background-color: #F1F5F9 !important;
    color: #334155 !important;
    border: 1px solid #CBD5E1 !important;
  }
}

/* Responsive Rules */
@media (max-width: 900px) {
  .gra-grid-headers {
    grid-template-columns: 80px minmax(260px, 1fr) minmax(260px, 1fr) minmax(260px, 1fr);
    min-width: 860px;
  }
  
  .gra-schedule-body {
    grid-template-columns: 80px minmax(260px, 1fr) minmax(260px, 1fr) minmax(260px, 1fr);
    min-width: 860px;
  }
  
  .gra-day-tab {
    min-width: 170px;
    padding: 12px 16px !important;
    font-size: 15px !important;
  }
}

@media (max-width: 768px) {
  .gra-schedule-wrapper {
    padding: 16px 8px;
  }

  .gra-day-full {
    display: none !important;
  }

  .gra-day-short {
    display: inline !important;
  }

  .gra-day-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    overflow-x: visible !important;
  }

  .gra-day-tab {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 12px 4px !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    border-radius: 0 !important;
    text-align: center !important;
    background-color: #F2F2F2 !important;
    color: var(--gra-navy) !important;
    border: none !important;
    transition: all 0.2s ease !important;
  }

  .gra-day-tab:hover {
    background-color: #E2F4FE !important;
    color: var(--gra-navy) !important;
  }

  .gra-day-tab.active {
    background-color: #21B3FD !important;
    color: #FFFFFF !important;
  }

  .gra-filter-bar {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    margin-top: 10px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
  }

  .gra-filter-btn {
    background-color: #F1F5F9 !important;
    color: #475569 !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 0 !important;
    padding: 9px 4px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    cursor: pointer;
    text-align: center !important;
    transition: all 0.2s ease;
  }

  .gra-filter-btn[data-filter="all"].active {
    background-color: var(--gra-navy) !important;
    color: #FFFFFF !important;
    border-color: var(--gra-navy) !important;
  }

  .gra-filter-btn[data-filter="workshop"].active {
    background-color: #392BFD !important;
    color: #FFFFFF !important;
    border-color: #392BFD !important;
  }

  .gra-filter-btn[data-filter="demo"].active {
    background-color: #21B3FD !important;
    color: #FFFFFF !important;
    border-color: #21B3FD !important;
  }

  .gra-filter-btn[data-filter="workshop"]:hover:not(.active) {
    background-color: #E5E2FF !important;
    color: #392BFD !important;
  }

  .gra-filter-btn[data-filter="demo"]:hover:not(.active) {
    background-color: #E0F2FE !important;
    color: #0284C7 !important;
  }

  .gra-schedule-grid-container {
    overflow-x: visible !important;
    min-width: 0 !important;
  }

  .gra-grid-headers {
    display: none !important;
  }

  .gra-schedule-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    min-width: 0 !important;
  }

  .gra-grid-bg-line,
  .gra-time-label {
    display: none !important;
  }

  .gra-time-slot-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .gra-time-slot-group.hidden {
    display: none !important;
  }

  .gra-mobile-time-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--gra-navy) !important;
    margin-bottom: 2px !important;
    padding-bottom: 4px !important;
    border-bottom: 1px solid #E2E8F0 !important;
  }

  .gra-mobile-time {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--gra-navy) !important;
  }

  .gra-mobile-same-time {
    background: #FEF3C7 !important;
    color: #92400E !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 2px 7px !important;
    border-radius: 12px !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
  }

  .gra-column-slot {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .gra-card {
    margin-top: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 14px !important;
  }

  .gra-card-title {
    font-size: 14.5px !important;
  }

  .gra-card-meta {
    font-size: 13px !important;
  }

  .gra-modal-container {
    padding: 20px 14px;
  }
}