.availability-page{display:grid;gap:13px;min-width:0;padding-bottom:8px}
.availability-hero{
  display:grid;gap:13px;padding:17px;
  border:1px solid #222A30;border-radius:21px;
  background:linear-gradient(180deg,#101519,#0A0E11);
  box-shadow:0 14px 32px rgba(0,0,0,.13),inset 0 1px 0 rgba(255,255,255,.02)
}
.availability-hero-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.availability-hero h2{margin:2px 0 6px;font-size:24px;line-height:1.04;letter-spacing:-.7px}
.availability-hero p{margin:0;color:#87929A;font-size:10px;line-height:1.55}
.availability-mode{
  display:inline-flex;align-items:center;min-height:24px;padding:0 8px;
  border:1px solid #283138;border-radius:999px;background:#0D1215;color:#8D98A0;
  font-size:7px;font-weight:900;letter-spacing:.055em;text-transform:uppercase;white-space:nowrap
}
.availability-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.availability-overview-item{
  min-width:0;display:grid;gap:5px;padding:10px 9px;
  border:1px solid #20282E;border-radius:13px;background:#0C1114
}
.availability-overview-item span{
  min-width:0;color:#68747D;font-size:6.5px;font-weight:900;text-transform:uppercase;
  letter-spacing:.07em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.availability-overview-item b{color:#F0F3F4;font-size:16px;line-height:1;font-weight:950;font-variant-numeric:tabular-nums}

.availability-legend{display:flex;gap:7px;flex-wrap:wrap}
.availability-legend span{
  display:inline-flex;align-items:center;gap:6px;min-height:25px;padding:0 9px;
  border:1px solid #232C32;border-radius:999px;background:#0D1215;color:#909AA1;
  font-size:8px;font-weight:850
}
.availability-legend span i{width:6px;height:6px;border-radius:999px;flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.025)}
.availability-legend .available i{background:#2FC47C}
.availability-legend .limited i{background:#F2A34A}
.availability-legend .unavailable i{background:#EE6374}

.availability-departments{
  display:flex;gap:6px;overflow:auto;padding:3px;
  border:1px solid #1F272D;border-radius:16px;background:#0A0E11;
  scrollbar-width:none
}
.availability-departments::-webkit-scrollbar{display:none}
.availability-departments button{
  min-height:36px;border:0;border-radius:12px;background:transparent;color:#7C878F;
  padding:0 12px;font-size:9px;font-weight:900;white-space:nowrap
}
.availability-departments button.active{
  color:#F2F7F4;background:#151B1F;
  box-shadow:inset 0 0 0 1px #303A41
}
.availability-departments button.active:after{
  content:"";display:block;width:17px;height:2px;margin:2px auto -4px;border-radius:99px;background:#35C985
}
.availability-department-title{
  display:inline-flex;align-items:center;width:max-content;min-height:31px;
  border:1px solid #242D33;border-radius:11px;background:#0C1114;color:#8C979F;
  padding:0 10px;font-size:8px;font-weight:900;letter-spacing:.02em
}

.availability-calendar-panel{
  display:grid;gap:11px;padding:12px;
  border:1px solid #20282E;border-radius:20px;background:linear-gradient(180deg,#0C1114,#090D10);
  box-shadow:0 14px 30px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.018)
}
.availability-month-row{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:10px}
.availability-month-row b{
  text-align:center;text-transform:capitalize;color:#F0F3F5;
  font-size:12px;font-weight:950;letter-spacing:-.12px
}
.availability-month-button{
  width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;
  border-radius:13px!important;background:#0F1417!important;border-color:#293238!important;color:#D8DFE3!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018)!important
}
.availability-month-button svg{width:17px!important;height:17px!important}
.availability-month-button:active{background:#151B1F!important}

.availability-weekdays,.availability-calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.availability-weekdays{padding:1px 1px 0}
.availability-weekdays span{
  text-align:center;color:#5F6C74;font-size:7px;font-weight:900;
  letter-spacing:.055em;text-transform:uppercase
}
.availability-weekdays span:nth-child(6),.availability-weekdays span:nth-child(7){color:#79838A}

.availability-day{
  position:relative;min-width:0;aspect-ratio:.88;
  border:1px solid #222B30;border-radius:13px;background:#0D1215;color:#DCE3E7;
  padding:7px 5px 6px;display:flex;flex-direction:column;align-items:flex-start;
  justify-content:space-between;gap:4px;text-align:left;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.012);
  transition:border-color .16s ease,background .16s ease,transform .14s ease,box-shadow .16s ease
}
.availability-day:hover{border-color:#303A41;background:#10161A}
.availability-day:active{transform:scale(.975)}
.availability-day--empty{border-color:transparent;background:transparent;box-shadow:none;pointer-events:none}
.availability-day.is-weekend:not(.availability-day--empty){background:#0B1013}
.availability-day.has-data{border-color:#2A3339}
.availability-day.is-today{
  border-color:rgba(53,201,133,.55);
  box-shadow:inset 0 0 0 1px rgba(53,201,133,.10),0 0 0 1px rgba(53,201,133,.025)
}
.availability-day.is-today .availability-day-number{color:#8BE3B5}
.availability-day.is-available{
  border-color:rgba(47,196,124,.36);
  box-shadow:inset 0 -2px 0 #2FC47C,inset 0 1px 0 rgba(255,255,255,.015)
}
.availability-day.is-limited{
  border-color:rgba(242,163,74,.38);
  box-shadow:inset 0 -2px 0 #F2A34A,inset 0 1px 0 rgba(255,255,255,.015)
}
.availability-day.is-unavailable{
  border-color:rgba(238,99,116,.36);
  box-shadow:inset 0 -2px 0 #EE6374,inset 0 1px 0 rgba(255,255,255,.015)
}
.availability-day-number{font-size:10px;font-weight:950;font-variant-numeric:tabular-nums}
.availability-day-own{
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:#89949C;font-size:5.8px;line-height:1.15;font-weight:750
}
.availability-day-counts{display:flex;align-items:center;gap:3px;width:100%;min-height:14px}
.availability-count{
  min-width:14px;height:14px;border-radius:999px;display:grid;place-items:center;
  font-size:6px;font-weight:950;font-variant-numeric:tabular-nums
}
.availability-count--available{background:rgba(47,196,124,.15);color:#7DE1B0}
.availability-count--limited{background:rgba(242,163,74,.15);color:#FFC278}
.availability-count--unavailable{background:rgba(238,99,116,.15);color:#FF8E9C}
.availability-count.is-zero{
  width:5px;min-width:5px;height:5px;margin:0 3px;border-radius:999px;opacity:.34
}

.availability-help{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:10px;
  padding:12px 13px;border:1px solid #1E262C;border-radius:15px;background:#0B1013
}
.availability-help b{font-size:8px;white-space:nowrap}
.availability-help span{font-size:8px;line-height:1.5;color:#758189}

.availability-editor-date{margin:-2px 0 10px;font-size:13px;font-weight:950;text-transform:capitalize}
.availability-editor-statuses{display:grid;gap:8px}
.availability-status-choice{
  display:flex;align-items:center;gap:10px;min-height:52px;
  border:1px solid #273138;border-radius:14px;padding:10px 12px;background:#0E1316
}
.availability-status-choice input{width:18px;height:18px;margin:0;flex:none}
.availability-status-choice span{display:grid;gap:2px}
.availability-status-choice b{font-size:10px}
.availability-status-choice small{font-size:8px;color:#76828A}
.availability-status-choice.is-available input{accent-color:#2FC47C}
.availability-status-choice.is-limited input{accent-color:#F2A34A}
.availability-status-choice.is-unavailable input{accent-color:#EE6374}
.availability-status-choice.is-clear input{accent-color:#7A858C}
.availability-time-range{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 4px 2px}
.availability-time-range[hidden]{display:none!important}
.availability-editor-team{display:grid;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid #20282D}
.availability-editor-kicker{font-size:8px;font-weight:950;text-transform:uppercase;letter-spacing:.08em;color:#6F7B83}
.availability-team-list{display:grid;gap:6px}
.availability-team-row{
  display:grid;grid-template-columns:32px minmax(0,1fr) 10px;gap:9px;align-items:center;
  padding:8px 10px;border:1px solid #20282D;border-radius:13px;background:#0C1114
}
.availability-team-avatar{
  width:32px;height:32px;border-radius:10px;background:#151C20;border:1px solid #252E34;
  display:grid;place-items:center;font-size:8px;font-weight:950
}
.availability-team-main{display:grid;gap:2px;min-width:0}
.availability-team-main b{font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.availability-team-main small{font-size:7px;color:#78848C}
.availability-team-status{width:8px;height:8px;border-radius:999px;background:#3B4449}
.availability-team-status.is-available{background:#2FC47C}
.availability-team-status.is-limited{background:#F2A34A}
.availability-team-status.is-unavailable{background:#EE6374}
.availability-team-empty{font-size:8px;color:#77838B}

html[data-theme="light"] .availability-hero,
html[data-theme="light"] .availability-calendar-panel,
html[data-theme="light"] .availability-day,
html[data-theme="light"] .availability-help,
html[data-theme="light"] .availability-status-choice,
html[data-theme="light"] .availability-team-row,
html[data-theme="light"] .availability-overview-item{
  background:#FFFFFF;border-color:#DCE3E7;color:#1B2328;box-shadow:none
}
html[data-theme="light"] .availability-mode,
html[data-theme="light"] .availability-departments,
html[data-theme="light"] .availability-departments button,
html[data-theme="light"] .availability-department-title,
html[data-theme="light"] .availability-month-button{
  background:#F4F7F8!important;border-color:#D7DFE3!important;color:#344047!important
}
html[data-theme="light"] .availability-departments button.active{
  background:#E8EEEA!important;border-color:#C9D6CE!important;color:#18201B!important
}
html[data-theme="light"] .availability-overview-item span,
html[data-theme="light"] .availability-help span{color:#6D7871}
html[data-theme="light"] .availability-overview-item b,
html[data-theme="light"] .availability-month-row b{color:#172019}
html[data-theme="light"] .availability-day.is-weekend{background:#F7F9F8}
html[data-theme="light"] .availability-day.is-available{background:#FFFFFF}
html[data-theme="light"] .availability-day.is-limited{background:#FFFFFF}
html[data-theme="light"] .availability-day.is-unavailable{background:#FFFFFF}

@media(max-width:390px){
  .availability-hero{padding:14px}
  .availability-overview{gap:5px}
  .availability-overview-item{padding:8px 7px}
  .availability-calendar-panel{padding:10px}
  .availability-calendar,.availability-weekdays{gap:4px}
  .availability-day{border-radius:11px;padding:6px 3px 5px}
  .availability-day-own{font-size:5.4px}
  .availability-help{grid-template-columns:1fr;gap:4px}
}


/* Premium variant 1: three compact employee counters in every calendar day */
.availability-day-counts{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  align-items:center!important;
  justify-content:stretch!important;
  gap:2px!important;
  width:100%!important;
  min-height:15px!important
}
.availability-count{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  height:15px!important;
  margin:0!important;
  position:relative;
  display:grid!important;
  place-items:center!important;
  border:1px solid currentColor;
  border-radius:6px!important;
  background:transparent!important;
  font-variant-numeric:tabular-nums;
  line-height:1!important;
  overflow:hidden
}
.availability-count b{
  display:block;
  min-width:1ch;
  font-size:6px;
  line-height:1;
  font-weight:950;
  text-align:center;
  letter-spacing:-.02em
}
.availability-count--available{
  color:#72DBA4!important;
  border-color:rgba(47,196,124,.24)!important;
  background:rgba(47,196,124,.075)!important
}
.availability-count--limited{
  color:#F1B767!important;
  border-color:rgba(242,163,74,.24)!important;
  background:rgba(242,163,74,.07)!important
}
.availability-count--unavailable{
  color:#F18A98!important;
  border-color:rgba(238,99,116,.23)!important;
  background:rgba(238,99,116,.065)!important
}
.availability-count.is-zero{
  opacity:.42!important
}
.availability-day.is-today .availability-count{opacity:1!important}

/* Light theme cleanup for availability: no dark legend pills or black employee tiles. */
html[data-theme="light"] .availability-legend span{
  background:#F7F9F8!important;
  border-color:#D8E0DB!important;
  color:#526058!important;
  box-shadow:inset 0 1px 0 #FFFFFF!important
}
html[data-theme="light"] .availability-legend span i{
  box-shadow:0 0 0 2px rgba(17,23,20,.025)!important
}
html[data-theme="light"] .availability-team-avatar{
  background:#EEF3F0!important;
  border-color:#D2DCD5!important;
  color:#344139!important
}
html[data-theme="light"] .availability-team-status{
  background:#E8EEEA!important;
  border:1px solid #D1DAD4!important
}
html[data-theme="light"] .availability-team-status.is-available{background:#2FC47C!important;border-color:#2FC47C!important}
html[data-theme="light"] .availability-team-status.is-limited{background:#F2A34A!important;border-color:#F2A34A!important}
html[data-theme="light"] .availability-team-status.is-unavailable{background:#EE6374!important;border-color:#EE6374!important}
html[data-theme="light"] .availability-count--available{
  color:#087346!important;
  border-color:#C7E2D2!important;
  background:#EFF8F3!important
}
html[data-theme="light"] .availability-count--limited{
  color:#956313!important;
  border-color:#E7D3AA!important;
  background:#FFF8EC!important
}
html[data-theme="light"] .availability-count--unavailable{
  color:#B7354B!important;
  border-color:#EBC8CE!important;
  background:#FFF4F6!important
}
html[data-theme="light"] .availability-count.is-zero{opacity:.5!important}
html[data-theme="light"] .availability-day.is-today .availability-count{opacity:1!important}

@media(max-width:370px){
  .availability-day-counts{
    grid-template-columns:repeat(3,12px)!important;
    gap:2px!important
  }
  .availability-count{
    width:12px!important;
    min-width:12px!important;
    height:14px!important;
    border-radius:5px!important
  }
  .availability-count b{font-size:5.8px}
}