.dash2-shell {
    display: grid;
    gap: 0.95rem;
}

.dash2-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
    background: #ffffff;
    border: 1px solid #e2e8f2;
    border-radius: 16px;
}

.dash2-hero__eyebrow {
    margin: 0;
    color: #7f8ca7;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.dash2-hero h2 {
    margin: 0.1rem 0;
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    letter-spacing: -0.02em;
}

.dash2-hero p {
    margin: 0;
    color: #6d7a94;
    font-size: 0.92rem;
}

.dash2-hero__scope {
    display: inline-block;
    margin-top: 0.28rem;
    color: #5a6b88;
    font-size: 0.78rem;
    font-weight: 600;
}

.dash2-hero__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.dash2-church-filter {
    --dash2-church-filter-select-width: 210px;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.45rem;
    border: 1px solid #dde5f2;
    border-radius: 10px;
    background: #f9fbff;
}

.dash2-church-filter label {
    color: #66758f;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.dash2-church-filter select {
    width: var(--dash2-church-filter-select-width);
    min-width: var(--dash2-church-filter-select-width);
    max-width: var(--dash2-church-filter-select-width);
    border: 1px solid #d3dded;
    border-radius: 9px;
    background: #ffffff;
    color: #1f2d45;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.42rem 2rem 0.42rem 0.58rem;
}

.dash2-church-filter .ts-wrapper {
    width: var(--dash2-church-filter-select-width);
    min-width: var(--dash2-church-filter-select-width);
    max-width: var(--dash2-church-filter-select-width);
    flex-shrink: 0;
}

.dash2-church-filter .ts-wrapper.single .ts-control {
    min-height: 36px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.34rem 2.2rem 0.34rem 0.6rem;
    overflow: hidden;
}

.dash2-church-filter .ts-wrapper.single .ts-control > .item {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash2-hero__actions .icon-button {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid #dfe6f2;
    background: #fff;
}

.topbar__toggle ion-icon,
.notif-trigger ion-icon,
.icon-button ion-icon,
.icon-action ion-icon,
.sidebar ion-icon {
    display: block;
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
}

.sidebar ion-icon {
    width: 1.15rem;
    height: 1.15rem;
    color: #5f6f8d;
}

.sidebar__link.is-active ion-icon,
.sidebar__group-toggle.is-active ion-icon,
.sidebar__sublink.is-active ion-icon,
.sidebar__logout:hover ion-icon {
    color: #21693A;
}

.topbar__toggle ion-icon {
    width: 1.15rem;
    height: 1.15rem;
}

.dash2-progress-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.dash2-progress-card {
    padding: 0.85rem 0.95rem;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #e2e9f4;
}

.dash2-progress-card--interactive {
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.dash2-progress-card--interactive:hover,
.dash2-progress-card--interactive:focus-visible {
    transform: translateY(-2px);
    border-color: #cfd8ea;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    outline: none;
}

.dash2-progress-card header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
}

.dash2-progress-card header span {
    color: #7785a1;
    font-size: 0.82rem;
    font-weight: 600;
}

.dash2-progress-card header strong {
    color: #1f2d45;
    font-size: 0.95rem;
}

.dash2-progress-card header strong.dash2-status-badge {
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: 999px;
    padding: 0.24rem 0.5rem;
    line-height: 1.1;
}

.dash2-status-badge--ongoing {
    background: rgba(14, 159, 110, 0.14);
    color: #0b7e57;
    border: 1px solid rgba(14, 159, 110, 0.35);
}

.dash2-status-badge--upcoming {
    background: rgba(33, 105, 58, 0.12);
    color: #185830;
    border: 1px solid rgba(33, 105, 58, 0.35);
}

.dash2-status-badge--idle {
    background: rgba(117, 130, 154, 0.12);
    color: #5c6d89;
    border: 1px solid rgba(117, 130, 154, 0.35);
}

.dash2-progress-card__bar {
    margin: 0.55rem 0 0.45rem;
    width: 100%;
    height: 7px;
    border-radius: 999px;
    background: #edf2f8;
    overflow: hidden;
}

.dash2-progress-card__bar:not(.dash2-progress-card__bar--split) > span {
    display: block;
    width: var(--bar-width, 62%);
    height: 100%;
    background: var(--bar-color, #21693A);
    border-radius: 999px;
}

.dash2-progress-card__bar--split {
    display: flex;
    align-items: stretch;
    overflow: hidden;
}

.dash2-progress-card__bar--split > .dash2-progress-card__seg {
    display: block;
    flex: 0 0 var(--seg-width, 0%);
    height: 100%;
}

.dash2-progress-card__bar--split > .dash2-progress-card__seg--event {
    background: #0ea5a3;
}

.dash2-progress-card__bar--split > .dash2-progress-card__seg--service {
    background: #f4b63d;
}

.dash2-progress-card__split-meta {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #7f8ba3;
    font-size: 0.78rem;
}

.dash2-progress-card__split-item--event {
    color: #0e8f8d;
    font-weight: 700;
}

.dash2-progress-card__split-item--service {
    color: #b98212;
    font-weight: 700;
}

.dash2-progress-card__split-dot {
    color: #a2adc1;
}

/* Animated progress bar for schedule cards */
.dash2-progress-card__bar--animated {
    position: relative;
}

.dash2-progress-card__bar--animated > span {
    transition: width 0.5s ease-out;
    position: relative;
    overflow: hidden;
}

/* Disabled progress bar - grayed out when no schedule */
.dash2-progress-card__bar--disabled > span {
    opacity: 0.3;
    cursor: default;
}

/* Ongoing schedule - pulsing/moving animation */
.dash2-progress-card--schedule[data-schedule-status="Ongoing"] .dash2-progress-card__bar--animated > span {
    width: 100%;
    background: linear-gradient(
        90deg,
        #21693A 0%,
        #4b8c5a 35%,
        #21693A 70%,
        #b7dbc0 100%
    );
    background-size: 220% 100%;
    animation: scheduleGradientCarousel 1.8s linear infinite alternate;
    box-shadow: 0 0 10px rgba(33, 105, 58, 0.45);
}

.dash2-progress-card--schedule[data-schedule-status="Ongoing"] .dash2-progress-card__bar--animated > span::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        rgba(255, 255, 255, 0) 20%,
        rgba(255, 255, 255, 0.48) 48%,
        rgba(255, 255, 255, 0) 78%
    );
    transform: translateX(-125%);
    animation: scheduleShimmerSweep 2.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes scheduleGradientCarousel {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 100% 0%;
    }
}

