.col,
.page.a4 {
    overflow: hidden
}

.date,
.hint {
    text-align: right
}

.app .btn,
.date {
    white-space: nowrap
}

:root {
    --bg: #f4f7f9;
    --panel: #ffffff;
    --panelBorder: #d1d9e2;
    --text: #0e1b2a;
    --muted: #6e7f91;
    --navy: #0d3a5c;
    --teal: #0091aa;
    --ink: #0e1b2a;
    --grey: #6e7f91;
    --lightgrey: #8a9bb0;
    --line: #cfe0ee;
    --shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    --tentative: #c46a1a
}

/* 🚨 Scoped Body Class for Portal Integration */
body.calendar-page-layout {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: linear-gradient(180deg, var(--bg), #eef1f5);
    color: var(--text);
    background-attachment: fixed;
}

.app {
    max-width: 1100px;
    margin: 22px auto 60px;
    padding: 0 16px;
}

.controls {
    background: var(--panel);
    border: 1px solid var(--panelBorder);
    border-radius: 14px;
    padding: 16px 16px 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .05)
}

.label {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 8px
}

.input-row {
    display: flex;
    gap: 10px;
    align-items: center
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 12px
}

/* 🚨 Scoped Button overrides */
.app .btn {
    border-radius: 10px;
    padding: 12px 14px;
    border: 1px solid var(--panelBorder);
    color: var(--text);
    cursor: pointer;
    font-weight: 700;
    font-size: 13px
}

.hint,
.mono,
.preview-label,
.status {
    font-size: 12px
}

.app .btn:disabled {
    opacity: .4;
    cursor: not-allowed
}

.app .btn.primary {
    background: #0092aa;
    color: #fff;
    border-color: #055068
}

.app .btn.primary:hover:not(:disabled) {
    filter: brightness(1.05)
}

.app .btn.secondary {
    background: rgba(0, 0, 0, .04);
    color: var(--text)
}

.app .btn.secondary:hover:not(:disabled) {
    background: rgba(0, 0, 0, .08)
}

.status-row {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline
}

.status {
    color: var(--muted)
}

.hint {
    color: rgba(110, 127, 145, .85)
}

.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    color: #055068
}

.preview-shell {
    margin-top: 18px
}

.preview-label {
    color: var(--muted);
    margin: 10px 0
}

.capture-wrap {
    display: flex;
    flex-direction: column;
    align-items: center
}

.date.date-multi,
.page.a4 {
    flex-direction: column;
    display: flex
}

.capture-wrap.is-measuring .page-wrap {
    display: block !important;
    position: absolute;
    left: -20000px;
    top: 0;
    visibility: hidden
}

.page-wrap {
    display: none
}

.date.date-multi span,
.page-wrap.active {
    display: block
}

.capture-wrap.pdf-exporting .page-wrap {
    display: block;
    margin-bottom: 24px
}

.page.a4 {
    width: 794px;
    height: 1123px;
    background: #fff;
    border-radius: 8px;
    box-shadow: var(--shadow)
}

.page-header {
    background: linear-gradient(135deg, #055068, #0092aa, #d9d9d9);
    color: #fff;
    padding: 20px 28px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 6px solid var(--teal);
    box-shadow: 0 2px 0 rgba(0, 146, 170, 0.30);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-logo {
    height: 42px;
    width: auto;
    flex-shrink: 0;
}

.header-text {
    display: flex;
    flex-direction: column;
}

.content,
.page-inner {
    display: grid;
    min-height: 0
}

.title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .1px
}

.subtitle {
    margin-top: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, .84);
    font-weight: 600
}

.pill {
    background: #fff;
    color: var(--navy);
    border-radius: 999px;
    padding: 10px 22px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .2px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .15)
}

.page-inner {
    padding: 22px 28px 18px;
    flex: 1;
    grid-template-rows: 1fr auto auto
}

.content {
    grid-template-columns: 1fr 1fr;
    column-gap: 34px;
    color: var(--ink)
}

.col {
    min-height: 0
}

.month {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 6px
}

.month-title {
    display: block;
    width: 100%;
    background: var(--teal);
    color: #fff;
    font-weight: 900;
    letter-spacing: .6px;
    font-size: 12px;
    padding: 5px 12px;
    margin: 0 0 2px
}

.date,
.summary {
    font-weight: 800
}

.event {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 6px;
    padding: 5px 0 6px;
    border-bottom: 1px solid var(--line);
    align-items: start
}

.date {
    font-size: 11px;
    color: var(--navy);
    line-height: 1.1
}

.date.date-multi {
    white-space: normal;
    align-items: flex-end;
    line-height: 1.02
}

.event-right {
    width: 100%;
    min-width: 0;
    padding: 2px 6px;
    border-radius: 0;
    background: 0 0;
    border-left: 2px solid transparent
}

.summary {
    font-size: 12px;
    line-height: 1.15;
    margin: 0;
    overflow-wrap: anywhere;
    word-break: break-word
}

.link-btn,
.subline {
    color: var(--grey);
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.2
}

.subline {
    font-size: 11px;
    margin-top: 2px;
    max-width: 100%
}

.subline.note {
    font-style: italic;
    color: var(--grey)
}

.link-row {
    margin-top: 3px;
    display: block;
    gap: 6px;
    max-width: 100%
}

.link-btn {
    display: inline-block;
    margin-right: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: 0 0;
    font-weight: 600;
    font-size: 10.5px;
    text-decoration: underline;
    white-space: normal
}

.link-btn:hover {
    background: rgba(0, 146, 170, .16)
}

.legend-wrap {
    padding-top: 10px;
    min-height: 90px;
}

.legend {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 16px;
    row-gap: 6px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
}

.legend-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 10px;
    color: var(--navy)
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
    flex-shrink: 0;
    margin-top: 2px
}

.legend-title {
    font-weight: 700;
    text-transform: uppercase
}

.legend-expl {
    font-weight: 400;
    color: var(--grey)
}

.footer {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--lightgrey)
}

.preview-note {
    margin-top: 10px;
    font-size: 12px;
    color: rgba(110, 127, 145, .85);
    text-align: center
}

.mobile-only {
    display: none !important
}

@media (max-width:860px) {
    .input-row {
        flex-wrap: wrap
    }

    .desktop-only {
        display: none !important
    }

    .mobile-only {
        display: inline-flex !important
    }

    .app {
        margin: 0;
        padding: 0
    }

    .controls {
        position: sticky;
        top: 0;
        z-index: 100;
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-top: none;
        padding: 12px 16px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, .1)
    }

    .page.a4 {
        width: 100%;
        height: auto !important;
        border-radius: 0;
        box-shadow: none
    }

    .col-right,
    .page-header .header-right,
    .page-header .subtitle {
        display: none
    }

    .month-title--with-year {
        display: flex;
        justify-content: space-between;
        align-items: center
    }

    .month-title--with-year .month-year {
        opacity: .9
    }

    .content {
        grid-template-columns: 1fr !important;
        display: grid
    }

    .page-inner {
        padding: 16px 12px
    }

    .preview-shell {
        margin-top: 0
    }
}