/* ==========================================================================
   Tyre hotel opening calendar (Pages/TyreHotel/TyreHotelLocation/OpeningCalendar)
   Everything is scoped under .opening-calendar / oc- prefixes.
   Palette taken from the print shelf labels popup.
   ========================================================================== */

.opening-calendar {
    --oc-radius: 8px;
    --oc-radius-lg: 14px;
    --oc-surface: #ffffff;
    --oc-surface-2: #f9fafc;
    --oc-sunken: #f1f2f6;
    --oc-text: #2b2f32;
    --oc-text-2: #5f5e5a;
    --oc-text-3: #888780;
    --oc-border: #e4e6ea;
    --oc-border-strong: #cfd3d4;
    --oc-hair: rgba(31, 30, 29, 0.24);
    --oc-primary: #5570f1;
    --oc-primary-hover: #3c4ea9;
    --oc-primary-soft: #ebeefd;
    --oc-primary-border: #c4cdfa;
    --oc-ring: rgba(85, 112, 241, 0.12);
    --oc-success: #639922;
    --oc-success-hover: #4f7c19;
    --oc-bg-success: #eaf3de;
    --oc-text-success: #3b6d11;
    --oc-border-success: #97c459;
    --oc-danger: #d92d20;
    --oc-danger-hover: #b42318;
    --oc-bg-danger: #fef3f2;
    --oc-text-danger: #b42318;
    --oc-border-danger: #f09595;
    --oc-warning: #ef9f27;
    --oc-bg-warning: #faeeda;
    --oc-text-warning: #854f0b;
    --oc-border-warning: #ef9f27;
    --oc-closed-a: #f1f2f6;
    --oc-closed-b: #e5e7ee;
    --oc-bar-bg: #2b2f32;
    --oc-bar-btn: rgba(255, 255, 255, 0.09);
    --oc-bar-btn-hover: rgba(255, 255, 255, 0.17);
    --oc-bar-accent: #aab7f8;
    --oc-ghost-hover: rgba(85, 112, 241, 0.06);
    --oc-shadow-card: 0 1px 3px rgba(31, 30, 29, 0.06);
    --oc-shadow-pop: 0 12px 32px rgba(31, 30, 29, 0.16), 0 2px 8px rgba(31, 30, 29, 0.08);
    color: var(--oc-text);
    font-size: 13.5px;
}

.opening-calendar .oc-lead {
    margin: -8px 0 18px;
    font-size: 13px;
    color: var(--oc-text-2);
}

.opening-calendar .oc-loader {
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #5570f1;
}

/* ---------- Controls ---------- */
.opening-calendar .oc-btn {
    height: 36px;
    padding: 0 14px;
    border-radius: var(--oc-radius);
    border: 1px solid var(--oc-border-strong);
    background: var(--oc-surface);
    color: var(--oc-text);
    font-weight: 500;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}

.opening-calendar .oc-btn:hover {
    background: var(--oc-ghost-hover);
    border-color: var(--oc-primary);
    color: var(--oc-primary);
}

.opening-calendar .oc-btn-icon {
    width: 36px;
    padding: 0;
}

.opening-calendar .oc-btn-success {
    background: var(--oc-success);
    border-color: var(--oc-success);
    color: #fff;
}

.opening-calendar .oc-btn-success:hover {
    background: var(--oc-success-hover);
    border-color: var(--oc-success-hover);
    color: #fff;
}

.opening-calendar .oc-btn-danger {
    background: var(--oc-danger);
    border-color: var(--oc-danger);
    color: #fff;
}

.opening-calendar .oc-btn-danger:hover {
    background: var(--oc-danger-hover);
    border-color: var(--oc-danger-hover);
    color: #fff;
}

.opening-calendar .oc-btn-sm {
    height: 32px;
    padding: 0 12px;
    font-size: 12.5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.opening-calendar .oc-icon-btn {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: var(--oc-radius);
    background: transparent;
    color: var(--oc-text-2);
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    flex: none;
}

.opening-calendar .oc-icon-btn:hover {
    background: var(--oc-ghost-hover);
    color: var(--oc-primary);
}

.opening-calendar .oc-icon-btn.del:hover {
    background: var(--oc-bg-danger);
    color: var(--oc-text-danger);
}

.opening-calendar .oc-btn:focus-visible,
.opening-calendar .oc-icon-btn:focus-visible,
.opening-calendar .oc-wd:focus-visible,
.opening-calendar .oc-seg button:focus-visible,
.opening-calendar .oc-collapse-h:focus-visible,
.opening-calendar .oc-sp-jump:focus-visible,
.opening-calendar .oc-mi:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--oc-ring), 0 0 0 1px var(--oc-primary);
}

.opening-calendar .oc-inp {
    height: 40px;
    width: 100%;
    background: var(--oc-surface);
    border: 1px solid var(--oc-border-strong);
    border-radius: var(--oc-radius);
    padding: 0 12px;
    font-size: 13px;
    color: var(--oc-text);
    transition: border-color 0.15s, box-shadow 0.15s;
}

/* !important: style.css resets input/select focus globally with !important
   (box-shadow: unset, border-color: #E6E6E6) – same override as the print shelf labels popup */
