/* «Boş saatlar» (spec docs/gaps-tech.md): the day's free windows, each a card with its master's colour, the clients to
   invite under it as rows with their reason and the three ways to reach them. */
.gaps-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-bottom: 14px; }
.gaps-head__text { min-width: 0; }
.gaps-head__title { font: var(--display-weight) 22px/1.2 var(--font-display); letter-spacing: var(--display-tracking); }
.gaps-head__text .muted { margin-top: 4px; max-width: 62ch; font-size: 14px; }
.gaps-days button { min-width: 84px; }
.gaps-kpis { margin-bottom: 16px; }
.gaps-kpis small { margin-left: 4px; font-size: 13px; color: var(--ink-2); font-weight: 500; }

.gaps-list { display: grid; gap: 12px; }
.gaps-win { padding: 0; overflow: hidden; }
.gaps-win__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--surface); }
.gaps-win__dot { flex: none; width: 10px; height: 34px; border-radius: 99px; background: var(--c, var(--accent)); }
.gaps-win__who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gaps-win__who b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gaps-win__time { font-size: 13px; color: var(--ink-2); }
.gaps-win__head .badge { height: auto; min-height: 22px; padding: 2px 8px; font-size: 12px; white-space: nowrap; }
.gaps-win__list { display: grid; }
.gaps-win__none { padding: 12px 14px; font-size: 13px; }

.gaps-cand { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.gaps-cand + .gaps-cand { border-top: 1px solid var(--line-soft); }
.gaps-cand .avatar { flex: none; }
.gaps-cand__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gaps-cand__name { font-weight: 600; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gaps-cand__name:hover { text-decoration: underline; }
.gaps-cand__why { font-size: 13px; color: var(--ink-2); }
.gaps-cand__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.gaps-cand__tags .badge { height: auto; min-height: 20px; padding: 2px 8px; font-weight: 600; }
.gaps-cand__acts { display: flex; flex: none; gap: 6px; }
@media (max-width: 640px) {
  .gaps-cand { flex-wrap: wrap; }
  .gaps-cand__acts { width: 100%; padding-left: 52px; }
  .gaps-cand__acts .btn--wa { flex: 1; }
}

/* where there are group classes: two headings, the classes' free seats first */
.gaps-sec { margin: 4px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.gaps-list + .gaps-sec { margin-top: 22px; }
.gaps-list:empty { display: none; }

/* a class's room as seats in the class's colour: the taken filled, the free ones open */
.gaps-seats { display: flex; flex-wrap: wrap; gap: 5px; padding: 12px 14px 2px; }
.gaps-seats i { width: 13px; height: 13px; border-radius: 4px 4px 6px 6px; border: 1.5px solid color-mix(in srgb, var(--c, var(--accent)) 70%, var(--line)); }
.gaps-seats i.is-taken { background: color-mix(in srgb, var(--c, var(--accent)) 55%, var(--surface)); border-color: transparent; }
.gaps-seats--bar { display: block; height: 8px; margin: 12px 14px 2px; padding: 0; border-radius: 99px; overflow: hidden;
  background: color-mix(in srgb, var(--c, var(--accent)) 14%, var(--surface)); }
.gaps-seats--bar span { display: block; width: var(--p, 0%); height: 100%; background: color-mix(in srgb, var(--c, var(--accent)) 60%, var(--surface)); }
.gaps-win__closed { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 14px 14px; font-size: 13px; color: var(--ink-2); }

/* the dashboard's line to tomorrow's free hours */
.dash-alert--gaps .dash-alert__icon { background: color-mix(in srgb, var(--signal) 16%, var(--bg)); color: var(--signal); }