/* Sprint 5 polish (2026-05-10): резервируем место под bootstrap-icons glyph.
   До загрузки font-а width=0 → после загрузки width≈1em → горизонтальный
   layout shift всех соседей. min-width: 1em заранее резервирует слот. */
.bi { display: inline-block; min-width: 1em; }

/* components.css — shared component primitives extracted from counselor PWA.
 *
 * Sprint 5 Phase A foundation. Primitives admin pages can consume:
 *   .glass-card / .glass-card--alert / --accent / --success / --warning
 *   .kpi-bar    / .kpi-cell / .kpi-value / .kpi-label / .kpi-meta
 *   .section-divider
 *   .btn-accent / .btn-ghost / .btn-danger-outline
 *   .dol-modal-overlay / .dol-modal
 *
 * Naming rule: prefix admin-shared classes with NO prefix or `dol-`. The
 * `ca-*` prefix stays in counselor-app.css (counselor-only). When a Phase B
 * agent migrates a screen they should reach for the unprefixed primitive
 * here first, fall back to a `dol-*` modal class second, and only define
 * a page-specific class as a last resort.
 *
 * Tokens come from design-tokens.css — never hard-code colors / sizes here.
 */

/* ─── Glass card ────────────────────────────────────────────────────────
 * Counselor-style 2026 dark glassmorphism card. Used as the canonical
 * container for "section of facts" on detail pages and dashboards.
 * Source: counselor-app.css:509-549 (`.ca-glass`). */
.glass-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 14px 16px;
  margin-bottom: 8px;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color var(--d-fast) var(--ease-standard),
              box-shadow var(--d-fast) var(--ease-standard);
}
.glass-card:last-child { margin-bottom: 0; }

[data-bs-theme="dark"] .glass-card {
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* 2026-06-21: ЕДИНАЯ карточка списочной таблицы — один переиспользуемый стиль
   для ростера / медпункта / персонала (раньше у каждого был свой: .card.border-0
   vs .glass-card vs .table-wrap — разные бордер/радиус/тень → строки «не
   одинаковые» при переключении, таблицы на разном отступе). Применяется к
   контейнеру таблицы; таблица — прямой/вложенный потомок, без своего паддинга.
   БЕЗ !important (2026-06-21 тех-долг): в шаблонах убраны конфликтующие
   .card/.glass-card; единственный пересекающийся класс — .table-wrap (staff)
   scope'нут на :not(.dol-table-card) в sessions-staff.css. */
.dol-table-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  margin-top: 12px;
}
[data-bs-theme="dark"] .dol-table-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
/* Колонка «#» во всех .dol-table-card — единый ЛЕВЫЙ отступ перед номером.
   Центрирование давало разный левый зазор для 1- vs 3-значных номеров (3-значный
   «204» прижимался к краю); левое выравнивание даёт одинаковый отступ «перед
   цифрами» независимо от длины числа и страницы. БЕЗ !important: выигрывает по
   специфичности (0,2,2) у per-page правил ростера/медпункта; у staff (равная
   специфичность) per-page-правило больше НЕ задаёт align/padding (только width).
   На мобиле # скрыт — не влияет. */
.dol-table-card table th:first-child,
.dol-table-card table td:first-child {
  text-align: left;
  white-space: nowrap;
  padding-left: 11px;
  padding-right: 2px;
}

/* Title lockup — uppercase muted label commonly placed at the top of a glass card */
.glass-card-title {
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--muted);
  margin-bottom: 8px;
}

/* Variants — borrowed from counselor `.ca-glass--alert` plus a few new ones */
.glass-card--accent {
  background: var(--accent-dim);
  border-color: rgba(99, 102, 241, 0.25);
}
.glass-card--accent .glass-card-title { color: var(--accent); }

.glass-card--success {
  background: var(--green-dim);
  border-color: rgba(16, 185, 129, 0.25);
}
.glass-card--success .glass-card-title { color: var(--green); }

