#view-calendar { --calendar-blue:#1464a5; --calendar-ink:#19324a; --calendar-muted:#6e8192; --calendar-line:#dce8ee; }
.calendar-page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin:7px 3px 16px; }
.calendar-page-head p { color:var(--calendar-muted); font-size:13px; margin-top:5px; }
.calendar-settings { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:15px 18px; margin-bottom:14px; border-left:4px solid var(--calendar-blue); }
.calendar-settings[hidden] { display:none; }
.calendar-settings h3 { margin-top:2px; }
.calendar-settings p { color:var(--calendar-muted); font-size:12px; margin-top:4px; }
.calendar-settings form { display:flex; align-items:center; gap:9px; }
.calendar-settings select { min-width:150px; }
.panel-lite { background:rgba(255,255,255,.92); border:1px solid rgba(220,232,238,.95); box-shadow:0 14px 36px rgba(54,91,112,.07); border-radius:20px; }
.calendar-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:14px; }
.calendar-stat { display:flex; align-items:center; gap:12px; min-height:84px; padding:16px; background:rgba(255,255,255,.84); border:1px solid var(--calendar-line); border-radius:17px; }
.stat-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; color:var(--stat-color); background:color-mix(in srgb,var(--stat-color) 12%,white); font-weight:900; font-size:18px; }
.stat-copy strong { display:block; font-size:22px; line-height:1; }
.stat-copy span { display:block; color:var(--calendar-muted); font-size:11px; margin-top:6px; }
.calendar-toolbar { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:13px 15px; margin-bottom:14px; }
.month-navigation { display:flex; align-items:center; gap:9px; flex:0 0 auto; }
.month-navigation h3 { font-size:15px; min-width:138px; }
.toolbar-kicker { display:block; color:var(--calendar-muted); font-size:9px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; margin-bottom:2px; }
.icon-button,.text-button,.area-tab { border:1px solid var(--calendar-line); background:#fff; color:var(--calendar-ink); font:inherit; cursor:pointer; }
.icon-button { width:34px; height:34px; display:grid; place-items:center; border-radius:11px; font-size:22px; line-height:1; }
.text-button { padding:8px 10px; border-radius:10px; color:var(--calendar-blue); font-size:11px; font-weight:800; }
.area-tabs { display:flex; gap:6px; overflow:auto; padding:2px; }
.area-tab { white-space:nowrap; padding:8px 10px; border-radius:10px; color:var(--calendar-muted); font-size:10px; font-weight:750; }
.area-tab.active { color:#fff; border-color:var(--tab-color,var(--calendar-blue)); background:var(--tab-color,var(--calendar-blue)); }
.calendar-main-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:14px; }
.institutional-calendar { padding:16px; overflow:hidden; }
.calendar-legend { display:flex; justify-content:flex-end; gap:16px; margin-bottom:12px; color:var(--calendar-muted); font-size:10px; }
.calendar-legend span { display:flex; align-items:center; gap:6px; }
.legend-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.appointment-dot { background:var(--calendar-blue); }
.availability-dot { background:#fff; border:2px solid #8bb2c7; }
.weekday-row,.month-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.weekday-row { color:var(--calendar-muted); font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; text-align:center; padding-bottom:8px; }
.calendar-day { min-height:112px; padding:8px; border-top:1px solid var(--calendar-line); border-right:1px solid var(--calendar-line); background:#fff; }
.calendar-day:nth-child(7n) { border-right:0; }
.calendar-day.outside { background:#f8fbfc; color:#9cabb5; }
.calendar-day.today { background:#f2f9fc; }
.day-number { width:25px; height:25px; display:grid; place-items:center; border-radius:9px; font-size:11px; font-weight:800; }
.calendar-day.today .day-number { color:#fff; background:var(--calendar-blue); }
.day-events { display:grid; gap:4px; margin-top:5px; }
.calendar-event { display:block; width:100%; padding:5px 6px; border:0; border-left:3px solid var(--event-color); border-radius:7px; text-align:left; font:inherit; font-size:9px; line-height:1.25; cursor:pointer; color:var(--calendar-ink); background:color-mix(in srgb,var(--event-color) 11%,white); overflow:hidden; }
.calendar-event.availability { border:1px dashed color-mix(in srgb,var(--event-color) 55%,white); border-left-width:3px; background:#fff; }
.calendar-event strong,.calendar-event span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.calendar-event span { color:var(--calendar-muted); margin-top:2px; }
.more-events { color:var(--calendar-muted); font-size:9px; padding:2px 4px; }
.upcoming-panel { padding:18px; }
.upcoming-head { display:flex; align-items:center; justify-content:space-between; padding-bottom:13px; border-bottom:1px solid var(--calendar-line); }
.count-badge { min-width:28px; height:28px; padding:0 8px; display:grid; place-items:center; color:var(--calendar-blue); background:#edf7fb; border-radius:10px; font-size:11px; font-weight:900; }
.upcoming-list { display:grid; gap:9px; margin-top:13px; max-height:570px; overflow:auto; }
.upcoming-item { position:relative; padding:12px 11px 11px 14px; border:1px solid var(--calendar-line); border-radius:13px; background:#fbfdfe; }
.upcoming-item::before { content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:4px; background:var(--event-color); }
.upcoming-date { color:var(--event-color); font-size:9px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.upcoming-item h4 { margin:4px 0 3px; font-size:12px; }
.upcoming-item p { color:var(--calendar-muted); font-size:10px; line-height:1.45; }
.item-actions { display:flex; gap:6px; margin-top:8px; }
.mini-button { border:0; padding:5px 7px; border-radius:7px; font:inherit; font-size:9px; font-weight:800; color:var(--calendar-blue); background:#eaf5fa; cursor:pointer; }
.mini-button.danger { color:#a65353; background:#fff0ef; }
.empty-state { padding:28px 12px; text-align:center; color:var(--calendar-muted); font-size:11px; line-height:1.55; }
.empty-state strong { display:block; color:var(--calendar-ink); font-size:13px; margin-bottom:4px; }
.calendar-management-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:14px; }
.block-card { grid-column:1/-1; }
.block-dot { background:#8b6471; }
.calendar-event.block { background:#f4edf0; color:#704b58; border-left:3px solid #8b6471; }
.block-icon { color:#704b58; background:#f4edf0; }
.full-day-option { grid-column:1/-1; display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--calendar-line); border-radius:12px; background:#fbfdfe; }
.full-day-option input { width:auto; }
.management-card { padding:20px; scroll-margin-top:20px; }
.management-title { display:flex; gap:11px; align-items:flex-start; padding-bottom:15px; border-bottom:1px solid var(--calendar-line); margin-bottom:15px; }
.management-title p { color:var(--calendar-muted); font-size:10px; line-height:1.4; margin-top:3px; }
.management-icon { width:34px; height:34px; display:grid; place-items:center; flex:0 0 auto; color:#fff; background:#2b9b78; border-radius:11px; font-weight:900; }
.appointment-icon { background:var(--calendar-blue); }
.calendar-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.calendar-form .field.full,.calendar-form .form-footer { grid-column:1/-1; }
.calendar-form textarea { min-height:65px; }
.time-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.form-footer { display:flex; align-items:center; gap:10px; padding-top:2px; }
.form-message { color:#2f6656; font-size:10px; line-height:1.35; }
.form-message.error { color:#a65353; }
.calendar-event:focus,.area-tab:focus,.icon-button:focus,.text-button:focus,.mini-button:focus { outline:3px solid rgba(20,100,165,.18); outline-offset:1px; }
@media (max-width:1050px) { .calendar-main-grid { grid-template-columns:1fr; } .upcoming-list { max-height:none; grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:850px) { .calendar-page-head,.calendar-toolbar,.calendar-settings { align-items:flex-start; flex-direction:column; } .calendar-settings form { width:100%; flex-wrap:wrap; } .calendar-stats,.calendar-management-grid { grid-template-columns:1fr 1fr; } .area-tabs { width:100%; } .calendar-day { min-height:92px; padding:5px; } .calendar-event span { display:none; } }
@media (max-width:600px) { .calendar-stats,.calendar-management-grid,.calendar-form,.upcoming-list { grid-template-columns:1fr; } .calendar-main-grid { margin:0 -8px; } .institutional-calendar { padding:10px 5px; } .calendar-day { min-height:72px; } .calendar-event { font-size:8px; padding:4px; } .weekday-row { font-size:8px; } .calendar-page-head .primary { width:100%; } }