/* Выход в выходной за двойную оплату и доп. часы (v521, 04.11.2026).
   Пометка в клетке графика, форма заявки, карточка с шагами, история документов. */

/* Пометка смены: ×2 — в выходной за двойную, +N — доп. часы. */
.sg-xtag {
  position: absolute; right: -6px; bottom: -6px; display: inline-grid; place-items: center;
  min-width: 15px; height: 14px; padding: 0 3px; border-radius: 7px; box-sizing: border-box;
  font-size: 8.5px; font-style: normal; font-weight: 850; line-height: 1; color: #fff;
  box-shadow: 0 0 0 1.5px var(--surface-card, #fff); z-index: 1;
}
.sg-xtag.is-double { background: #be185d; }
.sg-xtag.is-over { background: #0f766e; }
.sg-xtag.is-demo { position: static; margin-right: 6px; box-shadow: none; vertical-align: 1px; }
.sg-w .sg-xtag, .sg-pill .sg-xtag { position: static; margin-left: 6px; box-shadow: none; vertical-align: 1px; }
.sg-cell-main .sg-xtag { position: static; margin-left: 8px; box-shadow: none; }
.sch-cal-day, .pf-cal-cell { position: relative; }
.sch-cal-day .sg-xtag, .pf-cal-cell .sg-xtag { right: 2px; bottom: 2px; }
.sg-tot small { display: block; color: #be185d; font-size: 10px; font-weight: 800; line-height: 1.1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sg-tot small { color: #f9a8d4; } }
:root[data-theme="dark"] .sg-tot small { color: #f9a8d4; }

/* Окна: своя ширина и отступы, как у остальных окон портала. */
dialog:has(.ew-card) { width: min(560px, 94vw); }
dialog:has(.ew-registry) { width: min(820px, 94vw); }
.ew-form, .ew-card, .ew-registry { padding: 20px 22px; box-sizing: border-box; }
dialog form.ew-form { padding: 20px 22px; }

/* Форма заявки. */
.ew-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; width: 100%; }
.ew-form > * { min-width: 0; }
.ew-form h2 { margin: 0; }
.ew-form .hint { margin: 0; }
.ew-field { display: grid; gap: 6px; font-size: 13px; color: var(--text-soft, #51627e); }
.ew-field input, .ew-field select, .ew-field textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
.ew-how { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-hover, #f3f7fb); font-size: 13px; line-height: 1.45; }
.ew-kind {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px;
  margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 13px;
  background: color-mix(in srgb, #be185d 9%, var(--surface-card, #fff));
}
.ew-kind.is-overtime { background: color-mix(in srgb, #0f766e 10%, var(--surface-card, #fff)); }
.ew-kind span { color: var(--muted); }
.ew-kind b { font-weight: 800; }
.ew-times { display: grid; gap: 8px; }
.ew-times .sed-time input { max-width: 100%; }
.ew-seg { justify-self: start; }
.ew-summary { margin: 0; font-size: 13px; line-height: 1.45; }
.ew-summary.is-warn { color: var(--state-crit, #b42318); }
.ew-doc { border: 1px solid var(--line, #e4e9f0); border-radius: 10px; padding: 8px 12px; font-size: 13px; }
.ew-doc summary { cursor: pointer; color: var(--text-soft, #51627e); line-height: 1.4; }
.ew-doc[open] { display: grid; gap: 8px; }
.ew-doc[open] summary { margin-bottom: 2px; }
.ew-note { margin: 0; padding: 8px 10px; border-radius: 10px; font-size: 13px; line-height: 1.4; }
.ew-note.is-wait { background: var(--state-warn-bg, #fdf3e0); color: var(--state-warn, #96660d); }
.ew-note.is-no { background: var(--state-crit-bg, #fdecec); color: var(--state-crit, #b42318); }
.ew-to { display: grid; gap: 6px; margin: 0; padding: 8px 12px 12px; border: 1px solid var(--line, #e4e9f0); border-radius: 10px; }
.ew-to legend { padding: 0 4px; font-size: 13px; color: var(--text-soft, #51627e); }
.ew-to input { width: 100%; box-sizing: border-box; }

/* Карточка заявки. */
.ew-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; width: 100%; }
.ew-card > * { min-width: 0; }
.ew-card header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 2px 10px; }
.ew-card header small { grid-column: 1 / -1; color: var(--muted); font-size: 12px; font-weight: 700; }
.ew-card header h2 { margin: 0; }
.ew-who { margin: 0; font-size: 13px; }
.ew-info { display: grid; gap: 4px; margin: 0; font-size: 13px; }
.ew-info > div { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 8px; }
.ew-info dt { color: var(--muted); }
.ew-info dd { margin: 0; overflow-wrap: anywhere; }
.ew-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ew-step { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; font-size: 13px; line-height: 1.4; }
.ew-step > i {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface-hover, #f3f7fb); color: var(--muted); font-size: 12px; font-style: normal; font-weight: 800;
}
.ew-step.is-now > i { background: var(--brand); color: #fff; }
.ew-step.is-done > i { background: var(--state-ok-bg, #e4f6ef); color: var(--state-ok, #0f7a5f); }
.ew-step.is-wait { color: var(--muted); }
.ew-step .hint { margin: 4px 0 0; }
.ew-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ew-files { margin-top: 0; }
.ew-upload { position: relative; overflow: hidden; cursor: pointer; }
.ew-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.ew-upload:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }

/* История документов и списки. */
.ew-profile { display: grid; gap: 14px; }
.ew-start { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.ew-start h2 { margin: 0 0 4px; font-size: 16px; }
.ew-start p { margin: 0; max-width: 620px; }
.ew-group .xr-card, .ew-attention .xr-card, .ew-employee .xr-card { grid-template-columns: 92px minmax(0, 1fr); }
.ew-empty { margin: 4px 0 2px; }
.ew-row .loan-who small { display: block; }
.ew-head-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ew-employee { display: grid; gap: 6px; margin-top: 14px; }
.ew-employee > h2 { margin: 0; font-size: 18px; }
.ew-employee > p { margin: 0 0 6px; }
.ew-employee-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 14px; padding: 0 !important; background: none !important; }

/* Документы сотрудников за месяц. */
.ew-registry { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; width: 100%; }
.ew-registry > * { min-width: 0; }
.ew-registry h2 { margin: 0; }
.ew-registry-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ew-registry-bar .pf-cal-nav { display: inline-flex; align-items: center; gap: 8px; }
.ew-registry-bar .pf-cal-nav b { min-width: 118px; text-align: center; font-size: 14px; }
.ew-registry-list { display: grid; max-height: min(60vh, 560px); overflow: auto; }

/* Кнопка под календарём в профиле и в карточке дня. */
.pf-cal-action { margin: 8px 0 0; }
.ew-day-action { margin: 0 0 10px; }

@media (max-width: 640px) {
  .ew-info > div { grid-template-columns: 104px minmax(0, 1fr); }
  .ew-group .xr-card, .ew-attention .xr-card, .ew-employee .xr-card { grid-template-columns: minmax(0, 1fr); }
  .ew-start .primary { width: 100%; }
}

@media print {
  .sg-xtag { color: #000; background: none !important; box-shadow: none; font-size: 8px; }
}