/* ═══════════════════════════════════════════════════════════
   Google Calendar-style display  (gcal)
   ═══════════════════════════════════════════════════════════ */

/* ── <pre> wrapper reset ─────────────────────────────────────
   Elementor's "Text/Code" widget can render shortcode output
   inside a <pre> element. The browser default for <pre> adds
   margin (~1em top+bottom), sets font-family to monospace, and
   sets white-space: pre — all of which break the calendar. */
pre:has(.grplife-gcal-wrapper) {
    margin:      0 !important;
    padding:     0 !important;
    background:  transparent !important;
    border:      none !important;
    white-space: normal !important;
    font-family: inherit !important;
    font-size:   inherit !important;
}

/* ── WordPress theme margin + padding reset ──────────────────
   Themes (Astra, Divi, GeneratePress, etc.) add margin and/or
   padding to every block-level div inside content areas.
   Both must be zeroed to eliminate all injected whitespace. */
.grplife-gcal-wrapper,
.gcal-container,
.gcal-container .gcal-body,
.gcal-container .gcal-month-view,
.gcal-container .gcal-week-view,
.gcal-container .gcal-schedule-view,
.gcal-container .gcal-weekday-row,
.gcal-container .gcal-days-grid,
.gcal-container .gcal-day-cell,
.gcal-container .gcal-day-events,
.gcal-container .gcal-schedule-list,
.gcal-container .gcal-week-inner,
.gcal-container .gcal-week-col-headers,
.gcal-container .gcal-week-allday-row,
.gcal-container .gcal-week-scroll,
.gcal-container .gcal-week-grid,
.gcal-container .gcal-week-time-col,
.gcal-container .gcal-week-day-col {
    margin:  0 !important;
    padding: 0 !important;
}

/* Wrapper: constrain to its column, and reset any inherited
   pre/code font and whitespace so the calendar never inherits
   monospace or white-space:pre from an ancestor element. */
.grplife-gcal-wrapper {
    width:       100%;
    max-width:   100%;
    box-sizing:  border-box;
    white-space: normal !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
    font-size:   14px !important;
}

.gcal-container {
    --gcal-accent:     #5c6bc0;
    --gcal-today-bg:   #1a73e8;
    --gcal-border:     #dadce0;
    --gcal-bg:         #ffffff;
    --gcal-header-bg:  #f8f9fa;
    --gcal-text:       #3c4043;
    --gcal-text-muted: #70757a;
    --gcal-radius:     8px;

    width:         100%;
    box-sizing:    border-box;
    background:    var(--gcal-bg);
    border:        1px solid var(--gcal-border);
    border-radius: var(--gcal-radius);
    font-family:   inherit;
    font-size:     14px;
    color:         var(--gcal-text);
    position:      relative;
    box-shadow:    0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
}

/* ── Header ─────────────────────────────────────────────────── */

.gcal-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         8px 12px;
    background:      var(--gcal-header-bg);
    border-bottom:   1px solid var(--gcal-border);
    border-radius:   var(--gcal-radius) var(--gcal-radius) 0 0;
    flex-wrap:       nowrap;
    gap:             8px;
    box-sizing:      border-box;
    min-height:      52px;
    margin:          0;
}

.gcal-header-left {
    display:     flex;
    align-items: center;
    gap:         2px;
    flex:        1;
    min-width:   0;
    overflow:    hidden;
    margin:      0;
}

.gcal-nav {
    all:           unset;
    cursor:        pointer;
    width:         34px;
    height:        34px;
    min-width:     34px;
    border-radius: 50%;
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     22px;
    line-height:   1;
    color:         var(--gcal-text-muted);
    transition:    background 0.15s;
    box-sizing:    border-box;
    margin:        0;
    padding:       0;
}

.gcal-nav:hover { background: rgba(0,0,0,0.07); color: var(--gcal-text); }