.glass-card--warning {
  background: var(--yellow-dim);
  border-color: rgba(245, 158, 11, 0.30);
}
.glass-card--warning .glass-card-title { color: var(--yellow); }

.glass-card--alert {
  background: var(--red-dim);
  border-color: rgba(239, 68, 68, 0.25);
}
.glass-card--alert .glass-card-title { color: var(--red); }

/* Backdrop-blur variant — opt-in: heavier paint cost, but matches the
 * counselor sticky-plaque aesthetic. Only use over a textured background
 * (page bg with image / colored gradient). */
.glass-card--blur {
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ─── KPI bar ───────────────────────────────────────────────────────────
 * Generalized from counselor `.ca-kpi-bar` / `.ca-kpi-cell`. Stage 1's
 * roster page uses `.rv-kpi-card` directly (a different layout — a grid
 * of cards). The `.kpi-bar` / `.kpi-cell` here is a *flex row* of cells
 * with internal dividers. Phase B agents can pick either; the two never
 * collide. Source: counselor-app.css:201-273. */
.kpi-bar {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.kpi-cell {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 2px 6px;
  border-right: 1px solid var(--border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--d-fast) var(--ease-standard);
  min-width: 0;
}
.kpi-cell:last-child { border-right: none; }
.kpi-cell:active { background: var(--surface2); }
.kpi-cell.kpi-cell--static { cursor: default; }
.kpi-cell.kpi-cell--static:active { background: transparent; }

.kpi-value {
  font-size: var(--fs-kpi);
  font-weight: var(--fw-black);
  font-family: var(--font-mono);
  line-height: 1;
}
/* legacy alias for counselor markup that tested in admin context */
.kpi-cell .kv { font-size: var(--fs-kpi); font-weight: var(--fw-black); font-family: var(--font-mono); line-height: 1; }

.kpi-label {
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--muted);
  margin-top: 3px;
}
.kpi-cell .kl { font-size: var(--fs-micro); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--muted); margin-top: 3px; }

.kpi-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 5px 0 0;
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
}
.kpi-meta .km { opacity: 0.65; }
.kpi-meta .km b {
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
}

/* Sticky variant for dashboards — matches counselor `.ca-summary-plaque` */
.kpi-bar--sticky {
  position: sticky;
  top: var(--topbar-height, 54px);
  z-index: 20;
}

/* ─── Section divider ──────────────────────────────────────────────────
 * Thin line + uppercase muted label centred on top. Used between groups
 * of items: «Заехали», «Не заехали», «Выехали».
 * Source: counselor-app.css:275-285 (`.ca-section-divider`). */
.section-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 2px;
}
.section-divider-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}
.section-divider-label {
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--muted);
  white-space: nowrap;
}

/* Top-of-page section divider — bare line with a label flush left.
 * Used on admin dashboard / list pages to chunk content. */
.section-divider--start {
  margin-top: 24px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

/* ─── Buttons ───────────────────────────────────────────────────────────
 * Bootstrap's `.btn-primary` is already mapped to `--accent` in base.html.
 * These add the counselor variants we don't already have. Source:
 * counselor-app.css:93-107. */
.btn-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: #4f52d3;
  --bs-btn-hover-border-color: #4f52d3;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #4f52d3;
  --bs-btn-active-border-color: #4f52d3;
  --bs-btn-active-color: #fff;
}
.btn-accent:hover { filter: brightness(1.06); }

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  --bs-btn-color: var(--muted);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--border);
  --bs-btn-hover-color: var(--text);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: var(--muted);
  --bs-btn-active-color: var(--text);
  --bs-btn-active-bg: var(--surface2);
  --bs-btn-active-border-color: var(--muted);
}
.btn-ghost:hover { color: var(--text); border-color: var(--muted); }
.btn-ghost:active { background: var(--surface2); }