.opening-calendar .oc-inp:focus {
    outline: none;
    border-color: var(--oc-primary) !important;
    box-shadow: 0 0 0 3px var(--oc-ring) !important;
}

.opening-calendar .oc-inp.bad,
.opening-calendar .oc-inp.bad:focus {
    border-color: var(--oc-text-danger) !important;
    box-shadow: 0 0 0 3px var(--oc-bg-danger) !important;
}

.opening-calendar select.oc-inp {
    cursor: pointer;
}

.opening-calendar .oc-lbl {
    display: block;
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--oc-text-2);
}

.opening-calendar .oc-opt {
    font-weight: 400;
    color: var(--oc-text-3);
}

.opening-calendar .oc-hint {
    margin: 5px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--oc-text-3);
}

.opening-calendar .oc-ferr,
.opening-calendar .oc-err {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 5px 0 0;
    font-size: 12px;
    color: var(--oc-text-danger);
}

.opening-calendar .oc-err {
    margin-top: 10px;
}

.opening-calendar .oc-affix {
    position: relative;
}

.opening-calendar .oc-affix .oc-inp {
    padding-right: 52px;
}

.opening-calendar .oc-sfx {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--oc-text-3);
    pointer-events: none;
}

.opening-calendar .oc-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    white-space: nowrap;
}

.opening-calendar .oc-pill.so {
    background: var(--oc-bg-success);
    color: var(--oc-text-success);
}

.opening-calendar .oc-pill.sc {
    background: var(--oc-bg-danger);
    color: var(--oc-text-danger);
}

.opening-calendar .oc-pill.rc {
    background: var(--oc-bg-warning);
    color: var(--oc-text-warning);
}

/* Segmented control – same look as the print-order switch */
.opening-calendar .oc-seg {
    display: inline-flex;
    gap: 3px;
    padding: 4px;
    background: var(--oc-sunken);
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(31, 30, 29, 0.1);
}

.opening-calendar .oc-seg button {
    height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--oc-text-2);
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.opening-calendar .oc-seg button:not(.on):hover {
    background: rgba(255, 255, 255, 0.6);
}

.opening-calendar .oc-seg button.on {
    background: var(--oc-surface);
    color: var(--oc-primary);
    box-shadow: 0 1px 3px rgba(31, 30, 29, 0.14);
}

.opening-calendar .oc-seg button.on.so {
    color: var(--oc-text-success);
}

.opening-calendar .oc-seg button.on.sc {
    color: var(--oc-text-danger);
}

.opening-calendar .oc-seg.full {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.opening-calendar .oc-seg.full button {
    height: 36px;
}

.opening-calendar .oc-cnt {
    font-size: 11px;
    color: var(--oc-text-3);
}

.opening-calendar .oc-seg button.on .oc-cnt {
    color: inherit;
    opacity: 0.75;
}

/* ---------- Layout & cards ---------- */
.opening-calendar .oc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 20px;
    align-items: start;
}

.opening-calendar .oc-main,
.opening-calendar .oc-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.opening-calendar .oc-main {
    gap: 20px;
}

@media (max-width: 1200px) {
    .opening-calendar .oc-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 1200px) and (min-width: 760px) {
    .opening-calendar .oc-side {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    .opening-calendar .oc-side .oc-wide {
        grid-column: 1 / -1;
    }
}

.opening-calendar .oc-card {
    min-width: 0;
    background: var(--oc-surface);
    border: 1px solid var(--oc-border);
    border-radius: var(--oc-radius-lg);
    box-shadow: var(--oc-shadow-card);
}

.opening-calendar .oc-card-h {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--oc-border);
}

.opening-calendar .oc-card-h h2 {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--oc-text);
}

.opening-calendar .oc-sub {
    display: block;
    margin-top: 1px;
    font-size: 12px;
    font-weight: 400;
    color: var(--oc-text-3);
}

.opening-calendar .oc-card-ic {
    width: 32px;
    height: 32px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--oc-primary-soft);
    color: var(--oc-primary);
}

.opening-calendar .oc-card-ic.warn {
    background: var(--oc-bg-warning);
    color: var(--oc-text-warning);
}

.opening-calendar .oc-card-b {
    padding: 16px 18px;
}

.opening-calendar .oc-card-f {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid var(--oc-border);
    background: var(--oc-surface-2);
    border-radius: 0 0 var(--oc-radius-lg) var(--oc-radius-lg);
}

.opening-calendar .oc-card-f .oc-save {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.opening-calendar .oc-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.opening-calendar .oc-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.opening-calendar .oc-fld {
    margin-top: 12px;
}

.opening-calendar .oc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 22px 8px;
    text-align: center;
    font-size: 12.5px;
    color: var(--oc-text-2);
}

.opening-calendar .oc-empty .bi {
    font-size: 26px;
    color: var(--oc-text-3);
}

.opening-calendar .oc-dirty {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--oc-text-warning);
}

.opening-calendar .oc-dirty::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--oc-warning);
}

/* ---------- Calendar ---------- */
.opening-calendar .oc-cal-h {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--oc-border);
}

.opening-calendar .oc-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.opening-calendar .oc-range {
    flex: 1;
    min-width: 180px;
    margin: 0 0 0 6px;
    font-size: 16px;
    font-weight: 600;
    color: var(--oc-text);
}

