/* =========================================================
   KB Dayplan Surface + Week Tabs (scoped)
   ========================================================= */

/* Remove WP block gap between hero teaser and week tabs (if adjacent) */
.kb-hero-teaser + .kb-dayplan-surface {
    margin-top: 0 !important;
}

/* ===== Variables (easy to tweak) ===== */
.kb-dayplan-surface {
    /* Colors */
    --kb-ci-red: #810d01;
    --kb-text-color: #111111;

    /* Surface background + vertical padding */
    --kb-surface-bg: rgba(200, 220, 220, 0.99);
    --kb-surface-pad-y: 32px;

    --kb-row-bg: rgba(255, 255, 255, 0.55);
    --kb-row-hover-bg: rgba(255, 255, 255, 0.75);

    /* Box / border */
    --kb-box-border-width: 1px;
    --kb-box-border-style: solid;
    --kb-box-border-color: rgba(0, 0, 0, 0.14);
    --kb-box-border-radius: var(--wp--custom--kb--button-radius, 4px);
    --kb-box-padding: 14px;
    --kb-box-gap: 16px;

    /* attrs chip padding Y */
    --kb-attrs-bar-pad-y: 10px;

    /* ===== NEW: unified show button sizing via variables ===== */
    --kb-show-btn-pad-y: 8px;          /* desktop/tablet vertical padding */
    --kb-show-btn-pad-y-mobile: 6px;   /* mobile vertical padding */
    --kb-show-btn-radius: 4px;         /* show button radius */

    color: var(--kb-text-color);
    font: inherit;

    position: relative;

    /* Apply background ONLY to content width (no full-bleed) */
    background: var(--kb-surface-bg);

    /* Vertical padding */
    padding-top: var(--kb-surface-pad-y);
    padding-bottom: var(--kb-surface-pad-y);
}

/* Full-width background technique (DISABLED - we want content width only) */
.kb-dayplan-surface::before {
    content: none;
}

/* The actual existing component inherits text */
.kb-dayplan-surface .kb-week-tabs {
    font: inherit;
    color: inherit;
}

/* The wrapper that has horizontal padding (existing) */
.kb-dayplan-surface .kb-week-tabs__panelWrap {
    padding-left: 24px;
    padding-right: 24px;
}

@media (max-width: 767px) {
    .kb-dayplan-surface .kb-week-tabs__panelWrap {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Center title + day row above the panel */
.kb-dayplan-surface .kb-week-tabs__title {
    margin: 8px 0 16px 0;
    text-align: center;
    font: inherit;
    font-weight: 600;

    font-size: 36px;
    line-height: 1.15;

    font-family: var(--wp--preset--font-family--raleway, var(--wp--preset--font-family--heading, inherit));
}

@media (max-width: 767px) {
    .kb-dayplan-surface .kb-week-tabs__title {
        font-size: 24px;
    }
}

/* Day row */
.kb-dayplan-surface .kb-week-tabs__tablist {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;

    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;

    padding: 6px 2px;
    margin: 0 0 14px 0;

    scrollbar-width: thin;
}

/* Day buttons */
.kb-dayplan-surface .kb-week-tabs__tab {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--kb-text-color);

    font: inherit;
    font-weight: 700;
    letter-spacing: 0.02em;

    border-radius: 0;
    padding: 8px 10px;

    cursor: pointer;
    white-space: nowrap;
    user-select: none;

    transition: background-color 160ms ease, color 160ms ease, opacity 160ms ease;
}

.kb-dayplan-surface .kb-week-tabs__tab.is-weekend {
    color: var(--kb-ci-red);
}

.kb-dayplan-surface .kb-week-tabs__tab.is-active {
    background: var(--kb-ci-red);
    color: #ffffff;
    border-radius: var(--wp--custom--kb--button-radius, 4px);
}

.kb-dayplan-surface .kb-week-tabs__tab:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.55);
    outline-offset: 2px;
}

/* Panel itself (keep simple) */
.kb-dayplan-surface .kb-week-tabs__panel {
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
}

/* ===== Dayplan list ===== */

/* Switch card layout to grid so we can place attrs under the LEFT column reliably */
.kb-dayplan-surface .kb-dayplan-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "left right"
        "attrs attrs";
    column-gap: var(--kb-box-gap);
    row-gap: 8px;
    align-items: start;

    background: var(--kb-row-bg);

    border-width: var(--kb-box-border-width);
    border-style: var(--kb-box-border-style);
    border-color: var(--kb-box-border-color);
    border-radius: var(--kb-box-border-radius);

    padding: var(--kb-box-padding);

    cursor: pointer;
    transition: background-color 160ms ease;

    overflow: visible;
}