.btn-danger-outline {
  background: transparent;
  border: 1px solid rgba(239, 68, 68, 0.45);
  color: var(--red);
  --bs-btn-color: var(--red);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: rgba(239, 68, 68, 0.45);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--red);
  --bs-btn-hover-border-color: var(--red);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--red);
  --bs-btn-active-border-color: var(--red);
}

/* Counselor-style tactile feedback on .btn-accent: press → opacity */
.btn-accent:active,
.btn-ghost:active,
.btn-danger-outline:active { opacity: 0.85; }

/* ─── Modal (dol-modal — admin/shared) ──────────────────────────────────
 * Slide-up + bounce mobile-first modal. Reserved for new screens; existing
 * Bootstrap-modals stay untouched until each screen is migrated.
 * Source: counselor-app.css:820-870 (`.ca-modal-overlay` / `.ca-modal`). */
.dol-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 1050;
  align-items: flex-end;
  justify-content: center;
  padding: env(safe-area-inset-top, 0) 12px 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
}
.dol-modal-overlay.show {
  display: flex;
  animation: dol-modal-overlay-in var(--d-normal) var(--ease-standard);
}

@keyframes dol-modal-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.dol-modal {
  width: 100%;
  max-width: 480px;
  max-height: 85dvh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 20px 22px;
  box-shadow: var(--shadow-lg);
  animation: dol-modal-in var(--d-normal) var(--ease-bounce);
}

@keyframes dol-modal-in {
  from { transform: translateY(28px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* On wide screens, center the modal instead of bottom-sheet. */
@media (min-width: 768px) {
  .dol-modal-overlay {
    align-items: center;
    padding-bottom: 12px;
  }
  .dol-modal {
    border-radius: var(--radius-2xl);
  }
}

.dol-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.dol-modal-header .dol-modal-x { flex-shrink: 0; }
.dol-modal-header .dol-modal-title { margin-bottom: 0; flex: 1; min-width: 0; }
.dol-modal-title {
  font-size: 17px;
  font-weight: var(--fw-bold);
  margin-bottom: 8px;
  letter-spacing: -0.2px;
}

.dol-modal-sub {
  font-size: var(--fs-body);
  color: var(--muted);
  line-height: 1.45;
  margin-bottom: 16px;
}

.dol-modal-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 14px;
}

/* Close button (replaces Bootstrap .btn-close which inverts in dark theme) */
.dol-modal-x {
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--d-fast) var(--ease-standard),
              background var(--d-fast) var(--ease-standard);
}
.dol-modal-x:hover { color: var(--text); background: var(--border); }


/* ─────────────────────────────────────────────────────────────────────
   Avatar — counselor-style gendered background, AvatarHydrator-friendly.
   Sprint 5 polish 2026-05-11 (D9). Используется в admin children/profile,
   потенциально в roster и других admin-страницах. Counselor PWA продолжает
   использовать .ca-avatar (отдельный mobile scope, не трогаем).
   ───────────────────────────────────────────────────────────────────── */
.dol-avatar {
  --avatar-size: 40px;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
  font-size: calc(var(--avatar-size) * 0.36);
  line-height: 1;
  background: rgba(100, 116, 139, 0.18);
  color: var(--muted);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  user-select: none;
  /* lightbox-вариант рендерится как <button> — сбрасываем дефолтные
     стили браузера (3D-бевел давал «полукруг» на тёмном фоне). */
  border: 0;
  padding: 0;
  margin: 0;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  box-shadow: none;
  text-align: center;
  vertical-align: middle;
  cursor: inherit;
}
button.dol-avatar { cursor: pointer; }
.dol-avatar:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.dol-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.dol-avatar.dol-avatar--md { --avatar-size: 48px; }
.dol-avatar.dol-avatar--lg { --avatar-size: 64px; }
.dol-avatar.dol-avatar--xl { --avatar-size: 80px; }

.dol-avatar.gender-m {
  background: rgba(59, 130, 246, 0.18);
  color: var(--blue);
}
.dol-avatar.gender-f {
  background: rgba(168, 85, 247, 0.18);
  color: var(--purple);
}

.dol-avatar.has-photo,
.dol-avatar.has-photo-fill {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.dol-avatar.has-photo.lightbox-clickable {
  cursor: zoom-in;
  transition: transform var(--d-fast) var(--ease-standard),
              box-shadow var(--d-fast) var(--ease-standard);
}
.dol-avatar.has-photo.lightbox-clickable:hover {
  transform: scale(1.05);
  box-shadow: 0 0 0 3px var(--accent);
}


/* ─────────────────────────────────────────────────────────────────────
   Name block — типографика для admin профилей в counselor-стиле.
   Sprint 5 polish 2026-05-11 (D9, F3-B).
   ───────────────────────────────────────────────────────────────────── */
.dol-name-block {
  flex: 1;
  min-width: 0;
}
.dol-name-line1 {
  font-size: var(--fs-page-title);
  font-weight: var(--fw-bold);
  letter-spacing: -0.3px;
  margin: 0;
  line-height: 1.2;
}
.dol-name-line2 {
  font-size: var(--fs-caption);
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.4;
  /* Намеренно НЕ flex — на mobile inline text перекладывается естественно. */
}
.dol-name-line2 .gender-m { color: var(--blue); font-weight: var(--fw-bold); }
.dol-name-line2 .gender-f { color: var(--purple); font-weight: var(--fw-bold); }
.dol-name-line3 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.dol-name-line3 a,
.dol-name-line3 button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}
.dol-name-line3 a:focus-visible,
.dol-name-line3 button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}