.opening-calendar .oc-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--oc-border);
    background: var(--oc-surface-2);
}

.opening-calendar .oc-lg {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 10px 3px 6px;
    border-radius: 8px;
    border: 1px solid var(--oc-border);
    background: var(--oc-surface);
    font-size: 12px;
    color: var(--oc-text-2);
}

.opening-calendar .oc-lg b {
    font-weight: 600;
    color: var(--oc-text);
}

.opening-calendar .oc-lg-in {
    align-self: center;
    margin-left: auto;
    font-size: 11.5px;
    color: var(--oc-text-3);
}

.opening-calendar .oc-sw {
    display: inline-block;
    flex: none;
    width: 14px;
    height: 12px;
    border-radius: 4px;
    border: 0.5px solid var(--oc-hair);
}

.opening-calendar .oc-sw.open {
    background: var(--oc-surface);
}

.opening-calendar .oc-sw.cl {
    background: repeating-linear-gradient(135deg, var(--oc-closed-a) 0 3px, var(--oc-closed-b) 3px 5px);
}

.opening-calendar .oc-sw.rc {
    background: var(--oc-bg-warning);
    border-color: var(--oc-border-warning);
}

.opening-calendar .oc-sw.so {
    background: var(--oc-bg-success);
    border-color: var(--oc-border-success);
}

.opening-calendar .oc-sw.sc {
    background: var(--oc-bg-danger);
    border-color: var(--oc-border-danger);
}

.opening-calendar .oc-months {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 28px;
    padding: 18px;
    user-select: none;
    -webkit-user-select: none;
}

@media (max-width: 760px) {
    .opening-calendar .oc-months {
        grid-template-columns: minmax(0, 1fr);
    }
}

.opening-calendar .oc-mh {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 8px;
}

.opening-calendar .oc-mh h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--oc-text);
}

.opening-calendar .oc-mh span {
    font-size: 11.5px;
    color: var(--oc-text-3);
}

.opening-calendar .oc-g {
    display: grid;
    grid-template-columns: 24px repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.opening-calendar .oc-h {
    padding: 2px 0 4px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 11px;
    font-weight: 500;
    color: var(--oc-text-3);
}

.opening-calendar .oc-h.we {
    color: var(--oc-text-2);
}

.opening-calendar .oc-wk {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    color: var(--oc-text-3);
}

.opening-calendar .oc-d {
    position: relative;
    height: 64px;
    padding: 5px 6px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    border: 0.5px solid var(--oc-hair);
    border-radius: 8px;
    background: var(--oc-surface);
    font-size: 12px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.12s, box-shadow 0.12s, background-color 0.12s;
}

/* Not for read-only calendars (.ro); :where keeps the specificity, so the status borders still win on hover */
.opening-calendar :where(.oc-months:not(.ro)) .oc-d:hover {
    border-color: var(--oc-primary);
}

.opening-calendar .oc-months.ro .oc-d {
    cursor: default;
}

.opening-calendar .oc-d .dt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
}

.opening-calendar .oc-d .n {
    min-width: 22px;
    height: 22px;
    margin: -1px 0 0 -2px;
    border-radius: 999px;
    line-height: 22px;
    text-align: center;
    font-size: 12.5px;
    font-weight: 600;
}

.opening-calendar .oc-d .dt .bi {
    font-size: 13px;
    opacity: 0.85;
}

.opening-calendar .oc-d .s {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 10.5px;
    line-height: 1.25;
}

.opening-calendar .oc-d.cl {
    background: repeating-linear-gradient(135deg, var(--oc-closed-a) 0 6px, var(--oc-closed-b) 6px 8px);
    color: var(--oc-text-3);
}

.opening-calendar .oc-d.rc {
    background: var(--oc-bg-warning);
    color: var(--oc-text-warning);
    border-color: var(--oc-border-warning);
}

.opening-calendar .oc-d.so {
    background: var(--oc-bg-success);
    color: var(--oc-text-success);
    border-color: var(--oc-border-success);
}

.opening-calendar .oc-d.sc {
    background: var(--oc-bg-danger);
    color: var(--oc-text-danger);
    border-color: var(--oc-border-danger);
}

.opening-calendar .oc-d.past {
    opacity: 0.55;
}

.opening-calendar .oc-d.today .n {
    background: var(--oc-primary);
    color: #fff;
    box-shadow: 0 1px 2px rgba(85, 112, 241, 0.35);
}

/* Selection is drawn inside the cell (inset), so neighbouring cells never get doubled rings across the gap */
.opening-calendar .oc-d.sel {
    border-color: var(--oc-primary);
    box-shadow: inset 0 0 0 1px var(--oc-primary);
    opacity: 1;
}

.opening-calendar .oc-d.sel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--oc-primary);
    opacity: 0.08;
    pointer-events: none;
    transition: opacity 0.12s;
}

.opening-calendar .oc-d.sel:hover::after {
    opacity: 0.14;
}

/* Focus ring only while navigating the calendar with the keyboard */
.opening-calendar .oc-months.kb .oc-d:focus {
    outline: 2px solid var(--oc-primary);
    outline-offset: 2px;
}

