/* BandCal visual proposal. The calendar and payment state keep their existing semantics. */
:root, [data-theme="light"] {
    color-scheme: light;
    --ios-bg: #f4f6fa;
    --ios-card: #ffffff;
    --ios-text: #192538;
    --ios-text2: #66758a;
    --ios-input: #edf1f7;
    --ios-border: rgba(35, 55, 82, .10);
    --ios-blue: #3669bd;
    --ios-green: #287c59;
    --ios-red: #b84843;
    --ios-orange: #a36b1e;
    --accent-soft: #e7eefb;
    --positive-soft: #e6f3ec;
    --calendar-confirmed-bg: #287c59;
    --calendar-confirmed-text: #ffffff;
    --negative-soft: #fbeceb;
    --header-glass: rgba(244, 246, 250, .94);
    --nav-glass: rgba(255, 255, 255, .96);
    --switch-off: #d8e0ec;
    --sheet-shadow: 0 -12px 48px rgba(19, 35, 60, .12);
    --radius: 14px;
    --radius-lg: 22px;
    --fc-today-bg-color: #f7f0dc;
    --fc-neutral-bg-color: #eef2f7;
    --month-frame: #e2e6ec;
    --month-frame-border: #d4dae3;
}
[data-theme="dark"] {
    color-scheme: dark;
    --ios-bg: #101620;
    --ios-card: #192230;
    --ios-text: #edf2fa;
    --ios-text2: #a3b1c5;
    --ios-input: #222e40;
    --ios-border: rgba(202, 217, 239, .11);
    --ios-blue: #9cbdff;
    --ios-green: #78d4ac;
    --ios-red: #f6a097;
    --ios-orange: #ebc17f;
    --accent-soft: #273958;
    --positive-soft: #223e35;
    --calendar-confirmed-bg: #2f805e;
    --calendar-confirmed-text: #ffffff;
    --negative-soft: #463132;
    --header-glass: rgba(16, 22, 32, .94);
    --nav-glass: rgba(25, 34, 48, .96);
    --switch-off: #3a4860;
    --sheet-shadow: 0 -12px 48px rgba(0, 0, 0, .28);
    --fc-today-bg-color: #373325;
    --fc-neutral-bg-color: #151d29;
    --month-frame: #28303c;
    --month-frame-border: #374151;
}
body { line-height: 1.4; }
button, input, select, textarea { font: inherit; }
button, input, select, textarea, a { touch-action: manipulation; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--ios-blue); outline-offset: 3px;
}
.app-header, [data-theme="dark"] .app-header {
    background: var(--header-glass);
    padding: calc(14px + var(--safe-top)) 18px 14px;
    gap: 14px;
}
.app-brand { gap: 10px; min-width: 0; }
.brand-mark {
    width: 38px; height: 38px; flex: 0 0 38px;
    display: grid; place-items: center;
    border-radius: 12px; background: var(--accent-soft); color: var(--ios-blue);
}
.app-brand .brand-mark svg { width: 22px; height: 22px; }
.brand-title { display: block; font-size: 22px; font-weight: 720; letter-spacing: -.8px; line-height: 1.1; }
.brand-caption { display: block; margin-top: 4px; font-size: 9px; font-weight: 600; letter-spacing: 1.65px; color: var(--ios-text2); }
.header-actions { flex-shrink: 0; gap: 8px; }
.icon-btn {
    width: 44px; height: 44px; border-radius: 14px;
    background: var(--ios-card); border: 1px solid var(--ios-border);
}
.icon-btn svg { width: 20px; height: 20px; stroke-width: 1.8; }
.calendar-nav { margin: 16px auto 12px; padding: 9px 10px; width: calc(100% - 36px); max-width: 580px; gap: 10px; background: var(--month-frame); border: 1px solid var(--month-frame-border); border-radius: 17px; }
.calendar-title { font-size: 23px; font-weight: 700; letter-spacing: -.8px; white-space: nowrap; }
.nav-btn { min-width: 38px; height: 38px; padding: 0 12px; border-radius: 12px; font-size: 12px; font-weight: 650; }
.calendar-nav > .nav-btn { padding: 0 9px; }
.sync-summary { margin: 0 0 16px; color: var(--ios-text2); font-size: 14px; line-height: 1.5; }
.sync-connection-notice { margin: 0 0 16px; padding: 12px; border: 1px solid var(--ios-border); border-radius: 12px; background: var(--negative-soft); color: var(--ios-text); font-size: 13px; line-height: 1.5; }
.sync-mail-notice { padding: 12px 0 16px; border-bottom: 1px solid var(--ios-border); }
.sync-mail-notice strong { font-size: 14px; overflow-wrap: anywhere; }
.sync-mail-notice p, .sync-note { font-size: 13px; line-height: 1.5; color: var(--ios-text2); }
.sync-note { margin: 16px 0; }
#sync-btn[data-state="error"] { color: var(--ios-red); }
.search-container { padding: 0 18px; margin: 6px auto 16px; }
.search-input, [data-theme="dark"] .search-input {
    min-height: 46px; border: 1px solid var(--ios-border);
    background: var(--ios-card); border-radius: 14px; font-size: 14px;
}
#calendar-container {
    padding: 10px; width: calc(100% - 28px); border: 1px solid var(--ios-border);
    box-shadow: none; overflow: hidden;
}
.fc .fc-scrollgrid { border-radius: 12px; }
.fc-col-header-cell-cushion, [data-theme="dark"] .fc-col-header-cell-cushion { color: var(--ios-text2); font-size: 10px; font-weight: 650; }
.fc .fc-daygrid-day-number { font-size: 12px; font-weight: 600; line-height: 14px; padding: 3px 5px 1px; }
.fc-daygrid-day-frame { min-height: 0; padding-bottom: 16px !important; }
.fc-daygrid-day.selected { background: var(--accent-soft) !important; }
.fc .fc-daygrid-event {
    border-radius: 4px !important; margin: 1px 2px !important; padding: 0 3px !important;
    font-size: 8px !important; font-weight: 500 !important; line-height: 11px !important;
}
.fc .fc-daygrid-event.event-confirmed { background: var(--calendar-confirmed-bg) !important; color: var(--calendar-confirmed-text) !important; border: none !important; }
.fc .fc-daygrid-event.event-pending { background: var(--negative-soft) !important; color: var(--ios-red) !important; border: none !important; }
.fc .fc-daygrid-event .fc-event-main { color: inherit; }
.weather-cell { top: auto; left: 4px; right: 4px; bottom: 3px; transform: none; height: 12px; box-shadow: none; background: transparent; border: none; font-weight: 500; font-size: 8px; line-height: 12px; padding: 0; justify-content: center; }
.weather-cell svg { width: 11px; height: 11px; }
.fc .fc-daygrid-event .fc-event-title { font: inherit; padding: 0; }
.fc .fc-daygrid-day-events { position: absolute !important; left: 0; right: 0; min-height: 0 !important; margin-top: 2px; margin-bottom: 0 !important; }
.fc .fc-daygrid-more-link { display: block; font-size: 8px; line-height: 11px; font-weight: 550; padding: 0 4px; margin-top: 1px; color: var(--ios-blue); }
.fc .fc-popover { background: var(--ios-card); color: var(--ios-text); border: 1px solid var(--ios-border); border-radius: 12px; overflow: hidden; }
.fc .fc-popover-header { background: var(--ios-input); color: var(--ios-text); padding: 8px 10px; }
.fc .fc-popover-close { color: var(--ios-text2); }
.calendar-tight .fc-daygrid-day-frame { padding-bottom: 0 !important; }
.calendar-tight .fc-daygrid-day-number { font-size: 11px; line-height: 14px; padding: 2px 5px 1px; }
.calendar-tight .fc-daygrid-event { padding: 0 3px !important; font-size: 7.5px !important; line-height: 10px !important; }
.calendar-tight .fc-event-title { padding-top: 0; padding-bottom: 0; }
.calendar-tight .weather-cell { top: 4px; left: 4px; right: auto; bottom: auto; height: 10px; transform: none; padding: 0; }
.calendar-tight .weather-cell span { display: none; }
.calendar-tight .weather-cell svg { width: 9.5px; height: 9.5px; }
.agenda-section { padding: 0 18px; margin-bottom: 24px; }
.agenda-header-row { gap: 12px; }
.agenda-title { font-size: 18px; font-weight: 700; letter-spacing: -.4px; }
.agenda-date { font-size: 11px; font-weight: 600; background: var(--accent-soft); padding: 5px 9px; border-radius: 8px; }
.agenda-card { border: 1px solid var(--ios-border); box-shadow: none; padding: 12px; }
.agenda-empty { background: var(--positive-soft); font-size: 13px; font-weight: 550; padding: 14px 10px; }
.fab { position: static; width: 48px; height: 48px; justify-self: center; align-self: center; border-radius: 16px; font-size: 30px; font-weight: 400; color: #fff; background: #3669bd; box-shadow: 0 5px 18px rgba(36, 71, 126, .22); }
[data-theme="dark"] .fab { background: #9cbdff; color: #15243a; }
.bottom-nav, [data-theme="dark"] .bottom-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--nav-glass); height: calc(70px + var(--safe-bottom)); }
.bottom-nav-item { gap: 4px; font-size: 10px; font-weight: 550; min-height: 58px; }
.bottom-nav-item svg { width: 22px; height: 22px; stroke-width: 1.8; }
.bottom-nav-item.active svg { background: var(--accent-soft); border-radius: 9px; box-sizing: content-box; padding: 5px 13px; margin: -5px -13px; }
.modal { padding-top: calc(12px + var(--safe-top)); background: rgba(11, 21, 36, .42); }
.modal-content {
    border-radius: 26px 26px 0 0;
    max-height: calc(100vh - var(--safe-top) - 12px);
    max-height: calc(100dvh - var(--safe-top) - 12px);
    padding: 16px 20px calc(22px + var(--safe-bottom));
    overscroll-behavior: contain; box-shadow: var(--sheet-shadow);
}
.sheet-handle { width: 32px; height: 4px; margin-bottom: 8px; }
.sheet-header {
    position: sticky; top: -16px; z-index: 20; flex-shrink: 0;
    background: var(--ios-card); margin: 0 -20px 16px; padding: 12px 20px;
    gap: 12px; border-bottom: 1px solid var(--ios-border);
}
.sheet-title { font-size: 22px; font-weight: 700; letter-spacing: -.7px; line-height: 1.25; }
.sheet-close { width: 44px; height: 44px; min-width: 44px; flex-shrink: 0; font-size: 24px; color: var(--ios-text2); border-radius: 14px; }
.form-group input, .form-group select, .form-group textarea { border: 1px solid var(--ios-border); font-size: 16px; }
.form-row .form-group { min-width: 0; }
.chip { font-weight: 600; border-radius: 12px; }
.switch { flex: 0 0 46px; width: 46px; height: 28px; }
.slider { background: var(--switch-off); }
.slider:before { box-shadow: 0 1px 3px rgba(18, 27, 44, .16); }
input:checked + .slider:before { transform: translateX(18px); }
[data-theme="dark"] input:checked + .slider { background: #419b76; }
.btn-primary { font-weight: 650; background: #3669bd; color: #fff; border-radius: 14px; }
[data-theme="dark"] .btn-primary { background: #9cbdff; color: #15243a; }
.btn-primary.btn-secondary, [data-theme="dark"] .btn-primary.btn-secondary { background: var(--ios-input); color: var(--ios-text); }
.btn-danger { background: var(--negative-soft); }
.weather-box { background: var(--accent-soft); border-color: var(--ios-border); }
/* One scrolling area; the close control and totals never depend on the backdrop. */
#modal-compensi .modal-content {
    height: min(84vh, 760px); height: min(84dvh, 760px);
    display: flex; flex-direction: column; overflow: hidden;
    padding-bottom: var(--safe-bottom); min-height: 0;
}
#modal-compensi .sheet-header { position: relative; top: auto; margin-bottom: 0; }
.compensi-filters { display: grid; grid-template-columns: minmax(0, 1fr) 102px; gap: 10px; flex-shrink: 0; padding: 14px 0; }
.compensi-filters select {
    width: 100%; min-width: 0; height: 44px; padding: 0 12px;
    appearance: none; -webkit-appearance: none;
    border: 1px solid var(--ios-border); border-radius: 12px;
    background-color: var(--ios-input); color: var(--ios-text); font-size: 14px; font-weight: 600;
}
#compensi-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
#compensi-list { padding-right: 2px; }
.money-row { gap: 12px; padding: 15px 2px; border-radius: 0; }
.money-row.highlight { background: var(--accent-soft); border-radius: 12px; }
.money-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.money-detail { font-size: 12px; color: var(--ios-text2); margin-top: 4px; }
.money-past-section { background: var(--negative-soft); border-color: var(--ios-border); padding: 12px; }
#modal-compensi .summary-box { flex-shrink: 0; background: var(--ios-card); border-top: 1px solid var(--ios-border); border-radius: 0; padding: 16px 0 20px; margin: 0; }
.summary-line { font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.summary-line strong { font-weight: 650; font-variant-numeric: tabular-nums; }
.summary-box .summary-line:last-child { margin-bottom: 0; }
.summary-box .summary-line:last-child strong { font-size: 25px !important; font-weight: 700; letter-spacing: -.8px; }
@media (min-width: 769px) {
    .app-header { padding-left: max(24px, calc((100vw - 960px) / 2)); padding-right: max(24px, calc((100vw - 960px) / 2)); }
    .modal { padding: 24px; }
    .modal-content { border-radius: 26px; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); }
    #modal-compensi .modal-content { padding-bottom: 0; }
}
@media (max-width: 360px) {
    .app-header { padding-left: 12px; padding-right: 12px; }
    .brand-title { font-size: 20px; }
    .brand-mark { display: none; }
    .calendar-nav { width: calc(100% - 24px); padding-left: 8px; padding-right: 8px; gap: 6px; }
    .calendar-title { font-size: 20px; }
    .nav-btn { padding: 0 9px; }
    .modal-content { padding-left: 16px; padding-right: 16px; }
    .sheet-header { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
    .sheet-title { font-size: 20px; }
    .compensi-filters { grid-template-columns: minmax(0, 1fr) 90px; gap: 8px; }
    .agenda-date { font-size: 10px; }
    #modal-event .form-row { flex-direction: column; gap: 0; }
}
@media (max-width: 480px) {
    #modal-event .event-date-row { flex-direction: column; gap: 0; }
}
@media (max-width: 768px) and (max-height: 700px) {
    .app-header { padding-top: calc(10px + var(--safe-top)); padding-bottom: 10px; }
    .calendar-nav { margin-top: 10px; margin-bottom: 8px; padding-top: 8px; padding-bottom: 8px; }
    .calendar-title { font-size: 22px; }
    .search-input { min-height: 40px; }
    .search-container { margin-top: 2px; margin-bottom: 12px; }
}
@media (max-width: 360px) {
    .calendar-title { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

.fc .fc-popover .fc-daygrid-event { font-size: 12px !important; line-height: 18px !important; padding: 4px 6px !important; margin: 4px 2px !important; }

/* Payment status controls stay visible above the scrolling list. */
.compensi-views { display: grid; grid-template-columns: 1.3fr 1fr .8fr; gap: 3px; flex-shrink: 0; padding: 4px; margin-bottom: 12px; border: 1px solid var(--ios-border); border-radius: 13px; background: var(--ios-input); }
.compensi-views button { min-width: 0; min-height: 40px; padding: 5px 3px; border: 0; border-radius: 9px; background: transparent; color: var(--ios-text2); font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; }
.compensi-views button[aria-pressed="true"] { background: var(--ios-card); color: var(--ios-text); box-shadow: 0 1px 4px rgba(18, 27, 44, .12); }
.compensi-views button span { font-size: 10px; font-variant-numeric: tabular-nums; margin-left: 3px; opacity: .7; }
.compensi-views button:focus-visible { outline: 2px solid var(--ios-blue); outline-offset: 1px; }
.compensi-empty { padding: 24px 10px; text-align: center; color: var(--ios-text2); font-size: 14px; }
@media (max-width: 360px) { .compensi-views button { font-size: 11px; } .compensi-views button span { margin-left: 1px; } }

.compensi-feedback { flex-shrink: 0; margin: 0 0 8px; font-size: 11px; line-height: 16px; color: var(--ios-blue); }