/* ============================================================================
   Green Doors — единый дизайн-слой (полировка всего интерфейса).
   Подключается во все точки входа: base.html, employee_portal.html, login.html.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --gd-dark:   #174D2E;
  --gd-mid:    #26804A;
  --gd-light:  #4CAF72;
  --gd-bg:     #eef4f1;
  --gd-ink:    #1c2b24;
  --gd-muted:  #6c7d75;
  --gd-border: #e6ece8;

  --gd-radius:    14px;
  --gd-radius-sm: 10px;

  --gd-shadow-sm: 0 1px 2px rgba(23,77,46,.05), 0 2px 6px rgba(23,77,46,.06);
  --gd-shadow:    0 4px 16px rgba(23,77,46,.09);
  --gd-shadow-lg: 0 14px 36px rgba(23,77,46,.16);
}

* { -webkit-tap-highlight-color: transparent; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--gd-ink);
  background: var(--gd-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.003em;
}

h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.01em; }

/* ── Карточки ──────────────────────────────────────────────────────────────── */
.card {
  border: 1px solid var(--gd-border);
  border-radius: var(--gd-radius);
  box-shadow: var(--gd-shadow-sm);
  transition: box-shadow .22s ease, transform .22s ease;
}
.card.shadow-sm { box-shadow: var(--gd-shadow-sm) !important; }
.card.shadow    { box-shadow: var(--gd-shadow) !important; }
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--gd-border);
  font-weight: 600;
  padding-top: .85rem;
  padding-bottom: .85rem;
}
/* Метрика-карточки на дашборде/аналитике слегка приподнимаются */
.card.border-0:hover { transform: translateY(-2px); box-shadow: var(--gd-shadow); }

/* ── Кнопки ────────────────────────────────────────────────────────────────── */
.btn {
  border-radius: var(--gd-radius-sm);
  font-weight: 500;
  transition: transform .12s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s;
}
.btn:active { transform: translateY(1px); }
.btn-lg { border-radius: 12px; padding: .7rem 1.4rem; }
.btn-success { background-color: var(--gd-mid); border-color: var(--gd-mid); }
.btn-success:hover, .btn-success:focus { background-color: var(--gd-dark); border-color: var(--gd-dark); }
.btn-success:focus { box-shadow: 0 0 0 .2rem rgba(38,128,74,.3); }
.btn-outline-success { color: var(--gd-mid); border-color: var(--gd-mid); }
.btn-outline-success:hover { background-color: var(--gd-mid); border-color: var(--gd-mid); }
.btn-primary:hover { box-shadow: 0 4px 12px rgba(38,128,74,.28); }

/* ── Поля ввода ────────────────────────────────────────────────────────────── */
.form-control, .form-select {
  border-radius: var(--gd-radius-sm);
  border-color: var(--gd-border);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus {
  border-color: var(--gd-light);
  box-shadow: 0 0 0 .2rem rgba(76,175,114,.22);
}
.form-label { font-weight: 500; color: #41514a; }

/* ── Таблицы ───────────────────────────────────────────────────────────────── */
.table { --bs-table-hover-bg: #f3f9f5; }
.table > thead th {
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gd-muted);
  font-weight: 600;
  border-bottom: 2px solid var(--gd-border);
  white-space: nowrap;
}
.table > tbody td { vertical-align: middle; }
.table-hover > tbody > tr { transition: background-color .12s ease; }

/* ── Бейджи / пилюли ───────────────────────────────────────────────────────── */
.badge { font-weight: 600; letter-spacing: .01em; padding: .4em .65em; border-radius: 7px; }

/* ── Модалки ───────────────────────────────────────────────────────────────── */
.modal-content {
  border: none;
  border-radius: var(--gd-radius);
  box-shadow: var(--gd-shadow-lg);
  overflow: hidden;
}
.modal-header { border-bottom: 1px solid var(--gd-border); }
.modal-footer { border-top: 1px solid var(--gd-border); }

/* ── Списки ────────────────────────────────────────────────────────────────── */
.list-group-item { border-color: var(--gd-border); }
.list-group-flush > .list-group-item { transition: background-color .12s ease; }
.list-group-flush > .list-group-item:hover { background: #f6faf8; }

/* ── Скроллбар ─────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c6d4cc; border-radius: 8px; border: 2px solid var(--gd-bg); }
::-webkit-scrollbar-thumb:hover { background: #aabfb2; }

/* ── Тосты (showToast из app.js) ───────────────────────────────────────────── */
.gd-toast-wrap {
  position: fixed; top: 18px; right: 18px; z-index: 11000;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
.gd-toast {
  pointer-events: auto;
  min-width: 240px; max-width: 380px;
  padding: 13px 16px; border-radius: 12px;
  background: #fff; color: var(--gd-ink);
  box-shadow: var(--gd-shadow-lg);
  border-left: 4px solid var(--gd-mid);
  display: flex; align-items: center; gap: 11px;
  font-size: .93rem; font-weight: 500;
  animation: gd-toast-in .26s cubic-bezier(.2,.8,.2,1);
}
.gd-toast i { font-size: 1.15rem; color: var(--gd-mid); flex-shrink: 0; }
.gd-toast.error      { border-left-color: #dc3545; }
.gd-toast.error i    { color: #dc3545; }
.gd-toast.warn       { border-left-color: #f0ad22; }
.gd-toast.warn i     { color: #f0ad22; }
.gd-toast.hide { animation: gd-toast-out .25s ease forwards; }
@keyframes gd-toast-in  { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes gd-toast-out { to { opacity: 0; transform: translateX(24px); } }

@media (max-width: 575px) {
  .gd-toast-wrap { top: auto; bottom: 16px; left: 12px; right: 12px; }
  .gd-toast { min-width: 0; max-width: none; }
}

/* ── Плавное появление контента ────────────────────────────────────────────── */
@keyframes gd-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
main { animation: gd-fade-in .3s ease; }

/* ── Пустые состояния ──────────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 2.6rem 1rem; color: var(--gd-muted); }
.empty-state .bi { font-size: 2.6rem; opacity: .35; display: block; margin-bottom: .5rem; }

/* Уважение к prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── Тёмная тема: адаптируем переменные дизайн-слоя ───────────────────────────
   Подключается последним, поэтому именно здесь правильно переопределять
   --gd-* (иначе светлые значения перебивают настройки темы). */
[data-bs-theme="dark"] {
  --gd-bg:     #15181c;
  --gd-ink:    #e6e6e6;
  --gd-muted:  #9aa3ad;
  --gd-border: #2a2f37;
}
[data-bs-theme="dark"] body { background: var(--gd-bg); color: var(--gd-ink); }
[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6 { color: var(--gd-ink); }
[data-bs-theme="dark"] .card { background-color: #1e2228; }
[data-bs-theme="dark"] .card-header { border-bottom-color: var(--gd-border); }
[data-bs-theme="dark"] .table {
  --bs-table-hover-bg: #232830;
  --bs-table-hover-color: #e6e6e6;
  --bs-table-striped-bg: #1c2025;
  --bs-table-striped-color: #e6e6e6;
}
[data-bs-theme="dark"] .form-label { color: #c2cbd3; }
[data-bs-theme="dark"] .gd-toast { background: #1e2228; color: var(--gd-ink); }
[data-bs-theme="dark"] .list-group-flush > .list-group-item:hover { background: #232830; }
[data-bs-theme="dark"] .empty-state { color: var(--gd-muted); }
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb { background: #39414c; border-color: var(--gd-bg); }