/* UI-компоненты «Книги дат». Стиль «жидкое стекло» (как в проде), но цвет, радиусы
   и шрифты тянутся ТОЛЬКО из токенов theme.css — тему меняем там, не здесь.
   Прозрачные белые блики — это «материал стекла», а не бренд-цвет, поэтому литералы.
   Состояния заданы всем интерактивным элементам: покой / наведение / нажатие / фокус /
   ошибка / выключено (см. design/design-system.md §4). */

/* ========== Кнопка ========== */
/* Главная и вторичная ВИЗУАЛЬНО ОДИНАКОВЫ — иерархию даёт расположение, не цвет (§4, §6 #4). */
.ui-btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  padding:15px 32px;border:none;cursor:pointer;
  border-radius:var(--radius-control);
  font-family:var(--serif);font-weight:600;font-size:1rem;line-height:1;
  color:#fff;text-decoration:none;text-align:center;
  text-shadow:0 1px 3px rgba(0,0,0,.20), 0 0 10px rgba(255,255,255,.06);
  background:transparent;
  background-image:linear-gradient(180deg,
    rgba(255,255,255,.05) 0%, rgba(255,255,255,.005) 60%, rgba(255,255,255,.03) 100%);
  backdrop-filter:blur(var(--blur)) saturate(1.4);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.4);
  filter:drop-shadow(0 12px 18px rgba(185,200,232,.085)) drop-shadow(0 6px 6px rgba(18,26,50,.055));
  box-shadow:
    inset 0 -8px 12px -2px rgba(150,165,195,.075),
    inset 0 10px 12px -3px rgba(255,255,255,.18),
    inset 0 0 0 1.5px rgba(255,255,255,.09);
  transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, filter .4s ease;
}
.ui-btn::before{ /* блик-полумесяц на поверхности */
  content:"";position:absolute;top:3px;left:6%;right:6%;height:42%;pointer-events:none;
  border-radius:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.015) 90%, transparent 100%);
}
.ui-btn > *{position:relative;z-index:1}
.ui-btn--full{width:100%}
.ui-btn:hover{
  transform:translateY(-4px) scale(1.02);
  filter:drop-shadow(0 20px 25px rgba(185,200,232,.115)) drop-shadow(0 10px 12px rgba(18,26,50,.065));
  box-shadow:
    inset 0 -6px 12px -2px rgba(150,165,195,.085),
    inset 0 14px 16px -2px rgba(255,255,255,.21),
    inset 0 0 0 1.5px rgba(255,255,255,.14);
}
.ui-btn:active{
  transform:translateY(1px) scale(.99);
  filter:drop-shadow(0 6px 8px rgba(185,200,232,.3)) drop-shadow(0 3px 4px rgba(18,26,50,.2));
  box-shadow:
    inset 0 -10px 14px -2px rgba(150,165,195,.45),
    inset 0 6px 10px -4px rgba(255,255,255,.6);
}
.ui-btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.ui-btn:disabled,.ui-btn[aria-disabled="true"]{
  cursor:not-allowed;opacity:.45;filter:grayscale(.4);
  transform:none;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.06);
}

