/*
 * HR: CSS calendar modula koristi postojeće Bootstrap/theming varijable gdje postoje.
 * EN: Calendar module CSS uses existing Bootstrap/theming variables where available.
 */

.calendar-shell {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Meeting planner: module-local tokens keep the screens theme-aware without requiring Theme. */
.calendar-meeting-shell {
    --calendar-meeting-accent: var(--hph-primary, var(--bs-primary, #0d6efd));
    --calendar-meeting-surface: var(--hph-card-bg, var(--bs-body-bg, #fff));
    --calendar-meeting-border: var(--hph-border-color, var(--bs-border-color, #d7e0e0));
    max-width: 90rem;
    margin-inline: auto;
}

.calendar-meeting-step,
.calendar-meeting-detail-card,
.calendar-meeting-card,
.calendar-meeting-empty {
    background: var(--calendar-meeting-surface);
    border-color: var(--calendar-meeting-border);
}

.calendar-meeting-step {
    margin-bottom: 1.25rem;
}

.calendar-meeting-schedule {
    border-inline-start: .35rem solid var(--calendar-meeting-accent);
    color: var(--hph-card-text, var(--hph-surface-text, var(--bs-body-color, #212529)));
}

.calendar-meeting-schedule-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    padding: clamp(1rem, 2vw, 1.5rem);
}

.calendar-meeting-schedule-time {
    min-width: 0;
}

.calendar-meeting-schedule-label {
    display: block;
    margin: 0 0 .45rem;
    color: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
}

.calendar-meeting-schedule-date {
    margin: 0 0 .4rem;
    color: inherit;
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.calendar-meeting-schedule-hours {
    color: inherit;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}

.calendar-meeting-schedule-range {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
}

.calendar-meeting-schedule-status {
    flex: 0 1 22rem;
    min-width: 0;
    text-align: end;
}

.calendar-meeting-status-badge {
    --calendar-meeting-status-color: var(--hph-success, var(--bs-success, #198754));
}

/* More specific than Theme's generic badge rule, including in the dark palette. */
.calendar-meeting-schedule .badge.calendar-meeting-status-badge {
    max-width: 100%;
    padding: .65rem 1rem;
    border: 1px solid var(--calendar-meeting-status-color);
    background: var(--calendar-meeting-surface);
    background: color-mix(in srgb, var(--calendar-meeting-status-color) 18%, var(--calendar-meeting-surface));
    color: inherit;
    font-size: 1.05rem;
    line-height: 1.4;
    white-space: normal;
    text-align: start;
}

.calendar-meeting-status-warning {
    --calendar-meeting-status-color: var(--hph-warning, var(--bs-warning, #ffc107));
}

.calendar-meeting-status-danger {
    --calendar-meeting-status-color: var(--hph-danger, var(--bs-danger, #dc3545));
}

.calendar-meeting-card-schedule {
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

.calendar-meeting-personal-calendar-prompt {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.calendar-meeting-calendar-create {
    display: grid;
    flex: 0 1 46rem;
    grid-template-columns: minmax(12rem, 1fr) minmax(10rem, 1fr) auto;
    gap: .75rem;
    align-items: end;
}

.calendar-meeting-resource-picker {
    display: grid;
    max-height: 15rem;
    overflow-y: auto;
    border: 1px solid var(--calendar-meeting-border);
    border-radius: var(--bs-border-radius, .375rem);
}

.calendar-meeting-resource-option {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: 2.75rem;
    margin: 0;
    padding: .55rem .75rem;
    background: var(--calendar-meeting-surface);
    cursor: pointer;
}

.calendar-meeting-resource-option + .calendar-meeting-resource-option {
    border-top: 1px solid var(--calendar-meeting-border);
}

.calendar-meeting-resource-option:hover {
    background: color-mix(in srgb, var(--calendar-meeting-accent) 7%, var(--calendar-meeting-surface));
}

.calendar-meeting-resource-option-none {
    background: color-mix(in srgb, var(--calendar-meeting-accent) 10%, var(--calendar-meeting-surface));
}

.calendar-meeting-step-heading {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.calendar-meeting-step-heading > span {
    display: inline-grid;
    flex: 0 0 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border-radius: 50%;
    background: var(--calendar-meeting-accent);
    color: var(--bs-white, #fff);
    font-weight: 700;
}

.calendar-attendee-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    min-height: 2.25rem;
}

.calendar-attendee-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .45rem .35rem .7rem;
    border: 1px solid color-mix(in srgb, var(--calendar-meeting-accent) 45%, var(--calendar-meeting-border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--calendar-meeting-accent) 9%, var(--calendar-meeting-surface));
}

.calendar-attendee-chip button {
    display: inline-grid;
    width: 1.55rem;
    height: 1.55rem;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 1.2rem;
    line-height: 1;
}

.calendar-attendee-chip button:hover,
.calendar-attendee-chip button:focus-visible {
    background: color-mix(in srgb, currentColor 12%, transparent);
}

.calendar-meeting-group-list {
    max-height: 13rem;
    overflow: auto;
    padding: .75rem;
    border: 1px solid var(--calendar-meeting-border);
    border-radius: var(--bs-border-radius, .375rem);
}

.calendar-meeting-choice,
.calendar-meeting-weekdays {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
}

.calendar-meeting-choice label {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem 1rem;
    border: 1px solid var(--calendar-meeting-border);
    border-radius: var(--bs-border-radius, .375rem);
    cursor: pointer;
}

.calendar-meeting-planner-actions {
    position: sticky;
    z-index: 5;
    bottom: .75rem;
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    padding: .75rem;
    border: 1px solid var(--calendar-meeting-border);
    border-radius: var(--bs-border-radius-lg, .5rem);
    background: color-mix(in srgb, var(--calendar-meeting-surface) 94%, transparent);
    box-shadow: 0 .4rem 1.5rem rgb(0 0 0 / 10%);
    backdrop-filter: blur(.5rem);
}

.calendar-meeting-results-heading {
    margin-bottom: 1rem;
}

.calendar-meeting-slot,
.calendar-meeting-card {
    margin-bottom: .9rem;
}

.calendar-meeting-slot-good {
    border-inline-start: .35rem solid var(--bs-success, #198754);
}

.calendar-meeting-slot-selected {
    outline: .2rem solid color-mix(in srgb, var(--calendar-meeting-accent) 55%, transparent);
}

.calendar-meeting-slot-awaiting-approval {
    outline: .15rem solid color-mix(in srgb, var(--bs-warning, #ffc107) 60%, transparent);
}

.calendar-meeting-slot-pending {
    border-color: color-mix(in srgb, var(--bs-warning, #ffc107) 70%, var(--calendar-meeting-border));
    background: color-mix(in srgb, var(--bs-warning, #ffc107) 8%, var(--calendar-meeting-surface));
}

.calendar-meeting-selection-confirmation {
    margin: .75rem 0 0;
}

.calendar-meeting-selection-confirmation:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.calendar-meeting-selection-confirmation .btn {
    flex: 0 0 auto;
}

.calendar-meeting-slot-resource {
    display: grid;
    gap: .35rem;
    margin: .85rem 0;
    padding: .8rem 1rem;
    border: 1px solid var(--calendar-meeting-border);
    border-radius: var(--bs-border-radius, .375rem);
    background: color-mix(in srgb, var(--calendar-meeting-accent) 6%, var(--calendar-meeting-surface));
}

.calendar-meeting-slot-resource-name {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.calendar-meeting-slot-resource-status {
    font-size: .9rem;
}

.calendar-meeting-resource-approval {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--bs-warning, #ffc107) 60%, var(--calendar-meeting-border));
    border-radius: var(--bs-border-radius, .375rem);
    background: color-mix(in srgb, var(--bs-warning, #ffc107) 8%, var(--calendar-meeting-surface));
}

.calendar-meeting-resource-approvers {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
}

.calendar-meeting-loading {
    padding: 2rem;
    border: 1px dashed var(--calendar-meeting-border);
    border-radius: var(--bs-border-radius, .375rem);
    text-align: center;
}

.calendar-meeting-definition {
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
    gap: .6rem 1rem;
    margin: 0;
}

.calendar-meeting-definition dt,
.calendar-meeting-definition dd {
    margin: 0;
}

.calendar-meeting-guide {
    max-width: 92rem;
}

.calendar-meeting-guide-intro,
.calendar-meeting-guide-nav,
.calendar-meeting-guide-section {
    margin-bottom: 1.5rem;
}

.calendar-meeting-guide-nav ol {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: .45rem 1.5rem;
    padding-left: 1.4rem;
}

.calendar-meeting-guide-section {
    scroll-margin-top: 2rem;
    padding: clamp(1rem, 2vw, 1.75rem);
    border: 1px solid var(--calendar-meeting-border);
    border-radius: var(--bs-border-radius-lg, .5rem);
    background: var(--calendar-meeting-surface);
    box-shadow: 0 .4rem 1.5rem rgb(0 0 0 / 8%);
}

.calendar-meeting-guide-section > h2:first-child {
    margin-bottom: 1rem;
}

.calendar-meeting-guide-figure {
    margin: 1.25rem 0;
    padding: .65rem;
    border: 1px solid var(--calendar-meeting-border);
    border-radius: var(--bs-border-radius-lg, .5rem);
    background: color-mix(in srgb, var(--calendar-meeting-accent) 4%, var(--calendar-meeting-surface));
}

.calendar-meeting-guide-figure img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
    border-radius: var(--bs-border-radius, .375rem);
}

.calendar-meeting-guide-figure figcaption {
    padding: .65rem .25rem .1rem;
    color: var(--bs-secondary-color, #6c757d);
}

.calendar-meeting-guide-scenarios {
    display: grid;
    gap: .75rem;
}

.calendar-meeting-guide-scenarios details {
    border: 1px solid var(--calendar-meeting-border);
    border-radius: var(--bs-border-radius, .375rem);
    background: color-mix(in srgb, var(--calendar-meeting-accent) 3%, var(--calendar-meeting-surface));
}

.calendar-meeting-guide-scenarios summary {
    padding: .9rem 1rem;
    cursor: pointer;
    font-weight: 700;
}

.calendar-meeting-guide-scenarios details > div {
    padding: 0 1rem .9rem;
}

.calendar-meeting-guide-scenarios p:last-child {
    margin-bottom: 0;
}

.calendar-meeting-guide-footer {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: flex-end;
}

@media (max-width: 767.98px) {
    .calendar-meeting-schedule-body {
        align-items: stretch;
        flex-direction: column;
    }

    .calendar-meeting-schedule-status {
        flex-basis: auto;
        text-align: start;
    }

    .calendar-meeting-personal-calendar-prompt {
        align-items: stretch;
        flex-direction: column;
    }

    .calendar-meeting-calendar-create {
        grid-template-columns: 1fr;
    }

    .calendar-meeting-personal-calendar-prompt .btn {
        width: 100%;
    }

    .calendar-meeting-step-heading {
        gap: .75rem;
    }

    .calendar-meeting-planner-actions {
        flex-direction: column;
    }

    .calendar-meeting-selection-confirmation:not([hidden]) {
        align-items: stretch;
        flex-direction: column;
    }

    .calendar-meeting-definition {
        grid-template-columns: 1fr;
    }

    .calendar-meeting-definition dd {
        margin-bottom: .75rem;
    }
}

.calendar-user-picker .dropdown-toggle,
.calendar-user-picker [data-calendar-user-picker-toggle] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-user-picker-menu {
    min-width: 100%;
    width: max-content;
    max-width: min(34rem, 90vw);
}

.calendar-user-picker-list {
    max-height: 17rem;
    overflow-y: auto;
}

.calendar-user-picker-list .list-group-item {
    overflow-wrap: anywhere;
}

.calendar-user-picker[data-calendar-user-picker-multiple="1"] {
    min-width: 0;
    width: 100%;
}

.calendar-user-picker[data-calendar-user-picker-multiple="1"] .calendar-user-picker-menu {
    min-width: 0;
    width: min(34rem, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    max-height: min(32rem, calc(100vh - 1.5rem));
    overflow: hidden;
}

.calendar-user-picker[data-calendar-user-picker-multiple="1"] .calendar-user-picker-menu.show {
    display: flex;
    flex-direction: column;
}

.calendar-user-picker-menu[popover] {
    margin: 0;
}

.calendar-user-picker[data-calendar-user-picker-multiple="1"] .calendar-user-picker-menu > :not(.calendar-user-picker-list) {
    flex-shrink: 0;
}

.calendar-user-picker[data-calendar-user-picker-multiple="1"] .calendar-user-picker-list {
    flex: 1 1 auto;
    min-height: 3rem;
    overscroll-behavior: contain;
}

.calendar-user-picker-list label.list-group-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 2.75rem;
    cursor: pointer;
}

.calendar-user-picker-list label > .form-check-input {
    flex-shrink: 0;
    margin: 0;
}

.calendar-user-picker-list label > span {
    min-width: 0;
    flex: 1;
}

.calendar-user-picker-existing {
    cursor: default !important;
    color: var(--bs-secondary-color, #6c757d);
}

.calendar-user-picker-selection {
    max-height: 6.5rem;
    overflow-y: auto;
}

.calendar-user-picker-selection[hidden] {
    display: none;
}

.calendar-user-picker-compact .calendar-user-picker-selection {
    max-height: 3.25rem;
}

.calendar-user-picker-compact [data-calendar-user-picker-help] {
    display: none;
}

.calendar-user-picker[data-calendar-user-picker-multiple="1"] .calendar-user-picker-compact .calendar-user-picker-list {
    min-height: 0;
}

.calendar-user-picker-selection .calendar-attendee-chip {
    max-width: 100%;
}

.calendar-user-picker-selection .calendar-attendee-chip > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.calendar-user-picker-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.calendar-user-picker-actions [data-calendar-add-participant] {
    margin-inline-start: auto;
}

@media (max-width: 767.98px), (pointer: coarse) {
    .calendar-user-picker[data-calendar-user-picker-multiple="1"] [data-calendar-user-picker-search] {
        font-size: 1rem;
        min-height: 2.75rem;
    }

    .calendar-user-picker-actions .btn,
    [data-calendar-attendee-editor] .calendar-attendee-chip button {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }

    [data-calendar-attendee-editor] .calendar-attendee-chip {
        max-width: 100%;
    }

    [data-calendar-attendee-editor] .calendar-attendee-chip > span {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

.calendar-profile-shell {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.calendar-shell,
.calendar-admin-shell,
.calendar-profile-shell,
#calendarSubscriptionModal,
#calendarImportModal,
#calendarEventModal,
#calendarCalendarModal,
#calendarAdminModal {
    --calendar-surface-bg: var(--hph-surface-bg, var(--bs-card-bg, var(--bs-body-bg, #fff)));
    --calendar-surface-text: var(--hph-surface-text, var(--bs-card-color, var(--bs-body-color, #212529)));
    --calendar-border: var(--hph-border, var(--bs-border-color, #dee2e6));
    --calendar-muted-text: var(--hph-muted-text, var(--bs-secondary-color, #6c757d));
    --calendar-card-shadow: 0 0.75rem 2rem rgba(var(--hph-card-shadow-rgb, 0, 0, 0), 0.18);
    --calendar-table-header-bg: var(--hph-table-header-bg, var(--bs-table-header-bg, var(--bs-tertiary-bg, #f8f9fa)));
    --calendar-table-header-text: var(--hph-table-header-text, var(--bs-table-header-color, var(--bs-body-color, #212529)));
    --calendar-table-row-bg: var(--hph-table-row-bg, var(--bs-table-bg, var(--bs-body-bg, #fff)));
    --calendar-table-row-text: var(--hph-table-row-text, var(--bs-table-color, var(--bs-body-color, #212529)));
    --calendar-table-row-alt-bg: var(--hph-table-row-alt-bg, color-mix(in srgb, var(--bs-body-bg, #fff) 92%, var(--bs-secondary, #6c757d)));
    --calendar-table-border: var(--hph-table-border, var(--bs-table-border-color, var(--calendar-border)));
}

.calendar-shell .card,
.calendar-admin-shell .card,
.calendar-profile-shell .card,
#calendarSubscriptionModal .modal-content,
#calendarImportModal .modal-content,
#calendarEventModal .modal-content,
#calendarCalendarModal .modal-content,
#calendarAdminModal .modal-content {
    background-color: var(--calendar-surface-bg);
    color: var(--calendar-surface-text);
    border-color: var(--calendar-border);
    box-shadow: var(--calendar-card-shadow);
}

.calendar-page-header,
.calendar-toolbar,
.calendar-toolbar-group,
.calendar-actions {
    display: flex;
    gap: 0.75rem;
}

/*
 * HR: Akcije zaglavlja poravnate su uz vrh kao na ostalim modulskim stranicama.
 *     Alatne trake unutar kalendara ostaju okomito centrirane.
 * EN: Header actions align to the top like other module pages.
 *     Toolbars inside the calendar remain vertically centered.
 */
.calendar-page-header {
    align-items: flex-start;
}

.calendar-toolbar,
.calendar-toolbar-group,
.calendar-actions {
    align-items: center;
}

.calendar-page-header,
.calendar-toolbar {
    justify-content: space-between;
}

.calendar-actions,
.calendar-toolbar-group {
    flex-wrap: wrap;
}

.calendar-action-icon-button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    line-height: 1;
}

.calendar-action-icon {
    width: 1.35rem;
    height: 1.35rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.calendar-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 1.5rem;
    align-items: start;
}

.calendar-main,
.calendar-sidebar {
    min-width: 0;
}

.calendar-main.card,
.calendar-sidebar.card,
.calendar-admin-shell .card,
.calendar-profile-shell .card {
    box-shadow: var(--calendar-card-shadow);
}

.calendar-main .card-body {
    overflow: hidden;
}

.calendar-view-switch {
    display: inline-flex;
    gap: 0.125rem;
}

.calendar-shell.is-compact-calendar .calendar-view-switch {
    display: none;
}

.calendar-shell.is-compact-calendar .calendar-main {
    overflow-x: visible;
}

.calendar-period-title {
    min-width: 11rem;
}

.calendar-icon-button {
    min-width: 2.625rem;
    font-size: 1.35rem;
    line-height: 1;
}

.calendar-date-time-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7.5rem;
    gap: 0.5rem;
}

.calendar-view {
    margin-top: 0.85rem;
}

.calendar-shell .table > :not(caption) > * > *,
.calendar-admin-shell .table > :not(caption) > * > *,
.calendar-profile-shell .table > :not(caption) > * > *,
#calendarSubscriptionModal .table > :not(caption) > * > *,
#calendarImportModal .table > :not(caption) > * > *,
#calendarEventModal .table > :not(caption) > * > *,
#calendarCalendarModal .table > :not(caption) > * > *,
#calendarAdminModal .table > :not(caption) > * > * {
    background-color: var(--calendar-table-row-bg);
    color: var(--calendar-table-row-text);
    border-color: var(--calendar-table-border);
}

.calendar-shell .table thead th,
.calendar-admin-shell .table thead th,
.calendar-profile-shell .table thead th,
#calendarSubscriptionModal .table thead th,
#calendarImportModal .table thead th,
#calendarEventModal .table thead th,
#calendarCalendarModal .table thead th,
#calendarAdminModal .table thead th {
    background-color: var(--calendar-table-header-bg);
    color: var(--calendar-table-header-text);
    border-color: var(--calendar-table-border);
}

.calendar-admin-table th button {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 700;
    text-align: left;
}

.calendar-admin-table-card {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--calendar-table-border);
}

.calendar-admin-table-toolbar,
.calendar-admin-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.calendar-admin-filter-group {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) 6rem;
    gap: 0.5rem;
    min-width: min(100%, 28rem);
}

.calendar-admin-import-form {
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) 10rem minmax(12rem, 1fr) 8rem;
    gap: 0.75rem;
    align-items: end;
    margin-top: 1rem;
}

.calendar-admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.calendar-admin-row-actions {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.calendar-admin-import-panel {
    padding-top: 1rem;
    border-top: 1px solid var(--calendar-table-border);
}

.calendar-localized-file-control {
    display: flex;
    min-width: 0;
    align-items: stretch;
    margin: 0;
    cursor: pointer;
}

.calendar-localized-file-control > .btn {
    flex: 0 0 auto;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.calendar-localized-file-name {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    overflow: hidden;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--calendar-border);
    border-inline-start: 0;
    border-start-end-radius: var(--bs-border-radius, 0.375rem);
    border-end-end-radius: var(--bs-border-radius, 0.375rem);
    background-color: var(--calendar-surface-bg);
    color: var(--calendar-surface-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-shell .form-control,
.calendar-shell .form-select,
.calendar-admin-shell .form-control,
.calendar-admin-shell .form-select,
.calendar-profile-shell .form-control,
.calendar-profile-shell .form-select,
#calendarSubscriptionModal .form-control,
#calendarSubscriptionModal .form-select,
#calendarImportModal .form-control,
#calendarImportModal .form-select,
#calendarEventModal .form-control,
#calendarEventModal .form-select,
#calendarCalendarModal .form-control,
#calendarCalendarModal .form-select,
#calendarAdminModal .form-control,
#calendarAdminModal .form-select {
    background-color: var(--calendar-surface-bg);
    color: var(--calendar-surface-text);
    border-color: var(--calendar-border);
}

.calendar-shell .form-control:focus,
.calendar-shell .form-select:focus,
.calendar-admin-shell .form-control:focus,
.calendar-admin-shell .form-select:focus,
.calendar-profile-shell .form-control:focus,
.calendar-profile-shell .form-select:focus,
#calendarSubscriptionModal .form-control:focus,
#calendarSubscriptionModal .form-select:focus,
#calendarImportModal .form-control:focus,
#calendarImportModal .form-select:focus,
#calendarEventModal .form-control:focus,
#calendarEventModal .form-select:focus,
#calendarCalendarModal .form-control:focus,
#calendarCalendarModal .form-select:focus,
#calendarAdminModal .form-control:focus,
#calendarAdminModal .form-select:focus {
    border-color: var(--hph-primary, var(--bs-primary, #0d6efd));
    box-shadow: 0 0 0 0.2rem rgba(var(--hph-focus-ring-rgb, 13, 110, 253), 0.22);
}

.calendar-profile-card {
    min-width: 0;
}

.calendar-profile-create-panel {
    display: grid;
    grid-template-columns: minmax(14rem, .8fr) minmax(28rem, 1.6fr);
    gap: 1.25rem;
    padding: 1rem;
    border: 1px solid var(--calendar-border);
    border-radius: var(--bs-border-radius, 0.375rem);
    background: color-mix(in srgb, var(--hph-primary, var(--bs-primary, #0d6efd)) 7%, var(--calendar-surface-bg));
}

.calendar-profile-create-form {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(10rem, 1fr) auto auto;
    gap: .75rem;
    align-items: end;
}

.calendar-profile-calendar-list {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.calendar-profile-calendar {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--calendar-border);
    border-radius: var(--bs-border-radius, 0.375rem);
    background: var(--calendar-surface-bg);
}

.calendar-profile-calendar-details {
    border-top: 1px solid var(--calendar-border);
}

.calendar-profile-calendar-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 0 0;
    color: var(--calendar-surface-text);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.calendar-profile-calendar-details > summary::-webkit-details-marker {
    display: none;
}

.calendar-profile-calendar-details > summary::after {
    content: "+";
    flex: 0 0 auto;
    font-size: 1.35rem;
    font-weight: 400;
}

.calendar-profile-calendar-details[open] > summary::after {
    content: "−";
}

.calendar-profile-calendar-details-meta {
    margin-inline-start: auto;
    color: var(--calendar-muted-text);
    font-size: .875rem;
    font-weight: 400;
}

.calendar-profile-calendar-details-body {
    display: grid;
    gap: 1rem;
    padding-top: 1rem;
}

.calendar-profile-calendar-header,
.calendar-profile-calendar-title,
.calendar-profile-calendar-actions,
.calendar-profile-acl-heading,
.calendar-subscription-table-toolbar,
.calendar-subscription-pagination,
.calendar-subscription-name {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.calendar-profile-calendar-header,
.calendar-subscription-table-toolbar,
.calendar-subscription-pagination {
    justify-content: space-between;
}

.calendar-profile-calendar-actions,
.calendar-profile-acl-heading {
    flex-wrap: wrap;
}

.calendar-profile-acl-heading {
    justify-content: space-between;
    margin-bottom: .75rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid var(--calendar-border);
}

.calendar-profile-calendar-details-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 1rem;
    border-top: 1px solid var(--calendar-border);
}

.calendar-profile-calendar-title {
    min-width: 0;
}

.calendar-profile-calendar-title h3 {
    overflow-wrap: anywhere;
}

.calendar-profile-calendar-meta {
    color: var(--calendar-muted-text);
    font-size: 0.875rem;
}

.calendar-profile-acl-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.calendar-profile-acl-panel {
    min-width: 0;
}

.calendar-inline-import {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 18rem) minmax(10rem, 13rem) auto;
    gap: 0.75rem;
    align-items: end;
    padding: 0.85rem;
    border: 1px solid var(--calendar-border);
    border-radius: var(--bs-border-radius, 0.375rem);
}

.calendar-profile-import-new {
    padding-top: 1rem;
    border-top: 1px solid var(--calendar-border);
}

.calendar-subscription-list {
    display: grid;
    gap: 0.5rem;
}

.calendar-subscription-item {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.45rem 0;
}

.calendar-subscription-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-subscription-picker-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.calendar-subscription-picker {
    display: grid;
    gap: 0.5rem;
}

.calendar-subscription-table-card {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--calendar-table-border);
}

.calendar-subscription-filter-group {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) 5.5rem;
    gap: 0.5rem;
    min-width: min(100%, 25rem);
}

.calendar-subscription-table {
    margin-bottom: 0;
}

.calendar-subscription-name {
    min-width: 0;
}

.calendar-subscription-name .calendar-color-dot {
    flex: 0 0 auto;
}

.calendar-modal-acl-table {
    margin-bottom: 0;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border: 1px solid var(--calendar-table-border);
    border-radius: var(--bs-border-radius, 0.375rem);
    overflow: hidden;
}

.calendar-grid-header,
.calendar-day {
    border-right: 1px solid var(--calendar-table-border);
    border-bottom: 1px solid var(--calendar-table-border);
}

.calendar-grid-header:nth-child(7n),
.calendar-day:nth-child(7n) {
    border-right: 0;
}

.calendar-grid-header {
    padding: 0.4rem 0.5rem;
    background: var(--calendar-table-header-bg);
    color: var(--calendar-table-header-text);
    font-weight: 700;
}

.calendar-day {
    min-height: 8rem;
    padding: 0.35rem;
    background: var(--calendar-table-row-bg);
    color: var(--calendar-table-row-text);
}

.calendar-day.is-muted {
    color: var(--bs-secondary-color, #6c757d);
    background: var(--calendar-table-row-alt-bg);
}

.calendar-day.is-today {
    box-shadow: inset 0 0 0 2px var(--bs-primary, #0d6efd);
}

.calendar-day-number {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 700;
}

.calendar-day-events {
    display: grid;
    gap: 0.25rem;
}

.calendar-event-chip {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.08rem;
    width: 100%;
    min-height: 3.05rem;
    margin-bottom: 0;
    padding: 0.22rem 0.34rem;
    border: 0;
    border-radius: 0.25rem;
    color: #fff;
    font-size: 0.72rem;
    line-height: 1.1;
    text-align: left;
    overflow: hidden;
    white-space: normal;
}

.calendar-event-chip-placeholder {
    display: block;
    min-height: 3.05rem;
}

.calendar-event-chip-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    min-width: 0;
    font-size: 0.66rem;
    font-weight: 400;
    line-height: 1.1;
    overflow: visible;
}

.calendar-event-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.05em;
    width: 1.05em;
    height: 1.05em;
    line-height: 1;
    overflow: visible;
}

.calendar-bi {
    display: block;
    width: 1em;
    height: 1em;
    fill: currentColor;
    overflow: visible;
}

.calendar-event-chip-time {
    font-size: inherit;
    font-weight: 400;
    line-height: 1;
    opacity: 0.9;
}

.calendar-event-chip-title {
    display: -webkit-box;
    font-weight: 500;
    line-height: 1.13;
    overflow-wrap: anywhere;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
}

.calendar-event-type-picker .calendar-event-type-preview {
    width: 3rem;
    justify-content: center;
}

.calendar-event-type-picker .calendar-bi {
    width: 1rem;
    height: 1rem;
}

.calendar-recurring-instance-info {
    display: grid;
    gap: 0.35rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--calendar-border);
    border-left: 0.25rem solid var(--hph-primary, var(--bs-primary, #0d6efd));
    border-radius: var(--bs-border-radius, 0.375rem);
    background: color-mix(in srgb, var(--calendar-surface-bg) 88%, var(--hph-primary, var(--bs-primary, #0d6efd)));
    color: var(--calendar-surface-text);
}

.calendar-recurring-instance-info div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    justify-content: space-between;
}

.calendar-recurring-instance-info span,
.calendar-recurring-instance-info p {
    color: var(--calendar-muted-text);
}

.calendar-event-chip:focus {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
}

.calendar-time-view {
    --calendar-hour-height: 4rem;
    --calendar-scrollbar-gutter: 0px;
    border: 1px solid var(--calendar-table-border);
    border-radius: var(--bs-border-radius, 0.375rem);
    overflow: hidden;
    background: var(--calendar-table-row-bg);
    color: var(--calendar-table-row-text);
}

.calendar-time-view.has-scrollbar-gutter {
    --calendar-scrollbar-gutter: 0.9rem;
}

.calendar-time-header,
.calendar-all-day-row {
    display: grid;
    grid-template-columns: 4.75rem minmax(0, 1fr) var(--calendar-scrollbar-gutter);
    border-bottom: 1px solid var(--calendar-table-border);
}

.calendar-time-view.has-scrollbar-gutter .calendar-time-scrollbar-gutter {
    border-left: 1px solid var(--calendar-table-border);
}

.calendar-time-header .calendar-time-scrollbar-gutter {
    background: var(--calendar-table-header-bg);
}

.calendar-all-day-row .calendar-time-scrollbar-gutter {
    background: var(--calendar-table-row-bg);
}

.calendar-time-header-days,
.calendar-all-day-cells,
.calendar-time-hour-days {
    display: grid;
    min-width: 0;
}

.calendar-time-header-day {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.35rem;
    min-width: 0;
    padding: 0.6rem 0.5rem;
    border-left: 1px solid var(--calendar-table-border);
    background: var(--calendar-table-header-bg);
    color: var(--calendar-table-header-text);
    text-align: center;
}

.calendar-time-header-day strong {
    color: var(--calendar-table-header-text);
}

.calendar-time-today-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 999px;
    background: var(--bs-danger, #dc3545);
    color: #fff;
}

.calendar-all-day-label,
.calendar-hour-label {
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.875rem;
    text-align: right;
}

.calendar-all-day-label {
    padding: 0.5rem 0.6rem;
}

.calendar-all-day-cell {
    min-height: 2.6rem;
    padding: 0.35rem;
    border-left: 1px solid var(--calendar-table-border);
}

.calendar-time-scroll {
    display: block;
    max-height: 48rem;
    overflow-y: auto;
    scrollbar-gutter: auto;
}

.calendar-time-view.has-scrollbar-gutter .calendar-time-scroll {
    scrollbar-gutter: stable;
}

.calendar-time-hour-row {
    display: grid;
    grid-template-columns: 4.75rem minmax(0, 1fr);
    min-height: var(--calendar-hour-height);
}

.calendar-hour-label {
    padding: 0.35rem 0.6rem 0 0;
    border-top: 1px solid var(--calendar-table-border);
}

.calendar-time-hour-days {
    align-items: stretch;
}

.calendar-time-slot {
    min-height: var(--calendar-hour-height);
    padding: 0.25rem;
    border-left: 1px solid var(--calendar-table-border);
    border-top: 1px solid var(--calendar-table-border);
    background: var(--calendar-table-row-bg);
}

.calendar-time-event {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.35rem;
    row-gap: 0.1rem;
    align-items: start;
    width: 100%;
    min-height: 1.75rem;
    margin-bottom: 0.25rem;
    padding: 0.35rem 0.45rem;
    border: 0;
    border-left: 0.25rem solid var(--bs-primary, #0d6efd);
    border-radius: 0.25rem;
    color: var(--bs-body-color, #212529);
    font-size: 0.875rem;
    line-height: 1.15;
    text-align: left;
    overflow: visible;
}

.calendar-time-event-icon {
    margin-top: 0.05rem;
    color: inherit;
}

.calendar-time-event-body {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

.calendar-time-event-title {
    font-weight: 700;
    overflow-wrap: anywhere;
    white-space: normal;
}

.calendar-time-event-time {
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.75rem;
    white-space: nowrap;
}

.calendar-time-event:focus {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
}

.calendar-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.calendar-list-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
    margin: 0;
}

.calendar-list-toggle {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 0.5rem;
    align-items: center;
    min-width: 0;
    margin: 0;
}

.calendar-list-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* HR: Kontrole kalendara ostaju dovoljno velike za odabir bez preciznog pokazivača.
   EN: Calendar controls remain large enough to select without a precise pointer. */
.calendar-list-toggle > input[type="checkbox"] {
    width: max(24px, 1.5rem);
    height: max(24px, 1.5rem);
    margin: 0;
}

.calendar-list-link {
    color: inherit;
    text-decoration: none;
}

.calendar-list-link:hover,
.calendar-list-link:focus {
    color: var(--hph-primary, var(--bs-primary, #0d6efd));
    text-decoration: underline;
}

.calendar-list-export {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    white-space: nowrap;
}

.calendar-list-export svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.calendar-list-actions {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
}

.calendar-public-links {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--calendar-border);
}

.calendar-public-link-list {
    display: grid;
    gap: 0.45rem;
}

.calendar-public-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--calendar-surface-text);
    text-decoration: none;
}

.calendar-public-link:hover,
.calendar-public-link:focus {
    color: var(--hph-primary, var(--bs-primary, #0d6efd));
}

.calendar-color-dot {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--calendar-table-border);
}

.calendar-color-input {
    width: max(24px, 1.5rem);
    height: max(24px, 1.5rem);
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: 0 0 0 1px var(--calendar-table-border);
    cursor: pointer;
}

.calendar-color-input::-webkit-color-swatch-wrapper {
    padding: 0;
}

.calendar-color-input::-webkit-color-swatch {
    border: 0;
    border-radius: 999px;
}

.calendar-color-input::-moz-color-swatch {
    border: 0;
    border-radius: 999px;
}

.calendar-list-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow-x: auto;
}

.calendar-timeline-row {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.75rem;
    min-width: 34rem;
    padding: 0.75rem;
    border: 1px solid var(--calendar-table-border);
    border-radius: var(--bs-border-radius, 0.375rem);
    background: var(--calendar-table-row-bg);
    color: var(--calendar-table-row-text);
}

.calendar-timeline-date {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    color: var(--bs-secondary-color, #6c757d);
    font-weight: 700;
}

.calendar-timeline-date span {
    white-space: nowrap;
}

.calendar-mobile-view {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.calendar-mobile-month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border-bottom: 1px solid var(--calendar-table-border);
    background: var(--calendar-table-row-bg);
}

.calendar-mobile-weekday {
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--calendar-table-border);
    color: var(--calendar-table-header-text);
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--calendar-table-header-bg);
    text-align: center;
    text-transform: lowercase;
}

.calendar-mobile-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35rem;
    min-height: 4.5rem;
    padding: 0.45rem 0.15rem;
    border: 0;
    border-bottom: 1px solid var(--calendar-table-border);
    background: transparent;
    color: var(--calendar-table-row-text);
}

.calendar-mobile-day.is-muted {
    /* HR: Susjedni mjesec ostaje čitljiv i bez teme; ne prigušujemo cijeli gumb.
       EN: Adjacent months remain readable without Theme; do not fade the whole button. */
    color: var(--bs-secondary-color, #6c757d);
    opacity: 1;
}

.calendar-mobile-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
}

.calendar-mobile-day.is-today:not(.is-selected) .calendar-mobile-day-number {
    box-shadow: inset 0 0 0 2px var(--bs-danger, #dc3545);
}

.calendar-mobile-day.is-selected .calendar-mobile-day-number {
    /* HR: Koristi par boja teme, a bez teme čitljiv Bootstrap par.
       EN: Uses the theme's color pair, or a readable Bootstrap pair without Theme. */
    background: var(--hph-danger, var(--bs-danger, #dc3545));
    color: var(--hph-danger-text, #fff);
}

.calendar-mobile-indicators {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.7rem;
    min-height: 0.45rem;
    overflow: hidden;
    border-radius: 999px;
}

.calendar-mobile-indicators span {
    flex: 1 1 0;
    height: 0.35rem;
    min-width: 0.35rem;
    border-radius: 999px;
    opacity: 0.65;
}

.calendar-mobile-agenda {
    display: flex;
    flex-direction: column;
    background: var(--bs-body-bg, #fff);
}

.calendar-mobile-agenda-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.8rem 0.25rem 0.8rem 0.75rem;
    border: 0;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    border-left: 0.25rem solid var(--calendar-event-color, var(--bs-primary, #0d6efd));
    background: transparent;
    color: var(--bs-body-color, #212529);
    text-align: left;
}

.calendar-mobile-agenda-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.calendar-mobile-agenda-main span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-mobile-agenda-title-row {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.calendar-mobile-agenda-title-row strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-mobile-agenda-icon {
    flex: 0 0 auto;
}

.calendar-mobile-agenda-main span,
.calendar-mobile-agenda-time span:last-child {
    color: var(--bs-secondary-color, #6c757d);
}

.calendar-mobile-agenda-title-row,
.calendar-mobile-agenda-title-row .calendar-bi,
.calendar-mobile-agenda-title-row strong {
    color: var(--bs-body-color, #212529);
}

.calendar-mobile-agenda-time {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 4.25rem;
    font-weight: 600;
    white-space: nowrap;
}

.calendar-mobile-empty {
    padding: 1rem 0;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    color: var(--bs-secondary-color, #6c757d);
    text-align: center;
}

.calendar-agenda-table-wrap {
    overflow-x: auto;
}

.calendar-agenda-table {
    min-width: 56rem;
    margin-bottom: 0;
}

.calendar-event-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--bs-link-color, #0d6efd);
    font: inherit;
    text-align: left;
    text-decoration: underline;
}

.calendar-event-link-strong {
    color: var(--bs-body-color, #212529);
    font-weight: 700;
    text-decoration: none;
}

.calendar-empty {
    padding: 2rem;
    border: 1px dashed var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, 0.375rem);
    color: var(--bs-secondary-color, #6c757d);
    text-align: center;
}

@media (max-width: 899.98px) {
    .calendar-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991.98px) {

    .calendar-page-header,
    .calendar-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .calendar-date-time-fields {
        grid-template-columns: 1fr;
    }

    .calendar-admin-table-toolbar,
    .calendar-admin-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .calendar-admin-filter-group {
        width: 100%;
    }

    .calendar-admin-import-form,
    .calendar-inline-import {
        grid-template-columns: 1fr;
    }

    .calendar-profile-acl-grid,
    .calendar-profile-create-panel,
    .calendar-profile-create-form,
    .calendar-subscription-picker-grid {
        grid-template-columns: 1fr;
    }

    .calendar-profile-calendar-header,
    .calendar-subscription-table-toolbar,
    .calendar-subscription-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .calendar-subscription-filter-group {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .calendar-shell {
        gap: 1rem;
    }

    .calendar-page-header,
    .calendar-toolbar {
        gap: 1rem;
    }

    .calendar-page-header h1 {
        font-size: 2rem;
    }

    .calendar-view-switch {
        display: none;
    }

    .calendar-period-title {
        min-width: 0;
        font-size: 1.5rem;
    }

    .calendar-main {
        overflow-x: visible;
    }

    .calendar-mobile-view {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .calendar-mobile-month-grid {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        border-bottom: 1px solid var(--bs-border-color, #dee2e6);
        background: var(--bs-body-bg, #fff);
    }

    .calendar-mobile-weekday {
        padding: 0.25rem 0;
        border-bottom: 1px solid var(--bs-border-color, #dee2e6);
        color: var(--bs-secondary-color, #6c757d);
        font-size: 0.75rem;
        font-weight: 700;
        text-align: center;
        text-transform: lowercase;
    }

    .calendar-mobile-day {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 0.35rem;
        min-height: 4.5rem;
        padding: 0.45rem 0.15rem;
        border: 0;
        border-bottom: 1px solid var(--bs-border-color, #dee2e6);
        background: transparent;
        color: var(--bs-body-color, #212529);
    }

    .calendar-mobile-day.is-muted {
        color: var(--bs-secondary-color, #6c757d);
        opacity: 1;
    }

    .calendar-mobile-day-number {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.2rem;
        height: 2.2rem;
        border-radius: 999px;
        font-size: 1.35rem;
        font-weight: 700;
        line-height: 1;
    }

    .calendar-mobile-day.is-today:not(.is-selected) .calendar-mobile-day-number {
        box-shadow: inset 0 0 0 2px var(--bs-danger, #dc3545);
    }

    .calendar-mobile-day.is-selected .calendar-mobile-day-number {
        background: var(--hph-danger, var(--bs-danger, #dc3545));
        color: var(--hph-danger-text, #fff);
    }

    .calendar-mobile-indicators {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.7rem;
        min-height: 0.45rem;
        overflow: hidden;
        border-radius: 999px;
    }

    .calendar-mobile-indicators span {
        flex: 1 1 0;
        height: 0.35rem;
        min-width: 0.35rem;
        border-radius: 999px;
        opacity: 0.65;
    }

    .calendar-mobile-agenda {
        display: flex;
        flex-direction: column;
        background: var(--bs-body-bg, #fff);
    }

    .calendar-mobile-agenda-item {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.75rem;
        align-items: center;
        padding: 0.8rem 0.25rem 0.8rem 0.75rem;
        border: 0;
        border-top: 1px solid var(--bs-border-color, #dee2e6);
        border-left: 0.25rem solid var(--calendar-event-color, var(--bs-primary, #0d6efd));
        background: transparent;
        color: var(--bs-body-color, #212529);
        text-align: left;
    }

    .calendar-mobile-agenda-main {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .calendar-mobile-agenda-main span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .calendar-mobile-agenda-title-row {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        min-width: 0;
    }

    .calendar-mobile-agenda-title-row strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .calendar-mobile-agenda-icon {
        flex: 0 0 auto;
    }

    .calendar-mobile-agenda-main span,
    .calendar-mobile-agenda-time span:last-child {
        color: var(--bs-secondary-color, #6c757d);
    }

    .calendar-mobile-agenda-title-row,
    .calendar-mobile-agenda-title-row .calendar-bi,
    .calendar-mobile-agenda-title-row strong {
        color: var(--bs-body-color, #212529);
    }

    .calendar-mobile-agenda-time {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        min-width: 4.25rem;
        font-weight: 600;
        white-space: nowrap;
    }

    .calendar-mobile-empty {
        padding: 1rem 0;
        border-top: 1px solid var(--bs-border-color, #dee2e6);
        color: var(--bs-secondary-color, #6c757d);
        text-align: center;
    }
}