.opening-calendar .oc-d.pad {
    visibility: hidden;
}

@media (max-width: 560px) {
    .opening-calendar .oc-g {
        grid-template-columns: 18px repeat(7, minmax(0, 1fr));
        gap: 3px;
    }

    .opening-calendar .oc-d {
        height: 48px;
        padding: 4px;
        border-radius: 7px;
    }

    .opening-calendar .oc-d .s {
        display: none;
    }

    .opening-calendar .oc-d .dt {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
    }
}

.opening-calendar .oc-cal-f {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid var(--oc-border);
    font-size: 12px;
    color: var(--oc-text-2);
}

.opening-calendar .oc-cal-f .bi {
    margin-top: 1px;
    font-size: 15px;
    color: var(--oc-primary);
}

.opening-calendar kbd {
    padding: 0 5px;
    border: 1px solid var(--oc-border-strong);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: var(--oc-surface);
    color: var(--oc-text);
    font-family: inherit;
    font-size: 11px;
}

/* ---------- Weekdays ---------- */
.opening-calendar .oc-wds {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.opening-calendar .oc-wd {
    height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 1px solid var(--oc-border-strong);
    border-radius: 10px;
    background: var(--oc-surface);
    color: var(--oc-text-2);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.opening-calendar .oc-wd .bi {
    font-size: 14px;
    color: var(--oc-text-3);
}

.opening-calendar .oc-wd:hover {
    border-color: var(--oc-primary);
    color: var(--oc-primary);
}

.opening-calendar .oc-wd.on {
    background: var(--oc-primary-soft);
    border-color: var(--oc-primary-border);
    color: var(--oc-primary-hover);
}

.opening-calendar .oc-wd.on .bi {
    color: var(--oc-primary);
}

.opening-calendar .oc-wd-sum {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--oc-text-2);
}

.opening-calendar .oc-wd-sum .bi {
    color: var(--oc-primary);
}

/* ---------- Recurring rules ---------- */
.opening-calendar .oc-collapse-h {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    border-radius: var(--oc-radius-lg);
}

.opening-calendar .oc-collapse-h:hover {
    background: var(--oc-surface-2);
}

.opening-calendar .oc-collapse-h[aria-expanded="true"] {
    border-radius: var(--oc-radius-lg) var(--oc-radius-lg) 0 0;
}

.opening-calendar .oc-collapse-h[aria-expanded="false"] {
    border-bottom-color: transparent;
}

.opening-calendar .oc-chev {
    color: var(--oc-text-3);
    transition: transform 0.15s;
}

.opening-calendar .oc-collapse-h[aria-expanded="true"] .oc-chev,
.opening-calendar .oc-sp-more[aria-expanded="true"] .bi {
    transform: rotate(90deg);
}

.opening-calendar .oc-rf {
    padding: 14px;
    border: 1px solid var(--oc-border);
    border-radius: 12px;
    background: var(--oc-surface-2);
}

.opening-calendar .oc-rf-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.opening-calendar .oc-rf-grid > .oc-full {
    grid-column: 1 / -1;
}

.opening-calendar .oc-rf-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.opening-calendar .oc-rf-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.opening-calendar .oc-preview {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 0;
    padding: 9px 11px;
    border-radius: 9px;
    background: var(--oc-bg-warning);
    color: var(--oc-text-warning);
    font-size: 12.5px;
    line-height: 1.4;
}

.opening-calendar .oc-preview small {
    display: block;
    font-size: 11.5px;
    opacity: 0.85;
}

.opening-calendar .oc-list-h {
    margin: 16px 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--oc-text-3);
}

.opening-calendar .oc-rules {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.opening-calendar .oc-rule {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 8px 9px 10px;
    border: 1px solid var(--oc-border);
    border-radius: 10px;
    background: var(--oc-surface);
}

.opening-calendar .oc-rule-ic {
    width: 28px;
    height: 28px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--oc-bg-warning);
    color: var(--oc-text-warning);
}

.opening-calendar .oc-rule-main {
    flex: 1;
    min-width: 0;
}

.opening-calendar .oc-rule-t {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.35;
}

.opening-calendar .oc-rule-s {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    color: var(--oc-text-2);
}

/* ---------- Pager (WLPager inside the cards) ---------- */
/* .opening-calendar .oc-pager {
    padding: 10px 18px;
    border-top: 1px solid var(--oc-border);
} */

.opening-calendar .oc-pager.inner {
    padding: 12px 0 0;
    margin-top: 12px;
}

/* ---------- Special dates ---------- */
.opening-calendar .oc-sp-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--oc-border);
    background: var(--oc-surface-2);
}

.opening-calendar .oc-sp-tools .oc-seg button {
    height: 28px;
    font-size: 12.5px;
}

.opening-calendar .oc-sp-list {
    padding-bottom: 10px;
}

.opening-calendar .oc-sp-group {
    padding: 12px 18px 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--oc-text-3);
}

.opening-calendar .oc-sp-item {
    margin: 0 8px;
    border-radius: 10px;
}

.opening-calendar .oc-sp-item:hover,
.opening-calendar .oc-sp-item.open {
    background: var(--oc-surface-2);
}

