.kal-root {
    --kal-timed-row-min-height: 56px;
    min-height: 0;
    height: 100%;
    background: #f5f7fb;
    color: #1f2937;
    overflow: hidden;
}

.kal-root.is-settings-open,
.kal-root:has(.kal-main.is-settings) {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding-bottom: 0;
}

.kal-loading,
.kal-state {
    display: flex;
    min-height: 280px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    text-align: center;
    color: #4b5563;
}

.kal-loading-title,
.kal-state-title {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
}

.kal-loading-text,
.kal-state-text {
    font-size: 14px;
}

.kal-app {
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr;
}

.kal-root.is-settings-open .kal-app,
.kal-root:has(.kal-main.is-settings) .kal-app {
    height: 100%;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
}

.kal-topbar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 12px;
    background: #ffffff;
    border-bottom: 1px solid #d7dde8;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    z-index: 5;
}

.kal-topbar .dx-widget {
    flex-shrink: 0;
}

.kal-select-fika {
    width: min(330px, 100%);
}

.kal-spacer {
    flex: 1 1 auto;
}

.kal-nav-group,
.kal-new-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.kal-nav-group {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.kal-nav-group .dx-button {
    min-width: 34px;
}

.kal-date-select {
    width: 150px;
}

.kal-date-select.is-week {
    width: 220px;
}

.kal-date-select.is-workWeek {
    width: 220px;
}

.kal-date-select.is-month {
    width: 160px;
}

.kal-settings-title {
    color: #172033;
    font-size: 16px;
    font-weight: 800;
}

.kal-main {
    min-height: 0;
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    position: relative;
}

.kal-main.is-resources-collapsed {
    grid-template-columns: 0 minmax(0, 1fr);
}

.kal-main.is-settings {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
}

.kal-main.is-settings .kal-resource-panel {
    display: none;
}

.kal-main.is-settings .kal-content {
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
}

.kal-main.is-settings .kal-view-host {
    overflow: auto;
    padding-bottom: 0;
}

.kal-resource-panel {
    min-width: 0;
    background: #ffffff;
    border-right: 1px solid #d7dde8;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    min-height: 0;
    box-sizing: border-box;
    padding-bottom: 34px;
    transition: width 160ms ease;
}

.kal-resource-head {
    padding: 8px 10px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.kal-resource-head-text {
    min-width: 0;
    flex: 1 1 auto;
}

.kal-resource-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: #475569;
    letter-spacing: 0;
}

.kal-resource-meta {
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
}

.kal-resource-list {
    min-height: 0;
    overflow: auto;
}

.kal-resource-list.dx-list,
.kal-resource-list .dx-scrollable,
.kal-resource-list .dx-scrollable-wrapper,
.kal-resource-list .dx-scrollable-container,
.kal-resource-list .dx-scrollable-content {
    min-height: 0;
}

.kal-resource-list.dx-list,
.kal-resource-list .dx-scrollable,
.kal-resource-list .dx-scrollable-wrapper,
.kal-resource-list .dx-scrollable-container {
    height: 100%;
}

.kal-resource-filter {
    padding: 8px 10px;
    border-bottom: 1px solid #e5e7eb;
    background: #fbfcff;
}

.kal-resource-actions {
    padding: 10px 12px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.kal-resource-actions > div:not(.kal-resource-action-label) {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
}

.kal-resource-actions .dx-button-text {
    font-size: 12px;
}

.kal-resource-action-label {
    flex: 0 0 100%;
    margin-top: 2px;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
}

.kal-resource-panel.is-collapsed {
    overflow: hidden;
    border-right: 0;
}

.kal-resource-panel.is-collapsed .kal-resource-head {
    display: none;
}

.kal-resource-panel.is-collapsed .kal-resource-head-text,
.kal-resource-panel.is-collapsed .kal-resource-filter,
.kal-resource-panel.is-collapsed .kal-resource-list,
.kal-resource-panel.is-collapsed .kal-resource-actions {
    display: none;
}

.kal-resource-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.kal-resource-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    flex: 0 0 auto;
    border: 1px solid rgba(15, 23, 42, 0.2);
}

.kal-resource-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kal-content {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
}

.kal-context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    background: #fbfcff;
    border-bottom: 1px solid #e5e7eb;
}

.kal-context-main {
    min-width: 0;
}

.kal-context.is-search {
    align-items: center;
}

.kal-context.is-search .kal-context-main {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(220px, 420px) minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.kal-context.is-search .kal-range-title {
    min-width: 0;
    font-size: 14px;
}

.kal-search-header {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.kal-search-header #kalSearchInput {
    flex: 1 1 auto;
    min-width: 0;
}

.kal-search-header #kalSearchButton {
    flex: 0 0 auto;
}

.kal-context.is-search .kal-range-subtitle {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kal-search-meta-bar {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.kal-search-meta-bar #kalSearchDateRange {
    flex: 0 0 auto;
}

.kal-search-meta-bar #kalSearchDateRange .dx-radiogroup-horizontal {
    display: flex;
    gap: 8px;
}

.kal-search-meta-bar #kalSearchDateRange .dx-radiobutton {
    margin-right: 0;
}

