@media (max-width:720px){
  .vac-cal-inner{ min-width:0; }
  .vac-cal-scroll{ margin:0; padding:0; overflow-x:visible; }
  .vac-cal-header{ flex-wrap:wrap; gap:8px; margin-bottom:12px; }
  .vac-cal-title{ min-width:0; flex:1 1 auto; font-size:14px; }
  .vac-cal-spacer{ display:none; }
  .vac-cal-weekdays{
    padding:0 0 6px; font-size:9px; letter-spacing:0; text-align:center;
  }
  .vac-day-cell{
    min-height:68px; padding:4px 2px 4px;
  }
  .vac-day-num{ font-size:11px; line-height:16px; height:16px; }
  .vac-day-num.is-today{ width:18px; height:16px; }
  .vac-day-occupancy{ font-size:8px; height:12px; }
  .vac-day-bars-space{ height:calc(var(--lanes, 1) * 18px); }
  .vac-week-bars{ top:22px; grid-auto-rows:18px; }
  .vac-bar{
    margin:0 1px; padding:1px 3px; height:15px;
    font-size:8.5px; gap:2px;
  }
  .vac-bar-dot{ width:4px; height:4px; }
  .vac-legend{ gap:10px 14px; margin-top:12px; padding-top:10px; }
  .vac-legend-item{ font-size:11px; }
}

.vac-cal-weekdays{
  display:grid; grid-template-columns:repeat(7,1fr);
  padding:0 0 8px 5px; font-size:10.5px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--text-faint);
}

.vac-cal-grid{
  border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden;
  background:var(--bg-card-2);
}
.vac-simple-grid{
  display:grid; grid-template-columns:repeat(7,1fr);
  border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden;
}
.vac-simple-grid .vac-day-cell{
  min-height:104px; border-right:1px solid var(--border); border-bottom:1px solid var(--border);
}
.vac-day-items{ display:flex; flex-direction:column; gap:3px; min-height:45px; margin-top:3px; overflow:hidden; }
.vac-day-item{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  border-radius:5px; padding:2px 4px; font-size:9.5px; font-weight:700;
}
.vac-day-item.status-pending{ background:rgba(251,191,36,.25); color:var(--amber); }
.vac-day-item.status-approved{ background:rgba(52,211,153,.2); color:var(--green); }
.vac-day-item.status-rejected{ background:rgba(248,113,113,.18); color:var(--red); text-decoration:line-through; }
.vac-review-card{ margin-bottom:20px; }
.vac-week{ position:relative; border-bottom:1px solid var(--border); }
.vac-week:last-child{ border-bottom:none; }
.vac-week-cells{ display:grid; grid-template-columns:repeat(7,1fr); }
.vac-day-cell{
  border-right:1px solid var(--border); padding:6px 5px 6px;
  display:flex; flex-direction:column;
  background:var(--bg-card);
  min-height:92px;
}
.vac-day-cell:last-child{ border-right:none; }
.vac-day-cell.is-muted{ opacity:.45; background:rgba(15,12,24,.55); }
.vac-day-cell:nth-child(7n){ border-right:none; }
.vac-day-num{ font-size:12px; line-height:18px; height:18px; font-weight:700; color:var(--text-heading); }
.vac-day-num.is-today{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:18px; border-radius:50%; background:var(--pink); color:#fff;
}
.vac-day-bars-space{ flex-shrink:0; height:calc(var(--lanes, 1) * 21px); }
.vac-day-overflow{ height:13px; font-size:9.5px; font-weight:700; color:var(--text-faint); text-align:right; }
.vac-day-occupancy{ height:14px; font-family:var(--font-mono); font-size:9.5px; font-weight:700; color:var(--text-faint); text-align:right; }
.vac-day-occupancy.is-near, .vac-day-occupancy.is-full{ color:var(--amber); }