/* ─────────────────────────────────────────────────────────────────────
   Chip — социальный статус, badge'и, mini-info.
   Sprint 5 polish 2026-05-11 (D13'). Outline-стиль нейтральный.
   ───────────────────────────────────────────────────────────────────── */
.dol-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: var(--fs-tiny);
  font-weight: var(--fw-medium);
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--muted);
  white-space: nowrap;
}
.dol-chip--accent {
  background: var(--accent-dim);
  border-color: rgba(99, 102, 241, 0.30);
  color: var(--accent);
}
.dol-chip--green {
  background: var(--green-dim);
  border-color: rgba(16, 185, 129, 0.30);
  color: var(--green);
}
.dol-chip--yellow {
  background: var(--yellow-dim);
  border-color: rgba(245, 158, 11, 0.30);
  color: var(--yellow);
}
.dol-chip--red {
  background: var(--red-dim);
  border-color: rgba(239, 68, 68, 0.30);
  color: var(--red);
}

/* ─── Photo lightbox ────────────────────────────────────────────────────
 * Full-screen photo viewer для admin страниц (/medical visit modal и т.д.).
 * Идея и стиль зеркалят nurse PWA `.nurse-photo-lightbox` — единый язык
 * между admin и PWA. Click anywhere / Esc → close.
 * Применяется когда avatar имеет `data-on-ready="lightbox"` — после
 * AvatarHydrator swap'а на <img>, click открывает viewer с src = url-2x
 * (lg вариант) для максимального качества.
 */