.kal-search-resource-context {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kal-search-date-range-popover {
    padding: 4px 2px;
}

.kal-search-date-range-popover .dx-radiogroup-horizontal {
    display: flex;
    gap: 14px;
    align-items: center;
}

.kal-search-date-range-popover .dx-radiobutton {
    margin-right: 0;
    white-space: nowrap;
}

.kal-range-title {
    font-size: 18px;
    font-weight: 700;
    color: #172033;
}

.kal-range-subtitle {
    font-size: 12px;
    color: #64748b;
}

.kal-view-host {
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow: auto;
    box-sizing: border-box;
    padding-bottom: 56px;
    scrollbar-gutter: stable;
    background: #f5f7fb;
}

.kal-search-view {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 8px 12px 34px;
    box-sizing: border-box;
}

.kal-search-results {
    display: grid;
    gap: 5px;
}

.kal-search-row {
    width: 100%;
    min-height: 54px;
    border: 1px solid #d7dde8;
    border-left: 4px solid #64748b;
    border-radius: 4px;
    background: #ffffff;
    color: #172033;
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 7px 10px;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.kal-search-row:hover,
.kal-search-row:focus {
    outline: none;
    border-color: #9bb8d9;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

.kal-search-row.is-unverified {
    background: #fffaf0;
}

.kal-search-row.is-cancelled {
    opacity: 0.72;
}

.kal-search-row.is-cancelled .kal-search-title {
    text-decoration: line-through;
}

.kal-search-row.is-all-day {
    background:
        repeating-linear-gradient(
            135deg,
            color-mix(in srgb, var(--kal-resource-color, #64748b) 20%, transparent) 0,
            color-mix(in srgb, var(--kal-resource-color, #64748b) 20%, transparent) 2px,
            transparent 2px,
            transparent 9px
        ),
        #f8fafc;
}

.kal-search-date {
    min-width: 0;
    display: grid;
    gap: 2px;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.1;
}

.kal-search-date strong {
    color: #172033;
    font-size: 13px;
}

.kal-search-body {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.kal-search-title {
    min-width: 0;
    color: #172033;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.kal-search-meta {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}

.kal-search-description {
    min-width: 0;
    color: #475569;
    font-size: 12px;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.kal-search-empty {
    min-height: 220px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 6px;
    text-align: center;
    color: #64748b;
}

.kal-search-empty-title {
    color: #172033;
    font-size: 18px;
    font-weight: 800;
}

.kal-search-empty-text {
    font-size: 13px;
}

.kal-search-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 0;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.kal-search-pager-buttons,
.kal-search-page-field,
.kal-search-page-size {
    display: flex;
    align-items: center;
    gap: 6px;
}

.kal-search-page-field,
.kal-search-page-size {
    white-space: nowrap;
}

.kal-search-page-btn {
    min-height: 30px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #ffffff;
    color: #172033;
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    padding: 4px 10px;
}

.kal-search-page-btn:hover,
.kal-search-page-btn:focus {
    border-color: #9bb8d9;
    background: #eef6ff;
    outline: none;
}

.kal-search-page-btn:disabled {
    cursor: default;
    opacity: 0.5;
    background: #f8fafc;
}

.kal-stack {
    width: 100%;
    min-width: 100%;
    display: grid;
    background: #d7dde8;
    gap: 1px;
}

.kal-stack-day {
    grid-template-columns: 190px minmax(520px, 1fr);
}

.kal-stack-week {
    grid-template-columns: 190px repeat(5, minmax(128px, 1fr)) repeat(2, minmax(90px, 0.7fr));
}

.kal-stack-workweek {
    grid-template-columns: 190px repeat(5, minmax(150px, 1fr));
}

.kal-stack-corner,
.kal-stack-head,
.kal-stack-resource,
.kal-stack-cell {
    background: #ffffff;
}

.kal-stack-head.is-working-day {
    background:
        repeating-linear-gradient(135deg, rgba(14, 165, 233, 0.08) 0, rgba(14, 165, 233, 0.08) 2px, transparent 2px, transparent 10px),
        #f6fbfd;
}

.kal-stack-corner,
.kal-stack-head {
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: 44px;
    padding: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #334155;
}

.kal-stack-corner {
    left: 0;
    z-index: 3;
}

.kal-stack-resource {
    position: sticky;
    left: 0;
    z-index: 1;
    min-height: 58px;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 12px;
    color: #334155;
}

.kal-stack-cell {
    min-height: 58px;
    padding: 5px;
    background: #f8fbff;
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
    align-items: flex-start;
    gap: 4px;
}

.kal-stack-cell.is-working-day {
    background:
        repeating-linear-gradient(135deg, rgba(14, 165, 233, 0.08) 0, rgba(14, 165, 233, 0.08) 2px, transparent 2px, transparent 10px),
        #f6fbfd;
}

.kal-create-cell {
    cursor: cell;
}

.kal-create-cell:hover {
    background: #eef6ff;
    box-shadow: inset 0 0 0 1px #bfdbfe;
}

.kal-stack-cell.is-today,
.kal-month-day.is-today {
    background: #eaf4fb;
}

.kal-stack-head.is-today.is-working-day,
.kal-stack-cell.is-today.is-working-day,
.kal-month-day.is-today.is-working-day {
    background:
        repeating-linear-gradient(135deg, rgba(14, 165, 233, 0.11) 0, rgba(14, 165, 233, 0.11) 2px, transparent 2px, transparent 10px),
        #eaf6fb;
}

.kal-appt {
    border-left: 4px solid #64748b;
    background: #ffffff;
    color: #111827;
    margin: 0 0 4px;
    padding: 4px 6px;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    cursor: pointer;
    font-size: 12px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.kal-appt:hover {
    box-shadow: 0 2px 7px rgba(15, 23, 42, 0.16);
}

.kal-appt-time {
    font-weight: 700;
    color: #475569;
}

.kal-appt-title {
    margin-top: 1px;
}

.kal-appt-au {
    color: #9a3412;
    font-weight: 800;
    white-space: nowrap;
}

.kal-appt-travel {
    background:
        repeating-linear-gradient(135deg, rgba(100, 116, 139, 0.24) 0, rgba(100, 116, 139, 0.24) 2px, transparent 2px, transparent 8px),
        #e5e7eb;
    color: #475569;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.15;
    min-width: 0;
    overflow: hidden;
}

.kal-appt-travel span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kal-appt-travel-compact {
    margin: -4px -6px 3px;
    padding: 2px 6px;
    border-left: 4px solid #9ca3af;
    border-radius: 4px 4px 0 0;
}

.kal-appt-timed {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    display: grid;
    grid-template-rows: minmax(0, var(--kal-travel-height, 0px)) minmax(0, 1fr);
    overflow: hidden;
    cursor: pointer;
    z-index: 3;
}

.kal-appt-timed .kal-appt-travel-timed {
    min-height: 0;
    padding: 2px 6px 2px 8px;
    border-left: 4px solid #9ca3af;
    border-radius: 4px 4px 0 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.kal-appt-travel-timed {
    box-sizing: border-box;
    min-height: 18px;
    padding: 2px 6px 2px 8px;
    border-left: 4px solid #9ca3af;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    z-index: 2;
}

.kal-appt-travel-timed:hover {
    box-shadow: 0 2px 7px rgba(15, 23, 42, 0.14);
}

.kal-appt-timed .kal-appt-main {
    height: 100%;
    min-height: 0;
    margin: 0;
    border-radius: 0 0 4px 4px;
    overflow: hidden;
}

.kal-appt-timed:hover .kal-appt-main {
    box-shadow: 0 2px 7px rgba(15, 23, 42, 0.16);
}

.kal-appt-timed.is-cancelled {
    opacity: 0.72;
}

.kal-stack .kal-appt {
    flex: 1 1 170px;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1px;
    padding: 4px 7px;
}

.kal-stack .kal-appt-travel-compact {
    margin: -4px -7px 3px;
}

.kal-stack .kal-appt-time {
    white-space: nowrap;
}

.kal-stack .kal-appt-title {
    min-width: 0;
    margin-top: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
}

.kal-appt.is-cancelled {
    opacity: 0.72;
    text-decoration: line-through;
}

.kal-appt.is-unverified {
    background: #fff7db;
}

.kal-appt.is-all-day {
    background:
        repeating-linear-gradient(
            135deg,
            color-mix(in srgb, var(--kal-resource-color, #64748b) 34%, transparent) 0,
            color-mix(in srgb, var(--kal-resource-color, #64748b) 34%, transparent) 2px,
            transparent 2px,
            transparent 9px
        ),
        #eef2f7;
}

.kal-appt.is-untimed .kal-appt-time,
.kal-mobile-card.is-untimed .kal-mobile-card-time {
    display: none;
}

.kal-appointment-context-menu {
    position: fixed;
    z-index: 4000;
    min-width: 210px;
    padding: 6px;
    border: 1px solid #d7dde8;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
}

.kal-appointment-context-menu button {
    width: 100%;
    min-height: 32px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #1f2937;
    cursor: pointer;
    display: block;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    padding: 7px 9px;
    text-align: left;
}

.kal-appointment-context-menu button:hover,
.kal-appointment-context-menu button:focus {
    background: #eef6ff;
    color: #075985;
    outline: none;
}

.kal-empty-cell {
    color: #94a3b8;
    font-size: 12px;
}

.kal-day-board {
    min-height: 100%;
    background: #f5f7fb;
    display: grid;
    grid-template-rows: auto auto auto;
    align-content: start;
}

.kal-day-board-resource {
    grid-row: 1;
    position: sticky;
    top: 0;
    z-index: 4;
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #ffffff;
    border-bottom: 1px solid #d7dde8;
}

.kal-day-board.is-working-day .kal-day-board-resource {
    background:
        repeating-linear-gradient(135deg, rgba(14, 165, 233, 0.07) 0, rgba(14, 165, 233, 0.07) 2px, transparent 2px, transparent 10px),
        #f8fbfd;
}

.kal-day-board-resource-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 800;
    color: #172033;
}

.kal-day-toprow {
    grid-row: 2;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    min-height: 40px;
    border-bottom: 1px solid #d7dde8;
    background: #ffffff;
}

.kal-day-toprow-label {
    border-right: 1px solid #d7dde8;
    background: #ffffff;
}

.kal-day-toprow-body {
    min-width: 0;
    padding: 6px 8px;
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
    align-items: flex-start;
    gap: 5px;
    background: #f8fbff;
}

.kal-day-slots {
    grid-row: 3;
    min-height: 0;
    position: relative;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    grid-auto-rows: minmax(var(--kal-timed-row-min-height), auto);
    align-items: stretch;
    align-content: start;
}

.kal-day-slot {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    min-height: var(--kal-timed-row-min-height);
    border-bottom: 1px solid #d7dde8;
    background: #ffffff;
}

.kal-day-slot.is-hour {
    border-top: 1px solid #cbd5e1;
}

.kal-day-slot.is-working-hours {
    background: #f6fbfd;
}

.kal-day-slot.is-partial-working-hours {
    background: #f8fbff;
}

.kal-day-slot-time {
    padding: 7px 8px 0 0;
    text-align: right;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    background: #ffffff;
    border-right: 1px solid #d7dde8;
    border-bottom: 1px solid #d7dde8;
    min-height: var(--kal-timed-row-min-height);
    box-sizing: border-box;
}

.kal-day-slot.is-working-hours .kal-day-slot-time,
.kal-day-slot-time.is-working-hours {
    background:
        repeating-linear-gradient(135deg, rgba(14, 165, 233, 0.08) 0, rgba(14, 165, 233, 0.08) 2px, transparent 2px, transparent 10px),
        #f6fbfd;
}

.kal-day-slot.is-partial-working-hours .kal-day-slot-time,
.kal-day-slot-time.is-partial-working-hours {
    background: #f8fbff;
}

.kal-day-slot-time.is-hour,
.kal-day-slot-body.is-hour {
    border-top: 1px solid #cbd5e1;
}

.kal-day-slot-body {
    --kal-cell-bg: #f8fbff;
    --kal-work-bg: #f6fbfd;
    --kal-work-stripe: rgba(14, 165, 233, 0.08);
    position: relative;
    min-width: 0;
    min-height: var(--kal-timed-row-min-height);
    padding: 6px 8px;
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
    align-items: flex-start;
    gap: 5px;
    background: var(--kal-cell-bg);
    border-bottom: 1px solid #d7dde8;
    box-sizing: border-box;
    cursor: cell;
}

.kal-day-slot.is-working-hours .kal-day-slot-body::before,
.kal-day-slot.is-partial-working-hours .kal-day-slot-body::before,
.kal-day-slot-body.is-working-hours::before,
.kal-day-slot-body.is-partial-working-hours::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(135deg, var(--kal-work-stripe) 0, var(--kal-work-stripe) 2px, transparent 2px, transparent 10px),
        var(--kal-work-bg);
}

.kal-day-slot.is-partial-working-hours .kal-day-slot-body::before,
.kal-day-slot-body.is-partial-working-hours::before {
    top: var(--kal-work-start);
    bottom: calc(100% - var(--kal-work-end));
}

.kal-day-slot-body:hover {
    background: #eef6ff;
    box-shadow: inset 0 0 0 1px #bfdbfe;
}

.kal-day-slot.is-today .kal-day-slot-body,
.kal-day-slot-body.is-today {
    --kal-cell-bg: #f4f9fd;
    --kal-work-bg: #eaf6fb;
    --kal-work-stripe: rgba(14, 165, 233, 0.11);
    background: var(--kal-cell-bg);
}

.kal-day-slot.is-working-hours .kal-day-slot-body,
.kal-day-slot-body.is-working-hours {
    --kal-cell-bg: #f6fbfd;
    background: var(--kal-cell-bg);
}

.kal-day-slot.is-today.is-working-hours .kal-day-slot-body,
.kal-day-slot-body.is-today.is-working-hours {
    --kal-cell-bg: #eaf6fb;
}

.kal-day-slot.is-partial-working-hours .kal-day-slot-body,
.kal-day-slot-body.is-partial-working-hours {
    background: linear-gradient(
        to bottom,
        var(--kal-cell-bg) 0,
        var(--kal-cell-bg) var(--kal-work-start),
        var(--kal-work-bg) var(--kal-work-start),
        var(--kal-work-bg) var(--kal-work-end),
        var(--kal-cell-bg) var(--kal-work-end),
        var(--kal-cell-bg) 100%
    );
}

.kal-day-slot.is-now-slot .kal-day-slot-body,
.kal-day-slot-body.is-now-slot {
    background: var(--kal-cell-bg);
}

.kal-now-line {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--now-offset);
    z-index: 2;
    height: 2px;
    background: #ef4444;
    pointer-events: none;
}

.kal-now-line::before {
    content: "";
    position: absolute;
    left: -4px;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #ef4444;
}

.kal-day-empty {
    width: 1px;
    height: 1px;
}

.kal-day-board .kal-appt,
.kal-week-board .kal-appt {
    max-width: 100%;
    min-width: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 2px;
    padding: 4px 8px;
    z-index: 3;
}

.kal-day-board .kal-appt-timed,
.kal-week-board .kal-appt-timed {
    max-width: 100%;
    min-width: 0;
}

.kal-day-board .kal-appt {
    flex: 0 1 260px;
}

.kal-day-toprow-body .kal-appt {
    flex: 0 1 260px;
    align-self: flex-start;
}

.kal-week-board .kal-appt {
    flex: 1 1 86px;
    padding: 4px 6px;
}

.kal-week-grid > .kal-appt {
    box-sizing: border-box;
    min-height: 42px;
    overflow: hidden;
    align-content: flex-start;
    align-items: flex-start;
    grid-auto-rows: max-content;
}

.kal-week-grid > .kal-appt-timed {
    box-sizing: border-box;
    min-height: 42px;
}

.kal-week-grid > .kal-appt-travel-timed {
    box-sizing: border-box;
}

.kal-day-slots > .kal-appt {
    box-sizing: border-box;
    min-height: 42px;
    overflow: hidden;
    align-content: flex-start;
    align-items: flex-start;
    grid-auto-rows: max-content;
    flex: initial;
}

.kal-day-slots > .kal-appt-timed {
    box-sizing: border-box;
    min-height: 42px;
    flex: initial;
}

.kal-day-slots > .kal-appt-travel-timed {
    box-sizing: border-box;
    flex: initial;
}

.kal-day-board .kal-appt-time,
.kal-week-board .kal-appt-time {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.18;
}

.kal-day-board .kal-appt-title,
.kal-week-board .kal-appt-title {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    margin-top: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
}

.kal-week-board {
    min-height: 100%;
    min-width: 1040px;
    background: #f5f7fb;
    display: grid;
    grid-template-rows: auto auto;
    align-content: start;
}

.kal-week-resource {
    position: sticky;
    top: 0;
    z-index: 8;
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #ffffff;
    border-bottom: 1px solid #d7dde8;
}

.kal-week-resource-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 800;
    color: #172033;
}

.kal-week-grid {
    min-height: 0;
    display: grid;
    grid-template-columns: 62px repeat(5, minmax(128px, 1fr)) repeat(2, minmax(90px, 0.7fr));
    gap: 1px;
    background: #d7dde8;
    align-content: start;
}

.kal-week-board.is-workweek {
    min-width: 820px;
}

.kal-week-board.is-workweek .kal-week-grid {
    grid-template-columns: 62px repeat(5, minmax(150px, 1fr));
}

.kal-week-toprow-time,
.kal-week-toprow {
    min-height: 42px;
    background: #f8fbff;
}

.kal-week-toprow-time {
    position: sticky;
    left: 0;
    z-index: 5;
    background: #ffffff;
}

.kal-week-toprow {
    position: relative;
    z-index: 4;
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    align-content: flex-start;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
    padding: 5px;
}

.kal-week-toprow .kal-appt {
    flex: 1 1 120px;
    min-width: 0;
    max-width: 220px;
    align-self: flex-start;
}

.kal-week-corner,
.kal-week-head,
.kal-week-time,
.kal-week-toprow-time,
.kal-week-toprow,
.kal-week-cell {
    background: #ffffff;
}

.kal-week-corner,
.kal-week-head {
    position: sticky;
    top: 40px;
    z-index: 7;
    min-height: 46px;
    padding: 7px 8px;
    color: #475569;
    font-weight: 800;
}

.kal-week-corner {
    left: 0;
    z-index: 9;
    font-size: 12px;
}

.kal-week-head {
    display: grid;
    align-content: center;
    gap: 0;
}

.kal-week-head span {
    font-size: 11px;
    text-transform: uppercase;
}

.kal-week-head strong {
    font-size: 17px;
    line-height: 1.1;
}

.kal-week-head.is-today {
    color: #0284c7;
    background: #dff0f8;
}

.kal-week-time {
    position: sticky;
    left: 0;
    z-index: 2;
    padding: 6px 6px 0 0;
    text-align: right;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    min-height: var(--kal-timed-row-min-height);
    box-sizing: border-box;
}

.kal-week-cell {
    --kal-cell-bg: #f8fbff;
    --kal-work-bg: #f6fbfd;
    --kal-work-stripe: rgba(14, 165, 233, 0.08);
    position: relative;
    min-width: 0;
    min-height: var(--kal-timed-row-min-height);
    padding: 5px;
    background: var(--kal-cell-bg);
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
    align-items: flex-start;
    gap: 4px;
    overflow: hidden;
}

.kal-week-cell.is-working-hours::before,
.kal-week-cell.is-partial-working-hours::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(135deg, var(--kal-work-stripe) 0, var(--kal-work-stripe) 2px, transparent 2px, transparent 10px),
        var(--kal-work-bg);
}

.kal-week-cell.is-partial-working-hours::before {
    top: var(--kal-work-start);
    bottom: calc(100% - var(--kal-work-end));
}

.kal-week-cell.is-working-hours {
    --kal-cell-bg: #f6fbfd;
    background: var(--kal-cell-bg);
}

.kal-week-cell.is-today {
    --kal-cell-bg: #edf7fc;
    --kal-work-bg: #eaf6fb;
    --kal-work-stripe: rgba(14, 165, 233, 0.11);
    background: var(--kal-cell-bg);
}

.kal-week-cell.is-today.is-working-hours {
    --kal-cell-bg: #eaf6fb;
}

.kal-week-cell.is-partial-working-hours {
    background: linear-gradient(
        to bottom,
        var(--kal-cell-bg) 0,
        var(--kal-cell-bg) var(--kal-work-start),
        var(--kal-work-bg) var(--kal-work-start),
        var(--kal-work-bg) var(--kal-work-end),
        var(--kal-cell-bg) var(--kal-work-end),
        var(--kal-cell-bg) 100%
    );
}

.kal-week-cell:hover {
    background: #eef6ff;
    box-shadow: inset 0 0 0 1px #bfdbfe;
}

.kal-week-cell.is-now-slot {
    background: var(--kal-cell-bg);
}

.kal-week-empty {
    width: 1px;
    height: 1px;
}

.kal-month {
    min-width: 820px;
    min-height: 100%;
    display: grid;
    grid-template-rows: auto auto;
}

.kal-month-head,
.kal-month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(110px, 1fr));
}

.kal-month-head > div {
    background: #ffffff;
    border-right: 1px solid #e5e7eb;
    border-bottom: 1px solid #d7dde8;
    padding: 8px;
    font-weight: 700;
    font-size: 12px;
    color: #334155;
}

.kal-month-grid {
    min-height: 0;
    grid-auto-rows: minmax(150px, auto);
}

.kal-month-day {
    background: #ffffff;
    border-right: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    padding: 5px 6px 6px;
    overflow: hidden;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.kal-month-day.is-other {
    background: #f8fafc;
    color: #94a3b8;
}

.kal-month-day.is-working-day {
    background:
        repeating-linear-gradient(135deg, rgba(14, 165, 233, 0.08) 0, rgba(14, 165, 233, 0.08) 2px, transparent 2px, transparent 10px),
        #f6fbfd;
}

.kal-month-day.is-other.is-working-day {
    background:
        repeating-linear-gradient(135deg, rgba(14, 165, 233, 0.06) 0, rgba(14, 165, 233, 0.06) 2px, transparent 2px, transparent 10px),
        #f8fbfd;
}

.kal-month-day.is-today.is-working-day {
    background:
        repeating-linear-gradient(135deg, rgba(14, 165, 233, 0.11) 0, rgba(14, 165, 233, 0.11) 2px, transparent 2px, transparent 10px),
        #eaf6fb;
}

.kal-month-number {
    font-weight: 700;
    font-size: 12px;
    min-height: 17px;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.kal-month-count {
    flex: 0 0 auto;
    min-width: 18px;
    height: 16px;
    padding: 0 5px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
}

.kal-month-events {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
    padding-right: 2px;
}

.kal-month-events::-webkit-scrollbar {
    width: 6px;
}

.kal-month-events::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}

.kal-month .kal-appt {
    margin-bottom: 3px;
    padding: 3px 6px;
}

.kal-month .kal-appt-travel-compact {
    margin: -3px -6px 2px;
}

.kal-month .kal-appt-time {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kal-month .kal-appt-title {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.kal-month-more {
    color: #64748b;
    font-size: 12px;
    padding: 3px 2px;
}

.kal-mobile-agenda {
    min-height: 100%;
    padding: 10px 12px 84px;
    background: #f5f7fb;
}

.kal-mobile-agenda.is-working-day {
    background:
        repeating-linear-gradient(135deg, rgba(14, 165, 233, 0.06) 0, rgba(14, 165, 233, 0.06) 2px, transparent 2px, transparent 12px),
        #f5f7fb;
}

.kal-mobile-day-strip {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
    padding: 8px 0 10px;
    background: #f5f7fb;
    border-bottom: 1px solid #d7dde8;
    scrollbar-width: none;
    touch-action: pan-x;
}

.kal-mobile-day-strip::-webkit-scrollbar {
    display: none;
}

.kal-mobile-agenda.is-working-day .kal-mobile-day-strip {
    background:
        repeating-linear-gradient(135deg, rgba(14, 165, 233, 0.06) 0, rgba(14, 165, 233, 0.06) 2px, transparent 2px, transparent 12px),
        #f5f7fb;
}

.kal-mobile-day {
    flex: 0 0 46px;
    min-width: 46px;
    scroll-snap-align: center;
    border: 0;
    border-radius: 8px;
    padding: 6px 2px;
    background: transparent;
    color: #475569;
    display: grid;
    gap: 1px;
    justify-items: center;
    cursor: pointer;
    opacity: 0.62;
}

.kal-mobile-day.is-current-week,
.kal-mobile-day.is-selected {
    opacity: 1;
}

.kal-mobile-day span {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.kal-mobile-day strong {
    font-size: 16px;
    line-height: 1;
}

.kal-mobile-day.is-today {
    color: #0891b2;
}

.kal-mobile-day.is-selected {
    background: #0ea5e9;
    color: #ffffff;
}

.kal-mobile-agenda-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 14px 0 10px;
}

.kal-mobile-agenda-date {
    font-size: 18px;
    font-weight: 800;
    color: #172033;
}

.kal-mobile-agenda-meta {
    margin-top: 2px;
    color: #64748b;
    font-size: 13px;
}

.kal-mobile-create {
    border: 1px solid #d7dde8;
    border-radius: 8px;
    background: #ffffff;
    color: #0f172a;
    min-height: 36px;
    padding: 0 12px;
    font-weight: 800;
    cursor: pointer;
}

.kal-mobile-agenda-title .kal-mobile-create {
    background: #0ea5e9;
    border-color: #0ea5e9;
    color: #ffffff;
}

.kal-mobile-list {
    display: grid;
    gap: 10px;
}

.kal-mobile-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
}

.kal-mobile-time {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    padding-top: 12px;
}

.kal-mobile-card {
    width: 100%;
    border: 1px solid #d7dde8;
    border-left: 4px solid #64748b;
    border-radius: 8px;
    background: #ffffff;
    color: #172033;
    padding: 10px 12px;
    text-align: left;
    display: grid;
    gap: 5px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    cursor: pointer;
}

.kal-mobile-card-time {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.kal-mobile-card-title {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.kal-mobile-card.is-cancelled {
    opacity: 0.72;
    text-decoration: line-through;
}

.kal-mobile-card.is-all-day {
    background:
        repeating-linear-gradient(
            135deg,
            color-mix(in srgb, var(--kal-resource-color, #64748b) 30%, transparent) 0,
            color-mix(in srgb, var(--kal-resource-color, #64748b) 30%, transparent) 2px,
            transparent 2px,
            transparent 9px
        ),
        #eef2f7;
}

.kal-mobile-resource-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 2px;
}

.kal-mobile-resource-chip {
    min-width: 0;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 700;
}

.kal-mobile-au-chip {
    background: #fff7ed;
    color: #9a3412;
}

.kal-mobile-resource-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    flex: 0 0 auto;
}

.kal-mobile-empty {
    width: 100%;
    min-height: 126px;
    display: grid;
    gap: 6px;
    place-items: center;
    border-style: dashed;
    color: #64748b;
}

.kal-mobile-fab {
    display: none;
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 20;
    width: 54px;
    height: 54px;
    border: 0;
    border-radius: 999px;
    background: #0ea5e9;
    color: #ffffff;
    font-size: 30px;
    line-height: 1;
    box-shadow: 0 10px 22px rgba(14, 165, 233, 0.38);
    cursor: pointer;
}

.kal-mobile-overflow-menu {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.kal-mobile-menu-primary,
.kal-mobile-menu-action,
.kal-mobile-menu-choice {
    min-height: 40px;
    border: 1px solid #d7dde8;
    border-radius: 6px;
    background: #ffffff;
    color: #172033;
    font-weight: 800;
    cursor: pointer;
}

.kal-mobile-menu-primary {
    background: #0ea5e9;
    border-color: #0ea5e9;
    color: #ffffff;
}

.kal-mobile-menu-label {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: #64748b;
}

.kal-mobile-menu-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.kal-mobile-menu-choice.is-active {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #075985;
}

.kal-mobile-chip {
    min-width: 0;
    min-height: 34px;
    padding: 0 8px;
    border: 1px solid #d7dde8;
    border-radius: 6px;
    background: #ffffff;
    color: #172033;
    font-size: 12px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kal-mobile-day-section {
    border: 1px solid #d7dde8;
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
}

.kal-mobile-day-section.is-working-day {
    background:
        repeating-linear-gradient(135deg, rgba(14, 165, 233, 0.06) 0, rgba(14, 165, 233, 0.06) 2px, transparent 2px, transparent 12px),
        #f8fbfd;
}

.kal-mobile-day-section.is-selected {
    border-color: #93c5fd;
}

.kal-mobile-section-head {
    width: 100%;
    min-height: 48px;
    padding: 9px 12px;
    border: 0;
    border-bottom: 1px solid #e5e7eb;
    background: transparent;
    color: #172033;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
}

.kal-mobile-section-head span {
    min-width: 0;
    font-size: 15px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.kal-mobile-section-head strong,
.kal-mobile-section-empty {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.kal-mobile-section-empty {
    padding: 12px;
}

.kal-mobile-month-grid {
    position: sticky;
    top: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    padding: 8px 0 10px;
    background: #f5f7fb;
    border-bottom: 1px solid #d7dde8;
}

.kal-mobile-month-day {
    min-width: 0;
    min-height: 38px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #ffffff;
    color: #475569;
    display: grid;
    place-items: center;
    gap: 0;
    cursor: pointer;
}

.kal-mobile-month-day span {
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
}

.kal-mobile-month-day strong {
    min-width: 18px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #dbeafe;
    color: #075985;
    font-size: 10px;
    line-height: 16px;
}

.kal-mobile-month-day.is-other {
    opacity: 0.45;
}

.kal-mobile-month-day.is-working-day {
    background:
        repeating-linear-gradient(135deg, rgba(14, 165, 233, 0.08) 0, rgba(14, 165, 233, 0.08) 2px, transparent 2px, transparent 10px),
        #f6fbfd;
}

.kal-mobile-month-day.is-today {
    color: #0284c7;
}

.kal-mobile-month-day.is-selected {
    background: #0ea5e9;
    color: #ffffff;
}

.kal-mobile-month-day.is-selected strong {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

.kal-mobile-orientation {
    height: 100%;
    min-height: 260px;
    display: grid;
    place-items: center;
    padding: 20px;
    background: #f5f7fb;
}

.kal-mobile-orientation-card {
    max-width: 360px;
    padding: 18px;
    border: 1px solid #d7dde8;
    border-radius: 8px;
    background: #ffffff;
    text-align: center;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.kal-mobile-orientation-title {
    color: #172033;
    font-size: 18px;
    font-weight: 800;
}

.kal-mobile-orientation-text {
    margin-top: 6px;
    color: #64748b;
    font-size: 13px;
}

.kal-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 12px;
    font-weight: 700;
    background: #e2e8f0;
    color: #334155;
}

.kal-status-pill.kal-status-count {
    cursor: pointer;
    user-select: none;
}

.kal-status-pill.kal-status-count:focus-visible {
    outline: 2px solid #7aa7d9;
    outline-offset: 2px;
}

.kal-refresh-countdown-text {
    color: #64748b;
    font-weight: 600;
}

.kal-status-pill.is-cancelled {
    background: #fee2e2;
    color: #991b1b;
}

.kal-status-pill.is-unverified {
    background: #fef3c7;
    color: #92400e;
}

.kal-status-pill.is-deleted {
    background: #e5e7eb;
    color: #4b5563;
}

.kal-admin-panel {
    padding: 10px;
    border-top: 1px solid #e5e7eb;
    background: #f8fafc;
}

.kal-admin-panel-title {
    font-size: 12px;
    color: #475569;
    font-weight: 700;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.kal-editor-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.kal-editor-form {
    padding-top: 4px;
}

.kal-editor-popup-wrapper .dx-popup-content {
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
}

.kal-editor-audit-item {
    padding-bottom: 2px;
}

.kal-editor-audit {
    color: #64748b;
    font-size: 11px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kal-editor-audit strong {
    color: #334155;
    font-weight: 700;
}

.kal-editor-audit-separator {
    color: #94a3b8;
}

.kal-editor-form .dx-field-item-label-text {
    font-size: 12px;
    color: #5f6b7a;
}

.kal-editor-form .dx-field-item {
    padding: 0 8px 8px 0;
}

.kal-editor-form .dx-field-item-content {
    min-width: 0;
}

.kal-editor-form .dx-texteditor {
    background: #f8fafc;
    min-width: 0;
}

.kal-editor-description .dx-texteditor-input {
    line-height: 1.35;
    white-space: pre-wrap;
    overflow-y: auto;
}

.kal-editor-time-mode .dx-radiogroup-horizontal {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
}

.kal-editor-time-mode .dx-radiobutton {
    margin-right: 0;
}

.kal-editor-check-column {
    display: flex;
    align-items: flex-end;
}

.kal-editor-check-column .dx-field-item-content {
    padding-top: 22px;
}

.kal-editor-status-item,
.kal-editor-status-reason {
    align-self: start;
}

.kal-editor-status-reason,
.kal-editor-status-reason .dx-field-item-content {
    width: 100% !important;
    min-width: 0;
    flex: 1 1 100% !important;
}

.kal-editor-status-reason .dx-textarea {
    width: 100%;
    min-height: 56px;
}

.kal-editor-status-switch .dx-button {
    min-width: 92px;
}

.kal-editor-status-switch .dx-button.dx-state-selected,
.kal-editor-status-switch .dx-button.dx-state-focused.dx-state-selected {
    background: #e0f2fe;
    border-color: #7dd3fc;
    color: #075985;
}

.kal-editor-repeat-toggle .dx-field-item-content {
    padding-top: 22px;
}

.kal-admin {
    min-height: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 14px;
}

.kal-admin-tab {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
}

.kal-admin-section {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: #ffffff;
    border: 1px solid #d7dde8;
    border-radius: 6px;
}

.kal-admin-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.kal-admin-heading {
    min-width: min(100%, 260px);
}

.kal-admin-section-title {
    font-size: 15px;
    font-weight: 800;
    color: #172033;
}

.kal-admin-section-text {
    font-size: 12px;
    color: #64748b;
}

.kal-admin-grid {
    min-height: 360px;
    flex: 1 1 auto;
}

.kal-admin-grid-fika {
    min-height: 255px;
}

.kal-admin-grid-resource {
    min-height: 360px;
}

.kal-admin-toolbar,
.kal-admin-section-actions {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.kal-admin-section-actions .dx-button {
    height: 36px;
}

.kal-admin-select {
    display: grid;
    gap: 4px;
    min-width: min(340px, 70vw);
}

.kal-admin-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #475569;
}

.kal-admin-notice {
    font-size: 12px;
    color: #475569;
    background: #eef6ff;
    border: 1px solid #bfdbfe;
    border-radius: 4px;
    padding: 7px 9px;
}

.kal-admin-notice.is-warning {
    color: #92400e;
    background: #fffbeb;
    border-color: #fde68a;
}

.kal-color-swatch {
    width: 26px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid rgba(15, 23, 42, 0.22);
}

.kal-muted {
    color: #94a3b8;
    font-style: italic;
}

.kal-fiabmi-cell {
    line-height: 1.25;
}

.kal-fiabmi-name {
    color: #172033;
    font-weight: 700;
}

.kal-fiabmi-nr,
.kal-fiabmi-option-meta {
    color: #64748b;
    font-size: 12px;
}

.kal-fiabmi-option {
    padding: 4px 0;
    line-height: 1.25;
}

.kal-fiabmi-option-name {
    font-weight: 700;
    color: #172033;
}

.kal-au-option {
    padding: 6px 0;
    line-height: 1.25;
    max-width: 100%;
}

.kal-au-option-main {
    color: #172033;
    font-weight: 700;
    overflow-wrap: anywhere;
    white-space: normal;
}

.kal-au-option-meta {
    color: #64748b;
    font-size: 12px;
    margin-top: 2px;
    overflow-wrap: anywhere;
    white-space: normal;
}

.kal-au-lookup-popover:not(.kal-editor-lookup-fullscreen) .dx-overlay-content {
    max-height: 250px !important;
    transform: translate(0, 0) !important;
}

@media (max-width: 900px) {
    .kal-root {
        height: auto;
        min-height: calc(100dvh - 116px);
        overflow: visible;
    }

    .kal-root.is-mobile-agenda,
    .kal-root.is-desktop-canvas {
        height: calc(100dvh - 116px);
        min-height: calc(100dvh - 116px);
        overflow: hidden;
    }

    .kal-root.is-mobile-agenda .kal-app,
    .kal-root.is-desktop-canvas .kal-app {
        grid-template-rows: auto minmax(0, 1fr);
    }

    .kal-topbar {
        gap: 8px;
        align-items: stretch;
        padding: 8px;
    }

    #kalBtnSettings,
    #kalBtnResources {
        order: 1;
    }

    .kal-select-fika {
        order: 1;
        flex: 1 1 calc(100% - 92px);
        width: auto;
        min-width: 0;
    }

    #kalScopeSwitch {
        order: 2;
        flex: 1 1 100%;
        min-width: 0;
    }

    #kalViewSwitch {
        order: 3;
        flex: 1 1 100%;
        min-width: 0;
    }

    #kalScopeSwitch .dx-buttongroup-wrapper,
    #kalViewSwitch .dx-buttongroup-wrapper {
        display: flex;
        width: 100%;
    }

    #kalScopeSwitch .dx-button,
    #kalViewSwitch .dx-button {
        flex: 1 1 0;
        min-width: 0;
    }

    #kalScopeSwitch .dx-button-text,
    #kalViewSwitch .dx-button-text {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .kal-nav-group {
        order: 4;
        display: grid;
        grid-template-columns: 36px minmax(66px, 0.72fr) 36px minmax(116px, 1fr);
        flex: 1 1 100%;
        max-width: 100%;
        min-width: 0;
    }

    .kal-new-group {
        order: 5;
        flex: 1 1 100%;
        justify-content: flex-end;
    }

    .kal-new-group .dx-button {
        min-height: 38px;
        min-width: min(100%, 118px);
    }

    .kal-spacer {
        display: none;
    }

    .kal-date-select,
    .kal-date-select.is-week,
    .kal-date-select.is-workWeek,
    .kal-date-select.is-month {
        width: auto;
        min-width: 0;
    }

    .kal-date-select .dx-texteditor-input {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .kal-main {
        grid-template-columns: 1fr;
    }

    .kal-main.is-resources-collapsed {
        grid-template-columns: 1fr;
    }

    .kal-resource-panel {
        position: absolute;
        z-index: 10;
        width: min(90vw, 330px);
        height: 100%;
        transform: translateX(-105%);
        transition: transform 160ms ease;
        box-shadow: 6px 0 18px rgba(15, 23, 42, 0.18);
    }

    .kal-resource-panel.is-collapsed {
        transform: translateX(-105%);
    }

    .kal-resource-panel.is-open {
        transform: translateX(0);
    }

    .kal-context {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
        padding: 8px 10px;
    }

    .kal-context.is-search {
        align-items: stretch;
    }

    .kal-context.is-search .kal-context-main {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 5px;
    }

    .kal-context.is-search .kal-range-subtitle {
        white-space: normal;
    }

    .kal-search-meta-bar {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 4px 10px;
    }

    .kal-search-resource-context {
        flex: 1 1 180px;
        white-space: normal;
    }

    .kal-search-view {
        max-width: none;
        padding: 8px 10px 28px;
    }

    .kal-search-row {
        grid-template-columns: 70px minmax(0, 1fr);
        gap: 8px;
        padding: 7px 9px;
    }

    .kal-search-pager {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .kal-range-title {
        font-size: 16px;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    .kal-status-pill {
        min-height: 24px;
    }

    .kal-admin {
        gap: 10px;
        padding: 8px;
    }

    .kal-admin-section {
        padding: 10px;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }

    .kal-admin-section-head {
        align-items: stretch;
        flex-direction: column;
    }

    .kal-admin-section-actions {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .kal-admin-section-actions .dx-button {
        align-self: stretch;
        width: 100%;
    }

    .kal-admin-select {
        min-width: 0;
        width: 100%;
    }

    .kal-admin-grid {
        min-height: 380px;
    }

    .kal-admin-grid-fika {
        min-height: 320px;
    }

    .kal-admin-grid-resource {
        min-height: 440px;
    }

    .kal-stack {
        width: 100%;
        min-width: max-content;
    }

    .kal-stack-week {
        grid-template-columns: 142px repeat(5, minmax(122px, 1fr)) repeat(2, minmax(86px, 0.7fr));
    }

    .kal-stack-workweek {
        grid-template-columns: 142px repeat(5, minmax(132px, 1fr));
    }

    .kal-stack-day {
        grid-template-columns: 142px minmax(340px, 1fr);
    }

    .kal-view-host.is-mobile-agenda {
        overflow: auto;
        background: #f5f7fb;
    }

    .kal-view-host.is-desktop-canvas .kal-month,
    .kal-view-host.is-desktop-canvas .kal-week-board {
        min-width: 860px;
    }

    .kal-view-host.is-desktop-canvas {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
    }

}

@media (max-width: 600px) {
    .kal-topbar {
        gap: 6px;
    }

    .kal-topbar .dx-button {
        min-height: 36px;
    }

    .kal-select-fika {
        flex-basis: calc(100% - 88px);
    }

    #kalScopeSwitch .dx-button-text,
    #kalViewSwitch .dx-button-text {
        font-size: 12px;
    }

    .kal-mobile-agenda {
        padding: 8px 8px calc(74px + env(safe-area-inset-bottom));
    }

    .kal-mobile-day-strip {
        gap: 2px;
    }

    .kal-mobile-day {
        flex-basis: 42px;
        min-width: 42px;
    }

    .kal-mobile-day strong {
        font-size: 15px;
    }

    .kal-mobile-agenda-title {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

    .kal-mobile-agenda-date {
        font-size: 16px;
        line-height: 1.2;
    }

    .kal-mobile-agenda-title .kal-mobile-create {
        width: 100%;
        min-height: 40px;
    }

    .kal-mobile-row {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 6px;
    }

    .kal-mobile-card {
        padding: 9px 10px;
    }

    .kal-mobile-card-title {
        font-size: 14px;
    }

    .kal-resource-panel {
        width: min(92vw, 310px);
    }

    .kal-resource-actions {
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }

    .kal-day-slot {
        grid-template-columns: 54px minmax(0, 1fr);
    }

    .kal-day-slots {
        grid-template-columns: 54px minmax(0, 1fr);
    }

    .kal-day-toprow {
        grid-template-columns: 54px minmax(0, 1fr);
    }

    .kal-day-toprow-body {
        padding: 5px;
    }

    .kal-day-slot-time {
        font-size: 11px;
        padding-right: 6px;
    }

    .kal-day-board .kal-appt,
    .kal-day-toprow-body .kal-appt {
        flex-basis: 100%;
    }

    .kal-stack-resource,
    .kal-stack-corner {
        font-size: 11px;
    }

    .kal-stack-week {
        grid-template-columns: 126px repeat(5, minmax(116px, 1fr)) repeat(2, minmax(82px, 0.7fr));
    }

    .kal-stack-workweek {
        grid-template-columns: 126px repeat(5, minmax(126px, 1fr));
    }

    .kal-stack-day {
        grid-template-columns: 126px minmax(300px, 1fr);
    }

    .kal-view-host.is-desktop-canvas .kal-month,
    .kal-view-host.is-desktop-canvas .kal-week-board {
        min-width: 820px;
    }

    .kal-editor-form {
        max-height: calc(100dvh - 154px);
        overflow: auto;
        padding-right: 2px;
        -webkit-overflow-scrolling: touch;
    }

    .kal-editor-form .dx-field-item {
        padding: 0 0 10px 0;
    }

    .kal-editor-status-switch .dx-buttongroup-wrapper {
        display: flex;
        width: 100%;
    }

    .kal-editor-status-switch .dx-button {
        flex: 1 1 0;
        min-width: 0;
    }

    .kal-editor-status-switch .dx-button-text {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 11px;
    }

    .kal-editor-status-switch,
    .kal-editor-status-item,
    .kal-editor-status-item .dx-field-item-content {
        width: 100% !important;
        min-width: 0;
        flex: 1 1 100% !important;
    }

    .kal-editor-status-switch .dx-buttongroup,
    .kal-editor-status-switch .dx-buttongroup-wrapper {
        width: 100% !important;
    }

    .kal-editor-popup-wrapper .dx-overlay-content {
        width: 100dvw !important;
        height: 100dvh !important;
        max-width: 100dvw !important;
        max-height: 100dvh !important;
        border-radius: 0;
    }

    .kal-editor-popup-wrapper .dx-popup-title {
        background: #ffffff;
        border-bottom: 1px solid #dbe4ef;
    }

    .kal-editor-popup-wrapper .dx-popup-content {
        height: calc(100dvh - 106px) !important;
        max-height: calc(100dvh - 106px) !important;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        padding: 10px 12px;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    .kal-editor-popup-wrapper .dx-popup-bottom {
        background: #ffffff;
        border-top: 1px solid #dbe4ef;
        padding: 6px 10px calc(8px + env(safe-area-inset-bottom));
    }

    .kal-editor-popup-wrapper .dx-popup-bottom .dx-toolbar-items-container {
        height: auto;
    }

    .kal-editor-popup-wrapper .dx-popup-bottom .dx-toolbar-after {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: flex-end;
        width: 100%;
    }

    .kal-editor-popup-wrapper .dx-popup-bottom .dx-toolbar-item {
        padding: 0;
    }

    .kal-editor-popup-wrapper .dx-popup-bottom .dx-button {
        min-height: 36px;
    }
}

@media (max-width: 600px) {
    .kal-root.is-mobile-landscape-blocked .kal-mobile-fab {
        display: none !important;
    }

    .kal-editor-popup-wrapper .kal-editor-form {
        max-height: none;
        overflow: visible;
        padding-bottom: 10px;
    }

    .kal-editor-lookup-fullscreen .dx-overlay-content {
        width: 100dvw !important;
        height: 100dvh !important;
        max-width: 100dvw !important;
        max-height: 100dvh !important;
        border-radius: 0;
    }

    .kal-editor-lookup-fullscreen .dx-popup-content,
    .kal-editor-lookup-fullscreen .dx-lookup-popup-wrapper,
    .kal-editor-lookup-fullscreen .dx-list,
    .kal-editor-lookup-fullscreen .dx-scrollable,
    .kal-editor-lookup-fullscreen .dx-scrollable-container {
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    .kal-editor-resource-fullscreen .dx-overlay-content {
        width: 100dvw !important;
        height: 100dvh !important;
        max-width: 100dvw !important;
        max-height: 100dvh !important;
        border-radius: 0;
    }

    .kal-editor-resource-fullscreen .dx-popup-bottom {
        background: #ffffff;
        border-top: 1px solid #dbe4ef;
        padding: 6px 10px calc(8px + env(safe-area-inset-bottom));
    }

    .kal-editor-resource-fullscreen .dx-popup-content,
    .kal-editor-resource-fullscreen .dx-tagbox-popup-wrapper,
    .kal-editor-resource-fullscreen .dx-list,
    .kal-editor-resource-fullscreen .dx-scrollable,
    .kal-editor-resource-fullscreen .dx-scrollable-container {
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }
}

@media (max-width: 360px) {
    .kal-nav-group {
        grid-template-columns: 34px minmax(62px, 0.68fr) 34px minmax(104px, 1fr);
        gap: 4px;
        padding: 2px;
    }

    #kalScopeSwitch .dx-button-text,
    #kalViewSwitch .dx-button-text {
        font-size: 11px;
    }

    .kal-date-select .dx-texteditor-input {
        font-size: 12px;
    }

    .kal-mobile-day span {
        font-size: 9px;
    }
}

.kal-root.is-mobile-landscape-blocked .kal-mobile-fab {
    display: none !important;
}

@media (max-width: 900px) {
    .kal-root.is-mobile-layout {
        height: 100%;
        min-height: 100%;
        overflow: hidden;
    }

    .kal-root.is-mobile-layout .kal-app {
        grid-template-rows: auto minmax(0, 1fr);
    }

    .kal-root.is-mobile-layout .kal-topbar {
        display: grid;
        grid-template-columns: 36px minmax(56px, 1fr) minmax(62px, 78px) minmax(66px, 86px) 36px;
        gap: 6px;
        align-items: center;
        padding: 6px 8px;
        flex-wrap: nowrap;
    }

    .kal-root.is-mobile-layout #kalBtnResources,
    .kal-root.is-mobile-layout #kalFikaSelect,
    .kal-root.is-mobile-layout #kalMobileScopeChip,
    .kal-root.is-mobile-layout #kalMobileSearchChip,
    .kal-root.is-mobile-layout #kalDateSelect,
    .kal-root.is-mobile-layout #kalMobileOverflow {
        order: 0 !important;
        grid-row: 1;
    }

    .kal-root.is-mobile-layout #kalBtnResources {
        grid-column: 1;
    }

    .kal-root.is-mobile-layout #kalFikaSelect {
        grid-column: 2;
        order: 0;
        width: 100%;
        min-width: 0;
        flex: none;
    }

    .kal-root.is-mobile-layout #kalMobileScopeChip {
        grid-column: 3;
    }

    .kal-root.is-mobile-layout #kalDateSelect {
        grid-column: 4;
        width: 100%;
        min-width: 0;
    }

    .kal-root.is-mobile-layout #kalMobileSearchChip {
        grid-column: 4;
    }

    .kal-root.is-mobile-layout #kalMobileOverflow {
        grid-column: 5;
    }

    .kal-root.is-mobile-layout #kalMobileOverflowMenu {
        position: absolute;
        width: 0;
        height: 0;
        overflow: hidden;
        pointer-events: none;
    }

    .kal-root.is-mobile-layout .kal-mobile-icon .dx-button,
    .kal-root.is-mobile-layout .kal-mobile-icon.dx-button {
        width: 36px;
        min-width: 36px;
        min-height: 34px;
    }

    .kal-root.is-mobile-layout .kal-select-fika .dx-texteditor-input,
    .kal-root.is-mobile-layout .kal-date-select .dx-texteditor-input {
        min-width: 0;
        padding-right: 20px;
        padding-left: 8px;
        font-size: 12px;
        font-weight: 700;
        text-overflow: ellipsis;
    }

    .kal-root.is-mobile-layout .kal-select-fika .dx-texteditor,
    .kal-root.is-mobile-layout .kal-date-select .dx-texteditor {
        min-height: 34px;
        background: #ffffff;
    }

    .kal-root.is-mobile-layout .kal-spacer,
    .kal-root.is-mobile-layout .kal-new-group,
    .kal-root.is-mobile-layout #kalScopeSwitch,
    .kal-root.is-mobile-layout #kalViewSwitch,
    .kal-root.is-mobile-layout .kal-nav-group {
        display: none !important;
    }

    .kal-root.is-mobile-layout .kal-context {
        padding: 8px 10px;
        gap: 4px;
        background: #f8fafc;
    }

    .kal-root.is-mobile-layout .kal-context.is-search {
        align-items: stretch;
    }

    .kal-root.is-mobile-layout .kal-context.is-search .kal-context-main {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .kal-root.is-mobile-layout .kal-search-view {
        padding: 8px 10px calc(84px + env(safe-area-inset-bottom));
    }

    .kal-root.is-mobile-layout .kal-search-row {
        min-height: 70px;
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 8px;
        padding: 8px 9px;
    }

    .kal-root.is-mobile-layout .kal-search-date strong {
        font-size: 12px;
    }

    .kal-root.is-mobile-layout .kal-search-title {
        font-size: 14px;
    }

    .kal-root.is-mobile-layout .kal-search-pager {
        align-items: stretch;
        justify-content: stretch;
    }

    .kal-root.is-mobile-layout .kal-search-pager-buttons,
    .kal-root.is-mobile-layout .kal-search-page-field,
    .kal-root.is-mobile-layout .kal-search-page-size {
        flex: 1 1 auto;
    }

    .kal-root.is-mobile-layout .kal-search-page-btn {
        flex: 1 1 0;
    }

    .kal-root.is-mobile-layout .kal-range-title {
        font-size: 16px;
    }

    .kal-root.is-mobile-layout .kal-range-subtitle {
        font-size: 12px;
    }

    .kal-root.is-mobile-layout .kal-status-pill {
        min-height: 20px;
        font-size: 11px;
    }

    .kal-root.is-mobile-layout .kal-view-host {
        padding-bottom: 0;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        background: #f5f7fb;
    }

    .kal-root.is-mobile-layout .kal-resource-panel {
        position: absolute;
        z-index: 30;
        width: min(88vw, 330px);
        height: 100%;
        padding-bottom: 0;
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        transform: translateX(-105%);
        transition: transform 160ms ease;
        box-shadow: 10px 0 30px rgba(15, 23, 42, 0.2);
    }

    .kal-root.is-mobile-layout .kal-resource-panel.is-open {
        transform: translateX(0);
    }

    .kal-root.is-mobile-layout .kal-resource-panel.is-collapsed {
        transform: translateX(-105%);
    }

    .kal-root.is-mobile-layout .kal-mobile-fab {
        display: block;
    }

    .kal-root.is-mobile-landscape-blocked .kal-mobile-fab {
        display: none;
    }

    .kal-root.is-mobile-layout .kal-mobile-agenda {
        min-height: 100%;
        padding: 0 10px calc(84px + env(safe-area-inset-bottom));
    }

    .kal-root.is-mobile-layout .kal-mobile-list {
        gap: 9px;
    }

    .kal-root.is-mobile-layout .kal-mobile-card {
        min-height: 78px;
    }

    .kal-root.is-mobile-layout .kal-mobile-week {
        gap: 10px;
    }
}

@media (max-width: 600px) {
    .kal-root.is-mobile-layout .kal-topbar {
        grid-template-columns: 34px minmax(50px, 1fr) minmax(56px, 72px) minmax(58px, 78px) 34px;
        gap: 5px;
        padding: 5px 6px;
    }

    .kal-root.is-mobile-layout .kal-mobile-chip {
        min-height: 32px;
        padding: 0 6px;
        font-size: 11px;
    }

    .kal-root.is-mobile-layout .kal-mobile-icon .dx-button,
    .kal-root.is-mobile-layout .kal-mobile-icon.dx-button {
        width: 34px;
        min-width: 34px;
        min-height: 32px;
    }

    .kal-root.is-mobile-layout .kal-context {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        padding: 7px 8px;
    }

    .kal-root.is-mobile-layout .kal-context.is-search {
        flex-direction: column;
        align-items: stretch;
    }

    .kal-root.is-mobile-layout .kal-context.is-search #kalStatusSummary {
        align-self: flex-end;
    }

    .kal-root.is-mobile-layout #kalStatusSummary {
        flex: 0 0 auto;
        text-align: right;
    }

    .kal-root.is-mobile-layout .kal-mobile-agenda-title {
        align-items: flex-start;
        flex-direction: row;
        padding: 12px 0 8px;
    }

    .kal-root.is-mobile-layout .kal-mobile-fab {
        right: 14px;
        bottom: calc(14px + env(safe-area-inset-bottom));
        width: 52px;
        height: 52px;
    }

    .kal-root.is-mobile-layout .kal-resource-panel {
        width: min(92vw, 318px);
    }
}

@media (max-width: 360px) {
    .kal-root.is-mobile-layout .kal-topbar {
        grid-template-columns: 32px minmax(44px, 1fr) minmax(52px, 64px) minmax(54px, 70px) 32px;
        gap: 4px;
    }

    .kal-root.is-mobile-layout .kal-select-fika .dx-texteditor-input,
    .kal-root.is-mobile-layout .kal-date-select .dx-texteditor-input,
    .kal-root.is-mobile-layout .kal-mobile-chip {
        font-size: 10px;
    }

    .kal-root.is-mobile-layout .kal-mobile-icon .dx-button,
    .kal-root.is-mobile-layout .kal-mobile-icon.dx-button {
        width: 32px;
        min-width: 32px;
    }
}