/**
 * GL Events — Plugin Stylesheet
 *
 * Uses SPP CSS token conventions where possible.
 * All classes namespaced with .gl- to avoid conflicts.
 *
 * Sections:
 *   1. Tokens & reset
 *   2. Notices
 *   3. Forms & fields
 *   4. Buttons
 *   5. Tables
 *   6. Badges
 *   7. Event list & cards
 *   8. Registration form
 *   9. Series list
 *  10. Admin editors
 *  11. Utilities
 */

/* ── 1. Tokens & reset ───────────────────────────────────────────────────── */

:root {
    --gl-primary:       #00897B;   /* teal — matches SPP palette */
    --gl-primary-dark:  #00695C;
    --gl-primary-light: #4DB6AC;
    --gl-accent:        #c17f24;   /* warm amber */
    --gl-danger:        #C62828;
    --gl-warning:       #E65100;
    --gl-success:       #2E7D32;
    --gl-info:          #1565C0;

    --gl-text:          #1a1a1a;
    --gl-text-muted:    #666;
    --gl-border:        #ddd;
    --gl-bg:            #fff;
    --gl-bg-alt:        #f7f8f9;
    --gl-bg-hover:      #f0f4f3;

    --gl-radius:        6px;
    --gl-radius-lg:     10px;
    --gl-shadow:        0 2px 8px rgba(0,0,0,.08);
    --gl-shadow-md:     0 4px 16px rgba(0,0,0,.12);

    --gl-font:          inherit;   /* inherits from theme */
    --gl-font-size:     1rem;
    --gl-line-height:   1.5;

    --gl-space-xs:      .25rem;
    --gl-space-sm:      .5rem;
    --gl-space-md:      1rem;
    --gl-space-lg:      1.5rem;
    --gl-space-xl:      2rem;
    --gl-space-2xl:     3rem;

    /* Category colour — overridden inline per card */
    --gl-cat-color:     #00897B;
}

.gl-event-list-wrap,
.gl-registration-wrap,
.gl-series-list-wrap,
.gl-editor {
    font-family: var(--gl-font);
    font-size:   var(--gl-font-size);
    line-height: var(--gl-line-height);
    color:       var(--gl-text);
    box-sizing:  border-box;
}

.gl-event-list-wrap *,
.gl-registration-wrap *,
.gl-series-list-wrap *,
.gl-editor * {
    box-sizing: border-box;
}

/* ── 2. Notices ──────────────────────────────────────────────────────────── */

.gl-notice {
    padding:       var(--gl-space-sm) var(--gl-space-md);
    border-left:   4px solid currentColor;
    border-radius: 0 var(--gl-radius) var(--gl-radius) 0;
    margin-bottom: var(--gl-space-md);
    font-size:     .9375rem;
}

