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

/* Paginakop: knoppen (btn-white btn-sm) en info-icoon met tooltip */
.btn.wo-hbtn { height: 30px; font-size: 12px; padding: 5px 10px; border-color: #eee; color: #676a6c; background: #fff; }
.btn.wo-hbtn:hover { background: #f5f5f5; border-color: #d2d2d2; color: #333; }
.btn.wo-hbtn[disabled] { opacity: .65; cursor: default; background: #fff; }
.wo-info { position: relative; display: inline-flex; align-items: center; font-size: 16px; color: #9e9e9e; cursor: help; padding: 0 4px; }
.wo-info:hover::after { content: attr(data-tip); position: absolute; top: calc(100% + 8px); right: -4px; width: 200px; background: rgba(0,0,0,.9); color: #fff; font: 400 12px/1.4 Roboto, helvetica, arial, sans-serif; text-align: center; padding: 3px 8px; border-radius: 4px; z-index: 500; }
.wo-info:hover::before { content: ""; position: absolute; top: calc(100% + 3px); right: 7px; border: 5px solid transparent; border-top: 0; border-bottom-color: rgba(0,0,0,.9); z-index: 500; }

/* Workout Definition */
.wo-def .ibox-title { font-size: 14px; padding: 12px 15px; }
.wo-def select.form-control, .wo-def input.form-control, .wo-def .wo-pr { height: 34px; }
.wo-def .form-control:disabled, .wo-def select:disabled { background: #eee; color: #9e9e9e; cursor: not-allowed; }
.wo-pr { background: #eee; color: #9e9e9e; cursor: not-allowed; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 20px; }
.wo-lnk { font-weight: 400; color: #2296F3; }
.wo-lnk:hover { color: #1976d2; }
.wo-inline { display: flex; align-items: center; gap: 8px; }
.wo-inline select { flex: 1; min-width: 0; }
.wo-inline select:first-child { flex: 0 0 40%; } /* sets / minimum ±40%, de keuzelijst na "of" krijgt de rest */
.wo-narrow { width: 200px; max-width: 100%; }
.wo-logged { display: flex; align-items: center; gap: 12px; }
.wo-logged > div { flex: 1; }
.wo-logged .btn { white-space: nowrap; border-color: #1565c0; color: #1565c0; background: #fff; }

/* Rechterblok: inklapbare notities */
.wo-fold { font-size: 18px; font-weight: 400; color: #616161; margin: 0 0 10px; cursor: pointer; user-select: none; }
.wo-fold .fa { width: 12px; }
.wo-foldbox { margin-bottom: 20px; }

/* Markdown-editor (SimpleMDE-look) */
.wo-md { position: relative; background: #fff; }
.wo-md-bar { display: flex; flex-wrap: wrap; align-items: center; padding: 0 10px; border: 1px solid #bbb; border-bottom: 0; border-radius: 4px 4px 0 0; opacity: .6; user-select: none; }
.wo-md-bar:hover { opacity: .8; }
.wo-md-bar a { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; border: 1px solid transparent; border-radius: 3px; color: #2c3e50; cursor: pointer; text-decoration: none; }
.wo-md-bar a:hover, .wo-md-bar a.active { background: #fcfcfc; border-color: #95a5a6; color: #2c3e50; text-decoration: none; }
.wo-md-bar a.wo-md-txt { padding: 0 6px; font-size: 13px; }
.wo-md-bar .wo-sep { display: inline-block; width: 0; height: 18px; border-left: 1px solid #d9d9d9; border-right: 1px solid #fff; margin: 0 6px; }
.wo-md-body { position: relative; }
textarea.wo-md-area { display: block; width: 100%; border: 1px solid #ddd; border-radius: 0 0 4px 4px; padding: 10px; font: 13px/1.5 Roboto, helvetica, arial, sans-serif; color: #333; background: #fff; resize: vertical; }
textarea.wo-md-area:focus { outline: none; border-color: #ddd; }
textarea.wo-md-area::placeholder { color: #999; }
textarea.wo-md-area:disabled { background: #eee; color: #777; cursor: not-allowed; }
textarea.wo-md-area[readonly] { background: #fafafa; cursor: default; } /* zonder recht Programmeur: alleen lezen */
.wo-md-prev { position: absolute; inset: 0; padding: 10px; background: #fafafa; overflow: auto; border: 1px solid #ddd; border-radius: 0 0 4px 4px; line-height: 1.5; color: #333; }
.wo-md-status { padding: 8px 10px; font-size: 12px; color: #959694; text-align: right; }
.wo-md-status span { display: inline-block; min-width: 4em; margin-left: 1em; }
.wo-md.dis .wo-md-bar a:not([data-c="full"]):not([data-c="prev"]):not([data-c="guide"]),
.wo-md.preview .wo-md-bar a:not([data-c="full"]):not([data-c="prev"]):not([data-c="guide"]) { opacity: .4; pointer-events: none; }
.wo-md.full { position: fixed; inset: 0; z-index: 450; display: flex; flex-direction: column; background: #fff; }
.wo-md.full .wo-md-bar { opacity: 1; border-radius: 0; padding: 10px; }
.wo-md.full .wo-md-body { flex: 1; min-height: 0; }
.wo-md.full textarea.wo-md-area { height: 100%; min-height: 0 !important; resize: none; border-radius: 0; }
.wo-md.full .wo-md-status { display: none; }
.wo-code { background: rgba(0,0,0,.05); padding: 8px; border-radius: 2px; font: 12px/1.4 Menlo, Consolas, monospace; white-space: pre-wrap; margin: 0 0 8px; }
.wo-quote { border-left: 4px solid #ddd; margin: 0 0 8px; padding: 0 12px; color: #777; }

/* Movements: meerkeuzeveld (select2-look) */
.wo-s2-wrap { position: relative; }
.wo-s2 { border: 1px solid #aaa; border-radius: 4px; background: #fff; min-height: 34px; padding: 0 5px 5px; cursor: text; }
.wo-s2.focus { border-color: #000; }
.wo-s2.dis { background: #eee; cursor: default; border-color: #ddd; }
.wo-s2.dis .wo-s2-x { display: none; }
.wo-s2-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.wo-s2-keuze { background: #e4e4e4; border: 1px solid #aaa; border-radius: 4px; padding: 0 5px; margin: 5px 5px 0 0; font-size: 13px; line-height: 20px; color: #333; cursor: default; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wo-s2-x { color: #999; cursor: pointer; font-weight: 700; margin-right: 3px; }
.wo-s2-x:hover { color: #333; }
.wo-s2-zoek { flex: 1; min-width: 80px; margin-top: 5px; }
.wo-s2-zoek input { border: 0; outline: 0; background: transparent; width: 100%; font: 13px Roboto, helvetica, arial, sans-serif; padding: 0; height: 20px; color: #333; }
.wo-s2-drop { position: absolute; left: 0; right: 0; top: 100%; margin: -1px 0 0; padding: 0; list-style: none; background: #fff; border: 1px solid #aaa; border-radius: 0 0 4px 4px; max-height: 200px; overflow-y: auto; z-index: 60; }
.wo-s2-drop li { padding: 6px; font-size: 13px; color: #333; cursor: pointer; user-select: none; }
.wo-s2-drop li.sel { background: #ddd; }
.wo-s2-drop li.hl { background: #5897fb; color: #fff; }
.wo-s2-drop li.leeg { cursor: default; color: #999; background: #fff; }

/* Onder de blokken: verwijderen links, opslaan rechts */
.wo-foot { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.wo-foot .spacer { flex: 1; }
.wo-del { color: #ed5565; font-size: 13px; }
.wo-del:hover { color: #c9302c; }
.btn.wo-flat { border-color: transparent; background: transparent; color: #9e9e9e; font-size: 13px; padding: 6px 12px; }
.btn.wo-flat:hover { background: transparent; color: #616161; }
.btn.wo-green { background: #1ab394; border-color: #1ab394; color: #fff; font-size: 13px; padding: 6px 12px; }
.btn.wo-green:hover { background: #18a689; border-color: #18a689; color: #fff; }

/* Bevestiging (bootbox): geen kop, alleen de vraag */
.wo-bb .mh { border-bottom: 0; padding-bottom: 0; }
.wo-bb .mh h4 { visibility: hidden; }
.wo-bb .mb { padding-top: 0; }
.wo-bb .mb p { margin: 0; font-size: 13px; color: #676a6c; }

/* Results */
.wo-av { width: 24px; height: 24px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 9px; font-weight: 700; vertical-align: middle; margin-right: 8px; overflow: hidden; background: #2296F3; }
.wo-av img { width: 100%; height: 100%; object-fit: cover; }
.wo-results table.dt th.wo-cmp { background: #d3eafd; }
.wo-results th select.wo-prev-sel { width: auto; max-width: 170px; padding: 2px 4px; font-size: 12px; font-weight: 400; height: 24px; cursor: pointer; }
.wo-ok { color: #1ab394; font-size: 15px; }
/* Copy | Export zijn in SugarWOD alleen tekst (de icoontjes komen uit het gedeelde UI.tabel) */
.wo-page .dt-copy .fa, .wo-page .dt-export .fa { display: none; }

/* Analysis */
.wo-ana .wo-c6 { flex: 2; min-width: 0; }
.wo-ana .wo-c3 { flex: 1; min-width: 0; }
.wo-chart { position: relative; height: 280px; }

/* Movements */
.wo-movs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.wo-movs .ibox { margin: 0; }
.wo-yt { position: relative; padding-top: 56.25%; background: #000; cursor: pointer; overflow: hidden; }
.wo-yt img, .wo-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.wo-yt .fa { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 54px; color: #e62117; }

/* History */
.wo-pre { white-space: pre-line; max-width: 420px; }

/* Publishing: drie blokken onder elkaar, samen ±920px breed en gecentreerd */
.wo-publish { max-width: 920px; margin: 0 auto; }
.wo-pgrid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 25px; }
.wo-plbl { margin-bottom: 4px; font-size: 13px; font-weight: 400; color: #676a6c; }
.wo-pval { display: flex; align-items: center; gap: 6px; min-height: 24px; }
.wo-pval b, .wo-pval .wo-bold, .wo-pval .wo-placeholder { font-weight: 700; color: #616161; }
.wo-pfoot { margin-top: 25px; text-align: right; }
.wo-cursief { font-style: italic; color: #9e9e9e; }
.btn.wo-ddbtn { font-size: 12px; padding: 3px 8px; color: #676a6c; border-color: #ddd; }

@media (max-width: 600px) {
  .wo-pgrid { grid-template-columns: 1fr; }
}