/* ────────────────────────────────────────
   IFQM ANNUAL CALENDAR – PUBLIC STYLES
──────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700;900&family=Barlow:wght@400;500;600&display=swap');

:root {
  /* Brand Colors - Strong for borders and dots */
  --brand-red:     #ef4444; /* CEO/CXO */
  --brand-teal:    #0ea5e9; /* QEP */
  --brand-green:   #10b981; /* Symposium */
  --brand-blue:    #3b82f6; /* Learning */
  --brand-purple:  #8b5cf6; 
  --brand-cluster:  #f59e0b;  /* Cluster */
  /* Soft Backgrounds - Perfect for card fills */
  --bg-red:        #fef2f2;
  --bg-teal:       #f0f9ff;
  --bg-green:      #ecfdf5;
  --bg-blue:       #eff6ff;
  --bg-cluster:     #fff7ed;
  /* Neutrals */
  --dark:          #f8fafc;
  --mid:           #ffffff;
  --surface:       #ffffff;
  --border:        #e2e8f0;
  --text:          #1e293b; /* Darker, slightly blue-tinted gray for better contrast */
  --muted:         #64748b; 
}


#ifqm-calendar-app {
  font-family: 'Barlow', sans-serif;
  background: linear-gradient(180deg, #ffffff 0%, #fdfcfb 100%); /* Warm, airy pearl */
  border: 1px solid var(--border);
  color: var(--text);
  padding: 32px 20px 40px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}

/* ── HEADER ── */
.ifqm-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 16px;
}
.ifqm-header-title h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 900;
  letter-spacing: -0.5px;
  margin: 0 0 4px;

  background: linear-gradient(135deg, #0f172a 20%, #1d4ed8 60%, #0284c7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  text-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.ifqm-header-title p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* Legend */
.ifqm-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.ifqm-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}
.ifqm-legend-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── FILTER TABS ── */
.ifqm-filter-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.ifqm-tab {
  padding: 6px 16px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  font-family: 'Barlow', sans-serif;
  letter-spacing: .5px;
}
.ifqm-tab:hover { border-color: rgba(255,255,255,.25); color: var(--text); }
.ifqm-tab.active { color: #fff; border-color: transparent; }
.ifqm-tab[data-type="all"] {
  background: #f1f5f9;   /* soft slate */
  color: #334155;        /* strong readable text */
  border-color: #e2e8f0;
}
/* Active state */
.ifqm-tab[data-type="all"].active {
  background: #0f172a;   /* dark navy */
  color: #fff;
}
.ifqm-tab[data-type="ceo_cxo"].active  { background: var(--brand-red); }
.ifqm-tab[data-type="qep"].active      { background: var(--brand-teal); }
.ifqm-tab[data-type="symposium"].active{ background: var(--brand-green); }
.ifqm-tab[data-type="learning"].active { background: var(--brand-blue); }
.ifqm-tab[data-type="cluster"].active {  background: var(--brand-cluster);}

/* ── SCROLL WRAPPER ── */
.ifqm-scroll-outer {
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--surface) transparent;
}
.ifqm-scroll-outer::-webkit-scrollbar { height: 6px; }
.ifqm-scroll-outer::-webkit-scrollbar-track { background: transparent; }
.ifqm-scroll-outer::-webkit-scrollbar-thumb { background: var(--surface); border-radius: 3px; }

/* ── GRID ── */
.ifqm-grid {
  display: grid;
  min-width: 1100px;
  grid-template-columns: 30px repeat(12, minmax(0,1fr));
  grid-template-rows: auto var(--axis-h) auto auto;
  row-gap: 0;
}

/* Row labels */
.ifqm-row-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);

  display: flex;
  align-items: center;
  justify-content: center;

  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;          /* bigger */
  font-weight: 800;         /* stronger */
  letter-spacing: 2px;
  text-transform: uppercase;

  color: #334155;           /* darker */
  padding: 12px 0;

  border-right: 1px solid var(--border);
  
}

/* Month headers */
.ifqm-month-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: var(--axis-h);
  --border: #edf1f7;
  position: relative;
}
.ifqm-month-label {
  font-weight: 700;     /* slightly stronger */
  color: #334155;       /* darker than before */
  letter-spacing: 0.3px;
}
/* Quarter colours on axis */
.ifqm-month-cell[data-q="1"] { background: rgba(221, 54, 54, 0.086); }
.ifqm-month-cell[data-q="2"] { background: rgba(107, 47, 160, 0.085); }
.ifqm-month-cell[data-q="3"] { background: rgba(29, 63, 187, 0.089); }
.ifqm-month-cell[data-q="4"] { background: rgba(6, 148, 230, 0.149); }

/* ── AXIS LINE (horizontal bar through month row) ── */
.ifqm-axis-spacer { grid-column: 1; grid-row: 2; }

/* ── EVENT COLUMNS ── */
.ifqm-events-col {
  border-left: 1px solid var(--border);
  padding: 12px 6px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 100px;
  position: relative;
}
.ifqm-events-col::before {
  display: none;
}