@keyframes scheduleShimmerSweep {
    0% {
        transform: translateX(-125%);
    }
    100% {
        transform: translateX(125%);
    }
}

@media (max-width: 768px) {
    .dash2-progress-card--schedule[data-schedule-status="Ongoing"] .dash2-progress-card__bar--animated > span {
        animation-duration: 2.4s;
    }

    .dash2-progress-card--schedule[data-schedule-status="Ongoing"] .dash2-progress-card__bar--animated > span::after {
        animation-duration: 2.8s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dash2-progress-card--schedule[data-schedule-status="Ongoing"] .dash2-progress-card__bar--animated > span,
    .dash2-progress-card--schedule[data-schedule-status="Ongoing"] .dash2-progress-card__bar--animated > span::after {
        animation: none;
    }
}

/* Upcoming schedule - smooth progress fill */
.dash2-progress-card--schedule[data-schedule-status="Upcoming"] .dash2-progress-card__bar--animated > span {
    animation: none;
}

.dash2-progress-card p {
    margin: 0;
    color: #7f8ba3;
    font-size: 0.78rem;
}

.dash2-value-positive {
    color: #0b7e57 !important;
    font-weight: 700;
}

.dash2-value-negative {
    color: #b42318 !important;
    font-weight: 700;
}

.dash2-value-warning {
    color: #b45309 !important;
    font-weight: 700;
}

.dash2-quick-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
}

.dash2-mini-card {
    background: #ffffff;
    border: 1px solid #e2e9f4;
    border-radius: 14px;
    padding: 0.75rem 0.9rem;
    display: grid;
    gap: 0.25rem;
}