/* ========== Поле формы (input / select) ========== */
.ui-field{display:block;text-align:left;margin-bottom:var(--space-3)}
.ui-field__label{
  display:block;margin-bottom:var(--space-1);
  font-family:var(--serif);font-weight:600;font-size:.95rem;color:var(--blue-deep);
}
.ui-field__req{color:#e0607a}  /* красная звёздочка «обязательно» - как везде на сайте (.calc .req) */
.ui-field__control{
  width:100%;padding:14px 16px;font-family:var(--serif);font-size:1.02rem;
  color:var(--ink);background:var(--field-bg);
  border:1px solid var(--line);border-radius:var(--radius-control);
  color-scheme:dark;
}
.ui-field__control::placeholder{color:var(--ink-dim)}
.ui-field__control:focus{outline:2px solid var(--accent);border-color:var(--accent)}
select.ui-field__control{
  cursor:pointer;appearance:none;-webkit-appearance:none;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23aab4d2' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
select.ui-field__control option{background:#101935;color:var(--ink)}
select.ui-field__control option:checked{background:var(--list-hi)}
select.ui-field__control option:disabled{color:var(--ink-dim)}
/* Состояние ошибки: рамка акцентно-тревожная + подпись под полем */
.ui-field.is-error .ui-field__control{border-color:var(--danger);outline-color:var(--danger)}
.ui-field__error{margin-top:var(--space-1);font-size:.9rem;font-weight:600;color:var(--danger)}

/* ========== Карточка / плашка ========== */
.ui-card{
  position:relative;padding:var(--space-4) 28px;border-radius:var(--radius-card);
  background:linear-gradient(180deg, rgba(11,17,36,.92) 0%, rgba(8,12,26,.90) 100%);
  border:1px solid var(--glass-edge);
  backdrop-filter:blur(var(--blur)) saturate(1.15);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.15);
  box-shadow:var(--shadow-card),
    inset 0 -8px 18px -14px rgba(150,165,195,.22),
    inset 0 0 0 1px rgba(255,255,255,.05);
}
.ui-card__title{font-family:var(--serif);font-size:1.2rem;color:var(--ink);margin-bottom:var(--space-2)}
.ui-card__body{color:var(--ink-muted)}
.ui-card__body > :last-child{margin-bottom:0}
.ui-card__footer{margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--line)}
/* Наведение — только если карточка кликабельна. Некликабельная не реагирует. Не «жмётся». */
.ui-card--interactive{cursor:pointer;transition:transform .2s ease, box-shadow .2s ease}
.ui-card--interactive:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 40px -14px rgba(18,26,50,.55),
    inset 0 0 0 1px rgba(255,255,255,.08);
}

/* ========== Таблица ========== */
.ui-table-wrap{
  overflow-x:auto;border-radius:var(--radius-card);
  border:1px solid var(--glass-edge);background:linear-gradient(180deg, rgba(11,17,36,.92), rgba(8,12,26,.90));
}
.ui-table{width:100%;border-collapse:collapse;font-size:.95rem;color:var(--ink)}
.ui-table th,.ui-table td{padding:14px 18px;text-align:left}
.ui-table thead th{
  font-family:var(--serif);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-muted);border-bottom:1px solid var(--line);
}
.ui-table tbody tr{border-top:1px solid var(--line)}
.ui-table tbody tr:first-child{border-top:none}
.ui-table tbody tr:hover{background:rgba(140,161,226,.06)}
.ui-table td.num{font-family:var(--mono);color:var(--accent-deep)}

/* ========== Диалог (нативный <dialog>) ========== */
.ui-dialog{
  width:min(92vw, 460px);padding:0;border:none;color:var(--ink);
  background:transparent;border-radius:var(--radius-card);
}
.ui-dialog::backdrop{background:rgba(6,9,20,.6);backdrop-filter:blur(3px)}
.ui-dialog__panel{
  padding:28px;border-radius:var(--radius-card);
  background:linear-gradient(180deg, rgba(11,17,36,.96) 0%, rgba(8,12,26,.96) 100%);
  border:1px solid var(--glass-edge);
  box-shadow:0 24px 60px -18px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.05);
}
.ui-dialog__title{font-family:var(--serif);font-size:1.3rem;margin-bottom:var(--space-3)}
.ui-dialog__body{color:var(--ink-muted);margin-bottom:var(--space-4)}
.ui-dialog__actions{display:flex;gap:var(--space-2);justify-content:flex-end}