.opening-calendar .oc-sp-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px 4px 4px;
}

.opening-calendar .oc-sp-jump {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 4px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.opening-calendar .oc-dtile {
    width: 50px;
    height: 48px;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.05;
    border-radius: 9px;
    border: 0.5px solid;
}

.opening-calendar .oc-dtile.so {
    background: var(--oc-bg-success);
    color: var(--oc-text-success);
    border-color: var(--oc-border-success);
}

.opening-calendar .oc-dtile.sc {
    background: var(--oc-bg-danger);
    color: var(--oc-text-danger);
    border-color: var(--oc-border-danger);
}

.opening-calendar .oc-dtile .m {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 10px;
    font-weight: 600;
}

.opening-calendar .oc-dtile .dd {
    font-size: 17px;
    font-weight: 600;
}

/* Multi-day period: start date on the tile, a second "card" peeking out behind it */
.opening-calendar .oc-dtile.multi {
    margin-right: 4px;
}

.opening-calendar .oc-dtile.multi.so {
    box-shadow: 4px 4px 0 -0.5px var(--oc-bg-success), 4px 4px 0 0 var(--oc-border-success);
}

.opening-calendar .oc-dtile.multi.sc {
    box-shadow: 4px 4px 0 -0.5px var(--oc-bg-danger), 4px 4px 0 0 var(--oc-border-danger);
}

.opening-calendar .oc-sp-main {
    flex: 1;
    min-width: 0;
    display: block;
}

.opening-calendar .oc-sp-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.opening-calendar .oc-sp-when {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--oc-text);
}

.opening-calendar .oc-sp-n {
    font-size: 11.5px;
    color: var(--oc-text-3);
}

.opening-calendar .oc-sp-sum {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12.5px;
    color: var(--oc-text-2);
}

.opening-calendar .oc-sp-sum.none {
    font-style: italic;
    color: var(--oc-text-3);
}

.opening-calendar .oc-sp-more .bi {
    transition: transform 0.15s;
}

.opening-calendar .oc-sp-days {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 10px 10px 70px;
}

.opening-calendar .oc-sp-day {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 2px 2px 10px;
    border: 0.5px solid var(--oc-hair);
    border-radius: 999px;
    background: var(--oc-surface);
    font-size: 12px;
}

.opening-calendar .oc-sp-day button {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--oc-text-3);
    font-size: 11px;
    cursor: pointer;
}

.opening-calendar .oc-sp-day button:hover {
    background: var(--oc-bg-danger);
    color: var(--oc-text-danger);
}

/* ---------- Floating: backdrop, menu, popover, selection bar, undo ---------- */
.opening-calendar .oc-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

.opening-calendar .oc-menu,
.opening-calendar .oc-pop {
    position: fixed;
    z-index: 1050;
    background: var(--oc-surface);
    border: 1px solid var(--oc-border);
    border-radius: 12px;
    box-shadow: var(--oc-shadow-pop);
    animation: oc-pop 0.12s ease-out;
}

@keyframes oc-pop {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.98);
    }

    to {
        opacity: 1;
    }
}

.opening-calendar .oc-menu {
    min-width: 250px;
    padding: 6px;
}

.opening-calendar .oc-menu-h {
    padding: 6px 10px 4px;
    font-size: 11.5px;
    color: var(--oc-text-3);
}

.opening-calendar .oc-mi {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--oc-text);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.opening-calendar .oc-mi:hover {
    background: var(--oc-ghost-hover);
}

/* "Remove" while another save/removal is running */
.opening-calendar .oc-mi:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.opening-calendar .oc-mi:disabled:hover {
    background: transparent;
}

.opening-calendar .oc-mi .bi {
    font-size: 16px;
}

.opening-calendar .oc-mi .bi.so {
    color: var(--oc-text-success);
}

.opening-calendar .oc-mi .bi.sc {
    color: var(--oc-text-danger);
}

.opening-calendar .oc-sep {
    height: 1px;
    margin: 5px 4px;
    background: var(--oc-border);
}

.opening-calendar .oc-pop {
    width: 360px;
    max-width: calc(100vw - 16px);
    padding: 16px;
}

.opening-calendar .oc-pop.at-bar {
    left: 50%;
    bottom: 84px;
    transform: translateX(-50%);
    animation: none;
}

.opening-calendar .oc-pop-h {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.opening-calendar .oc-pop-ic {
    width: 36px;
    height: 36px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: 18px;
}

.opening-calendar .oc-pop-ic.so {
    background: var(--oc-bg-success);
    color: var(--oc-text-success);
}

.opening-calendar .oc-pop-ic.sc {
    background: var(--oc-bg-danger);
    color: var(--oc-text-danger);
}

.opening-calendar .oc-pop-t {
    flex: 1;
    min-width: 0;
}

.opening-calendar .oc-pop-t p {
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
}

.opening-calendar .oc-pop-t p.sub {
    margin-top: 1px;
    font-size: 12px;
    font-weight: 400;
    color: var(--oc-text-2);
}

.opening-calendar .oc-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 0;
    padding: 9px 11px;
    border-radius: 9px;
    background: var(--oc-primary-soft);
    color: var(--oc-primary-hover);
    font-size: 12px;
    line-height: 1.45;
}

