/* "Общие записи": the load of the workers over a week or a month, a small card for every day. */

.content[data-board="schedule"] .ov { flex: 1; min-height: 0; overflow: auto; padding: 2px 2px 8px; }
.ov-grid { display: grid; gap: 12px; align-items: start; }
.ov-week { grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr)); }
.ov-month { grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 10px; }
.ov-status { padding: 24px; text-align: center; color: var(--text-3); font-size: var(--fs-caption); }

.ov-day {
  --name-w: 62px;
  display: grid; gap: 8px; padding: 12px 14px 14px; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ov-month .ov-day { --name-w: 46px; padding: 9px 12px 11px; gap: 5px; }
.ov-day:hover { border-color: var(--line); background: var(--raised); }
.ov-day:active { transform: scale(.995); }
.ov-day.is-today { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.ov-day.is-weekend .ov-wd { color: var(--danger); }

.ov-head { display: flex; align-items: baseline; gap: 8px; }
.ov-date { font-size: 20px; font-weight: 600; line-height: 1; }
.ov-month .ov-date { font-size: 17px; }
.ov-wd { font-size: 12px; font-weight: 500; text-transform: lowercase; color: var(--text-3); }
.ov-monthname { font-size: 12px; color: var(--text-3); }
.ov-count { margin-left: auto; font-size: var(--fs-caption); color: var(--text-2); }
.ov-day.is-free .ov-count { color: var(--text-3); }

/* The hours above the bars; the grid under the bars has a line for every hour, like the day itself */
.ov-axis { display: grid; grid-template-columns: var(--name-w) 1fr; gap: 8px; }
.ov-ticks { position: relative; height: 12px; }
.ov-ticks span { position: absolute; top: 0; transform: translateX(-50%); font-size: 10px; line-height: 12px; color: var(--text-3); }
.ov-ticks span:first-child { transform: none; }
.ov-ticks span:last-child { transform: translateX(-100%); }

.ov-rows { display: grid; gap: 4px; }
.ov-row { display: grid; grid-template-columns: var(--name-w) 1fr; gap: 8px; align-items: center; }
.ov-name { font-size: 12px; color: var(--text-2); }
.ov-track {
  position: relative; height: 18px; border-radius: 9px;
  background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px); /* the stronger line: --line-soft is too faint on the light themes */
  background-size: 10% 100%;
}
.ov-month .ov-track { height: 12px; border-radius: 6px; }
.ov-month .ov-rows { gap: 3px; }
.ov-month .ov-name { font-size: 11px; }

.ov-bar {
  --b: var(--primary);
  position: absolute; top: 1px; bottom: 1px; min-width: 6px; border-radius: 8px;
  background: color-mix(in srgb, var(--b) 88%, transparent);
}
.ov-bar[data-color="1"] { --b: var(--nc-1); } .ov-bar[data-color="2"] { --b: var(--nc-2); } .ov-bar[data-color="3"] { --b: var(--nc-3); }
.ov-bar[data-color="4"] { --b: var(--nc-4); } .ov-bar[data-color="5"] { --b: var(--nc-5); } .ov-bar[data-color="6"] { --b: var(--nc-6); }
.ov-bar[data-color="7"] { --b: var(--nc-7); }
/* A day off of a worker: hatched, the same as on the day */
.ov-bar.is-off {
  background: repeating-linear-gradient(135deg, var(--raised) 0 6px, color-mix(in srgb, var(--text-3) 26%, var(--surface)) 6px 12px);
  box-shadow: inset 0 0 0 1px var(--line);
}

@media (max-width: 899px) {
  .ov-week, .ov-month { grid-template-columns: 1fr; }
  .ov-day { --name-w: 54px; }
}