.dash2-mini-card--link {
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.dash2-mini-card--link:hover,
.dash2-mini-card--link:focus-visible {
    transform: translateY(-2px);
    border-color: #cfd8ea;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    outline: none;
}

.dash2-mini-card h3 {
    margin: 0;
    font-size: 1.05rem;
    color: #1f2d45;
}

.dash2-mini-card p {
    margin: 0;
    color: #5f6f8d;
    font-size: 0.82rem;
    font-weight: 600;
}

.dash2-mini-card small {
    color: #8a96ac;
    font-size: 0.75rem;
}

.dashboard-income-modal {
    width: min(980px, calc(100% - 1rem));
}

.dashboard-birthdays-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.dashboard-birthdays-modal__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.dashboard-birthdays-month {
    min-width: 180px;
    border: 1px solid #d7e1ef;
    border-radius: 10px;
    padding: 0.5rem 0.7rem;
    font-size: 0.82rem;
    color: #1f2d45;
    background: #ffffff;
}

.dashboard-birthdays-month:focus {
    outline: none;
    border-color: #21693A;
    box-shadow: 0 0 0 2px rgba(33, 105, 58, 0.12);
}

.dashboard-birthdays-search {
    min-width: 220px;
    border: 1px solid #d7e1ef;
    border-radius: 10px;
    padding: 0.5rem 0.7rem;
    font-size: 0.82rem;
    color: #1f2d45;
    background: #ffffff;
}

.dashboard-birthdays-search:focus {
    outline: none;
    border-color: #21693A;
    box-shadow: 0 0 0 2px rgba(33, 105, 58, 0.12);
}

.dashboard-birthday-indicator {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.2rem 0.48rem;
    background: rgba(236, 72, 153, 0.14);
    border: 1px solid rgba(236, 72, 153, 0.35);
    color: #be185d;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.1;
}

.dashboard-birthday-indicator--muted {
    background: transparent;
    border-color: #d6e0ee;
    color: #94a3b8;
}

.dashboard-insight-modal {
    width: min(980px, calc(100% - 1rem));
}

.dashboard-modal-status {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.2rem 0.52rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.1;
}

.dashboard-modal-status--ongoing {
    background: rgba(14, 159, 110, 0.14);
    color: #0b7e57;
    border: 1px solid rgba(14, 159, 110, 0.35);
}

.dashboard-modal-status--upcoming {
    background: rgba(33, 105, 58, 0.12);
    color: #185830;
    border: 1px solid rgba(33, 105, 58, 0.35);
}

.dashboard-modal-status--completed {
    background: rgba(117, 130, 154, 0.12);
    color: #5c6d89;
    border: 1px solid rgba(117, 130, 154, 0.35);
}

.dashboard-modal-link {
    color: #4454d9;
    font-weight: 700;
    text-decoration: none;
}

.dashboard-modal-link:hover {
    text-decoration: underline;
}

.dashboard-schedule-detail {
    margin-top: 1rem;
    border: 1px solid #e3eaf5;
    border-radius: 14px;
    background: #ffffff;
    padding: 0.9rem;
}

.dashboard-schedule-detail--empty {
    color: #5e6f8c;
    font-weight: 600;
}

.dashboard-schedule-detail--empty p {
    margin: 0;
}

.dashboard-schedule-detail__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.dashboard-schedule-detail__header h4 {
    margin: 0;
    font-size: 1.08rem;
    color: #1f2d45;
}

.dashboard-schedule-detail__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.dashboard-schedule-detail__field {
    border: 1px solid #e6edf7;
    border-radius: 12px;
    background: #fbfcff;
    padding: 0.72rem 0.78rem;
    display: grid;
    gap: 0.2rem;
}

.dashboard-schedule-detail__field--wide {
    grid-column: 1 / -1;
}

.dashboard-schedule-detail__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #70819d;
}

.dashboard-schedule-detail__value {
    color: #22324d;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
}

.dashboard-schedule-detail__actions {
    margin-top: 0.8rem;
    padding-top: 0.7rem;
    border-top: 1px dashed #dbe4f3;
}

.dashboard-income-modal__subtitle {
    margin: 0.35rem 0 0;
    color: #6b7892;
    font-size: 0.9rem;
}

.dashboard-income-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.dashboard-income-modal__header-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

.dashboard-income-modal__period-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.45rem;
    border: 1px solid #dde5f2;
    border-radius: 12px;
    background: #f9fbff;
    margin: 0;
    width: auto;
    flex-shrink: 0;
    position: relative;
}

.dashboard-income-modal__period-filter label {
    color: #66758f;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.dashboard-income-modal__period-filter::after {
    content: '';
    position: absolute;
    right: 0.82rem;
    top: 50%;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    pointer-events: none;
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"%3E%3Cpath fill="none" stroke="%2364758b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6"/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
}