.vac-week-bars{
  position:absolute; left:0; right:0; top:24px;
  display:grid; grid-template-columns:repeat(7,1fr);
  grid-auto-rows:21px;
  pointer-events:none;
}
.vac-bar{
  pointer-events:auto; cursor:pointer;
  margin:0 3px; padding:2px 8px; height:18px; align-self:start;
  min-width:0; border:0; font:inherit;
  border-radius:3px; font-size:10.5px; font-weight:700; color:#0b0913;
  display:flex; align-items:center; gap:5px; overflow:hidden; white-space:nowrap;
}
.vac-bar.round-l{ border-top-left-radius:9px; border-bottom-left-radius:9px; }
.vac-bar.round-r{ border-top-right-radius:9px; border-bottom-right-radius:9px; }
.vac-bar-dot{ width:5px; height:5px; border-radius:50%; background:currentColor; flex-shrink:0; }
.vac-bar-label{ overflow:hidden; text-overflow:ellipsis; }
.vac-bar.status-pending{ background:rgba(251,191,36,.88); }
.vac-bar.status-approved{ background:rgba(52,211,153,.88); color:#04231a; }
.vac-bar.status-rejected{ background:rgba(248,113,113,.55); color:#3a0d0d; text-decoration:line-through; }
.vac-bar.status-cancelled{ background:rgba(138,131,163,.32); color:var(--text-muted); text-decoration:line-through; }

.vac-legend{ display:flex; flex-wrap:wrap; gap:16px; margin-top:16px; padding-top:14px; border-top:1px solid var(--border-soft); }
.vac-legend-item{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-muted); }
.vac-legend-dot{ width:9px; height:9px; border-radius:3px; display:inline-block; flex-shrink:0; }
.vac-legend-dot.status-pending{ background:var(--amber); }
.vac-legend-dot.status-approved{ background:var(--green); }
.vac-legend-dot.status-rejected{ background:var(--red); }
.vac-legend-dot.status-cancelled{ background:var(--text-faint); }

.vac-sidebar{ display:flex; flex-direction:column; gap:16px; }
.vac-today-label{ font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--text-faint); }
.vac-today-date{ font-size:15.5px; font-weight:800; color:var(--text-heading); margin-bottom:14px; }
.vac-today-list{ display:flex; flex-direction:column; gap:8px; max-height:420px; overflow-y:auto; }
.vac-today-row{ padding:10px 12px; border-radius:10px; background:var(--bg-card-2); border:1px solid var(--border-soft); }
.vac-today-row-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:4px; }
.vac-today-row-head > :first-child{ min-width:0; }
.vac-today-row .nickname{ font-size:13px; }
.vac-today-row-dates{ font-size:11px; color:var(--text-muted); font-family:var(--font-mono); }

/* --- модалка "Новый отпуск": поле периода + встроенный мини-календарь --- */
.vac-period-trigger{
  width:100%; display:flex; align-items:center; gap:10px;
  background:var(--bg-input); border:1px solid var(--border); border-radius:10px;
  padding:11px 13px; color:var(--text-heading); font-size:13.5px; font-weight:600;
  cursor:pointer; text-align:left;
}
.vac-period-trigger:hover{ border-color:var(--border-strong); }
.vac-period-trigger .chev{ margin-left:auto; color:var(--text-muted); flex-shrink:0; }
.vac-period-days{ font-size:11.5px; color:var(--text-faint); margin-top:6px; }

