.bht-calendar {
width: 100%;
min-width: 0;
}
.bht-calendar__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 12px;
}
.bht-calendar__title {
flex: 1;
text-align: center;
font-size: 1.2rem;
}
.bht-calendar__summary {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-bottom: 14px;
text-align: center;
}
.bht-calendar__summary > div {
padding: 10px 4px;
border: 1px solid var(--bht-border);
border-radius: var(--bht-radius-sm);
background: var(--bht-card);
}
.bht-calendar__summary dt {
font-size: 0.7rem;
font-weight: 700;
color: var(--bht-muted);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.bht-calendar__summary dd {
font-size: 1.4rem;
font-weight: 800;
color: var(--bht-primary-dark);
line-height: 1.2;
}
.bht-app .bht-calendar__table {
width: 100%;
max-width: 100%;
margin: 0;
table-layout: fixed;
border-collapse: separate;
border-spacing: 3px;
border: 0;
background: transparent;
}
.bht-app .bht-calendar__table th,
.bht-app .bht-calendar__table td {
padding: 0;
border: 0;
background: transparent;
text-align: center;
vertical-align: middle;
}
.bht-app .bht-calendar__table th {
padding: 4px 0;
font-size: 0.7rem;
font-weight: 700;
color: var(--bht-muted);
text-transform: uppercase;
}
.bht-app .bht-day {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0;
width: 100%;
min-height: 48px;
padding: 2px 0;
border: 2px solid transparent;
border-radius: 10px;
background: #f1f5f3;
color: var(--bht-text);
font: inherit;
line-height: 1.1;
cursor: pointer;
box-shadow: none;
}
.bht-day__num {
font-size: 0.82rem;
font-weight: 700;
}
.bht-day__sym {
font-size: 0.95rem;
font-weight: 800;
}
.bht-app .bht-day--completed,
.bht-legend__sym.bht-day--completed {
background: #d6f0e1;
color: #0a5a31;
border-color: #8fd0ad;
}
.bht-app .bht-day--partial,
.bht-legend__sym.bht-day--partial {
background: #fff1cc;
color: #7a4b00;
border-color: #f0c96b;
}
.bht-app .bht-day--missed,
.bht-legend__sym.bht-day--missed {
background: #fbdcdc;
color: #9b1c1c;
border-color: #eca3a3;
}
.bht-app .bht-day--pending,
.bht-legend__sym.bht-day--pending {
background: #fff;
color: var(--bht-text);
border: 2px dashed #8a9a94;
}
.bht-app .bht-day--future,
.bht-legend__sym.bht-day--future {
background: transparent;
color: var(--bht-muted);
border-color: var(--bht-border);
}
.bht-app .bht-day--none {
background: transparent;
color: var(--bht-muted);
}
.bht-app .bht-day.is-today {
box-shadow: 0 0 0 2px var(--bht-primary);
}
.bht-app .bht-day:hover {
filter: brightness(0.96);
}
.bht-app .bht-day.is-selected {
outline: 3px solid var(--bht-focus);
outline-offset: 1px;
}
.bht-legend {
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
margin-top: 12px;
font-size: 0.8rem;
color: var(--bht-muted);
}
.bht-legend li {
display: flex;
align-items: center;
gap: 6px;
}
.bht-legend__sym {
display: inline-grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 6px;
border: 2px solid transparent;
font-weight: 800;
font-size: 0.8rem;
}
.bht-calendar__detail {
margin-top: 16px;
}
.bht-calendar__day-title {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 10px;
font-size: 1.1rem;
}
.bht-day-list {
display: grid;
gap: 8px;
}
.bht-day-list__item {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: var(--bht-radius-sm);
background: #f6f8f7;
}
.bht-day-list__item.is-done {
background: var(--bht-primary-soft);
}
.bht-day-list__name {
min-width: 0;
font-weight: 600;
overflow-wrap: anywhere;
}
.bht-day-list__state {
font-size: 0.85rem;
font-weight: 700;
white-space: nowrap;
}