:root{--avt-blue:#087c91}
.calendar-link{display:inline-block;background:var(--avt-blue);color:white;padding:.6rem .95rem;border-radius:7px;text-decoration:none}
.week nav{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.week a{color:var(--avt-blue)}
.days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.25rem}
.calday{background:#f5f7f8;padding:.3rem;min-height:8rem;border-top:3px solid #ccd5da}
.calday.today{border-color:var(--avt-blue)}
.calday h3{font-size:1rem;margin:.4rem 0 .7rem}
.shift{margin:.3rem 0;padding:.4rem;background:#e7ecf0;border-radius:5px;overflow-wrap:anywhere}
.shift.own{border-left:3px solid var(--avt-blue)}
.shift span,.shift b{display:block}
.shift span,.shift details{font-size:.8rem}
.shift button{font-size:.75rem;padding:.3rem;overflow-wrap:anywhere}
@media(max-width:700px){.days{grid-template-columns:1fr}.calday{display:grid;grid-template-columns:4rem 1fr;gap:.2rem .5rem;min-height:2.5rem}.calday h3{grid-column:1;grid-row:1}.shift{grid-column:2}.shift span,.shift b{display:inline;margin-right:.5rem}}

.team-today{width:100%;border-collapse:collapse;margin:1rem 0;font-variant-numeric:tabular-nums}
.person-col,.status-col,.hours-col{width:1%}
.team-today th,.team-today td{text-align:left;vertical-align:middle;border-bottom:1px solid #dce2e5;padding:.7rem clamp(1.1rem,2.8vw,1.85rem) .7rem 0}
.team-today tr>:last-child{padding-right:0}
.team-today th[scope=row] span{display:block;width:max-content;max-width:clamp(4rem,18vw,10rem)}
.team-today .hours,.status-plain,.status-active{white-space:nowrap}
.team-today th[scope=row]{overflow-wrap:anywhere}
.team-today tr>:nth-child(2),.team-today .hours{text-align:center}
.status-plain,.status-active{font-size:.78rem}
.status-active{display:inline-block;color:#236249;border:1px solid #549270;background:#e7f4ed;border-radius:1rem;padding:.15rem .35rem;font-weight:600}
@media(max-width:480px){.team-today thead{font-size:.84rem}.team-today tr>:not(:last-child){padding-right:clamp(.65rem,3vw,.95rem)}}
.team-today small{display:block;font-size:.79rem;font-weight:400;line-height:1.4}
.time-track{position:relative;height:.5rem;background:#edf0f2;overflow:hidden;border-radius:3px}
.track-bounds{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.15rem;color:#52656d;font-size:.72rem;font-weight:400}
.time-track b{position:absolute;top:0;bottom:0;background:var(--avt-blue);border-radius:3px;min-width:1px}

.clock-actions{display:flex;gap:.65rem;align-items:center}
.clock-actions button{min-height:44px;padding:.6rem 1rem;font-weight:600}
.clock-actions button[value=start],.clock-actions button[value=stop]{min-width:6rem;border-color:transparent}
.clock-actions button[value=stop]{background:#b43040}
.clock-actions button[value=pause],.clock-actions button[value=resume]{background:#edf3f7;border-color:#cfdee7;color:#3e5d71}.my-bookings .month-title,.booking-day header{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem}
.month-title{color:#193044;padding:.45rem 0;font-size:1.08rem}
.my-bookings nav{margin:.5rem 0}
.my-bookings .booking-day{background:#f5f8fa;border:1px solid #dce2e5;border-radius:12px;margin:.5rem 0;padding:.65rem .85rem}
.booking-day header{margin-bottom:.22rem}
.booking-day header strong,.month-title span{font-variant-numeric:tabular-nums}
.booking-day details,.booking-day p{margin:.22rem 0 0;padding:.3rem 0;border:0}
.booking-day summary{cursor:pointer}


.booking-tabs{display:flex;border-bottom:1px solid #dce2e5}
.booking-tabs a{display:grid;place-items:center;min-height:44px;padding:0 .8rem;color:#52656d;text-decoration:none;border-bottom:3px solid transparent}
.booking-tabs a[aria-current]{color:#065b6c;border-color:var(--avt-blue);font-weight:650}
.month-switch{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;padding:.45rem 0;text-align:center}
.month-switch small{display:block;font-variant-numeric:tabular-nums}
.month-switch .month-arrow{display:grid;place-items:center;width:44px;height:44px;border:1px solid #cfdee7;border-radius:10px;background:#edf3f7;color:#30536a}
.month-arrow::before{content:"";width:8px;height:8px;border-right:2px solid;border-top:2px solid;transform:rotate(45deg)}
.month-arrow.previous::before{transform:scaleX(-1) rotate(45deg)}
.month-switch .month-arrow:disabled{opacity:.4;cursor:default}.clock-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.clock-head{flex-wrap:wrap}
.clock-controls h2{margin:0 0 .8rem}
.clock-controls .clock-actions{margin:0;position:relative;top:6px}
.month-progress{display:grid;gap:.22rem;margin-left:auto;text-align:right;font-variant-numeric:tabular-nums}
.month-progress small{font-size:.95rem}
.clock-head .month-progress{--hours-gap:clamp(1.15rem,3vw,1.65rem)}
.clock-head .month-progress dl{column-gap:var(--hours-gap)}
.clock-head .month-progress dl>div{text-align:center}
.clock-head .month-progress dd.remaining{font-size:clamp(1.32rem,3.6vw,2.2rem)}
.clock-head .month-progress>small{font-size:.75rem}
.clock-title small{font-size:.86rem;font-weight:600;color:#52656d}
.clock-title h1{font-size:clamp(1.5rem,3vw,2rem);margin:.15rem 0 .55rem}
.clock-month{align-self:center;margin:auto;font-size:clamp(1.65rem,4.5vw,2.75rem);line-height:1.15;color:#193044}
.month-progress dl{display:flex;justify-content:flex-end;gap:clamp(.8rem,3vw,2rem);margin:.35rem 0}
.month-progress dt{font-size:.9rem;color:#52656d}
.month-progress dd{margin:.15rem 0 0;font-size:clamp(1.65rem,4.5vw,2.75rem);font-weight:700;line-height:1.15;color:#193044}
.month-progress dd.credit{color:#236249}
@media(min-width:43rem){
  .clock-head{display:grid;grid-template-columns:auto minmax(max-content,1fr) auto;column-gap:.8rem;row-gap:.22rem;align-items:center}
  .clock-controls{display:contents}
  .clock-controls h2{grid-area:1/1;margin:0}
  .clock-controls .clock-actions{grid-area:2/1}
  .clock-month{grid-area:2/2;text-align:center}
  .clock-head .month-progress{grid-area:1/3/span 3/4;display:grid;grid-template-rows:subgrid;align-self:stretch}
  .month-progress dl{grid-row:1/span 2;display:grid;grid-auto-flow:column;grid-auto-columns:max-content;grid-template-rows:subgrid;justify-self:end;gap:.22rem .8rem;margin:0}
  .month-progress dl>div{display:grid;grid-row:span 2;grid-template-rows:subgrid;align-items:center}
  .month-progress dd{margin:0}
}
.week-picker{display:flex;align-items:center;flex-wrap:wrap;gap:.8rem;margin-bottom:1rem}
.week-picker input{cursor:pointer}
.plan-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.6rem}
.plan-row>label{margin:0;min-width:0}
.plan-row input,.plan-row select,.plan-row button{height:2.65rem}
#plan-form select,.shift select{font:inherit;max-width:100%;padding:.45rem}
#plan-form [hidden]{display:none}
#series-options fieldset{margin:.5rem 0;border:1px solid #cfdee7;border-radius:8px}
#series-options fieldset label{display:inline-flex;align-items:center}
.shift summary{cursor:pointer;padding:.25rem 0}
.shift details[open] form{display:flex;flex-wrap:wrap;gap:.75rem;align-items:end;margin:.45rem 0 0}
.shift details label{margin:0;min-width:0}
.shift details input,.shift details select,.shift details button{min-height:2.6rem;max-width:100%}
.shift details button{padding:.45rem .75rem;font-size:.85rem}
.shift button[value=unplan]{color:#345267;background:#f6f8fa;border-color:#bdcbd3}
.shift-actions{display:flex;flex-wrap:wrap;gap:.5rem}
.selected-day .shift{padding:.65rem .85rem}
.selected-day .shift details[open] form{border-top:1px solid #c5d0d7;padding-top:.75rem}
@media(min-width:701px){
  .week-days .shift details[open]{position:relative;z-index:1}
  .week-days .shift details[open] form{position:absolute;left:0;width:19rem;padding:.8rem;background:white;border:1px solid #cfdee7;border-radius:8px;box-shadow:0 4px 12px #16384a22}
  .week-days .calday:nth-last-child(-n+3) .shift details[open] form{left:auto;right:0}
}
@media(max-width:700px){
  .selected-day .calday{display:block}
  .week-days .shift details[open] form{padding:.25rem 0}
}
.my-bookings details.booking-day{padding:0}
.day-toggle{display:block;list-style:none;padding:.65rem .85rem;border-radius:inherit}
.day-toggle::-webkit-details-marker{display:none}
.day-heading{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem}
.period-line,.day-toggle>small{display:block;margin-top:.25rem}
.booking-day[open]>.day-toggle>.period-line,.booking-day[open]>.day-toggle>small{display:none}
.day-toggle:hover,.day-toggle:focus-visible{background:#edf3f7}
.day-edit{padding:.6rem .85rem;border-top:1px solid #dce2e5}
.day-edit form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.6rem;margin:.4rem 0 .8rem}
.day-edit form label{margin:0;min-width:0}
.day-edit form input,.day-edit form button{height:2.65rem}
.week-picker .week-range{display:inline-flex;align-self:end;gap:0;border:1px solid #cfdee7;border-radius:8px;overflow:hidden}
.week-range a{padding:.55rem .8rem;text-decoration:none}
.week-range a[aria-current]{color:white;background:var(--avt-blue)}
.week-dates{margin:1rem 0 .45rem;font-size:.95rem;color:#30536a}
.planning-month{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.25rem}
.planning-month>b{text-align:center;font-size:.8rem}
.planning-month>a{display:block;position:relative;min-height:4rem;border:1px solid #dce2e5;background:#f5f8fa;border-radius:6px;padding:.4rem;color:#193044;text-decoration:none}
.planning-month a[aria-current]{outline:2px solid var(--avt-blue);outline-offset:-2px}
.planning-month small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.headcount{float:right;background:#dcecf0;border-radius:6px;padding:0 .25rem;font-size:.75rem}
.days.selected-day{grid-template-columns:1fr}
@media(max-width:700px){.planning-month{gap:2px}.planning-month>a{padding:.22rem;min-height:3rem}.planning-month small{display:none}.headcount{float:none;display:block;width:fit-content}}
.booking-day[open]{position:relative}
.booking-day[open]:has(.new-period){--add-period-size:3.12rem}
.booking-day[open]:has(.new-period)>.day-toggle{padding-block:.15rem}
.booking-day[open]:has(.new-period) .day-heading{min-height:var(--add-period-size);align-items:center;padding-right:calc(var(--add-period-size) + .4rem)}
.new-period>summary{position:absolute;right:.55rem;top:.15rem;display:grid;place-items:center;width:var(--add-period-size);height:var(--add-period-size);list-style:none;border-radius:6px;color:var(--avt-blue);font-size:2.738rem;line-height:1}
.new-period>summary::-webkit-details-marker{display:none}
.day-edit .new-period{padding:0;margin:0}
.remove-period>summary{font-size:.85rem;color:#8d2733}
.remove-period button{background:#8d2733}

.new-period>summary::before,.new-period>summary::after{content:"";position:absolute;inset:0;margin:auto;width:19px;height:3px;border-radius:0;background:currentColor}
.new-period>summary::after{transform:rotate(90deg)}
section.login-card{max-width:42rem;margin:1rem auto;padding:clamp(1rem,3vw,2rem)}
.login-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) auto;gap:1rem .65rem;align-items:end}
.card-logo{display:block;width:min(50%,21rem);height:auto;margin:1rem auto}
.login-form label:first-of-type{grid-column:1}
.login-form input{width:100%}
@media(max-width:38rem){.login-form{grid-template-columns:minmax(0,1fr)}}
.login-form label{margin:0;min-width:0;max-width:100%}
.login-form input,.login-form button{height:2.75rem}
.fm-logo{display:block;width:auto;height:auto;max-width:min(12rem,80%);max-height:4rem;margin:0 0 .6rem}