.opening-calendar .oc-note .bi {
    flex: none;
    margin-top: 1px;
    color: var(--oc-primary);
}

.opening-calendar .oc-pop-f {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

.opening-calendar .oc-selbar,
.opening-calendar .oc-undo {
    position: fixed;
    z-index: 1030;
    display: flex;
    align-items: center;
    border-radius: 14px;
    background: var(--oc-bar-bg);
    color: #fff;
    box-shadow: 0 12px 32px rgba(31, 30, 29, 0.28);
}

.opening-calendar .oc-selbar {
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    flex-wrap: wrap;
    gap: 10px;
    max-width: calc(100vw - 32px);
    padding: 8px 8px 8px 16px;
    animation: oc-rise 0.18s ease-out;
}

@keyframes oc-rise {
    from {
        opacity: 0;
        transform: translate(-50%, 12px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.opening-calendar .oc-sb-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-right: 6px;
    font-size: 13px;
    font-weight: 500;
}

.opening-calendar .oc-sb-info .bi {
    font-size: 17px;
    color: var(--oc-bar-accent);
}

.opening-calendar .oc-sb-act {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.opening-calendar .oc-sb-btn {
    height: 34px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    border-radius: 9px;
    background: var(--oc-bar-btn);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.opening-calendar .oc-sb-btn:hover {
    background: var(--oc-bar-btn-hover);
}

.opening-calendar .oc-sb-btn:focus-visible {
    outline: 2px solid var(--oc-bar-accent);
    outline-offset: 1px;
}

.opening-calendar .oc-sb-btn .bi.o {
    color: #b5d98a;
}

.opening-calendar .oc-sb-btn .bi.c {
    color: #f7b4b4;
}

.opening-calendar .oc-sb-div {
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, 0.18);
}

.opening-calendar .oc-undo {
    left: 20px;
    bottom: 20px;
    gap: 10px;
    max-width: calc(100vw - 40px);
    padding: 8px 8px 8px 14px;
    font-size: 13px;
    animation: oc-pop 0.15s ease-out;
}

.opening-calendar .oc-undo .undo {
    height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--oc-bar-accent);
    font-weight: 600;
    cursor: pointer;
}

.opening-calendar .oc-undo .x {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
}

.opening-calendar .oc-undo .undo:hover,
.opening-calendar .oc-undo .x:hover {
    background: var(--oc-bar-btn);
}

@media (max-width: 560px) {
    .opening-calendar .oc-selbar {
        left: 16px;
        right: 16px;
        bottom: 12px;
        transform: none;
        max-width: none;
        animation: none;
    }

    .opening-calendar .oc-sb-info {
        flex-basis: 100%;
    }

    .opening-calendar .oc-undo {
        left: 16px;
        right: 16px;
        top: 12px;
        bottom: auto;
    }

    .opening-calendar .oc-sp-days {
        padding-left: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .opening-calendar *,
    .opening-calendar *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ---------- API integration: access, loading and availability states ---------- */
.opening-calendar .oc-loc-text {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border: 1px solid var(--oc-border-strong);
    border-radius: var(--oc-radius);
    background: var(--oc-surface);
    font-weight: 600;
    color: var(--oc-text);
}

.opening-calendar .oc-loc-text .bi {
    font-size: 18px;
    color: var(--oc-primary);
}

.opening-calendar .oc-loc-lbl {
    display: block;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.1;
    color: var(--oc-text-3);
}

.opening-calendar .oc-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--oc-primary-soft);
    color: var(--oc-primary-hover);
    font-size: 12.5px;
}

.opening-calendar .oc-card .oc-notice {
    margin: 12px 18px 0;
}

.opening-calendar .oc-notice.warn {
    background: var(--oc-bg-warning);
    color: var(--oc-text-warning);
}

.opening-calendar .oc-notice .oc-btn {
    margin-left: auto;
}

.opening-calendar .oc-months-loading {
    height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5570f1;
}

/* Day without calendar data (year empty or not loaded) */
.opening-calendar .oc-d.na {
    cursor: default;
    border-style: dashed;
    background: transparent;
    color: var(--oc-text-3);
    opacity: 0.6;
}

.opening-calendar .oc-d.na:hover {
    border-color: var(--oc-hair);
}

.opening-calendar .oc-meta {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    line-height: 1.35;
    color: var(--oc-text-3);
}

/* Keep "Save settings" on one line next to the "Last saved …" text */
.opening-calendar .oc-card-f .oc-save {
    flex: none;
    white-space: nowrap;
}

.opening-calendar .oc-sp-tools {
    justify-content: space-between;
}

.opening-calendar .oc-wd:disabled,
.opening-calendar .oc-icon-btn:disabled,
.opening-calendar .oc-sb-btn:disabled,
.opening-calendar .oc-btn:disabled,
.opening-calendar .oc-sp-day button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.opening-calendar .oc-wd:disabled:hover {
    border-color: var(--oc-border-strong);
    color: var(--oc-text-2);
}

.opening-calendar .oc-wd.on:disabled:hover {
    border-color: var(--oc-primary-border);
    color: var(--oc-primary-hover);
}

.opening-calendar .oc-inp:disabled {
    background: var(--oc-surface-2);
    color: var(--oc-text-2);
    cursor: not-allowed;
}

.opening-calendar .oc-card-b > .oc-note:first-child {
    margin-top: 0;
}

/* ---------- Spinners (DxWaitIndicator) ---------- */
/* app.css makes every spinner use currentColor (!important), so the colour is set through `color` */
.opening-calendar .dxbl-wait-indicator {
    color: var(--oc-primary);
}

/* Inside filled buttons a primary spinner would be invisible – use the button's text colour */
.opening-calendar .btn-blue .dxbl-wait-indicator,
.opening-calendar .oc-btn-success .dxbl-wait-indicator,
.opening-calendar .oc-btn-danger .dxbl-wait-indicator {
    color: #fff;
}

/* Dark floating bars (selection bar, undo) */
.opening-calendar .oc-selbar .dxbl-wait-indicator,
.opening-calendar .oc-undo .dxbl-wait-indicator {
    color: var(--oc-bar-accent);
}

.opening-calendar .oc-sp-day .oc-chip-spin {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
}

.opening-calendar .oc-sp-day .oc-chip-spin .dxbl-wait-indicator {
    --dxbl-wait-indicator-size: 0.85rem;
}

.opening-calendar .oc-refreshing {
    display: inline-flex;
    align-items: center;
}

/* ---------- Location dropdown (admins): same box as the non-admin location text ---------- */
.opening-calendar .oc-loc-select {
    padding: 6px 8px 6px 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.opening-calendar .oc-loc-select:focus-within {
    border-color: var(--oc-primary);
    box-shadow: 0 0 0 3px var(--oc-ring);
}

.opening-calendar .oc-loc-field {
    min-width: 240px;
}

.opening-calendar .oc-loc-combo.dxbl-text-edit {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    min-height: 0;
    height: 22px;
}

.opening-calendar .oc-loc-combo .dxbl-text-edit-input {
    padding: 0 !important;
    height: 22px;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--oc-text);
    background: transparent;
    cursor: pointer;
}

.opening-calendar .oc-loc-combo .dxbl-edit-btn-dropdown {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--oc-text-3);
    border-radius: 6px;
}

.opening-calendar .oc-loc-combo .dxbl-edit-btn-dropdown:hover {
    background: var(--oc-ghost-hover) !important;
    color: var(--oc-primary);
}

/* Locked while the page loads or something is being saved/deleted */
.opening-calendar .oc-loc-combo.dxbl-disabled .dxbl-text-edit-input,
.opening-calendar .oc-loc-combo.dxbl-disabled .dxbl-edit-btn-dropdown {
    cursor: not-allowed;
}

.opening-calendar .oc-loc-combo.dxbl-disabled .dxbl-edit-btn-dropdown:hover {
    background: transparent !important;
    color: var(--oc-text-3);
}

/* Spinners shown while something is being deleted are red */
.opening-calendar .oc-spin-del .dxbl-wait-indicator {
    color: var(--oc-danger);
}

/* On the dark selection bar: the bar's light red (same as its "Special closed" icon) */
.opening-calendar .oc-selbar .oc-spin-del .dxbl-wait-indicator {
    color: #f7b4b4;
}

.opening-calendar .oc-sb-btn .oc-spin-del {
    display: inline-flex;
}

/* ---------- Match the prototype where the app's global styles leak in ---------- */
/* style.css / bootstrap set p, h2, h3 and span sizes, line heights and colours globally;
   class rules on this page still win over these base rules */
.opening-calendar p,
.opening-calendar h2,
.opening-calendar h3 {
    line-height: 1.5;
}

.opening-calendar p {
    font-size: inherit;
    color: inherit;
}

.opening-calendar .oc-sub {
    line-height: 1.5;
}

/* Buttons are <button>s, which don't inherit the text colour or size */
.opening-calendar .oc-collapse-h,
.opening-calendar .oc-sp-jump {
    color: var(--oc-text);
    font-size: 13px;
}

/* Buttons inside the cards use the prototype's compact size, not the app-wide 44px btn-blue */
.opening-calendar .oc-card .btn-blue {
    height: 36px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 500;
    line-height: normal;
    gap: 6px;
}

.opening-calendar .oc-card .btn-blue.oc-btn-sm {
    height: 30px;
    padding: 0 10px;
    font-size: 12.5px;
}

/* Bootstrap gives buttons/inputs line-height 1.5; the prototype uses the browser default */
.opening-calendar .oc-btn,
.opening-calendar .oc-icon-btn,
.opening-calendar .oc-seg button,
.opening-calendar .oc-mi,
.opening-calendar .oc-sb-btn,
.opening-calendar .oc-inp,
.opening-calendar .oc-wd {
    line-height: normal;
}

/* left: 50% would cap the bar's natural width at half the screen and make it wrap early
   (phones keep the full-width bar from the mobile rules) */
@media (min-width: 561px) {
    .opening-calendar .oc-selbar {
        width: max-content;
    }
}

/* Undo: spinner and text centred on one line; the spinner sized to the 13px text */
.opening-calendar .oc-undo .undo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.opening-calendar .oc-undo .undo .dxbl-wait-indicator {
    --dxbl-wait-indicator-size: 0.8rem;
}

/* ---------- Page title with icon tile (as in the prototype) ---------- */
.opening-calendar .oc-brand {
    gap: 12px;
    min-width: 0;
}

.opening-calendar .oc-brand-ic {
    width: 44px;
    height: 44px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--oc-primary);
    color: #fff;
    font-size: 22px;
    box-shadow: 0 4px 12px rgba(85, 112, 241, 0.3);
}

.opening-calendar .oc-brand-text {
    min-width: 0;
}

.opening-calendar .oc-brand-text h3 {
    margin: 0;
}

.opening-calendar .oc-brand-text .oc-lead {
    margin: 2px 0 0;
    font-size: 12.5px;
    line-height: 1.4;
}

/* Retry buttons in the notices: spinner sized to the button text */
.opening-calendar .oc-notice .oc-btn .dxbl-wait-indicator {
    --dxbl-wait-indicator-size: 0.8rem;
}

/* ---------- Tabs: opening calendar / cut-off settings (TyreHotelOpeningCalendar.SettingsInOwnTab) ---------- */
.opening-calendar .oc-tabs {
    display: flex;
    gap: 4px;
    margin: 0 0 20px;
    border-bottom: 1px solid var(--oc-border);
}

.opening-calendar .oc-tab {
    height: 44px;
    margin-bottom: -1px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--oc-text-2);
    font-size: 13.5px;
    font-weight: 500;
    line-height: normal;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s;
}