.photo-lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 9999;
  display: none;
  align-items: center; justify-content: center;
  padding: 16px;
  cursor: zoom-out;
  -webkit-tap-highlight-color: transparent;
}
.photo-lightbox.show { display: flex; }
.photo-lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 8px 48px rgba(0,0,0,0.6);
  pointer-events: none;
}
.photo-lightbox-close {
  position: absolute;
  top: max(16px, env(safe-area-inset-top, 0));
  right: max(16px, env(safe-area-inset-right, 0));
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.photo-lightbox-close:hover { background: rgba(255,255,255,0.25); }
/* Лок скролла фона под лайтбоксом. 2026-06-20: body несёт scrollbar-gutter:stable
   (critical-admin.css) — он НЕ активен при обычном overflow, но overflow:hidden
   делает body scroll-container → gutter активируется и резервирует ~15px → контент
   уезжает вправо (и обратно при закрытии лайтбокса). Снимаем резерв на время лока
   (scrollbar-gutter:auto) → сдвига нет. Покрывает все лайтбоксы (roster/medical/nurse). */
body.lightbox-open { overflow: hidden; scrollbar-gutter: auto; }

/* Тот же механизм, что у лайтбоксов, — для всех остальных scroll-lock'ов:
   1) Bootstrap-модалки: Bootstrap сам вешает `.modal-open` (+ overflow:hidden) на
      body; из-за `scrollbar-gutter:stable` (design-tokens/critical-admin) при этом
      активируется gutter и весь контент прыгает вправо на ~15px. Снимаем резерв.
   2) `body.scroll-locked` — общий класс для «сырых» lock'ов в ванильном JS
      (children-profile.js, counselor PWA) вместо `body.style.overflow='hidden'`.
   Единый приём на все три механизма — эталон `lightbox-open` не трогаем. */
body.modal-open { scrollbar-gutter: auto; }
body.scroll-locked { overflow: hidden; scrollbar-gutter: auto; }

/* ── Skeleton shimmer (shared) ──────────────────────────────────────────
   Общая база для loading-плейсхолдеров: ростер (.roster-skel-*) и заявки
   (.req-skel) делят одну shimmer-систему (DRY, eng-review D1 2026-06-18).
   Высоту/форму задаёт потребитель, чтобы skeleton совпадал с реальной строкой
   (CLS-safe). Раньше жила в roster.css. */
@keyframes kdol-shimmer {
  0%   { background-position: -340px 0; }
  100% { background-position:  340px 0; }
}
.skel {
  display: inline-block;
  background-color: var(--bs-tertiary-bg);
  background-image: linear-gradient(90deg,
    rgba(255,255,255,0) 0,
    rgba(255,255,255,.06) 45%,
    rgba(255,255,255,.10) 50%,
    rgba(255,255,255,.06) 55%,
    rgba(255,255,255,0) 100%);
  background-size: 340px 100%;
  background-repeat: no-repeat;
  animation: kdol-shimmer 1.1s linear infinite;
  border-radius: 6px;
  vertical-align: middle;
}
.skel-line { height: 11px; }

/* ── Photo source sheet (DolPhotoPicker) ─────────────────────────────
 * Bottom-sheet chooser «Сделать фото / Из галереи» for admin-shell pages.
 * Anchored to the bottom on mobile, centered card on desktop. */
.dol-photo-sheet-overlay {
  position: fixed; inset: 0; z-index: 1090;
  background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
  opacity: 0; transition: opacity 0.15s ease;
}
.dol-photo-sheet-overlay.show { opacity: 1; }
.dol-photo-sheet {
  width: 100%; max-width: 420px;
  display: flex; flex-direction: column; gap: 8px;
  transform: translateY(12px); transition: transform 0.15s ease;
}
.dol-photo-sheet-overlay.show .dol-photo-sheet { transform: translateY(0); }
.dol-photo-sheet-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 14px 16px;
  font-size: var(--fs-body, 15px); font-weight: var(--fw-semibold, 600);
  color: var(--text, #1a1a1a);
  background: var(--surface, #fff); border: 1px solid var(--border, #dee2e6);
  border-radius: 12px; cursor: pointer;
}
.dol-photo-sheet-btn:hover { background: var(--surface2, #f4f4f5); }
.dol-photo-sheet-ico { font-size: 20px; line-height: 1; }
.dol-photo-sheet-cancel { color: var(--muted, #6b7280); font-weight: var(--fw-medium, 500); }
@media (min-width: 640px) {
  .dol-photo-sheet-overlay { align-items: center; }
}