/* Отпуска (Staff -> Отпуска, design О1): the year as a ribbon; vacations module */
.vac-head { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; flex-wrap: wrap; }
.vac-head h1 { margin: 0; } .vac-sub { color: var(--muted); margin-top: 4px; }
.vac-head .month-label { font-weight: 800; font-size: 16px; padding: 0 4px; }
.vac-filter .office-filter { margin-bottom: 10px; }
.vac-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin: 0 0 10px; }
.vac-legend span { display: inline-flex; align-items: center; gap: 6px; }
.vac-k { display: inline-block; width: 22px; height: 10px; border-radius: 4px; --c: #3aa0e8; }
.vac-k.taken { background: var(--c); } .vac-k.now { background: var(--c); box-shadow: 0 0 0 2px #fff, 0 0 0 3px #e5484d; }
.vac-k.approved { background: color-mix(in srgb, var(--c) 32%, #fff); border: 2px solid var(--c); } .vac-k.requested { border: 2px dashed var(--c); background: #fff; }
.vac-k.today { width: 2px; height: 14px; background: #e5484d; border-radius: 0; }
.vac-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 8px 14px 12px; }
.vac-row { display: grid; grid-template-columns: 220px 1fr 100px; gap: 12px; align-items: center; padding: 5px 0; }
.vac-row + .vac-row { border-top: 1px solid var(--surface-2); }
.vac-hrow { padding: 6px 0 8px; position: sticky; top: var(--top-offset); background: var(--surface); z-index: 3; }
.vac-months { position: relative; height: 18px; }
.vac-months span { position: absolute; top: 0; font-size: 12px; font-weight: 700; color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; }
.vac-months span.cur { color: var(--primary-dark); }
.vac-who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.vac-who > div { min-width: 0; }
.vac-who b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vac-who > div > span { display: block; color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vac-track { position: relative; height: 26px; border-radius: 8px; background: var(--surface-2); } .vac-card.editable .vac-track { cursor: copy; }
.vac-grid { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); opacity: .7; }
.vac-bar { position: absolute; top: 4px; bottom: 4px; min-width: 5px; border: 0; padding: 0; border-radius: 6px; background: var(--c); z-index: 1; }
button.vac-bar { cursor: pointer; } button.vac-bar:hover, button.vac-bar:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; z-index: 4; }
.vac-bar.now { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px #e5484d; z-index: 2; }
.vac-bar.approved { background: color-mix(in srgb, var(--c) 30%, var(--surface)); border: 2px solid var(--c); }
.vac-bar.requested { background: var(--surface); border: 2px dashed var(--c); }
.vac-today { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: #e5484d; z-index: 3; border-radius: 2px; pointer-events: none; }
.vac-left { justify-self: end; font-size: 12px; font-weight: 700; color: #1f7a45; background: #e6f6ec; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.vac-left.zero { color: var(--muted); background: var(--surface-2); }
.vac-ohead { display: flex; align-items: center; gap: 8px; padding: 12px 0 6px; border-bottom: 2px solid var(--c, var(--border)); margin-top: 4px; }
.vac-ohead b { font-size: 14px; } .vac-ohead > span { color: var(--muted); font-size: 12.5px; }
.vac-foot { margin-top: 10px; }
.vac-form .vac-person { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.vac-line { margin: -4px 0 4px; min-height: 18px; }
.vac-per { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.vac-per label { display: flex; align-items: center; gap: 8px; } .vac-per label span { flex: 1; min-width: 0; }
@media (max-width: 860px) {
  .vac-row { grid-template-columns: 130px 1fr 74px; gap: 8px; } .vac-who > div > span { display: none; } .vac-who b { font-size: 12.5px; }
  .vac-months span { font-size: 10px; } .vac-left { font-size: 11px; padding: 2px 6px; }
}
.vac-row.mine { background: color-mix(in srgb, var(--primary) 7%, transparent); border-radius: 10px; } .vac-row.mine .vac-track { cursor: copy; }