.opening-calendar .oc-tab .bi {
    font-size: 16px;
}

.opening-calendar .oc-tab:hover {
    color: var(--oc-primary);
}

/* Locked while the special date popover saves */
.opening-calendar .oc-tab:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.opening-calendar .oc-tab:disabled:hover {
    color: var(--oc-text-2);
}

.opening-calendar .oc-tab[aria-selected="true"]:disabled:hover {
    color: var(--oc-primary);
}

.opening-calendar .oc-tab[aria-selected="true"] {
    color: var(--oc-primary);
    border-bottom-color: var(--oc-primary);
}

.opening-calendar .oc-tab:focus-visible {
    outline: none;
    border-radius: 8px 8px 0 0;
    box-shadow: inset 0 0 0 2px var(--oc-ring);
}

.opening-calendar .oc-tab-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--oc-warning);
}

/* ---------- Cut-off settings tab: form + "How these settings are used" ---------- */
.opening-calendar .oc-set-layout {
    display: grid;
    grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

@media (max-width: 900px) {
    .opening-calendar .oc-set-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Settings card in the sidebar (tabs switched off): the wrapper doesn't take part in the layout */
.opening-calendar .oc-set-plain {
    display: contents;
}

.opening-calendar .oc-set-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.opening-calendar .oc-set-grid > .oc-full {
    grid-column: 1 / -1;
}

.opening-calendar .oc-set-grid > .oc-note {
    margin-top: 0;
}

.opening-calendar .oc-set-grid .oc-cutoff-inp {
    max-width: 220px;
}

@media (max-width: 560px) {
    .opening-calendar .oc-set-grid {
        grid-template-columns: 1fr;
    }
}

.opening-calendar .oc-how {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.opening-calendar .oc-how-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.opening-calendar .oc-how-ic {
    width: 30px;
    height: 30px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--oc-sunken);
    color: var(--oc-text-2);
}

.opening-calendar .oc-how-row b {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--oc-text);
}

.opening-calendar .oc-how-row p {
    margin: 2px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--oc-text-2);
}

