/* calendar: opmaak één op één naar SugarWOD (zie Projects/SugarWod 2.0/referentie/dashboard/01-programmeren.md). */

/* Paginakop: track-keuzelijst in select2-stijl en één knoppengroep (btn-white btn-sm) */
.cal-track-select { width: 200px; height: 30px; padding: 0 24px 0 8px; border: 1px solid #aaa; border-radius: 4px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0h8L4 5z' fill='%23888'/%3E%3C/svg%3E") no-repeat right 8px center; -webkit-appearance: none; -moz-appearance: none; appearance: none; color: #444; font-size: 13px; line-height: 28px; cursor: pointer; }
.cal-track-select:focus { outline: none; border-color: #aaa; }
.cal-btns .btn { height: 30px; padding: 0 10px; font-size: 12px; color: inherit; background: #fff; border-color: #eee; white-space: nowrap; }
.cal-btns .btn:hover { background: #f5f5f5; color: #616161; }
.cal-btns .btn .fa-caret-down { font-size: 11px; }

/* Datumkiezer in de kop: vandaag blauw gevuld */
.ui-minical.cal-minical td.active { background: transparent; color: #333; }
.ui-minical.cal-minical td.old.active { color: #999; }
.ui-minical.cal-minical td.today { background: #2296F3; color: #fff; font-weight: 400; }

/* Kalender: vult de hoogte tot net boven de onderrand; links en rechts ruimte voor de weekpijlen */
.wrapper.cal-wrapper { padding: 0; }
.calendar-container { position: relative; margin: 0 84px; height: calc(100vh - 145px); min-height: 360px; }
.calendar-container.add-workout-container-open { margin-right: 818px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); height: 100%; background: #fff; border: 1px solid #e0e0e0; }
.cal-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #fff; border-right: 1px solid #e0e0e0; }
.cal-col:last-child { border-right: 0; }
.cal-col.cal-empty { background: #fafafa; }
.cal-col.cal-today { background: #d3eafd; }
.cal-col-head { flex: 0 0 47px; height: 47px; line-height: 47px; text-align: center; text-transform: uppercase; font-size: 16px; font-weight: 400; color: #757575; border-bottom: 1px solid #e0e0e0; cursor: pointer; user-select: none; white-space: nowrap; overflow: hidden; }
.cal-col-head .fa { font-size: 15px; margin-left: 2px; }
.cal-col-top { flex: 0 0 auto; }
.cal-day-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 10px 7px 10px 6px; }
.cal-day-body.cal-drop-hover { background: rgba(34, 150, 243, .08); box-shadow: inset 0 0 0 2px #2296F3; }

/* Reactieknop per dag */
.cal-comment-btn { display: block; width: calc(100% - 16px); height: 26px; margin: 8px; padding: 0 6px; background: #fff; border: 1px solid #666a6c; border-radius: 4px; color: #666a6c; font-family: inherit; font-size: 12px; cursor: pointer; }
.cal-comment-btn:hover { background: #f5f5f5; }
.cal-comment-btn.active, .cal-comment-btn.active:hover { background: #666a6c; color: #fff; }
.cal-comment-btn:focus { outline: none; }

/* Show Photos & Announcements */
.cal-photo { height: 200px; display: flex; align-items: center; justify-content: center; background: transparent; color: #e0e0e0; font-size: 85px; cursor: pointer; }
.cal-photo:hover { color: #1ab394; }
.cal-announce, .cal-announce:focus { display: block; width: 100%; min-height: 0; height: 85px; margin: 0; padding: 6px 8px; background: transparent; border: 0; border-top: 1px dashed #e0e0e0; border-bottom: 1px solid #e0e0e0; border-radius: 0; color: #9e9e9e; font-size: 11px; font-style: normal; line-height: 1.4; resize: none; overflow-y: auto; outline: none; }
.cal-announce::placeholder { color: #bdbdbd; font-style: normal; }

/* Workoutkaarten: grijs = Not Scored, blauw = met score, zwart = resultaten gelogd */
.cal-workout { background: #fff; border: 0.8px solid #2296F3; margin: 6.5px 0; cursor: pointer; }
.cal-workout-header { padding: 6.5px; background: #2296F3; color: rgba(255, 255, 255, .87); font-size: 13px; line-height: 1.3; word-break: break-word; cursor: move; }
.cal-lezen .cal-workout-header { cursor: pointer; } /* zonder recht Programmeur: niet slepen */
.cal-geen-social .cal-photo, .cal-announce[readonly] { cursor: default; } /* zonder recht Social-beheer: alleen lezen */
.cal-workout-header .fa { margin-right: 2px; }
.cal-workout-grey { border-color: #9e9e9e; }
.cal-workout-grey .cal-workout-header { background: #9e9e9e; }
.cal-workout-black { border-color: #212121; }
.cal-workout-black .cal-workout-header { background: #212121; }
.cal-workout-desc { padding: 6.5px; font-size: 13px; line-height: 18.6px; color: rgba(0, 0, 0, .7); white-space: nowrap; overflow-x: auto; overflow-y: hidden; }
.cal-workout-desc .markdown ul, .cal-workout-desc .markdown ol { margin: 0 0 0 18px; padding: 0; }
.cal-workout-desc h3, .cal-workout-desc h4, .cal-workout-desc h5 { color: rgba(0, 0, 0, .7); margin: 0; }
.cal-workout-footer { display: flex; align-items: center; min-height: 20px; padding: 0 6.5px 4px; }
.cal-workout-results { font-size: 10px; color: rgba(0, 0, 0, .26); }
.cal-workout-actions { margin-left: auto; visibility: hidden; white-space: nowrap; }
.cal-workout:hover .cal-workout-actions { visibility: visible; }
.cal-workout-actions a { margin-left: 7px; color: #9e9e9e; font-size: 13px; cursor: pointer; }
.cal-workout-actions a:hover { color: #424242; text-decoration: none; }
.calendar-container.cal-no-desc .cal-workout-desc, .calendar-container.cal-no-desc .cal-workout-footer { display: none; }
.cal-sortable-ghost { opacity: .4; }

/* Grote ronde weekpijlen, half over de rand; zichtbaar bij hover en tijdens slepen */
.cal-arrow { position: absolute; top: 50%; z-index: 10; width: 89px; height: 89px; margin-top: -44.5px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fafafa; color: #424242; font-size: 30px; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s; }
.cal-arrow i { pointer-events: none; }
.cal-arrow-left { left: -44.5px; }
.cal-arrow-left i { margin-right: 4px; }
.cal-arrow-right { right: -44.5px; }
.cal-arrow-right i { margin-left: 4px; }
.calendar-container:hover .cal-arrow, .calendar-container.cal-dragging .cal-arrow { opacity: 1; visibility: visible; }
.cal-arrow:hover { background: #f0f0f0; }

/* Blauwe ronde plusknop rechtsonder */
.cal-add-workout { position: fixed; right: 57px; bottom: 27px; z-index: 60; width: 89px; height: 89px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #2296F3; color: #fff; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, .26); }
.cal-add-workout .fa { font-size: 44px; }
.cal-add-workout:hover { background: #1e88e5; }

/* Reactievenster per dag: zwevend midden in beeld (top 100px), geen donkere achtergrond; de lijst scrolt */
.cal-comments-pop { position: fixed; z-index: 150; top: 100px; left: 50%; transform: translateX(-50%); width: 540px; max-width: calc(100vw - 32px); height: 530px; max-height: calc(100vh - 120px); display: flex; flex-direction: column; background: #fff; border: 1px solid #e0e0e0; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, .05); overflow: hidden; }
.cal-cp-head { flex: 0 0 auto; display: flex; align-items: center; padding: 20px; font-size: 18px; font-weight: 300; color: #616161; }
.cal-cp-title { flex: 1; min-width: 0; }
.cal-cp-x { margin-left: 10px; font-size: 26px; font-weight: 300; line-height: 1; color: #bdbdbd; cursor: pointer; }
.cal-cp-x:hover { color: #9e9e9e; text-decoration: none; }
.cal-cp-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 20px 10px; }
.cal-cp-empty { padding: 30px 10px 10px; text-align: center; font-size: 13px; color: #676a6c; }
.cal-cp-empty .fa { display: block; margin-bottom: 14px; font-size: 80px; color: #2296F3; }
.cal-cp-item { display: flex; align-items: flex-start; margin-bottom: 10px; }
.cal-cp-item .avatar-sm { flex: 0 0 24px; }
.cal-cp-body { flex: 1; min-width: 0; }
.cal-cp-name { font-weight: 700; color: #424242; }
.cal-cp-time { margin-left: 4px; font-size: 11px; color: #9e9e9e; }
.cal-cp-text { color: #616161; white-space: pre-wrap; word-break: break-word; }
.cal-cp-foot { flex: 0 0 auto; display: flex; align-items: center; padding: 12px 20px; border-top: 1px solid #eee; }
.cal-cp-foot .avatar-sm { flex: 0 0 28px; width: 28px; height: 28px; margin-right: 10px; background: #1ab394; font-size: 10px; }
.cal-cp-input { flex: 1; min-width: 0; padding: 6px 2px; background: transparent; border: 0; border-bottom: 1px solid #e0e0e0; border-radius: 0; font-family: inherit; font-size: 13px; color: #616161; outline: none; }
.cal-cp-input:focus { border-bottom-color: #2296F3; }
.cal-cp-send { flex: 0 0 auto; margin-left: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; color: #9e9e9e; cursor: pointer; }
.cal-cp-send:hover { color: #2296F3; text-decoration: none; }

/* Voorbeeld (oog): breed venster, vette titel, oranje kopjes, secties gescheiden door een dunne lijn */
.modal.cal-preview-modal { width: 900px; }
.modal.cal-preview-modal .mh h4 { font-size: 18px; font-weight: 700; }
.cal-preview h4 { margin: 0 0 6px; color: #e8702a; font-size: 13px; font-weight: 600; }
.cal-pv-sec + .cal-pv-sec { margin-top: 15px; padding-top: 15px; border-top: 1px solid #eee; }
.cal-preview .cal-no-notes { margin: 0; color: #9e9e9e; }

/* Clone-venster: cursieve regel, dunne lijn, dan twee kolommen met het label boven het veld */
.modal.cal-clone-modal { width: 490px; }
.cal-clone-note { font-style: italic; color: #9e9e9e; }
.cal-clone-sep { height: 0; margin: 12px 0 15px; border-top: 1px solid #e7eaec; }
.cal-clone-cols { display: flex; gap: 15px; }
.cal-clone-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.cal-clone-col > label { margin: 0 0 5px; font-size: 12px; font-weight: 400; color: #676a6c; }
.cal-clone-date { flex: 0 0 auto; height: 32px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; background: #fff; border: 1px solid #e5e6e7; border-radius: 2px; color: #616161; cursor: pointer; }
.cal-clone-date-txt.leeg { color: #999; }
.cal-clone-tracks { flex: 0 0 auto; min-height: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 3px 5px; background: #fff; border: 1px solid #e5e6e7; border-radius: 2px; cursor: text; }
.cal-tag { padding: 1px 6px; background: #e4e4e4; border: 1px solid #aaa; border-radius: 4px; color: #333; font-size: 12px; }
.cal-tag-x { margin-right: 4px; color: #999; font-weight: 700; cursor: pointer; }
.cal-tag-x:hover { color: #333; text-decoration: none; }
.cal-tag-ph { padding-left: 4px; color: #999; }
.modal .mf .cal-help { margin-right: auto; align-self: center; color: #9e9e9e; font-size: 12px; font-weight: 700; }
.btn.cal-btn-clone { border-color: #2296F3; color: #2296F3; }
.btn.cal-btn-clone[disabled], .btn.cal-btn-clone[disabled]:hover { border-color: #9e9e9e; color: #9e9e9e; background: #fff; }
.btn.cal-btn-clone-go { background: #1ab394; border-color: #1ab394; color: #fff; }
.btn.cal-btn-clone-go:hover { background: #18a689; color: #fff; }

/* Print / Preview */
.cal-print { color: #333; }
.cal-print-head, .cal-print-foot { text-align: center; }
.cal-print-head img, .cal-print-foot img { max-height: 70px; max-width: 200px; }
.cal-print-gym { margin: 6px 0 14px; font-size: 20px; font-weight: 700; color: #333; }
.cal-print-meta { margin-bottom: 16px; font-size: 14px; }
.cal-print-w { margin-bottom: 18px; }
.cal-print-w h2 { margin: 0 0 6px; font-size: 22px; font-weight: 700; color: #212121; }
.cal-print-score { margin-top: 6px; }
.cal-print-foot { margin-top: 24px; }
.page-heading.cal-heading h2 { margin-left: 15px; }