* { box-sizing: border-box; }

.mm-wrap {
    width: 80%;
    max-width: none;
    margin: 20px auto;
    padding: 0 16px;
}

/* ---------- Collapse visibility (the 3-level system) ---------- */
.week-days.collapsed { display: none; }
.day-block.collapsed .meeting-block { display: none; }
.meeting-block.collapsed .meeting-host,
.meeting-block.collapsed .notes-block { display: none; }

/* ---------- Week divider ---------- */
.week-divider {
    background: #222;
    color: #fff;
    font-weight: bold;
    font-size: 15px;
    padding: 8px 16px;
    border-radius: 6px;
    margin: 18px 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.week-range { flex: 1; text-align: center; }
.week-divider-buttons { display: flex; gap: 8px; }
.week-toggle {
    border: 1px solid rgba(255,255,255,0.4);
    background: transparent;
    color: #fff;
    border-radius: 4px;
    padding: 3px 10px;
    cursor: pointer;
    font-size: 12px;
}
.week-toggle:hover { background: rgba(255,255,255,0.15); }

/* ---------- Day block ---------- */
.day-block {
    background: #ddf9d7;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 10px;
}
.day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 6px;
}
.meeting-count {
    font-size: 13px;
    font-weight: normal;
    color: #555;
    margin-left: 6px;
}
.day-buttons { display: flex; gap: 6px; align-items: center; }
.collapse-meetings-btn {
    border: 1px solid rgba(0,0,0,0.2); background: #fff;
    border-radius: 4px; padding: 3px 8px; cursor: pointer; font-size: 13px;
}
.collapse-meetings-btn:hover { background: #f0f0f0; }
.add-meeting-btn {
    border: 1px solid rgba(0,0,0,0.2); background: #fff;
    border-radius: 4px; padding: 3px 8px; cursor: pointer; font-size: 13px;
}
.add-meeting-btn:hover { background: #f0f0f0; }

.collapse-notes-btn {
    border: 1px solid rgba(0,0,0,0.2); background: #fff;
    border-radius: 4px; padding: 3px 8px; cursor: pointer; font-size: 13px;
}
.collapse-notes-btn:hover { background: #f0f0f0; }

.copy-meeting-btn {
    border: 1px solid rgba(0,0,0,0.2); background: #fff;
    border-radius: 4px; padding: 3px 8px; cursor: pointer; font-size: 13px;
}
.copy-meeting-btn:hover { background: #f0f0f0; }

/* ---------- Meeting block ---------- */
.meeting-block {
    background: #ffebc3;
    border-radius: 5px;
    padding: 8px;
    margin: 4px 0 4px 12px;
}
.meeting-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}
.meeting-time { font-weight: bold; }
.meeting-title { font-weight: bold; }
.meeting-link { color: #185fa5; text-decoration: none; }
.meeting-link:hover { text-decoration: underline; }
.meeting-header-buttons {
    margin-left: auto;
    display: flex;
    gap: 6px;
    align-items: center;
    flex: 0 0 auto;
}
.edit-meeting-btn, .add-note-btn, .to-template-btn,
.copy-notes-btn, .clear-notes-btn {
    border: 1px solid rgba(0,0,0,0.2); background: #fff;
    border-radius: 4px; padding: 2px 8px; cursor: pointer; font-size: 12px;
}
.edit-meeting-btn:hover, .add-note-btn:hover, .to-template-btn:hover,
.copy-notes-btn:hover, .clear-notes-btn:hover { background: #f0f0f0; }
.delete-meeting-btn {
    border: 1px solid rgba(0,0,0,0.2); background: #fff;
    border-radius: 4px; padding: 2px 8px; cursor: pointer;
    font-size: 12px; color: #a00;
}
.delete-meeting-btn:hover { background: #ffecec; }
.meeting-toggle {
    border: 1px solid rgba(0,0,0,0.2); background: #fff;
    border-radius: 4px; padding: 2px 8px; cursor: pointer;
    font-size: 12px; line-height: 1;
}
.meeting-toggle:hover { background: #f0f0f0; }
.meeting-host { margin: 2px 0 4px; font-size: 14px; }

/* ---------- Notes ---------- */
.notes-block {
    background: #fff;
    border-radius: 4px;
    padding: 8px;
    margin-top: 2px;
}
.note { margin: 2px 0; }
.note-children { margin-left: 36px; }
.note-row { display: flex; align-items: center; gap: 4px; }
.note-row .note-text { flex: 1; }
.note-text {
    padding: 2px 4px;
    border-radius: 3px;
    outline: none;
    min-height: 1.2em;
}
.note-text:focus { background: #f5f8ff; box-shadow: inset 0 0 0 1px #cdd8ee; }
.note-menu { position: relative; }
.note-menu-btn {
    border: none; background: transparent; cursor: pointer;
    font-size: 16px; line-height: 1; padding: 2px 6px;
    color: #888; border-radius: 3px; visibility: hidden;
}
.note-menu-btn:hover { background: rgba(0,0,0,0.08); }
.note-row:hover .note-menu-btn,
.note-row:focus-within .note-menu-btn { visibility: visible; }
.note-menu-items {
    display: none; position: absolute; right: 0; top: 100%;
    background: #fff; border: 1px solid #ccc; border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15); z-index: 50; min-width: 120px;
}
.note-menu-items.open { display: block; }
.note-menu-items button {
    display: block; width: 100%; text-align: left;
    padding: 8px 12px; border: none; background: #fff;
    cursor: pointer; font-size: 13px;
}
.note-menu-items button:hover { background: #f0f0f0; }

/* ---------- Toolbar ---------- */
.mm-toolbar {
    position: sticky;
    top: 80px;
    z-index: 190;
    background: #f4f5f4;
    width: 100%;
    padding: 10px 24px;
    margin: 0;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.mm-toolbar button {
    padding: 6px 12px; border: 1px solid #ccc; background: #fff;
    border-radius: 5px; cursor: pointer;
}
.mm-toolbar button:hover { background: #f0f0f0; }
.mm-navlink {
    padding: 6px 12px; border: 1px solid #ccc; background: #fff;
    border-radius: 5px; text-decoration: none; color: #222;
}
.mm-navlink:hover { background: #f0f0f0; }
.mm-viewtitle { font-weight: 600; color: #444; margin-left: 8px; align-self: center; }

/* ---------- Modals ---------- */
.modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    display: flex; align-items: center; justify-content: center;
    z-index: 100;
}
.modal {
    background: #fff; border-radius: 8px; padding: 20px;
    width: 340px; max-width: 90%;
}
.modal h3 { margin-bottom: 12px; }
.modal label { display: block; font-size: 13px; margin: 8px 0 2px; }
.modal input[type=text], .modal input[type=date], .modal select {
    width: 100%; padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px;
}
.modal-buttons { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.modal-buttons button {
    padding: 6px 14px; border: 1px solid #ccc; background: #fff;
    border-radius: 5px; cursor: pointer;
}
.modal-buttons button:hover { background: #f0f0f0; }
.field-tip { font-style: italic; font-weight: normal; color: #888; font-size: 12px; }

/* --- CSS-managed collapse button labels (single source of truth = .collapsed) --- */

/* Element-level toggles: label follows the element's own collapsed state */
.week-divider.days-collapsed .wk-days::after        { content: "Expand Days"; }
.week-divider:not(.days-collapsed) .wk-days::after  { content: "Collapse Days"; }

.day-block.collapsed .collapse-meetings-btn::after       { content: "Expand Meetings"; }
.day-block:not(.collapsed) .collapse-meetings-btn::after { content: "Collapse Meetings"; }

.meeting-block.collapsed .meeting-toggle::after       { content: "Expand Notes"; }
.meeting-block:not(.collapsed) .meeting-toggle::after { content: "Collapse Notes"; }

/* Blanket buttons: fixed labels (always collapse-all) */
.wk-notes::after           { content: "Notes"; }
.wk-meetings::after        { content: "Meetings"; }
.collapse-notes-btn::after { content: "Notes"; }