/* ── EVENT CARD ── */
.ifqm-event-card {
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.4;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  border-left: 3px solid;
  background: rgba(255,255,255,.05);
  animation: fadeSlide .35s ease both;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}
.ifqm-event-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.ifqm-event-card .ev-title {
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.ifqm-event-card .ev-desc {
  color: var(--muted);
  font-size: 10px;
}

/* Type-specific tints */
/* Type-specific tints */
.ifqm-event-card[data-type="ceo_cxo"]   { background: var(--bg-red);   border-color: var(--brand-red);   }
.ifqm-event-card[data-type="qep"]       { background: var(--bg-teal);  border-color: var(--brand-teal);  }
.ifqm-event-card[data-type="symposium"] { background: var(--bg-green); border-color: var(--brand-green); }
.ifqm-event-card[data-type="learning"]  { background: var(--bg-blue);  border-color: var(--brand-blue);  }
.ifqm-event-card[data-type="cluster"] {  background: var(--bg-cluster);  border-color: var(--brand-cluster);}

/* ── QUARTER BANNER ── */
/* ────────────────────────────────────────
QUARTER BAR – CLEAN CONTINUOUS DESIGN
──────────────────────────────────────── */

/* ────────────────────────────────────────
QUARTER BAR – PPT STYLE (MATCHED)
──────────────────────────────────────── */

.ifqm-quarters-row {
margin-top: 30px;
margin-left: 80px;
display: grid;
grid-template-columns: repeat(4, 1fr);
border-radius: 12px;
overflow: hidden;
}

/* Base block */
.ifqm-quarter-block {
position: relative;
display: flex;
align-items: center;
justify-content: center;

padding: 18px 10px;
font-family: 'Barlow Condensed', sans-serif;
font-size: 26px;
font-weight: 900;
letter-spacing: 1px;
color: #fff;

text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

/* subtle refinement */

.ifqm-quarter-block {
text-shadow: 0 1px 2px rgba(0,0,0,0.3); /* lighter */
}

/* softer shine */
.ifqm-quarter-block::before {
background: linear-gradient(to bottom, rgba(255,255,255,0.12), transparent);
}

/* improved balance */

.ifqm-quarter-block:nth-child(1) {
  background: linear-gradient(135deg, #f87171, #ef4444); /* Soft red */
}
.ifqm-quarter-block:nth-child(2) {
  background: linear-gradient(135deg, #c084fc, #a855f7); /* Soft purple */
}
.ifqm-quarter-block:nth-child(3) {
  background: linear-gradient(135deg, #818cf8, #6366f1); /* Soft indigo */
}
.ifqm-quarter-block:nth-child(4) {
  background: linear-gradient(135deg, #60a5fa, #3b82f6); /* Soft blue */
}


/* Remove the aggressive multiply blend mode */
.ifqm-quarter-block {
  /* Remove background-blend-mode: multiply; */
  text-shadow: 0 1px 2px rgba(0,0,0,0.15); /* Softer shadow */
}

/* subtle separation */
.ifqm-quarter-block:not(:last-child) {
box-shadow: 2px 0 8px rgba(0,0,0,0.3);
}
body {
  background: linear-gradient(
    180deg,
    #f1f5f9 0%,
    #e6edf5 100%
  );
}

/* ── TOOLTIP ── */
.ifqm-tooltip {
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  max-width: 240px;
  font-size: 12px;
  color: var(--text);
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
  z-index: 9999;
  pointer-events: auto;
  opacity: 0;
  transition: opacity .15s;
}
.ifqm-tooltip.visible { opacity: 1; }
.ifqm-tooltip-title { font-weight: 700; margin-bottom: 4px; }
.ifqm-tooltip-desc  { color: var(--muted); }

/* ── EMPTY STATE ── */
.ifqm-empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.ifqm-loading { text-align: center; padding: 40px; color: var(--muted); }
.ifqm-quarters-row {
  display: none !important;
}

.ifqm-tooltip-btn{
    display:inline-block;
    margin-top:10px;
    padding:7px 12px;
    background:#1d4ed8;
    color:#fff;
    text-decoration:none;
    border-radius:6px;
    font-size:11px;
    font-weight:700;
}

.ifqm-tooltip-btn:hover{
    background:#1e40af;
    color:#fff;
}

@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* MOBILE VIEW */
@media (max-width: 768px) {

  .ifqm-scroll-outer {
    overflow: visible;
  }

  .ifqm-grid {
    display: none;
  }

  .ifqm-mobile {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .ifqm-mobile-month {
    background: #fff;
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  }

  .ifqm-mobile-month-title {
    font-weight: 800;
    margin-bottom: 8px;
    color: #1d3fbb;
  }

  .ifqm-mobile-card {
    padding: 10px;
    border-left: 4px solid;
    background: #f9fafc;
    border-radius: 6px;
    margin-bottom: 8px;
  }

  .ifqm-mobile-card .title {
    font-weight: 600;
    font-size: 13px;
  }

  .ifqm-mobile-card .desc {
    font-size: 11px;
    color: #666;
  }
}
@media (max-width: 1167px) {
  .ifqm-quarters-row {
    display: none !important;
  }
}