.opening-calendar .oc-linkbtn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--oc-primary);
    font-size: inherit;
    font-weight: 500;
    cursor: pointer;
}

.opening-calendar .oc-linkbtn:hover {
    text-decoration: underline;
}

.opening-calendar .oc-ex {
    margin-top: 4px;
    overflow: hidden;
    border: 1px solid var(--oc-border);
    border-radius: 12px;
}

.opening-calendar .oc-ex-h {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--oc-border);
    background: var(--oc-surface-2);
    font-size: 12.5px;
    color: var(--oc-text-2);
}

.opening-calendar .oc-ex-h b {
    font-weight: 600;
    color: var(--oc-text);
}

.opening-calendar .oc-ex-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--oc-border);
}

.opening-calendar .oc-ex-row > .bi {
    font-size: 18px;
    color: var(--oc-primary);
}

.opening-calendar .oc-ex-k {
    flex: 1;
    font-size: 12.5px;
    color: var(--oc-text-2);
}

/* Date and its note both right-aligned */
.opening-calendar .oc-ex-v {
    font-weight: 600;
    text-align: right;
}

.opening-calendar .oc-ex-v small {
    display: block;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--oc-text-3);
}

/* A year the example needs has no calendar data (empty, or failed to load – with Retry) */
.opening-calendar .oc-ex-warn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--oc-border);
    background: var(--oc-bg-warning);
    color: var(--oc-text-warning);
    font-size: 12px;
}

.opening-calendar .oc-ex-warn .oc-btn {
    margin-left: auto;
}

.opening-calendar .oc-ex-f {
    padding: 9px 14px;
    background: var(--oc-surface-2);
    font-size: 11.5px;
    color: var(--oc-text-3);
}