.vac-mini-cal{ margin-top:10px; background:var(--bg-card-2); border:1px solid var(--border); border-radius:12px; padding:12px; }
.vac-mini-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.vac-mini-head b{ font-size:12.5px; color:var(--text-heading); }
.vac-mini-grid{
  display:grid; grid-template-columns:repeat(7,1fr); gap:0; text-align:center;
  border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--bg-card);
}
.vac-mini-wd{
  font-size:9.5px; color:var(--text-faint); padding:6px 0;
  border-right:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg-card-2);
}
.vac-mini-wd:nth-child(7n){ border-right:none; }
.vac-mini-day{
  appearance:none; min-width:0; border:0; border-radius:0;
  border-right:1px solid var(--border); border-bottom:1px solid var(--border);
  background:var(--bg-card); box-shadow:none;
  font-size:12px; padding:8px 0; cursor:pointer; color:var(--text-body);
}
.vac-mini-day:nth-child(7n){ border-right:none; }
.vac-mini-day:hover{ background:var(--bg-hover); }
.vac-mini-day.is-muted{ color:var(--text-faint); opacity:.4; }
.vac-mini-day.is-today{ font-weight:800; color:var(--accent-light); }
.vac-mini-day.in-range{ background:var(--accent-soft); }
.vac-mini-day.range-start{ background:var(--accent); color:#fff; border-radius:6px 0 0 6px; }
.vac-mini-day.range-end{ background:var(--accent); color:#fff; border-radius:0 6px 6px 0; }
.vac-mini-day.range-start.range-end{ border-radius:6px; }
.vac-mini-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:10px; }

.vac-slots-list{
  display:flex; flex-direction:column; gap:4px; max-height:140px; overflow-y:auto;
  background:var(--bg-input); border:1px solid var(--border); border-radius:10px; padding:8px 10px;
}
.vac-slot-row{ display:flex; justify-content:space-between; font-size:12px; color:var(--text-body); font-family:var(--font-mono); }
.vac-slot-row .is-near, .vac-slot-row .is-full{ color:var(--amber); font-weight:700; }

@media (max-width:560px){
  .vac-today-date{ font-size:14px; }
}

/* =============================================================================
   Модальные окна
   ============================================================================= */
.modal-overlay{
  position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center;
  background:rgba(6,5,12,.68); padding:16px; backdrop-filter:blur(2px);
  overflow:auto; box-sizing:border-box; overscroll-behavior:contain;
}
.modal-dialog{
  width:min(440px, 100%); max-width:100%; max-height:min(92dvh, 100%);
  overflow-x:hidden; overflow-y:auto; box-sizing:border-box;
  background:var(--bg-card); border:1px solid var(--border-soft);
  border-radius:var(--radius-lg); padding:30px 28px; box-shadow:var(--shadow-pop);
  position:relative; margin:auto; flex-shrink:0; min-width:0;
}
/* Чтобы кастомный DropMenu не обрезался краем модалки */
.modal-dialog .ui-select{ z-index:2; }
.modal-dialog .ui-select.is-open{ z-index:30; }
.modal-dialog.wide{ width:min(600px, 100%); max-width:100%; }
.modal-dialog.xl{ width:min(980px, 100%); max-width:100%; }
.modal-dialog.editor{ width:min(1008px, 100%); max-width:100%; }
.role-checklist-compact{ max-height:none; }
.perm-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px;
}
@media (max-width:820px){
  .perm-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:560px){
  .perm-grid{ grid-template-columns:1fr; }
}
.modal-dialog .form-row-2{ min-width:0; }
@media (max-width:720px){
  .modal-dialog .form-row-2{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .modal-overlay{ padding:10px; align-items:flex-start; }
  .modal-dialog{
    padding:20px 14px; max-height:none;
  }
  .modal-dialog h2{ font-size:17px; padding-right:28px; }
  .modal-actions{ flex-wrap:wrap; }
  .modal-actions .btn{ flex:1 1 auto; min-width:120px; }
}
.perm-card{
  border:1px solid var(--border); border-radius:10px;
  background:var(--bg-input); padding:10px 12px;
  display:flex; flex-direction:column; gap:8px; min-height:100%;
}
.perm-card-title{
  font-size:12.5px; font-weight:700; color:var(--text-heading); line-height:1.3;
}
.perm-card-flags{ display:flex; flex-direction:column; gap:4px; }
.perm-flag,
.field .perm-flag{
  display:flex; align-items:center; gap:8px;
  font-size:12px; font-weight:600; letter-spacing:0; text-transform:none;
  color:var(--text-body); cursor:pointer; margin:0;
}
.perm-flag.muted{ color:var(--text-muted); cursor:default; font-weight:500; }
/* Редактор текстов: поле Markdown шире (+20%) и выше (+10%) */
.modal-dialog.editor .mde-textarea,
.modal-dialog.editor .mde-preview{
  min-height:238px;
  max-height:607px;
}
.modal-dialog h2{ font-size:19px; text-align:center; margin-bottom:4px; }
.modal-sub{ text-align:center; color:var(--text-muted); font-size:12px; margin-bottom:18px; }
.modal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }
.modal-close{
  position:absolute; top:14px; right:14px;
}
.profile-gate-overlay{
  z-index:320;
  pointer-events:auto;
}
button.linkish{
  background:none; border:0; padding:0; color:var(--accent-light);
  cursor:pointer; font:inherit; text-decoration:underline;
}

/* --- модалка подтверждения (замена confirm()/alert() для удаления и т.п.) --- */
.confirm-overlay{ z-index:340; }
.confirm-modal{ max-width:420px; text-align:center; }
.confirm-modal h2{ margin-bottom:8px; }
.confirm-icon{
  width:52px; height:52px; margin:0 auto 14px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  background:var(--red-soft); color:var(--red);
}
.confirm-icon svg{ width:22px; height:22px; }
.confirm-icon.confirm-icon-neutral{ background:var(--accent-soft); color:var(--accent-light); }
.confirm-modal .error-text{ text-align:center; }
.confirm-modal .modal-sub{ margin-bottom:8px; line-height:1.45; }

/* --- окно личного кабинета (вход/регистрация), стиль по референсу --- */
.auth-modal-overlay{
  background-image:
    linear-gradient(180deg, rgba(8,6,15,.92) 0%, rgba(8,6,15,.96) 55%, rgba(8,6,15,.99) 100%);
  background-size:cover; background-position:center;
}
.auth-card{ width:100%; max-width:400px; }
.auth-seal-wrap{ display:flex; justify-content:center; margin-bottom:14px; }
.auth-seal{
  width:64px; height:64px; border-radius:50%; flex-shrink:0;
  border:1.5px dashed var(--accent-light);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.auth-seal::before{
  content:''; position:absolute; inset:5px; border-radius:50%;
  border:1px solid var(--border-strong);
}
.auth-seal span{ font-weight:800; font-size:16px; color:var(--text-heading); letter-spacing:.5px; }
.auth-title{ text-align:center; font-size:21px; margin-bottom:3px; }
.auth-sub{
  text-align:center; font-size:10.5px; color:var(--text-muted);
  letter-spacing:.12em; text-transform:uppercase; margin-bottom:22px;
}
.auth-divider{ display:flex; align-items:center; gap:10px; margin:18px 0 16px; color:var(--text-faint); font-size:11px; }
.auth-divider::before, .auth-divider::after{ content:''; flex:1; height:1px; background:var(--border); }