.dashboard-income-modal__period-filter select {
    min-width: 132px;
    width: 132px;
    border: 1px solid #d3dded;
    border-radius: 10px;
    background-color: #ffffff;
    padding-right: 2.05rem;
    padding-left: 0.62rem;
    line-height: 1.2;
    color: #1f2d45;
    font-size: 0.82rem;
    font-weight: 600;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none;
    text-overflow: ellipsis;
}

.dashboard-income-modal__period-filter select:hover {
    border-color: #cbd5e1;
}

.dashboard-income-modal__period-filter select:focus {
    outline: none;
    border-color: #21693A;
    box-shadow: 0 0 0 3px rgba(33, 105, 58, 0.1);
}

.dashboard-income-modal__table-wrap {
    overflow-x: auto;
    border: 1px solid #e3eaf5;
    border-radius: 12px;
    background: #ffffff;
    margin-top: 1rem;
}

.dashboard-income-modal__detail {
    margin-top: 1rem;
}

.dashboard-income-modal__detail[hidden] {
    display: none;
}

.dashboard-income-modal__detail-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.dashboard-income-modal__detail-header h4 {
    margin: 0;
    color: #1f2d45;
    font-size: 1rem;
}

.dashboard-income-modal__detail-header span {
    color: #6c7b95;
    font-size: 0.82rem;
    font-weight: 600;
}

.dashboard-income-modal__table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

.dashboard-income-modal__table--detail {
    min-width: 680px;
}

.dashboard-income-modal__table th,
.dashboard-income-modal__table td {
    padding: 0.75rem 0.85rem;
    text-align: left;
    border-bottom: 1px solid #edf1f7;
    font-size: 0.9rem;
    color: #20304b;
}

.dashboard-income-modal__table thead th {
    font-size: 0.79rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #60718d;
    background: #f8faff;
}

.dashboard-income-modal__table tfoot th {
    background: #f8faff;
    font-weight: 700;
}

.dashboard-income-modal__table .is-positive {
    color: #0f766e;
    font-weight: 700;
}

.dashboard-income-modal__table .is-negative {
    color: #b42318;
    font-weight: 700;
}

.dashboard-income-modal__note {
    margin: 0.75rem 0 0;
    color: #62728d;
    font-size: 0.85rem;
    font-weight: 600;
}

.dash2-church-board {
    background: #ffffff;
    border: 1px solid #e2e9f4;
    border-radius: 15px;
    padding: 0.95rem;
}

.dash2-church-board__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.65rem;
}

.dash2-church-board__header h3 {
    margin: 0;
    font-size: 1rem;
}

.dash2-church-board__header span {
    font-size: 0.82rem;
    color: #73819d;
    font-weight: 600;
}

.dash2-church-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.dash2-church-card {
    border: 1px solid #e4ebf6;
    background: #fbfcff;
    border-radius: 12px;
    padding: 0.72rem;
}

.dash2-church-card h4 {
    margin: 0;
    font-size: 0.9rem;
    color: #1f2d45;
}

.dash2-church-card__meta {
    margin: 0.24rem 0 0.58rem;
    color: #7b89a4;
    font-size: 0.76rem;
    display: inline-flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.dash2-church-card__period {
    margin: 0 0 0.45rem;
    color: #8a96ad;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dash2-church-card__trends {
    display: flex;
    flex-wrap: wrap;
    gap: 0.34rem;
    margin-bottom: 0.5rem;
}

.dash2-trend-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid transparent;
    padding: 0.14rem 0.4rem;
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.dash2-trend-pill.is-up {
    background: #ecfdf3;
    border-color: #bbf7d0;
    color: #166534;
}

.dash2-trend-pill.is-down {
    background: #fff1f2;
    border-color: #fecdd3;
    color: #be123c;
}

.dash2-church-card__alerts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.52rem;
}

.dash2-alert-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.13rem 0.45rem;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    font-size: 0.68rem;
    font-weight: 700;
}

.dash2-church-card dl {
    margin: 0;
    display: grid;
    gap: 0.28rem;
}

.dash2-church-card dl div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.dash2-church-card dt {
    color: #6f7d98;
    font-size: 0.74rem;
}

.dash2-church-card dd {
    margin: 0;
    color: #273853;
    font-size: 0.78rem;
    font-weight: 700;
}

.dash2-church-card dd.is-positive {
    color: #0f766e;
}

.dash2-church-card dd.is-negative {
    color: #be123c;
}