.kb-dayplan-surface .kb-dayplan-row:hover,
.kb-dayplan-surface .kb-dayplan-row:focus,
.kb-dayplan-surface .kb-dayplan-row:focus-within {
    background: var(--kb-row-hover-bg);
}

.kb-dayplan-surface .kb-dayplan-left {
    grid-area: left;
    min-width: 0;
}

.kb-dayplan-surface .kb-dayplan-right {
    grid-area: right;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.kb-dayplan-surface .kb-dayplan-right:empty {
    display: none;
}

/* Title */
.kb-dayplan-surface .kb-dayplan-title {
    margin: 0;
    font: inherit;
    font-weight: 700;
}

.kb-dayplan-surface .kb-dayplan-title a {
    color: inherit;
    text-decoration: none;
}

.kb-dayplan-surface .kb-dayplan-title a:hover {
    text-decoration: underline;
}

.kb-dayplan-surface .kb-dayplan-meta {
    margin-top: 4px;
    font: inherit;
    opacity: 0.9;
}

.kb-dayplan-surface .kb-dayplan-empty {
    font: inherit;
}

/* Attribute hint: left under meta, content-width chip, 16px away from bottom */
.kb-dayplan-surface .kb-dayplan-attrs {
    grid-area: attrs;

    justify-self: start;
    align-self: start;

    width: max-content;
    max-width: 100%;

    margin: 0 0 calc(16px - var(--kb-box-padding)) 0;

    background: rgba(43, 43, 43, 1);
    color: #ffffff;

    padding: var(--kb-attrs-bar-pad-y) 16px var(--kb-attrs-bar-pad-y) 12px;
    border-radius: var(--wp--custom--kb--button-radius, 4px);

    font: inherit;
    font-weight: 600;
    line-height: 1.35;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    font-size: 0.9em;
}

/* Icon sizing (SVG inserted in markup) */
.kb-dayplan-surface .kb-dayplan-attrs svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    display: block;
}

.kb-dayplan-surface .kb-dayplan-attrs__text {
    min-width: 0;
}

/* ===== Show button states (scoped to week tabs/dayplan) ===== */

/*
  IMPORTANT:
  Buttons may be <a> initially and later turned into <span> by JS.
  So we style :is(a,button,span).kb-show-btn consistently.
*/

.kb-dayplan-surface :is(a, button, span).kb-show-btn.wp-element-button {
    padding-top: var(--kb-show-btn-pad-y);
    padding-bottom: var(--kb-show-btn-pad-y);
    line-height: 1.1;
    border-radius: var(--kb-show-btn-radius);
}

/* Active/selected time: keep same compact height */
.kb-dayplan-surface .kb-show-btn.is-selected {
    padding-top: var(--kb-show-btn-pad-y);
    padding-bottom: var(--kb-show-btn-pad-y);
    line-height: 1.1;
}

/* ended / running (you mentioned is-disabled is used; keep is-running too) */
.kb-dayplan-surface .kb-show-btn.is-disabled,
.kb-dayplan-surface .kb-show-btn.is-running {
    opacity: 0.6;
    cursor: default;

    /* no hover, no click */
    pointer-events: none;
}

/* Override global button hover styles for disabled/running inside surface */
.kb-dayplan-surface :is(a, button, span).kb-show-btn.is-disabled:hover,
.kb-dayplan-surface :is(a, button, span).kb-show-btn.is-running:hover,
.kb-dayplan-surface :is(a, button, span).kb-show-btn.is-disabled:focus,
.kb-dayplan-surface :is(a, button, span).kb-show-btn.is-running:focus {
    background-color: var(--kb-ci-red) !important;
    color: #ffffff !important;
}

/* Mobile: even more compact + layout stack */
@media (max-width: 767px) {
    .kb-dayplan-surface :is(a, button, span).kb-show-btn.wp-element-button {
        padding-top: var(--kb-show-btn-pad-y-mobile);
        padding-bottom: var(--kb-show-btn-pad-y-mobile);
        border-radius: var(--kb-show-btn-radius);
    }

    .kb-dayplan-surface .kb-show-btn.is-selected {
        padding-top: var(--kb-show-btn-pad-y-mobile);
        padding-bottom: var(--kb-show-btn-pad-y-mobile);
    }

    .kb-dayplan-surface .kb-dayplan-row {
        grid-template-columns: 1fr;
        grid-template-areas:
            "left"
            "right"
            "attrs";
        row-gap: 10px;
    }

    .kb-dayplan-surface .kb-dayplan-right {
        justify-content: flex-start;
    }
}