/* div title — no h2 semantics so theme heading styles can't bleed in */
.gcal-title {
    all:           initial;
    font-family:   -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size:     17px;
    font-weight:   500;
    line-height:   1.2;
    color:         #3c4043;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    margin:        0 6px;
    padding:       0;
    flex:          1;
    min-width:     0;
    display:       block;
}

.gcal-view-switcher {
    display:       flex;
    background:    rgba(0,0,0,0.05);
    border-radius: 8px;
    padding:       3px;
    gap:           2px;
    flex-shrink:   0;
    margin:        0;
}

.gcal-view-btn {
    all:           unset;
    cursor:        pointer;
    width:         32px;
    height:        32px;
    min-width:     32px;
    border-radius: 6px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    color:         var(--gcal-text-muted);
    transition:    background 0.15s, color 0.15s;
    box-sizing:    border-box;
    margin:        0;
    padding:       0;
}

.gcal-view-btn:hover { background: rgba(0,0,0,0.07); color: var(--gcal-text); }
.gcal-view-btn.active { background: #fff; color: var(--gcal-accent); box-shadow: 0 1px 3px rgba(0,0,0,0.18); }

/* ── Month view ─────────────────────────────────────────────── */

.gcal-weekday-row {
    display:               grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom:         1px solid var(--gcal-border);
    margin:                0;
    padding:               0;
}

.gcal-weekday {
    text-align:     center;
    padding:        7px 0;
    font-size:      11px;
    font-weight:    500;
    letter-spacing: 0.06em;
    color:          var(--gcal-text-muted);
    text-transform: uppercase;
    box-sizing:     border-box;
    margin:         0;
}

.gcal-days-grid {
    display:               grid;
    grid-template-columns: repeat(7, 1fr);
    width:                 100%;
    box-sizing:            border-box;
    margin:                0;
    padding:               0;
}

.gcal-day-cell {
    border-right:  1px solid var(--gcal-border);
    border-bottom: 1px solid var(--gcal-border);
    min-height:    84px;
    padding:       3px 3px 5px;
    box-sizing:    border-box;
    min-width:     0;
    overflow:      hidden;
    margin:        0;
}

.gcal-day-cell:nth-child(7n)                       { border-right: none; }
.gcal-days-grid .gcal-day-cell:nth-last-child(-n+7) { border-bottom: none; }

.gcal-day-num {
    font-size:       12px;
    font-weight:     400;
    color:           var(--gcal-text);
    text-align:      center;
    width:           24px;
    height:          24px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    border-radius:   50%;
    margin:          2px auto 3px;
    line-height:     1;
    flex-shrink:     0;
}

.gcal-other-month .gcal-day-num { color: var(--gcal-text-muted); }
.gcal-today .gcal-day-num { background: var(--gcal-today-bg); color: #fff; font-weight: 700; }

.gcal-day-events {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    overflow:       hidden;
    margin:         0;
    padding:        0;
}

.gcal-event-chip {
    display:       block;
    background:    var(--gcal-accent);
    color:         #ffffff;
    border-radius: 3px;
    padding:       2px 4px;
    font-size:     11px;
    cursor:        pointer;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    min-width:     0;
    max-width:     100%;
    line-height:   1.5;
    box-sizing:    border-box;
    transition:    filter 0.15s;
    margin:        0;
}

.gcal-event-chip:hover { filter: brightness(0.88); }

.gcal-more {
    font-size:   11px;
    color:       var(--gcal-text-muted);
    padding:     1px 3px;
    cursor:      pointer;
    white-space: nowrap;
    margin:      0;
    line-height: 1.4;
}

.gcal-more:hover { color: var(--gcal-accent); text-decoration: underline; }

/* ── Week view ──────────────────────────────────────────────── */

.gcal-week-view {
    overflow-x:                 auto;
    -webkit-overflow-scrolling: touch;
    margin:                     0;
    padding:                    0;
}

.gcal-week-inner { min-width: 340px; width: 100%; box-sizing: border-box; }

.gcal-week-col-headers,
.gcal-week-allday-row {
    display:               grid;
    grid-template-columns: 48px repeat(7, 1fr);
    box-sizing:            border-box;
    margin:                0;
}

.gcal-week-col-headers { border-bottom: 1px solid var(--gcal-border); background: var(--gcal-header-bg); }
.gcal-week-gutter      { width: 48px; flex-shrink: 0; box-sizing: border-box; }

.gcal-week-allday-label {
    font-size:  10px;
    color:      var(--gcal-text-muted);
    text-align: right;
    padding:    6px 6px 0 0;
    line-height: 1.2;
}

.gcal-week-col-head {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    padding:         6px 0;
    border-left:     1px solid var(--gcal-border);
    box-sizing:      border-box;
    min-width:       0;
    margin:          0;
}

.gcal-week-day-name {
    font-size:      10px;
    color:          var(--gcal-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height:    1;
    margin:         0;
}

.gcal-week-day-num {
    width:           28px;
    height:          28px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    border-radius:   50%;
    font-size:       16px;
    font-weight:     400;
    color:           var(--gcal-text);
    margin-top:      2px;
    line-height:     1;
}

.gcal-week-day-num.gcal-today-circle { background: var(--gcal-today-bg); color: #fff; font-weight: 700; }

.gcal-week-allday-row { border-bottom: 1px solid var(--gcal-border); min-height: 28px; }

.gcal-week-allday-cells {
    display:               grid;
    grid-template-columns: repeat(7, 1fr);
    gap:                   2px;
    padding:               3px 0;
    grid-column:           2 / -1;
    margin:                0;
}

.gcal-week-allday-cell { min-width: 0; overflow: hidden; padding: 0 2px; box-sizing: border-box; margin: 0; }

.gcal-week-scroll {
    max-height:                 480px;
    overflow-y:                 auto;
    -webkit-overflow-scrolling: touch;
    position:                   relative;
    margin:                     0;
}

.gcal-week-grid {
    display:               grid;
    grid-template-columns: 48px repeat(7, 1fr);
    box-sizing:            border-box;
    margin:                0;
}

.gcal-week-time-col { box-sizing: border-box; margin: 0; }

.gcal-week-hour-label {
    height:          48px;
    display:         flex;
    align-items:     flex-end;
    justify-content: flex-end;
    padding:         0 6px 4px 0;
    font-size:       10px;
    color:           var(--gcal-text-muted);
    box-sizing:      border-box;
    white-space:     nowrap;
    margin:          0;
}

.gcal-week-time-col .gcal-week-hour-label:first-child { visibility: hidden; }

.gcal-week-day-col {
    position:    relative;
    border-left: 1px solid var(--gcal-border);
    box-sizing:  border-box;
    min-width:   0;
    margin:      0;
}

.gcal-week-hour-bg {
    height:        48px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    box-sizing:    border-box;
    margin:        0;
}

.gcal-week-event {
    position:      absolute;
    left:          2px;
    right:         2px;
    background:    var(--gcal-accent);
    color:         #ffffff;
    border-radius: 3px;
    padding:       2px 4px;
    font-size:     11px;
    overflow:      hidden;
    cursor:        pointer;
    z-index:       2;
    min-height:    18px;
    box-sizing:    border-box;
    line-height:   1.4;
    white-space:   nowrap;
    text-overflow: ellipsis;
    transition:    filter 0.15s;
    margin:        0;
}

.gcal-week-event:hover { filter: brightness(0.88); }

/* ── Schedule view ──────────────────────────────────────────── */

.gcal-schedule-list {
    margin:     0;
    padding:    0;
    max-height: 500px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.gcal-sched-group {
    display:       flex;
    flex-direction: column;  /* date header on top, events below */
    border-bottom: 1px solid var(--gcal-border);
    padding:       10px 14px 8px;
    box-sizing:    border-box;
    margin:        0;
}

.gcal-sched-group:last-child { border-bottom: none; }

/* Date header: number and "JUN, WED" on same horizontal line */
.gcal-sched-date-row {
    display:     flex;
    align-items: center;
    gap:         8px;
    margin:      0 0 4px 0;
    padding:     0;
}

.gcal-sched-daynum {
    font-size:   20px;
    font-weight: 400;
    line-height: 1;
    color:       var(--gcal-text);
    min-width:   24px;
    text-align:  center;
    margin:      0;
}

.gcal-sched-daynum.gcal-today-circle {
    background:      var(--gcal-today-bg);
    color:           #ffffff;
    border-radius:   50%;
    width:           34px;
    height:          34px;
    min-width:       34px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-weight:     700;
}

.gcal-sched-dayinfo {
    font-size:      12px;
    letter-spacing: 0.06em;
    color:          var(--gcal-text-muted);
    text-transform: uppercase;
    font-weight:    500;
    margin:         0;
}

/* Accent color on today's day info label */
.gcal-sched-today .gcal-sched-dayinfo { color: var(--gcal-accent); }

.gcal-sched-events {
    flex:     1;
    min-width: 0;
    position: relative;
    margin:   0;
    padding:  0;
}

.gcal-today-redline {
    width:         100%;
    height:        2px;
    background:    #ea4335;
    border-radius: 1px;
    margin-bottom: 4px;
    margin-top:    0;
}

.gcal-sched-event {
    display:       flex;
    align-items:   center;
    gap:           8px;
    padding:       5px 6px;
    border-radius: 6px;
    cursor:        pointer;
    transition:    background 0.15s;
    min-width:     0;
    box-sizing:    border-box;
    margin:        0 0 1px 0;
}

.gcal-sched-event:hover { background: rgba(0,0,0,0.04); }

.gcal-sched-dot {
    width:         10px;
    height:        10px;
    min-width:     10px;
    border-radius: 50%;
    background:    var(--gcal-accent);
    margin:        0;
}

.gcal-sched-name {
    font-size:     14px;
    color:         var(--gcal-text);
    flex:          1;
    min-width:     0;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    margin:        0;
}

.gcal-sched-time {
    font-size:   12px;
    color:       var(--gcal-text-muted);
    flex-shrink: 0;
    white-space: nowrap;
    margin:      0;
}

.gcal-no-events {
    text-align: center;
    padding:    40px 16px;
    color:      var(--gcal-text-muted);
    font-size:  14px;
    margin:     0;
}

/* ── Event detail popover ───────────────────────────────────── */

.gcal-popover {
    position:      absolute;
    background:    #ffffff;
    border-radius: 8px;
    box-shadow:    0 4px 18px rgba(0,0,0,0.20), 0 1px 4px rgba(0,0,0,0.10);
    padding:       16px;
    width:         270px;
    max-width:     calc(100% - 16px);
    z-index:       300;
    box-sizing:    border-box;
    overflow:      hidden;
    margin:        0;
}

.gcal-popover-close {
    all:           unset;
    position:      absolute;
    top:           8px;
    right:         8px;
    cursor:        pointer;
    font-size:     18px;
    color:         var(--gcal-text-muted);
    width:         28px;
    height:        28px;
    border-radius: 50%;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    background 0.15s;
    box-sizing:    border-box;
    margin:        0;
    padding:       0;
    line-height:   1;
}

.gcal-popover-close:hover { background: rgba(0,0,0,0.07); }

.gcal-popover-row {
    display:      flex;
    align-items:  flex-start;
    gap:          12px;
    margin-right: 24px;
    min-width:    0;
    overflow:     hidden;
}

.gcal-popover-meta {
    flex:      1;
    min-width: 0;
    overflow:  hidden;
}

.gcal-popover-dot   { width: 12px; height: 12px; min-width: 12px; border-radius: 3px; background: var(--gcal-accent); margin-top: 4px; flex-shrink: 0; }
.gcal-popover-title { font-size: 16px; font-weight: 500; color: var(--gcal-text); line-height: 1.3; margin: 0 0 4px; word-break: break-word; overflow-wrap: break-word; white-space: normal; }
.gcal-popover-date  { font-size: 13px; color: var(--gcal-text-muted); margin: 0; word-break: break-word; overflow-wrap: break-word; white-space: normal; }

.gcal-popover-actions {
    margin:     12px 0 0;
    padding:    10px 0 0;
    border-top: 1px solid var(--gcal-border);
    text-align: center;
}

.gcal-popover-more { color: var(--gcal-accent); text-decoration: none; font-size: 13px; font-weight: 500; cursor: pointer; }
.gcal-popover-more:hover { text-decoration: underline; }

/* ── Day events panel (+N more) ─────────────────────────────── */

.gcal-day-panel {
    position:      absolute;
    background:    #ffffff;
    border-radius: 8px;
    box-shadow:    0 4px 18px rgba(0,0,0,0.20), 0 1px 4px rgba(0,0,0,0.10);
    width:         280px;
    max-width:     calc(100% - 16px);
    z-index:       300;
    box-sizing:    border-box;
    overflow:      hidden;
    margin:        0;
}

.gcal-day-panel-hdr {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         10px 14px;
    border-bottom:   1px solid var(--gcal-border);
    background:      var(--gcal-header-bg);
    margin:          0;
}

.gcal-day-panel-title { font-size: 14px; font-weight: 600; color: var(--gcal-text); margin: 0; }

.gcal-day-panel-close {
    all:           unset;
    cursor:        pointer;
    font-size:     18px;
    color:         var(--gcal-text-muted);
    width:         26px;
    height:        26px;
    border-radius: 50%;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    background 0.15s;
    box-sizing:    border-box;
    margin:        0;
    padding:       0;
    line-height:   1;
}

.gcal-day-panel-close:hover { background: rgba(0,0,0,0.07); }

.gcal-day-panel-list { max-height: 260px; overflow-y: auto; padding: 4px 0; margin: 0; }

.gcal-day-panel-item {
    display:     flex;
    align-items: flex-start;
    gap:         8px;
    padding:     8px 14px;
    cursor:      pointer;
    transition:  background 0.15s;
    box-sizing:  border-box;
    margin:      0;
}

.gcal-day-panel-item:hover { background: rgba(0,0,0,0.04); }

.gcal-day-panel-info {
    flex:           1;
    min-width:      0;
    display:        flex;
    flex-direction: column;
    gap:            2px;
}

.gcal-day-panel-name {
    font-size:       14px;
    color:           var(--gcal-text);
    word-break:      break-word;
    overflow-wrap:   break-word;
    white-space:     normal;
    margin:          0;
    line-height:     1.3;
}

.gcal-day-panel-time {
    font-size:  12px;
    color:      var(--gcal-text-muted);
    margin:     0;
    line-height: 1.3;
}

/* ── Spinner ─────────────────────────────────────────────────── */

.gcal-spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 50; }

.gcal-spinner-ring {
    width:         32px;
    height:        32px;
    border:        3px solid var(--gcal-border);
    border-top-color: var(--gcal-accent);
    border-radius: 50%;
    animation:     gcal-spin 0.7s linear infinite;
}

@keyframes gcal-spin { to { transform: rotate(360deg); } }

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 600px) {
    .gcal-day-cell  { min-height: 58px; padding: 2px 2px 4px; }
    .gcal-day-num   { font-size: 11px; width: 22px; height: 22px; }
    .gcal-event-chip { font-size: 10px; padding: 1px 3px; }
    .gcal-weekday   { font-size: 10px; padding: 5px 0; }

    .gcal-sched-group   { padding: 8px 10px 6px; }
    .gcal-sched-daynum  { font-size: 17px; }
    .gcal-sched-daynum.gcal-today-circle { width: 30px; height: 30px; min-width: 30px; }

    .gcal-week-scroll  { max-height: 380px; }
    .gcal-week-day-num { font-size: 13px; width: 24px; height: 24px; }
}

@media (max-width: 400px) {
    .gcal-day-cell { min-height: 46px; }
    .gcal-event-chip + .gcal-event-chip { display: none; }
}