/* ---- API Error Banner ---- */
.jadwal-api-error {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #991b1b;
    border-radius: var(--radius-lg);
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-6);
}
.jadwal-api-error svg { flex-shrink: 0; margin-top: 2px; }
.jadwal-api-error-detail {
    font-size: var(--fs-xs);
    opacity: 0.85;
    margin-top: 2px;
    word-break: break-word;
}

/* ---- Jadwal Filter Bar ---- */
.jadwal-filter-bar {
    display: flex;
    gap: var(--sp-6);
    align-items: flex-end;
    flex-wrap: wrap;
    background: var(--clr-white);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    padding: var(--sp-5) var(--sp-6);
    margin-bottom: var(--sp-8);
    box-shadow: var(--shadow-card);
}
.jadwal-filter-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.jadwal-filter-label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
    color: var(--clr-text-muted);
}
.jadwal-type-btns { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.jadwal-type-btn {
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    font-family: var(--font-primary);
    border: 1.5px solid var(--clr-border);
    border-radius: var(--radius-full);
    background: var(--clr-white);
    color: var(--clr-text-secondary);
    cursor: pointer;
    transition: all var(--t-fast);
}
.jadwal-type-btn:hover { border-color: var(--clr-blue); color: var(--clr-blue); }
.jadwal-type-btn.active { background: var(--clr-blue); color: var(--clr-white); border-color: var(--clr-blue); }
.jadwal-select {
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-sm);
    font-family: var(--font-primary);
    color: var(--clr-text-primary);
    border: 1.5px solid var(--clr-border);
    border-radius: var(--radius-md);
    background: var(--clr-white);
    outline: none;
    cursor: pointer;
    min-width: 240px;
    transition: border-color var(--t-fast);
}
.jadwal-select:focus { border-color: var(--clr-blue); }

/* ---- Layout ---- */
.jadwal-layout {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: var(--sp-8);
    align-items: start;
}

/* ---- Calendar ---- */
.jadwal-calendar-wrap {
    background: var(--clr-white);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    padding: var(--sp-6);
    box-shadow: var(--shadow-card);
    position: sticky;
    top: calc(var(--nav-height) + var(--sp-4));
}
.jadwal-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-5);
}
.cal-nav-btn {
    width: 36px; height: 36px;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--clr-border);
    background: var(--clr-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--clr-text-secondary);
    transition: all var(--t-fast);
    flex-shrink: 0;
}
.cal-nav-btn:hover { border-color: var(--clr-blue); color: var(--clr-blue); background: var(--clr-blue-pale); }
.cal-month-label {
    font-size: var(--fs-md);
    font-weight: var(--fw-extra);
    color: var(--clr-text-primary);
    letter-spacing: var(--ls-normal);
}
.jadwal-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}
.cal-day-header {
    text-align: center;
    font-size: 10px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
    color: var(--clr-text-muted);
    padding: var(--sp-2) 0;
}
#calCells {
    display: contents;
}
.cal-cell {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 5px;
    border-radius: var(--radius-md);
    cursor: default;
    transition: background var(--t-fast);
    position: relative;
    gap: 2px;
}
.cal-cell.has-event { cursor: pointer; }
.cal-cell.has-event:hover { background: var(--clr-surface); }
.cal-cell.selected { background: var(--clr-blue-pale) !important; }
.cal-cell.today .cal-date { background: var(--clr-blue); color: var(--clr-white); border-radius: 50%; }
.cal-cell.other-month .cal-date { color: var(--clr-text-muted); opacity: 0.4; }
.cal-date {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    color: var(--clr-text-primary);
    width: 26px; height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cal-dots {
    display: flex;
    gap: 2px;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 30px;
}
.cal-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.prioritas-dot { background: var(--clr-blue); }
.inovasi-dot   { background: var(--clr-gold); }

.cal-legend {
    display: flex;
    gap: var(--sp-4);
    justify-content: center;
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--clr-border);
}
.cal-legend-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--clr-text-secondary);
    font-weight: var(--fw-medium);
}

