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

/* Kop: klein track-knopje direct naast "Analysis & Planning", rechts "Week View" */
.page-heading h2 .an-track { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 3px 8px; position: relative; top: -3px; vertical-align: middle; font-size: 12px; font-weight: 400; line-height: 1.4; color: #676a6c; background: #fff; border: 1px solid #e7eaec; border-radius: 3px; text-decoration: none; cursor: pointer; }
.page-heading h2 .an-track:hover { background: #f5f5f5; color: #616161; text-decoration: none; }
.page-heading h2 .an-track .fa { font-size: 11px; }
.page-heading .an-hbtn { height: 30px; padding: 5px 10px; font-size: 12px; color: #676a6c; background: #fff; border: 1px solid #eee; border-radius: 3px; }
.page-heading .an-hbtn:hover { background: #f5f5f5; color: #616161; }

/* Wit blok met de maandkalender (FullCalendar-look) */
.an-cal { background: #fff; padding: 15px 20px 20px; margin-bottom: 20px; container-type: inline-size; } /* breedte = maat voor de rijhoogte (100cqw) */
.an-toolbar { display: flex; align-items: center; margin-bottom: 1em; }
.an-toolbar h2 { flex: 1; font-size: 24px; font-weight: 100; color: #616161; }
.an-toolbar .an-right { display: flex; align-items: center; gap: .75em; }
.an-fcgroup { display: inline-flex; }
.an-fcbtn { box-sizing: border-box; height: 2.1em; margin: 0; padding: 0 .6em; font-family: inherit; font-size: 13px; line-height: 1; color: #333; white-space: nowrap; cursor: pointer;
  border: 1px solid; border-color: #e6e6e6 #e6e6e6 #bfbfbf; border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25); border-radius: 4px;
  background-color: #f5f5f5; background-image: linear-gradient(to bottom, #fff, #e6e6e6); background-repeat: repeat-x;
  text-shadow: 0 1px 1px rgba(255,255,255,.75); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); }
.an-fcbtn:hover { background-color: #e6e6e6; background-position: 0 -15px; transition: background-position .1s linear; }
.an-fcbtn:active { background-color: #ccc; background-image: none; box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); outline: 0; }
.an-fcbtn:focus { outline: 0; }
.an-fcbtn[disabled] { cursor: default; background-color: #e6e6e6; background-image: none; opacity: .65; box-shadow: none; }
.an-fcgroup .an-fcbtn:first-child { border-radius: 4px 0 0 4px; }
.an-fcgroup .an-fcbtn:last-child { border-radius: 0 4px 4px 0; margin-left: -1px; }
.an-icon { display: inline-block; width: 1em; height: 1em; line-height: 1em; margin: 0 .2em; position: relative; top: -.05em; vertical-align: middle; overflow: hidden; text-align: center; font-family: "Courier New", Courier, monospace; user-select: none; }
.an-icon::after { position: relative; top: -7%; font-weight: bold; font-size: 200%; }
.an-icon.an-links::after { content: "\2039"; }
.an-icon.an-rechts::after { content: "\203A"; }

/* Maandraster: rijen vullen de kalender (verhouding 1,35 zoals FullCalendar, rijhoogte gezet in analysis.js); alleen een volle week groeit mee */
.an-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid #ddd; border-left: 1px solid #ddd; }
.an-dh { padding: 1px 0; text-align: center; font-weight: 700; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; }
.an-dc { display: flex; flex-direction: column; min-width: 0; min-height: 4em; padding-bottom: 2px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; }
.an-dc.an-today { background: #fcf8e3; }
.an-dn { padding: 2px; text-align: right; }
.an-evs { flex: 1 1 auto; min-height: 1.5em; }
.an-ev { display: block; margin: 2px 2px 0; padding: 4px; font-size: 11px; line-height: 1.3; color: #fff; background: #2296F3; border: 1px solid #2296F3; border-radius: 3px; white-space: nowrap; overflow: hidden; cursor: pointer; user-select: none; }
.an-ev.done { background: #212121; border-color: #212121; }
.an-ghost { opacity: .4; }

/* Geel tooltip (qtip-stijl) */
.an-tip { display: none; position: fixed; z-index: 500; min-width: 50px; max-width: 280px; padding: 5px 9px; font-size: 10.5px; line-height: 12px; color: #555; background: #ffffca; border: 1px solid #f1d031; pointer-events: none; word-wrap: break-word; }
.an-tip-t { display: block; margin-bottom: 3px; font-weight: 700; }
.an-tip-d { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden; margin-bottom: 5px; white-space: pre-line; }
.an-tip-pijl { position: absolute; top: -7px; width: 0; height: 0; margin-left: -7px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #f1d031; }
.an-tip-pijl::after { content: ""; position: absolute; left: -6px; top: 1px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #ffffca; }
.an-tip.boven .an-tip-pijl { top: auto; bottom: -7px; border-bottom: 0; border-top: 7px solid #f1d031; }
.an-tip.boven .an-tip-pijl::after { top: -7px; border-bottom: 0; border-top: 6px solid #ffffca; }

/* Rechts: Programming Statistics */
.an-stat-title { margin: 0 0 15px; text-align: center; font-size: 24px; font-weight: 100; color: #616161; }
/* Vier tegels naast elkaar op één rij (elk ±25%) */
.an-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }
.an-tile { min-width: 0; padding: 12px; text-align: left; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.an-tile .num { font-size: 28px; font-weight: 100; line-height: 1.1; color: #616161; }
.an-tile .lbl { margin-top: 2px; font-size: 11px; line-height: 1.3; color: #676a6c; text-align: left; overflow-wrap: break-word; }
.an-movs .an-scroll { max-height: 300px; overflow-y: auto; }
.an-movs table.dt th { position: sticky; top: 0; z-index: 1; box-shadow: inset 0 -1px 0 #bdbdbd; }
/* Score Types: taart links (±55%), legenda rechts in twee kolommen */
.an-types-c { display: flex; align-items: center; gap: 10px; }
.an-pie { position: relative; flex: 0 0 55%; min-width: 0; aspect-ratio: 1; }
.an-legend { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; margin: 0; padding: 0; list-style: none; }
.an-legend li { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 11px; line-height: 1.2; color: #676a6c; cursor: pointer; user-select: none; }
.an-legend li.uit .an-lt { text-decoration: line-through; }
.an-sw { flex: 0 0 18px; width: 18px; height: 8px; }
.an-lt { min-width: 0; overflow-wrap: break-word; }
@media (max-width: 900px) { .an-row > div { width: 100%; } }