.dash2-schedule-board {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 0.8rem;
}

.dash2-calendar-card,
.dash2-upcoming-card {
    background: #ffffff;
    border: 1px solid #e2e9f4;
    border-radius: 15px;
    padding: 0.95rem;
}

.dash2-calendar-card__header,
.dash2-upcoming-card__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.65rem;
}

.dash2-calendar-card__header h3,
.dash2-upcoming-card__header h3 {
    margin: 0;
    font-size: 1rem;
}

.dash2-calendar-card__header span {
    font-size: 0.82rem;
    color: #73819d;
    font-weight: 600;
}

.dash2-upcoming-card__header a {
    color: #21693A;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
}

.dash2-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.2rem;
}

.dash2-calendar-grid--days {
    gap: 0;
}

.dash2-calendar-grid span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    border-radius: 9px;
    color: #62718d;
    font-size: 0.75rem;
}

.dash2-calendar-grid--labels span {
    min-height: 22px;
    color: #8f9bb2;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dash2-calendar-grid--days .is-muted {
    background: transparent;
}

.dash2-calendar-grid--days .is-past {
    color: #b2bccf;
}

.dash2-calendar-grid--days .is-event-range {
    background: #eaf4ed;
    border-radius: 0;
}

.dash2-calendar-grid--days .is-event-range-start {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.dash2-calendar-grid--days .is-event-range-end {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.dash2-calendar-grid--days .is-today {
    background: #21693A;
    color: #ffffff;
    font-weight: 700;
    border-radius: 10px;
}

.dash2-calendar-grid--days .is-has-service {
    position: relative;
}

.dash2-calendar-grid--days .is-has-event {
    position: relative;
}

.dash2-calendar-grid--days .is-has-birthday {
    position: relative;
}

.dash2-calendar-grid--days .is-has-service::after {
    content: '';
    position: absolute;
    bottom: 5px;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: #21693A;
}

.dash2-calendar-grid--days .is-has-event::before {
    content: '';
    position: absolute;
    bottom: 5px;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: #0ea5a3;
}

.dash2-calendar-grid--days .is-has-both::before {
    transform: translateX(-4px);
}

.dash2-calendar-grid--days .is-has-both::after {
    transform: translateX(4px);
}

.dash2-birthday-indicator {
    position: absolute;
    top: 4px;
    right: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #fff2f7;
    color: #be185d;
    border: 1px solid #f5c2d6;
    box-sizing: border-box;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
}

.dash2-birthday-indicator ion-icon {
    font-size: 0.72rem;
}

.dash2-calendar-grid--days .is-today.is-has-service::after {
    background: #ffffff;
}

.dash2-calendar-grid--days .is-today.is-has-event::before {
    background: #c4fffd;
}

.dash2-calendar-grid--days .is-today.is-event-range,
.dash2-calendar-grid--days .is-today.is-event-range-start,
.dash2-calendar-grid--days .is-today.is-event-range-end {
    color: #ffffff;
}

.dash2-calendar-legend {
    margin-top: 0.55rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    color: #7f8ba3;
    font-size: 0.74rem;
    font-weight: 600;
}

.dash2-calendar-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.legend-dot--birthday {
    background: #be185d;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;
}

.legend-dot--service {
    background: #21693A;
}

.legend-dot--event {
    background: #0ea5a3;
}

.legend-dot--range {
    width: 14px;
    border-radius: 4px;
    background: #ece9ff;
    border: 1px solid #dad4ff;
}

.legend-dot--today {
    background: #21693A;
    box-shadow: 0 0 0 2px rgba(33, 105, 58, 0.2);
}

.dash2-upcoming-list {
    display: grid;
    gap: 0.55rem;
    min-height: 120px;
    place-items: center;
}

.dash2-upcoming-item {
    width: 100%;
    border: 1px solid #e4ebf6;
    background: #fbfcff;
    border-radius: 12px;
    padding: 0.65rem 0.72rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.dash2-upcoming-item h4 {
    margin: 0;
    font-size: 0.88rem;
    color: #1f2d45;
}

.dash2-upcoming-item p {
    margin: 0.14rem 0 0;
    font-size: 0.78rem;
    color: #73819d;
}

.dash2-upcoming-range {
    display: block;
    margin-top: 0.2rem;
    color: #8a96ac;
    font-size: 0.72rem;
}

.dash2-upcoming-duration {
    display: block;
    margin-top: 0.15rem;
    color: #7a879f;
    font-size: 0.71rem;
    font-weight: 600;
}

.dash2-upcoming-item div:last-child {
    text-align: right;
    display: grid;
    gap: 0.16rem;
}

.dash2-upcoming-item div:last-child span {
    font-size: 0.72rem;
    color: #8e9cb4;
}

.dash2-upcoming-item div:last-child strong {
    font-size: 0.75rem;
    color: #21693A;
}

.dash2-upcoming-item--empty {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    gap: 0.6rem;
    padding: 2rem 0.72rem;
    background: #fafbfe;
    border: 1px dashed #d9e2f0;
    width: 100%;
    min-height: 120px;
}

.dash2-upcoming-item--empty-icon {
    font-size: 2.2rem;
    color: #c5cfe0;
}

.dash2-upcoming-item--empty h4 {
    color: #7a8aaa;
    font-size: 0.92rem;
    margin: 0;
}

.dash2-upcoming-item--empty p {
    color: #9aabcc;
    font-size: 0.78rem;
    margin: 0;
}

@media (max-width: 1200px) {
    .dash2-progress-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dash2-quick-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dash2-church-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dash2-schedule-board {
        grid-template-columns: 1fr;
    }

    .dashboard-birthdays-search {
        min-width: 170px;
    }

    .dashboard-birthdays-month {
        min-width: 150px;
    }
}

@media (max-width: 760px) {
    .dash2-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .dash2-progress-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-birthdays-modal__header {
        flex-direction: column;
    }

    .dashboard-birthdays-modal__actions {
        width: 100%;
    }

    .dashboard-birthdays-search {
        min-width: 0;
        width: 100%;
    }

    .dashboard-birthdays-month {
        min-width: 0;
        width: 100%;
    }

    .dash2-church-filter {
        width: 100%;
        --dash2-church-filter-select-width: 100%;
    }

    .dash2-church-filter select {
        min-width: 0;
        width: 100%;
    }

    .dash2-church-filter .ts-wrapper {
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }

    .dash2-progress-grid,
    .dash2-quick-grid,
    .dash2-church-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-schedule-detail__grid {
        grid-template-columns: 1fr;
    }

    .dashboard-schedule-detail__field--wide {
        grid-column: auto;
    }

    .dashboard-income-modal__header {
        gap: 0.75rem;
    }

    .dashboard-income-modal__header-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .dashboard-income-modal__period-filter {
        width: auto;
        max-width: calc(100% - 48px);
    }

    .dashboard-income-modal__period-filter select {
        min-width: 126px;
        width: 126px;
    }
}

@media (max-width: 980px) {
    .dash2-quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.form-section--toolbar {
    display: flex;
    justify-content: flex-start;
}

.form-section--toolbar .button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    z-index: 110;
}

.modal-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(760px, calc(100% - 2rem));
    max-height: calc(100vh - 3rem);
    overflow: auto;
    background: #ffffff;
    border: 1px solid #dfe6f1;
    border-radius: 16px;
    box-shadow: 0 24px 56px rgba(15, 23, 42, 0.2);
    z-index: 111;
}

.modal-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid #e6ebf2;
}

.modal-dialog__header h2 {
    margin: 0;
    font-size: 1.08rem;
    letter-spacing: -0.01em;
}

.modal-dialog__close {
    width: 36px;
    height: 36px;
    border: 1px solid #d8e0eb;
    border-radius: 10px;
    background: #ffffff;
    color: #4c5d78;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.modal-dialog__body {
    padding: 1rem 1.1rem 1.15rem;
}

.field-group--modal-check {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
}

.field-group--modal-check input[type='checkbox'] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #21693A;
}

.field-group--modal-check span {
    margin: 0;
    color: #2f3e56;
    font-size: 0.92rem;
    font-weight: 600;
}

.modal-dialog__footer {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

body.is-modal-open {
    overflow: hidden;
}

@media (max-width: 640px) {
    .modal-dialog {
        width: calc(100% - 1rem);
        max-height: calc(100vh - 1.2rem);
    }

    .modal-dialog__header,
    .modal-dialog__body {
        padding-left: 0.8rem;
        padding-right: 0.8rem;
    }

    .modal-dialog__footer {
        flex-direction: column-reverse;
    }

    .modal-dialog__footer .button {
        width: 100%;
    }
}