/* ========== Выпадающее меню ========== */
.ui-dropdown{position:relative;display:inline-block}
.ui-dropdown__menu{
  position:absolute;top:calc(100% + 8px);left:0;z-index:40;min-width:212px;
  display:flex;flex-direction:column;gap:2px;padding:10px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);
  box-shadow:0 16px 40px rgba(0,0,0,.55);
}
.ui-dropdown__menu[hidden]{display:none}
.ui-dropdown__item{
  position:relative;display:block;width:100%;text-align:left;
  padding:10px 14px 10px 28px;border:none;background:none;cursor:pointer;
  font-family:var(--serif);font-size:.95rem;color:var(--ink);text-decoration:none;
  border-radius:10px;
}
.ui-dropdown__item::before{
  content:"";position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--accent);
}
.ui-dropdown__item:hover{background:rgba(140,161,226,.14)}
.ui-dropdown__item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* §5 — уважаем prefers-reduced-motion: гасим переходы и смещения, оставляем функцию */
@media (prefers-reduced-motion: reduce){
  .ui-btn, .ui-card--interactive{transition:none}
  .ui-btn:hover, .ui-btn:active, .ui-card--interactive:hover{transform:none}
}

/* ============================================================
   ДНЕВНОЙ РЕЖИМ (data-theme="day"): хардкод-стекло было тёмным с
   белым текстом — на светлом фоне переводим на белое стекло и
   тёмные чернила. Токены (цвет/радиус/шрифт) уже даёт theme.css.
   ============================================================ */
[data-theme="day"] .ui-btn{
  color:#1d294a;
  text-shadow:0 1px 1px rgba(255,255,255,.6);
  background-color:color-mix(in srgb, var(--accent) 10%, rgba(255,255,255,.45));
  background-image:linear-gradient(180deg,
    rgba(255,255,255,.85) 0%, rgba(255,255,255,.18) 45%, color-mix(in srgb, var(--accent) 9%, rgba(244,246,250,.42)) 100%);
  filter:
    drop-shadow(0 12px 20px rgba(100,110,130,.20))
    drop-shadow(0 4px 8px rgba(100,110,130,.14));
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,1),
    inset 0 -10px 16px -6px rgba(120,130,150,.22),
    inset 0 0 0 1.5px rgba(255,255,255,.6),
    0 0 0 1px rgba(120,130,150,.20);
}
[data-theme="day"] .ui-btn::before{
  display:block;
  background:linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.12) 90%, transparent 100%);
}
[data-theme="day"] .ui-btn:hover{
  filter:
    drop-shadow(0 18px 28px rgba(100,110,130,.24))
    drop-shadow(0 8px 12px rgba(100,110,130,.16));
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,1),
    inset 0 -10px 16px -6px rgba(120,130,150,.26),
    inset 0 0 0 1.5px rgba(255,255,255,.75),
    0 0 0 1px rgba(120,130,150,.24);
}
[data-theme="day"] .ui-btn:active{
  filter:drop-shadow(0 6px 10px rgba(100,110,130,.22));
  box-shadow:
    inset 0 2px 8px rgba(120,130,150,.30),
    inset 0 0 0 1.5px rgba(255,255,255,.55),
    0 0 0 1px rgba(120,130,150,.22);
}
[data-theme="day"] .ui-card,
[data-theme="day"] .ui-table-wrap,
[data-theme="day"] .ui-dialog__panel{
  background:#ffffff;
  border:1px solid rgba(40,64,120,.10);
  box-shadow:0 10px 28px -16px rgba(40,64,120,.20);
}
[data-theme="day"] .ui-card--interactive:hover{
  box-shadow:0 14px 34px -16px rgba(40,64,120,.26), inset 0 0 0 1px rgba(40,64,120,.12);
}
[data-theme="day"] .ui-field__control{ color-scheme:light; }
[data-theme="day"] select.ui-field__control{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2356638a' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
}
[data-theme="day"] select.ui-field__control option{ background:#ffffff; color:var(--ink); }
[data-theme="day"] .ui-table tbody tr:hover,
[data-theme="day"] .ui-dropdown__item:hover{ background:rgba(40,64,120,.07); }
[data-theme="day"] .ui-dialog::backdrop{ background:rgba(40,64,120,.28); }