/* ---- Events Panel ---- */
.jadwal-events-panel {
    background: var(--clr-white);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
.jadwal-events-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-5) var(--sp-6);
    border-bottom: 1px solid var(--clr-border);
    background: var(--clr-off-white);
}
.jadwal-events-title {
    font-size: var(--fs-md);
    font-weight: var(--fw-extra);
    color: var(--clr-text-primary);
    margin-bottom: 2px;
}
.jadwal-events-count {
    font-size: var(--fs-xs);
    color: var(--clr-text-muted);
}
.jadwal-reset-btn {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    font-family: var(--font-primary);
    color: var(--clr-text-muted);
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-full);
    padding: var(--sp-1) var(--sp-3);
    cursor: pointer;
    transition: all var(--t-fast);
    white-space: nowrap;
}
.jadwal-reset-btn:hover { color: var(--clr-blue); border-color: var(--clr-blue); }

.jadwal-events-list {
    max-height: 580px;
    overflow-y: auto;
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.jadwal-event-card {
    display: flex;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    transition: all var(--t-fast);
    align-items: flex-start;
}
.jadwal-event-card:hover { border-color: var(--clr-blue); background: var(--clr-blue-pale); transform: translateX(3px); }
.jadwal-event-card.type-inovasi:hover { border-color: var(--clr-gold); background: var(--clr-gold-pale); }
.jadwal-event-date-box {
    flex-shrink: 0;
    width: 52px;
    text-align: center;
    background: var(--clr-blue-pale);
    border-radius: var(--radius-md);
    padding: var(--sp-2) var(--sp-2);
}
.jadwal-event-card.type-inovasi .jadwal-event-date-box { background: var(--clr-gold-pale); }
.jadwal-date-day {
    font-size: var(--fs-xl);
    font-weight: var(--fw-black);
    color: var(--clr-blue);
    line-height: 1;
}
.jadwal-event-card.type-inovasi .jadwal-date-day { color: var(--clr-gold-dark); }
.jadwal-date-month {
    font-size: 10px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--clr-text-muted);
    margin-top: 2px;
}
.jadwal-event-body { flex: 1; min-width: 0; }
.jadwal-event-program {
    font-size: var(--fs-sm);
    font-weight: var(--fw-extra);
    color: var(--clr-text-primary);
    margin-bottom: var(--sp-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.jadwal-event-title {
    font-size: var(--fs-sm);
    color: var(--clr-text-secondary);
    margin-bottom: var(--sp-2);
    line-height: var(--lh-snug);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.jadwal-event-meta {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    align-items: center;
}
.jadwal-event-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: var(--radius-full);
}
.badge-prioritas { background: var(--clr-blue-pale); color: var(--clr-blue); }
.badge-inovasi   { background: var(--clr-gold-pale); color: var(--clr-gold-dark); }
.jadwal-event-loc,
.jadwal-event-range {
    font-size: var(--fs-xs);
    color: var(--clr-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.jadwal-event-loc svg,
.jadwal-event-range svg { width: 11px; height: 11px; flex-shrink: 0; }
.jadwal-event-range { font-weight: var(--fw-semi); color: var(--clr-text-secondary); }

/* Multi-day date box variants */
.jadwal-date-range    { font-size: var(--fs-md); letter-spacing: -0.02em; }
.jadwal-date-range-sm { font-size: var(--fs-sm); line-height: 1.1; }
.jadwal-empty {
    text-align: center;
    padding: var(--sp-16) var(--sp-6);
    color: var(--clr-text-muted);
}
.jadwal-empty svg { width: 48px; height: 48px; margin: 0 auto var(--sp-4); opacity: 0.25; }
.jadwal-empty p { font-size: var(--fs-sm); margin-top: var(--sp-2); }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .jadwal-layout { grid-template-columns: 1fr; }
    .jadwal-calendar-wrap { position: static; }
    .jadwal-events-list { max-height: 400px; }
}
@media (max-width: 600px) {
    .jadwal-filter-bar { flex-direction: column; align-items: stretch; gap: var(--sp-4); }
    .jadwal-select { min-width: unset; width: 100%; }
    .jadwal-type-btns { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
    .jadwal-type-btn { flex-shrink: 0; }
}