@import url('/screens/user/account/child.css');
@import url('/components/user/account/calendar/index.css');

.calendar-page{padding-bottom:calc(82px + env(safe-area-inset-bottom))}
.calendar-page .child-container{width:min(1240px,100%)}
.calendar-page .child-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-bottom:14px}
.calendar-page .child-header a{justify-self:start;color:var(--via-accent);font-size:13px;font-weight:850}
.calendar-page .child-header h1{grid-column:2;margin:0;font-size:22px;font-weight:850}
.calendar-layout{display:grid;gap:14px}
.calendar-main.study-calendar-widget{border-radius:14px}
.calendar-main .study-calendar-head{padding:12px 14px 5px}
.calendar-main .calendar-current{font-size:14px}
.calendar-main .calendar-toggle{display:none}
.calendar-main .study-calendar-body{padding:5px 8px 11px}
.calendar-main .study-month-day{height:30px;font-size:12px}
.calendar-summary{padding:16px;background:linear-gradient(135deg,var(--via-panel-2),var(--via-panel));border:1px solid var(--via-border);border-radius:14px;box-shadow:var(--via-shadow)}
.calendar-summary h2{margin:0 0 11px;font-size:17px}
.calendar-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.calendar-summary-grid article{display:grid;gap:4px;min-width:0;padding:11px;border:1px solid var(--via-border);border-radius:10px;background:rgba(127,148,183,.06)}
.calendar-summary-grid span{color:var(--via-muted);font-size:10px;font-weight:850}
.calendar-summary-grid strong{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calendar-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:14px;color:var(--via-muted);font-size:11px}
.calendar-legend span{display:flex;align-items:center;gap:6px}.calendar-legend i{width:14px;height:14px;border-radius:4px}.calendar-legend .is-active{background:rgba(38,191,102,.55)}.calendar-legend .is-streak{background:rgba(255,213,79,.6)}.calendar-legend .is-missed{background:rgba(217,74,74,.55)}.calendar-legend .is-today{background:var(--via-accent)}
@media(min-width:900px){.calendar-page{padding:100px 30px 42px}.calendar-page .child-header{margin-bottom:20px}.calendar-page .child-header h1{font-size:32px}.calendar-layout{grid-template-columns:minmax(0,1fr) 350px;gap:20px;align-items:stretch}.calendar-summary{padding:20px}.calendar-main.study-calendar-widget{border-radius:18px;display:flex;flex-direction:column}.calendar-main .study-calendar-head{padding:17px 19px 8px}.calendar-main .calendar-current{font-size:18px}.calendar-main .study-calendar-body{padding:7px 16px 18px;flex:1;display:flex;flex-direction:column}.calendar-main .study-month{flex:1;grid-auto-rows:minmax(62px,1fr)}.calendar-main .study-month-day{height:auto;min-height:62px;font-size:17px}.calendar-main .study-month-day img{width:27px;height:27px}.calendar-summary-grid article{padding:9px 11px}.calendar-summary-grid strong{font-size:18px}}
@media(max-width:560px){.calendar-page{padding:79px 12px calc(78px + env(safe-area-inset-bottom))}.calendar-page .child-header{grid-template-columns:auto 1fr;margin-bottom:10px}.calendar-page .child-header a{font-size:12px}.calendar-page .child-header h1{grid-column:2;justify-self:end;font-size:18px}.calendar-main .study-month-day{height:29px}.calendar-summary{padding:13px}.calendar-summary-grid strong{font-size:15px}.calendar-legend{font-size:10px}}
.calendar-page [hidden]{display:none!important}
.calendar-main,.calendar-summary,.calendar-detail-card{min-width:0}
.calendar-main .study-calendar-body{animation:none}
.calendar-main .study-month-day.is-selected-day{border-color:var(--via-text);box-shadow:inset 0 0 0 1px var(--via-panel);z-index:1;border-radius:6px;opacity:1}
.calendar-page button{font-family:inherit;cursor:pointer}
.calendar-page button:focus-visible,.calendar-page a:focus-visible{outline:2px solid var(--via-accent);outline-offset:3px}
.calendar-selected-date{display:block;font-size:15px;font-weight:750;line-height:1.4;text-transform:capitalize}
.calendar-day-status{margin:5px 0 14px;color:var(--via-muted);font-size:12px}
.calendar-overall{margin-top:16px;padding-top:13px;border-top:1px solid var(--via-border)}
.calendar-overall h3{margin:0 0 9px;font-size:10px;color:var(--via-muted);letter-spacing:.07em}
.calendar-overall>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.calendar-overall article{display:grid;gap:5px;min-width:0}.calendar-overall span{font-size:10px;color:var(--via-muted)}.calendar-overall strong{font-size:12px;overflow-wrap:anywhere}
.calendar-summary{display:flex;flex-direction:column}.calendar-legend{margin-top:auto;padding-top:15px}
.calendar-day-details{margin-top:26px;display:grid;gap:16px}
.calendar-details-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.calendar-details-head h2{font-size:21px;margin:0 0 5px}.calendar-details-head p{margin:0;color:var(--via-muted);font-size:14px;text-transform:capitalize}
.calendar-details-head nav{display:flex;gap:6px;flex-shrink:0}.calendar-details-head button,.calendar-load-status button{min-height:36px;min-width:36px;border:1px solid var(--via-border);border-radius:8px;background:var(--via-panel-2);color:var(--via-text);font-size:18px}.calendar-details-head [data-day-today]{padding:0 12px;font-size:13px;font-weight:750}
.calendar-extra-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.calendar-extra-metrics article{display:grid;gap:7px;background:var(--via-panel);border:1px solid var(--via-border);border-radius:12px;padding:15px}.calendar-extra-metrics span{color:var(--via-muted);font-size:12px}.calendar-extra-metrics strong{font-size:23px}
.calendar-detail-card{padding:20px;background:linear-gradient(135deg,var(--via-panel-2),var(--via-panel));border:1px solid var(--via-border);border-radius:14px}
.calendar-detail-card>header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.calendar-detail-card h3{margin:0;font-size:17px}.calendar-detail-card>header>span{color:var(--via-muted);font-size:12px;white-space:nowrap}
.calendar-data-note{margin:0 0 14px;color:var(--via-muted);font-size:12px;line-height:1.6}.calendar-day-details>.calendar-data-note{margin-bottom:0}
.calendar-empty{margin:0;padding:18px 0;color:var(--via-muted);font-size:14px}
.calendar-table-wrap{overflow-x:auto}.calendar-table-wrap table{width:100%;border-collapse:collapse;font-size:13px;line-height:1.5}.calendar-table-wrap th{text-align:left;color:var(--via-muted);font-size:11px;font-weight:750}.calendar-table-wrap td,.calendar-table-wrap th{padding:11px 12px;border-bottom:1px solid var(--via-border);vertical-align:top}.calendar-table-wrap td:first-child,.calendar-table-wrap th:first-child{padding-left:0;white-space:nowrap}.calendar-table-wrap tr:last-child td{border-bottom:0}.calendar-table-wrap td:last-child,.calendar-table-wrap th:last-child{padding-right:0}.calendar-table-wrap small{display:block;margin-top:4px;color:var(--via-muted);font-size:11px}.calendar-table-wrap strong{font-weight:650}.calendar-table-wrap a{color:var(--via-accent);text-decoration:none}.calendar-table-wrap a:hover{text-decoration:underline}.calendar-good{color:#26bf66;font-weight:750}.calendar-bad{color:#f16a6a;font-weight:750}
.calendar-load-status{padding:24px;text-align:center;color:var(--via-muted)}
.calendar-question-explanation{margin-top:10px;font-size:12px}.calendar-question-explanation summary{color:var(--via-accent);cursor:pointer;width:fit-content}.calendar-question-explanation p{margin:8px 0;color:var(--via-muted);white-space:pre-wrap}.calendar-question-explanation summary:focus-visible{outline:2px solid var(--via-accent);outline-offset:3px}
@media(max-width:600px){.calendar-day-details{gap:12px;margin-top:20px}.calendar-details-head{align-items:flex-start;gap:10px}.calendar-details-head h2{font-size:18px}.calendar-details-head p{font-size:12px}.calendar-extra-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.calendar-extra-metrics article{padding:12px}.calendar-extra-metrics strong{font-size:20px}.calendar-detail-card{padding:14px}.calendar-detail-card h3{font-size:15px}.calendar-detail-card>header>span{font-size:10px}.calendar-table-wrap table{font-size:12px}.calendar-table-wrap th,.calendar-table-wrap td{padding:9px}.calendar-table-wrap table{min-width:450px}}

/* Light surfaces and readable foregrounds; dark styling stays above. */
html[data-theme="light"] .calendar-good { color: var(--via-success); }
html[data-theme="light"] .calendar-bad { color: var(--via-danger); }