/* ============================================================
   GLASSMORPHISM LAYER — «Liquid Glass» в стиле Apple
   Подключается ПОСЛЕ style.css и переопределяет ключевые
   поверхности экранов Владельца и Сотрудника.
   ============================================================ */

:root{
  --glass-bg: rgba(255,255,255,.55);
  --glass-bg-strong: rgba(255,255,255,.72);
  --glass-border: rgba(255,255,255,.65);
  --glass-border-soft: rgba(255,255,255,.4);
  --glass-shadow: 0 10px 30px rgba(12,40,80,.16), inset 0 1px 0 rgba(255,255,255,.55);
  --glass-blur: blur(18px) saturate(125%);
  --glass-blur-strong: blur(26px) saturate(135%);
}

/* ---------- Сдержанный, строгий фон под стеклом ---------- */
#screen-employee.screen,
#screen-manager.screen,
#screen-pending.screen{
  background:
    radial-gradient(circle at 18% 4%,  rgba(96,122,155,.16) 0%, rgba(96,122,155,0) 42%),
    radial-gradient(circle at 88% 96%, rgba(80,100,130,.12) 0%, rgba(80,100,130,0) 46%),
    linear-gradient(170deg, #f1f3f6 0%, #e9ecf1 55%, #eef0f4 100%) !important;
  background-attachment: fixed;
}

/* лёгкое свечение сверху, чтобы стекло читалось */
#screen-employee.screen::before,
#screen-manager.screen::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 50% -12%, rgba(255,255,255,.28), rgba(255,255,255,0) 55%);
}
#screen-employee.screen > *,
#screen-manager.screen > *{position:relative;z-index:1;}

/* ---------- Общий стеклянный вид карточек ---------- */
.task-card,
.emp-card,
.stat-card,
.stats-strip,
.position-card,
.setting-item,
.branch-card,
.invite-block,
.instr-block{
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-soft) !important;
  box-shadow: var(--glass-shadow) !important;
}
/* тонкая полоска статистики — стеклянная, разделитель светлее */
.stats-strip .stat-divider{ background: rgba(60,90,130,.14) !important; }

/* поля фильтров истории оставляем ПЛОТНО-белыми (чёткие углы, без размытия) */
.filter-field{
  background: rgba(255,255,255,.9) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* верхний блик на карточках-«стекле» */
.task-card, .emp-card, .stat-card{position:relative;}
.task-card::after, .emp-card::after, .stat-card::after{
  content:"";position:absolute;left:0;right:0;top:0;height:45%;
  background:linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0));
  pointer-events:none;border-radius:inherit;
}
.task-card > *, .emp-card > *, .stat-card > *{position:relative;z-index:1;}

/* выполненная задача — зеленоватое стекло */
.task-card.done{
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(230,247,238,.6)) !important;
  border-color: rgba(31,175,90,.35) !important;
}

/* ховер/нажатие — чуть плотнее и приподнято */
.task-card:active, .emp-card:active{
  box-shadow: 0 14px 36px rgba(12,40,80,.2), inset 0 1px 0 rgba(255,255,255,.6) !important;
}

/* ---------- Шапки экранов ---------- */
.app-header.manager-header,
.employee-header,
.emp-header,
.pending-header{
  background: linear-gradient(140deg, #37485f 0%, #2a3852 50%, #212d40 100%) !important;
  -webkit-backdrop-filter: var(--glass-blur-strong);
  backdrop-filter: var(--glass-blur-strong);
  box-shadow: 0 8px 26px rgba(10,25,50,.28), inset 0 -1px 0 rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* ---------- Полупрозрачные внутренние блоки ---------- */
.instr-block{ background: rgba(255,255,255,.5) !important; }
.photo-target{
  background: rgba(240,234,252,.6) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* прогресс-дорожки чуть прозрачнее */
.progress-bar-track,
.emp-mini-progress{ background: rgba(20,60,110,.12) !important; }

/* полоса прогресса и контекст-бар сотрудника — стекло */
.progress-bar-wrap{
  background: rgba(255,255,255,.55) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border-soft) !important;
}
/* карточка ожидания должности */
.pending-card{
  background: var(--glass-bg-strong) !important;
  -webkit-backdrop-filter: var(--glass-blur-strong);
  backdrop-filter: var(--glass-blur-strong);
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}

/* ---------- Селекты/инпуты на стеклянных экранах ---------- */
#screen-manager .branch-select,
#screen-manager .date-input,
#screen-manager .search-input{
  background-color: rgba(255,255,255,.7) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-color: var(--glass-border-soft) !important;
}

/* ---------- Модальные окна — плотное стекло ---------- */
.modal{
  background: var(--glass-bg-strong) !important;
  -webkit-backdrop-filter: var(--glass-blur-strong);
  backdrop-filter: var(--glass-blur-strong);
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 24px 60px rgba(6,30,60,.3), inset 0 1px 0 rgba(255,255,255,.6) !important;
}
.modal-overlay{
  background: rgba(10,25,45,.45) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* ---------- Кнопки-«чипы» и мелочи получают лёгкое стекло ---------- */
.stat-icon{filter: drop-shadow(0 2px 4px rgba(0,0,0,.08));}

/* Fallback: если backdrop-filter не поддерживается — делаем фон плотнее */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .task-card,.emp-card,.stat-card,.position-card,.setting-item,
  .branch-card,.invite-block,.modal{
    background: rgba(255,255,255,.92) !important;
  }
}