.gl-notice-success { color: var(--gl-success); background: #E8F5E9; }
.gl-notice-error   { color: var(--gl-danger);  background: #FFEBEE; }
.gl-notice-warning { color: var(--gl-warning); background: #FFF3E0; }
.gl-notice-info    { color: var(--gl-info);    background: #E3F2FD; }

.gl-error {
    color:         var(--gl-danger);
    font-style:    italic;
}

/* ── 3. Forms & fields ───────────────────────────────────────────────────── */

.gl-form {
    margin: 0;
}

.gl-fieldset {
    border:        1px solid var(--gl-border);
    border-radius: var(--gl-radius);
    padding:       var(--gl-space-md) var(--gl-space-lg);
    margin-bottom: var(--gl-space-lg);
}

.gl-fieldset legend {
    font-weight:  600;
    font-size:    .9375rem;
    padding:      0 var(--gl-space-sm);
    color:        var(--gl-primary-dark);
    letter-spacing: .03em;
    text-transform: uppercase;
}

.gl-field {
    margin-bottom: var(--gl-space-md);
}

.gl-field label {
    display:       block;
    font-weight:   600;
    font-size:     .875rem;
    margin-bottom: var(--gl-space-xs);
    color:         var(--gl-text);
}

.gl-field input[type="text"],
.gl-field input[type="date"],
.gl-field input[type="time"],
.gl-field input[type="number"],
.gl-field input[type="url"],
.gl-field input[type="email"],
.gl-field select,
.gl-field textarea {
    width:         100%;
    padding:       .5rem .75rem;
    border:        1px solid var(--gl-border);
    border-radius: var(--gl-radius);
    font-size:     var(--gl-font-size);
    font-family:   var(--gl-font);
    color:         var(--gl-text);
    background:    var(--gl-bg);
    transition:    border-color .15s, box-shadow .15s;
    appearance:    auto;
}

.gl-field input:focus,
.gl-field select:focus,
.gl-field textarea:focus {
    outline:      none;
    border-color: var(--gl-primary);
    box-shadow:   0 0 0 3px rgba(0,137,123,.15);
}

.gl-field textarea {
    resize: vertical;
    min-height: 80px;
}

.gl-field-row {
    display:   flex;
    gap:       var(--gl-space-md);
    flex-wrap: wrap;
}

.gl-field-row .gl-field {
    flex: 1;
    min-width: 140px;
}

.gl-hint {
    display:    block;
    font-size:  .8125rem;
    color:      var(--gl-text-muted);
    margin-top: var(--gl-space-xs);
}

.gl-required {
    color: var(--gl-danger);
}

.gl-color-field {
    display:     flex;
    align-items: center;
    gap:         var(--gl-space-sm);
}

.gl-color-field input[type="color"] {
    width:         44px;
    height:        38px;
    padding:       2px;
    border:        1px solid var(--gl-border);
    border-radius: var(--gl-radius);
    cursor:        pointer;
    flex-shrink:   0;
}

.gl-color-hex-display {
    width: 90px !important;
    font-family: monospace;
}

.gl-color-swatch {
    display:       inline-block;
    width:         20px;
    height:        20px;
    border-radius: 50%;
    border:        1px solid rgba(0,0,0,.15);
    vertical-align: middle;
}

.gl-form-actions {
    display:     flex;
    gap:         var(--gl-space-sm);
    flex-wrap:   wrap;
    margin-top:  var(--gl-space-md);
    padding-top: var(--gl-space-md);
    border-top:  1px solid var(--gl-border);
}

.gl-form-inline {
    display:     flex;
    align-items: flex-end;
    gap:         var(--gl-space-sm);
    flex-wrap:   wrap;
}

.gl-form-inline .gl-field {
    margin-bottom: 0;
    flex: 1;
    min-width: 200px;
}

/* ── 4. Buttons ──────────────────────────────────────────────────────────── */

.gl-button {
    display:        inline-block;
    padding:        .5rem 1.125rem;
    border:         none;
    border-radius:  var(--gl-radius);
    font-size:      .9375rem;
    font-weight:    600;
    cursor:         pointer;
    text-decoration: none;
    text-align:     center;
    transition:     background .15s, transform .1s, box-shadow .15s;
    line-height:    1.4;
    white-space:    nowrap;
}

.gl-button:active { transform: translateY(1px); }

.gl-button-primary {
    background: var(--gl-primary);
    color:      #fff;
}
.gl-button-primary:hover {
    background:  var(--gl-primary-dark);
    color:       #fff;
    box-shadow:  var(--gl-shadow);
}

.gl-button-secondary {
    background: var(--gl-bg-alt);
    color:      var(--gl-text);
    border:     1px solid var(--gl-border);
}
.gl-button-secondary:hover {
    background: var(--gl-bg-hover);
    color:      var(--gl-text);
}

.gl-button-success {
    background: var(--gl-success);
    color:      #fff;
}
.gl-button-success:hover {
    background: #1B5E20;
    color:      #fff;
}

.gl-button-danger {
    background: var(--gl-danger);
    color:      #fff;
}
.gl-button-danger:hover {
    background: #B71C1C;
    color:      #fff;
}

.gl-button-small {
    padding:   .3125rem .75rem;
    font-size: .8125rem;
}

/* Inline link-style buttons (for table actions) */
.gl-link-button {
    background:  none;
    border:      none;
    padding:     0;
    font-size:   inherit;
    color:       var(--gl-primary);
    cursor:      pointer;
    text-decoration: underline;
    font-weight: normal;
}
.gl-link-button:hover   { color: var(--gl-primary-dark); }
.gl-link-danger         { color: var(--gl-danger) !important; }
.gl-link-danger:hover   { color: #B71C1C !important; }

.gl-link         { color: var(--gl-primary); text-decoration: underline; }
.gl-link:hover   { color: var(--gl-primary-dark); }
.gl-link-external { margin-left: .25rem; font-size: .8em; opacity: .7; }

/* ── 5. Tables ───────────────────────────────────────────────────────────── */

.gl-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       .9375rem;
    margin-bottom:   var(--gl-space-md);
}

.gl-table th,
.gl-table td {
    padding:    .5rem .75rem;
    text-align: left;
    border-bottom: 1px solid var(--gl-border);
}

.gl-table th {
    font-weight:      700;
    font-size:        .8125rem;
    text-transform:   uppercase;
    letter-spacing:   .04em;
    color:            var(--gl-text-muted);
    background:       var(--gl-bg-alt);
    border-bottom:    2px solid var(--gl-border);
}

.gl-table tbody tr:hover {
    background: var(--gl-bg-hover);
}

.gl-table .gl-actions {
    display:  flex;
    gap:      var(--gl-space-sm);
    flex-wrap: wrap;
    align-items: center;
}

.gl-row-cancelled  { opacity: .55; }
.gl-row-inactive   { opacity: .55; }

/* Responsive table scroll */
.gl-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── 6. Badges ───────────────────────────────────────────────────────────── */

.gl-badge {
    display:       inline-block;
    padding:       .125rem .5rem;
    border-radius: 999px;
    font-size:     .75rem;
    font-weight:   700;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space:   nowrap;
    vertical-align: middle;
}

.gl-badge-active       { background: #E8F5E9; color: var(--gl-success); }
.gl-badge-cancelled    { background: #FFEBEE; color: var(--gl-danger); }
.gl-badge-archived     { background: var(--gl-bg-alt); color: var(--gl-text-muted); }
.gl-badge-detached     { background: #FFF8E1; color: #F57F17; }
.gl-badge-active       { background: #E8F5E9; color: var(--gl-success); }
.gl-badge-inactive     { background: var(--gl-bg-alt); color: var(--gl-text-muted); }

.gl-badge-confirmed    { background: #E8F5E9; color: var(--gl-success); }
.gl-badge-waiting      { background: #FFF8E1; color: #F57F17; }
.gl-badge-withdrawn    { background: var(--gl-bg-alt); color: var(--gl-text-muted); }
.gl-badge-late_withdrawn { background: #FFEBEE; color: var(--gl-danger); }

/* Capacity badges */
.gl-capacity-badge {
    display:       inline-block;
    padding:       .125rem .5rem;
    border-radius: var(--gl-radius);
    font-size:     .8125rem;
    font-weight:   600;
    white-space:   nowrap;
}
.gl-capacity-badge--open    { background: #E8F5E9; color: var(--gl-success); }
.gl-capacity-badge--full    { background: #FFEBEE; color: var(--gl-danger); }
.gl-capacity-badge--waiting { background: #FFF8E1; color: #F57F17; }

/* ── 7. Event list & cards ───────────────────────────────────────────────── */

/* Category filter bar */
.gl-category-filter {
    display:     flex;
    flex-wrap:   wrap;
    gap:         var(--gl-space-sm);
    margin-bottom: var(--gl-space-lg);
}

.gl-filter-btn {
    display:        inline-block;
    padding:        .375rem .875rem;
    border-radius:  999px;
    border:         2px solid transparent;
    font-size:      .875rem;
    font-weight:    600;
    text-decoration: none;
    color:          var(--gl-text-muted);
    background:     var(--gl-bg-alt);
    transition:     all .15s;
    cursor:         pointer;
}

.gl-filter-btn:hover,
.gl-filter-btn--active {
    background:  var(--gl-cat-color);
    color:       #fff;
    border-color: var(--gl-cat-color);
}

.gl-filter-btn--active {
    background: var(--gl-primary);
    border-color: var(--gl-primary);
    color: #fff;
}

/* Event cards */
.gl-event-cards {
    display:   flex;
    flex-direction: column;
    gap:       var(--gl-space-md);
    margin-bottom: var(--gl-space-lg);
}

.gl-event-card {
    display:       grid;
    grid-template-columns: 64px 1fr auto;
    gap:           var(--gl-space-md);
    align-items:   center;
    padding:       var(--gl-space-md);
    background:    #fefdf5;
    border:        1px solid #e8e8e8;
    border-left:   3px solid var(--gl-primary-light);
    border-radius: var(--gl-radius);
    box-shadow:    0 1px 4px rgba(0,0,0,.05);
    transition:    box-shadow .15s, transform .15s;
}

.gl-event-card:hover {
    box-shadow: var(--gl-shadow-md);
    transform:  translateY(-1px);
}

.gl-event-card--full {
    opacity: .85;
}

/* Date column */
.gl-event-card__date {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    background:     var(--gl-primary-light);
    color:          #fff;
    border-radius:  var(--gl-radius);
    padding:        var(--gl-space-sm);
    min-width:      56px;
    text-align:     center;
    line-height:    1.1;
}

.gl-event-card__day {
    font-size:   1.625rem;
    font-weight: 800;
    line-height: 1;
}

.gl-event-card__month {
    font-size:   .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .9;
}

.gl-event-card__dow {
    font-size:   .6875rem;
    opacity:     .75;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top:  2px;
}

/* Body column */
.gl-event-card__body {
    min-width: 0;
}

.gl-event-card__category {
    font-size:      .75rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color:          var(--gl-primary-light);
    display:        block;
    margin-bottom:  2px;
}

.gl-event-card__title {
    font-size:    1.0625rem;
    font-weight:  700;
    margin:       0 0 var(--gl-space-xs);
    white-space:  nowrap;
    overflow:     hidden;
    text-overflow: ellipsis;
    color:        var(--gl-text);
}

.gl-event-card__meta {
    display:  flex;
    flex-wrap: wrap;
    gap:       var(--gl-space-sm);
    font-size: .875rem;
    color:     var(--gl-text-muted);
    margin-bottom: var(--gl-space-xs);
}

.gl-event-card__venue::before { content: '📍 '; }
.gl-event-card__time::before  { content: '🕐 '; }

.gl-event-card__city {
    opacity: .75;
    font-size: .8125rem;
}

.gl-event-card__capacity {
    margin-top: var(--gl-space-xs);
}

.gl-event-card__user-status {
    display:    inline-block;
    font-size:  .8125rem;
    font-weight: 700;
    margin-top: var(--gl-space-xs);
}

.gl-user-status--confirmed { color: var(--gl-success); }
.gl-user-status--waiting   { color: #F57F17; }

.gl-event-card__action {
    display:        flex;
    flex-direction: column;
    align-items:    flex-end;
    gap:            var(--gl-space-xs);
    flex-shrink:    0;
}

.gl-event-card__excerpt {
    font-size:   .8125rem;
    color:       var(--gl-text-muted);
    margin:      var(--gl-space-xs) 0 0;
    line-height: 1.4;
    font-style:  italic;
}

.gl-event-card__closed {
    font-size:  .8125rem;
    color:      var(--gl-text-muted);
    font-style: italic;
}

/* No events */
.gl-no-events {
    padding:    var(--gl-space-xl);
    text-align: center;
    color:      var(--gl-text-muted);
    background: var(--gl-bg-alt);
    border-radius: var(--gl-radius);
}

/* Pagination */
.gl-pagination {
    display:     flex;
    align-items: center;
    gap:         var(--gl-space-md);
    margin-top:  var(--gl-space-lg);
    justify-content: center;
}

.gl-page-btn {
    color:           var(--gl-primary);
    text-decoration: none;
    font-weight:     600;
    font-size:       .9375rem;
}

.gl-page-btn:hover { color: var(--gl-primary-dark); }

.gl-page-info {
    font-size:  .875rem;
    color:      var(--gl-text-muted);
}

/* ── 8. Registration form ─────────────────────────────────────────────────── */

.gl-registration-wrap {
    max-width: 640px;
}

.gl-reg-event-header {
    border-left:   5px solid var(--gl-cat-color);
    padding:       var(--gl-space-md) var(--gl-space-lg);
    background:    var(--gl-bg-alt);
    border-radius: 0 var(--gl-radius) var(--gl-radius) 0;
    margin-bottom: var(--gl-space-lg);
}

.gl-reg-category {
    font-size:      .75rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color:          var(--gl-cat-color);
    display:        block;
    margin-bottom:  var(--gl-space-xs);
}

.gl-reg-title {
    font-size:   1.5rem;
    font-weight: 800;
    margin:      0 0 var(--gl-space-sm);
    color:       var(--gl-text);
}

.gl-reg-event-meta {
    display:  flex;
    flex-wrap: wrap;
    gap:       var(--gl-space-sm);
    font-size: .9375rem;
    color:     var(--gl-text-muted);
}

/* Capacity progress bar */
.gl-capacity-bar-wrap {
    height:        8px;
    background:    var(--gl-border);
    border-radius: 999px;
    overflow:      hidden;
    margin-top:    var(--gl-space-md);
}

.gl-capacity-bar {
    height:        100%;
    background:    var(--gl-primary);
    border-radius: 999px;
    transition:    width .4s ease;
}

.gl-capacity-label {
    font-size:  .8125rem;
    color:      var(--gl-text-muted);
    margin-top: var(--gl-space-xs);
    margin-bottom: 0;
}

/* Registration form area */
.gl-reg-form-wrap {
    background:    var(--gl-bg);
    border:        1px solid var(--gl-border);
    border-radius: var(--gl-radius);
    padding:       var(--gl-space-lg);
}

.gl-reg-greeting {
    margin-bottom: var(--gl-space-md);
    font-size:     .9375rem;
    color:         var(--gl-text-muted);
}

.gl-reg-confirmed-msg {
    font-size:   1.0625rem;
    font-weight: 700;
    color:       var(--gl-success);
    margin-bottom: var(--gl-space-md);
}

.gl-reg-waiting-msg {
    font-size:   1.0625rem;
    font-weight: 700;
    color:       #F57F17;
    margin-bottom: var(--gl-space-md);
}

.gl-waitlist-notice,
.gl-late-warning {
    font-size:     .9375rem;
    margin-bottom: var(--gl-space-md);
    padding:       var(--gl-space-sm) var(--gl-space-md);
    border-radius: var(--gl-radius);
}

.gl-waitlist-notice { background: #FFF8E1; color: #5D4037; }
.gl-late-warning    { background: #FFEBEE; color: var(--gl-danger); }

.gl-reg-back {
    margin-top: var(--gl-space-lg);
}

/* ── 9. Series list ──────────────────────────────────────────────────────── */

.gl-series-header {
    margin-bottom: var(--gl-space-lg);
    padding-bottom: var(--gl-space-md);
    border-bottom: 2px solid var(--gl-border);
}

.gl-series-title {
    font-size:   1.5rem;
    font-weight: 800;
    margin:      0 0 var(--gl-space-sm);
}

.gl-series-description {
    color:       var(--gl-text-muted);
    font-size:   .9375rem;
    margin-bottom: var(--gl-space-sm);
}

.gl-series-meta {
    display:  flex;
    flex-wrap: wrap;
    gap:       var(--gl-space-md);
    font-size: .875rem;
    color:     var(--gl-text-muted);
}

.gl-series-occurrences {
    display:        flex;
    flex-direction: column;
    gap:            2px;
}

.gl-series-row {
    display:       grid;
    grid-template-columns: 80px 1fr auto auto;
    gap:           var(--gl-space-md);
    align-items:   center;
    padding:       .625rem var(--gl-space-md);
    border-radius: var(--gl-radius);
    background:    var(--gl-bg);
    border:        1px solid var(--gl-border);
    transition:    background .1s;
}

.gl-series-row:hover          { background: var(--gl-bg-hover); }
.gl-series-row--full          { opacity: .8; }

.gl-series-row__date {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    line-height:    1.2;
}

.gl-series-row__dow {
    font-size:   .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color:       var(--gl-text-muted);
}

.gl-series-row__daymonth {
    font-size:   1rem;
    font-weight: 700;
    color:       var(--gl-text);
}

.gl-series-row__info {
    display:  flex;
    flex-wrap: wrap;
    gap:       var(--gl-space-sm);
    align-items: center;
    font-size: .9375rem;
}

.gl-series-row__title {
    font-weight: 600;
}

.gl-series-row__time,
.gl-series-row__venue {
    color:     var(--gl-text-muted);
    font-size: .875rem;
}

.gl-series-row__closed {
    font-size:  .8125rem;
    color:      var(--gl-text-muted);
    font-style: italic;
}

/* ── 10. Admin editors ───────────────────────────────────────────────────── */

.gl-editor {
    max-width:     900px;
    margin-bottom: var(--gl-space-xl);
}

.gl-editor h2 {
    font-size:     1.375rem;
    font-weight:   800;
    margin-bottom: var(--gl-space-md);
    padding-bottom: var(--gl-space-sm);
    border-bottom: 2px solid var(--gl-border);
}

.gl-editor h3 {
    font-size:     1.0625rem;
    font-weight:   700;
    margin:        var(--gl-space-lg) 0 var(--gl-space-sm);
}

/* Action bar (detach / cancel) */
.gl-action-bar {
    display:       flex;
    gap:           var(--gl-space-sm);
    flex-wrap:     wrap;
    align-items:   center;
    padding:       var(--gl-space-sm) var(--gl-space-md);
    background:    var(--gl-bg-alt);
    border:        1px solid var(--gl-border);
    border-radius: var(--gl-radius);
    margin-bottom: var(--gl-space-md);
}

.gl-cancel-reason-input {
    padding:       .4375rem .75rem;
    border:        1px solid var(--gl-border);
    border-radius: var(--gl-radius);
    font-size:     .875rem;
    min-width:     220px;
}

/* Breadcrumb */
.gl-breadcrumb {
    font-size:     .875rem;
    color:         var(--gl-text-muted);
    margin-bottom: var(--gl-space-md);
}

/* Series occurrence list (inside series editor) */
.gl-series-occurrences {
    margin-top: var(--gl-space-lg);
    overflow-x: auto;
}

/* Registration admin */
.gl-reg-header {
    margin-bottom: var(--gl-space-lg);
}

.gl-reg-meta {
    font-size: .9375rem;
    color:     var(--gl-text-muted);
}

.gl-reg-counts {
    display:       flex;
    gap:           var(--gl-space-md);
    margin-bottom: var(--gl-space-md);
    font-weight:   700;
    font-size:     .9375rem;
    flex-wrap:     wrap;
}

.gl-count-confirmed { color: var(--gl-success); }
.gl-count-waiting   { color: #F57F17; }
.gl-count-withdrawn { color: var(--gl-text-muted); }

.gl-reg-section {
    margin-bottom: var(--gl-space-xl);
}

/* Collapsible withdrawn section */
.gl-collapsible-heading {
    margin-bottom: var(--gl-space-sm);
}

.gl-collapse-toggle {
    background:  none;
    border:      none;
    font-size:   1.0625rem;
    font-weight: 700;
    cursor:      pointer;
    color:       var(--gl-text-muted);
    padding:     0;
}

.gl-collapse-toggle:hover { color: var(--gl-text); }

.gl-reg-footer {
    margin-top:  var(--gl-space-xl);
    padding-top: var(--gl-space-md);
    border-top:  1px solid var(--gl-border);
}

/* Registration table */
.gl-reg-table td { vertical-align: middle; }

/* Venue / category list */
.gl-venue-list,
.gl-category-list {
    margin-bottom: var(--gl-space-xl);
    overflow-x: auto;
}

.gl-venue-form,
.gl-category-form {
    background:    var(--gl-bg-alt);
    border:        1px solid var(--gl-border);
    border-radius: var(--gl-radius-lg);
    padding:       var(--gl-space-lg);
    margin-bottom: var(--gl-space-xl);
}

/* ── 11. Utilities ───────────────────────────────────────────────────────── */

.gl-dow-field { /* shown/hidden by JS */ }

/* Highlighted row in series list (currently editing) */
.gl-row-selected {
    background: #E8F5E9 !important;
}

/* ── 12. Divi compatibility ──────────────────────────────────────────────── */

/*
 * Divi's .et_pb_row sets max-width and padding that can clip wide tables.
 * These overrides ensure gl-events content fills the column it's placed in
 * without breaking the page layout.
 */

.gl-editor,
.gl-event-list-wrap,
.gl-registration-wrap,
.gl-series-list-wrap {
    width: 100%;
    max-width: 100%;
}

.gl-table-wrap {
    width:      100%;
    max-width:  100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Prevent Divi column padding from double-indenting form fields */
.et_pb_column .gl-fieldset {
    margin-left:  0;
    margin-right: 0;
}

/* Divi sometimes sets box-sizing: content-box on inputs — override */
.et_pb_column .gl-field input,
.et_pb_column .gl-field select,
.et_pb_column .gl-field textarea {
    box-sizing: border-box;
    max-width:  100%;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .gl-event-card {
        grid-template-columns: 52px 1fr;
        grid-template-rows:    auto auto;
    }
    .gl-event-card__action {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items:    center;
        justify-content: flex-start;
    }
    .gl-series-row {
        grid-template-columns: 64px 1fr;
        grid-template-rows:    auto auto;
    }
    .gl-series-row__capacity,
    .gl-series-row__action {
        grid-column: 2;
    }
    .gl-field-row {
        flex-direction: column;
    }
    .gl-form-inline {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ── 13. Event detail page ───────────────────────────────────────────────── */

.gl-event-detail-wrap {
    max-width: 100%;
}

/* Two-column layout: main + sidebar */
.gl-event-detail-layout {
    display:   grid;
    grid-template-columns: 1fr 280px;
    gap:       var(--gl-space-xl);
    align-items: start;
}

/* Event header */
.gl-event-detail-title {
    font-size:   1.5rem;
    font-weight: 800;
    margin:      0 0 var(--gl-space-xs);
    color:       var(--gl-text);
}

.gl-event-detail-datetime {
    font-size:     1rem;
    color:         var(--gl-text-muted);
    margin-bottom: var(--gl-space-lg);
}

/* Registrant grid — responsive multi-column */
.gl-event-registrants,
.gl-event-waitlist {
    margin-bottom: var(--gl-space-lg);
}

.gl-event-registrants h3,
.gl-event-waitlist h3 {
    font-size:     1rem;
    font-weight:   700;
    margin-bottom: var(--gl-space-sm);
    padding-bottom: var(--gl-space-xs);
    border-bottom: 1px solid var(--gl-border);
}

.gl-registrant-grid {
    display:               grid;
    grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
    gap:                   var(--gl-space-xs) var(--gl-space-md);
    margin-bottom:         var(--gl-space-sm);
}

.gl-registrant-item {
    font-size:   .9375rem;
    line-height: 1.4;
}

.gl-registrant-me {
    font-weight: 700;
    color:       var(--gl-primary-dark);
}

.gl-registrant-username {
    font-size:  .8125rem;
    color:      var(--gl-text-muted);
    margin-left: .25rem;
}

.gl-attendance-count {
    font-size:  .9375rem;
    color:      var(--gl-text-muted);
    margin-top: var(--gl-space-xs);
}

.gl-waiting-count {
    color: #F57F17;
    font-weight: 600;
}

/* Registration action area */
.gl-event-reg-action {
    margin:        var(--gl-space-lg) 0;
    padding:       var(--gl-space-md);
    background:    var(--gl-bg-alt);
    border-radius: var(--gl-radius);
    border:        1px solid var(--gl-border);
}

.gl-reg-status-msg {
    margin-bottom: var(--gl-space-sm);
    font-size:     1rem;
}

.gl-reg-closed {
    color:      var(--gl-text-muted);
    font-style: italic;
}

/* Event description */
.gl-event-description {
    margin-top:  var(--gl-space-lg);
    padding-top: var(--gl-space-md);
    border-top:  1px solid var(--gl-border);
    font-size:   .9375rem;
    line-height: 1.7;
    color:       var(--gl-text);
}

.gl-event-description p {
    margin-bottom: var(--gl-space-md);
}

/* Sidebar */
.gl-event-detail-sidebar {
    position: sticky;
    top:       20px;
}

.gl-sidebar-block {
    background:    var(--gl-bg-alt);
    border:        1px solid var(--gl-border);
    border-radius: var(--gl-radius);
    padding:       var(--gl-space-md);
    margin-bottom: var(--gl-space-md);
    font-size:     .9375rem;
}

.gl-sidebar-block h4 {
    font-size:      .75rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color:          var(--gl-text-muted);
    margin:         0 0 var(--gl-space-sm);
    padding-bottom: var(--gl-space-xs);
    border-bottom:  1px solid var(--gl-border);
}

.gl-detail-list {
    margin:  0;
    padding: 0;
}

.gl-detail-list dt {
    font-size:   .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color:       var(--gl-text-muted);
    margin-top:  var(--gl-space-sm);
}

.gl-detail-list dt:first-child {
    margin-top: 0;
}

.gl-detail-list dd {
    margin:    0;
    font-size: .9375rem;
    color:     var(--gl-text);
}

.gl-sidebar-cat-dot {
    display:       inline-block;
    width:         10px;
    height:        10px;
    border-radius: 50%;
    margin-right:  .25rem;
    vertical-align: middle;
}

.gl-sidebar-organizer-name,
.gl-sidebar-venue-name {
    margin: 0 0 var(--gl-space-xs);
}

.gl-sidebar-venue-address {
    font-size:  .875rem;
    color:      var(--gl-text-muted);
    line-height: 1.5;
}

/* Responsive — stack on mobile */
@media (max-width: 700px) {
    .gl-event-detail-layout {
        grid-template-columns: 1fr;
    }
    .gl-event-detail-sidebar {
        position: static;
    }
    .gl-registrant-grid {
        grid-template-columns: repeat( auto-fill, minmax( 160px, 1fr ) );
    }
}

/* ── 14. Series excerpt / read more ─────────────────────────────────────── */

.gl-series-excerpt {
    margin-bottom: var(--gl-space-md);
    font-size:     .9375rem;
    color:         var(--gl-text-muted);
}

.gl-read-more-btn {
    background:      none;
    border:          none;
    padding:         0;
    color:           var(--gl-primary);
    font-size:       .9375rem;
    cursor:          pointer;
    text-decoration: underline;
    margin-left:     .25rem;
}

.gl-read-more-btn:hover { color: var(--gl-primary-dark); }

.gl-series-full-desc {
    font-size:   .9375rem;
    line-height: 1.7;
    color:       var(--gl-text);
}

.gl-series-full-desc p {
    margin-bottom: var(--gl-space-sm);
}

/* ── 15. Registration window states & days+hours input ──────────────────── */

.gl-reg-not-open {
    color:      var(--gl-info);
    font-style: italic;
    font-size:  .9375rem;
}

.gl-event-card__not-open {
    font-size:  .8125rem;
    color:      var(--gl-info);
    font-style: italic;
}

/* Days + hours input row */
.gl-days-hours-input {
    display:     flex;
    align-items: center;
    gap:         var(--gl-space-sm);
    flex-wrap:   wrap;
}

.gl-days-hours-input input[type="number"] {
    width:         70px !important;
    padding:       .4375rem .5rem;
    border:        1px solid var(--gl-border);
    border-radius: var(--gl-radius);
    font-size:     var(--gl-font-size);
    text-align:    center;
}

.gl-days-hours-input span {
    font-size: .9375rem;
    color:     var(--gl-text-muted);
}

/* ── 16. Action bar cancel inline layout ─────────────────────────────────── */

.gl-cancel-inline {
    display:     flex;
    align-items: center;
    gap:         var(--gl-space-sm);
    flex-wrap:   wrap;
}

.gl-cancel-inline .gl-cancel-reason-input {
    flex:      1;
    min-width: 200px;
    padding:   .4375rem .75rem;
    border:    1px solid var(--gl-border);
    border-radius: var(--gl-radius);
    font-size: .9375rem;
}

.gl-action-bar-cancel {
    flex: 1;
}

/* ── 17. Registrant list — print button ─────────────────────────────────── */

.spp-print-btn {
    display:          inline-flex;
    align-items:      center;
    gap:              .375rem;
    padding:          .4375rem 1rem;
    background:       var(--gl-text-muted);
    color:            #fff;
    border:           none;
    border-radius:    var(--gl-radius);
    font-size:        .875rem;
    cursor:           pointer;
    text-decoration:  none;
    transition:       background .15s;
}

.spp-print-btn:hover { background: #555; }