:root {
    --cal-bg:        #f8f6f1;
    --cal-surface:   #ffffff;
    --cal-border:    #e2ddd6;
    --cal-accent:    #c0392b;
    --cal-accent-lt: #fdecea;
    --cal-today-bg:  #c0392b;
    --cal-text:      #2c2825;
    --cal-muted:     #9e9790;
    --cal-header:    #2c2825;
    --shadow-sm:     0 1px 4px rgba(0,0,0,.08);
    --shadow-md:     0 4px 16px rgba(0,0,0,.10);
}
  /* ---- Filter bar ---- */
  .filter-bar {
    background: var(--cal-surface);
    border-bottom: 1px solid var(--cal-border);
    padding: .75rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
  }
  .filter-bar select {
    border: 1px solid var(--cal-border);
    border-radius: 6px;
    padding: .35rem .75rem;
    background: var(--cal-bg);
    color: var(--cal-text);
    font-family: inherit;
    font-size: .875rem;
  }
  .btn-nav {
    background: none;
    border: 1px solid var(--cal-border);
    border-radius: 6px;
    padding: .3rem .7rem;
    color: var(--cal-text);
    text-decoration: none;
    font-size: .875rem;
    transition: background .15s;
  }
  .btn-nav:hover { background: var(--cal-accent-lt); color: var(--cal-accent); border-color: var(--cal-accent); }

  /* ---- Calendar grid ---- */
  .cal-wrapper { padding: 1.5rem; }
  .cal-title { font-size: 2rem; margin-bottom: 1.25rem; }

  .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-top: 2px solid var(--cal-text);
    border-left: 1px solid var(--cal-border);
    background: var(--cal-border);
    gap: 1px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
  }
  .cal-dow {
    background: var(--cal-header);
    color: #fff;
    text-align: center;
    padding: .5rem 0;
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .cal-cell {
    background: var(--cal-surface);
    min-height: 120px;
    padding: .5rem;
    position: relative;
    vertical-align: top;
  }
  .cal-cell.other-month { background: #f3f1ed; }
  .cal-cell.is-today .day-num {
    background: var(--cal-today-bg);
    color: #fff;
    border-radius: 50%;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 500;
  }
  .day-num {
    font-size: .9rem;
    color: var(--cal-muted);
    margin-bottom: .4rem;
    display: inline-block;
  }
  .cal-cell.is-today .day-num { color: #fff; }

  /* ---- Events ---- */
  /* Default Blue */
  .event-pill {
    display: block;
    font-size: .8rem;
    font-weight: 500;
	background: #eaf3fb;
    color: #1a6fa0;
	border-left: 3px solid #2196f3;
	border-radius: 3px;
    padding: 2px 5px;
    margin-bottom: 2px;
    /*white-space: nowrap;*/
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    transition: background .15s;
    line-height: 1.6;
  }
  .event-pill:hover { background: #b2dafe; }
  .event-pill small { display: inline-block; }
  /* Do we need a special color for all day?
  .event-pill.all-day {
    cursor: pointer;
    background: #fdecea;
    color: #c0392b;
    border-color: #c0392b;
  }
  .event-pill.all-day:hover { background: #f7c5c1; }
  */
  /* Purple */
  .event-pill.multi-day {
    cursor: pointer;
    background: #f0eafc;
    color: #6b35c4;
    border-color: #9c6fda;
  }
  /* Green */
  .event-pill.dayAvailable {
    background: #B2ECAB;
    color: #1E4819;
    border-color: #307327;
  }
  .event-pill.dayAvailable:hover { background: #50BF41; }
  /* Red */
  .event-pill.private {
    background: #fdecea;
    color: #c0392b;
    border-color: #c0392b;
  }
  .event-pill.private:hover { background: #E68B81; }
  
  .more-link {
    font-size: .65rem;
    color: var(--cal-muted);
    text-decoration: none;
    display: block;
    margin-top: 2px;
  }
  .more-link:hover { color: var(--cal-accent); }

  /* ---- Modal ---- */
  .modal-header { background: var(--cal-header); color: #fff; }
  .modal-header .btn-close { filter: invert(1); }
  .modal-title { font-family: 'DM Serif Display', serif; font-size: 1.3rem; }
  .event-meta { font-size: .85rem; color: var(--cal-accent); margin-bottom: .25rem; }
  .event-meta strong { color: var(--cal-text); }
  .event-desc { margin-top: .75rem; white-space: pre-wrap; font-size: .9rem; }
  .badge-allday { background-color: #2196f3; }
  .badge-multiday { background-color: #9c6fda; }
  .badge-private { background-color: #c0392b; }

  @media (max-width: 768px) {
    .cal-grid { grid-template-columns: repeat(1, 1fr); }
    .cal-dow, .other-month, .past-day, .empty-day { display:none; }
    .cal-cell { min-height: 70px; padding: .3rem; }
    .event-pill { font-size: 1rem; }
    .cal-title { font-size: 1.5rem; }
  }