/* ===== Личный кабинет клиента (/lk/) =====
   Тот же шрифт/палитра, что и на публичном сайте (style.css грузится перед
   этим файлом), но с собственной раскладкой — боковое меню + светлый фон
   контента — чтобы сразу было видно, что это личный кабинет, а не обычная
   страница сайта и не админка (у той тёмный сайдбар). */

.lk-body {
  margin: 0;
  font-family: var(--font-main);
  background: var(--color-bg-soft);
  color: var(--color-text);
}

.lk-flash { padding: 14px 18px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; margin-bottom: 20px; }
.lk-flash--ok { background: #e3f5e8; color: #2c7a43; }
.lk-flash--err { background: #fdecea; color: #b3261e; }

/* ---- Верхняя мобильная панель (аналог admin-topbar) ---- */
.lk-topbar {
  display: none;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  background: var(--color-white);
  border-bottom: 1px solid #e2e6ef;
  position: sticky;
  top: 0;
  z-index: 40;
}
.lk-topbar__logo img { height: 28px; display: block; }
.lk-topbar__badge {
  margin-left: auto;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.lk-topbar__toggle {
  width: 32px; height: 32px;
  border: none;
  background: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.lk-topbar__toggle span { width: 22px; height: 2px; background: var(--color-navy); border-radius: 2px; }

.lk-sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(15, 23, 38, 0.45);
  z-index: 45;
}
.lk-sidebar-overlay.is-open { display: block; }

.lk-shell { display: flex; min-height: 100vh; }

.lk-sidebar {
  width: 280px;
  flex-shrink: 0;
  background: var(--color-white);
  border-right: 1px solid #e2e6ef;
  display: flex;
  flex-direction: column;
  padding: 28px 0 20px;
}
.lk-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 24px 24px;
  border-bottom: 1px solid #e2e6ef;
  margin-bottom: 20px;
}
.lk-sidebar__logo-link img { height: 26px; display: block; }
.lk-sidebar__badge {
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.lk-sidebar__close { display: none; margin-left: auto; border: none; background: none; font-size: 26px; line-height: 1; color: var(--color-text-muted); cursor: pointer; }

.lk-sidebar__company {
  padding: 0 24px 20px;
  font-weight: 700;
  color: var(--color-navy);
  font-size: 15px;
}

.lk-nav { display: flex; flex-direction: column; flex: 1; }
.lk-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  color: var(--color-text);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  border-left: 3px solid transparent;
}
.lk-nav a i { font-size: 17px; width: 18px; text-align: center; color: var(--color-text-muted); }
.lk-nav a:hover { background: var(--color-bg-soft); }
.lk-nav a.is-active { border-left-color: var(--color-accent); background: var(--color-bg-soft); color: var(--color-navy); }
.lk-nav a.is-active i { color: var(--color-accent); }

.lk-sidebar__footer { padding: 16px 24px 0; border-top: 1px solid #e2e6ef; margin-top: 16px; }
.lk-sidebar__footer a { display: flex; align-items: center; gap: 10px; color: var(--color-text-muted); text-decoration: none; font-size: 14px; font-weight: 600; }
.lk-sidebar__footer a:hover { color: var(--color-accent); }

.lk-main {
  flex: 1;
  min-width: 0;
  padding: 36px 40px 60px;
}
.lk-main h1 { font-size: 26px; margin: 0; color: var(--color-navy); }
/* Заголовок раздела и действие рядом с ним. Отступ снизу переехал сюда с h1:
   иначе кнопка справа держалась бы за верхний край, а не за строку заголовка. */
.lk-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 24px;
}

.lk-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 28px;
  margin-bottom: 24px;
  box-shadow: 0 2px 10px rgba(30, 41, 59, 0.05);
}
.lk-card h2 { font-size: 18px; margin: 0 0 16px; color: var(--color-navy); }
.lk-empty { color: var(--color-text-muted); font-size: 15px; }

/* ---- Фильтры (Заявки, Финансы) ---- */
.lk-filter-bar { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.lk-filter-bar__field { display: flex; flex-direction: column; gap: 6px; }
.lk-filter-bar__field label { font-size: 12px; font-weight: 700; color: var(--color-text-muted); }
.lk-filter-bar__field input, .lk-filter-bar__field select {
  padding: 9px 12px;
  border: 2px solid var(--color-bg-soft);
  border-radius: var(--radius-sm);
  font-family: var(--font-main);
  font-size: 14px;
  color: var(--color-navy);
  min-width: 160px;
}
.lk-filter-bar__actions { display: flex; gap: 8px; }
.btn--sm { padding: 9px 16px; font-size: 14px; }

/* ---- Таблицы (Заявки, Финансы) ---- */
.lk-table-scroll { overflow-x: auto; }
.lk-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lk-table th {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 2px solid var(--color-bg-soft);
  color: var(--color-text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}
.lk-table td { padding: 12px 14px; border-bottom: 1px solid #eef1f6; color: var(--color-text); vertical-align: top; }
.lk-table tr:last-child td { border-bottom: none; }

.lk-status { display: inline-block; padding: 4px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; background: var(--color-bg-soft); color: var(--color-text-muted); }
.lk-status--done { background: #e3f5e8; color: #2c7a43; }
.lk-status--transit { background: #fef3d9; color: #a6720c; }
.lk-status--pending { background: #e8f0fd; color: var(--color-navy); }
/* Срок действия документа. Просроченный — красным: это не «ещё один статус», а
   причина, по которой груз не выдадут. */
.lk-status--expired { background: #f8d7d4; color: #a3362a; }
.lk-status--soon { background: #f5d54a; color: #7a5a00; }

/* ---- Тарифы ---- */
.lk-tariff-component { padding: 16px 0; border-bottom: 1px solid #eef1f6; }
.lk-tariff-component:last-child { border-bottom: none; padding-bottom: 0; }
.lk-tariff-component:first-child { padding-top: 0; }
.lk-tariff-component__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.lk-tariff-component__name { font-weight: 700; color: var(--color-navy); font-size: 15px; }
.lk-tariff-component__badge { font-size: 12px; font-weight: 700; color: var(--color-text-muted); background: var(--color-bg-soft); padding: 3px 10px; border-radius: var(--radius-pill); }
.lk-tariff-component__badge--required { background: #e8f0fd; color: var(--color-navy); }
.lk-tariff-flat { font-size: 20px; font-weight: 700; color: var(--color-navy); }
.lk-table--compact th, .lk-table--compact td { padding: 8px 14px; }
.lk-table--compact { max-width: 360px; }

/* ---- Формы (Адреса, Реквизиты) — .form-row reused site-wide but style.css
   itself only defines it for .order-field/.calc-field contexts, so give
   .lk-card its own copy of the same look. ---- */
.lk-card .form-row { margin-bottom: 16px; }
.lk-card .form-row label { display: block; font-size: 13px; font-weight: 700; color: var(--color-text-muted); margin-bottom: 6px; }
.lk-card .form-row input, .lk-card .form-row textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 2px solid var(--color-bg-soft);
  border-radius: var(--radius-sm);
  font-family: var(--font-main);
  font-size: 15px;
  color: var(--color-navy);
}
.lk-form-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; }
@media (max-width: 700px) { .lk-form-grid { grid-template-columns: 1fr; } }

/* ---- Адреса ---- */
.lk-address-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #eef1f6;
}
.lk-address-row:last-child { border-bottom: none; padding-bottom: 0; }
.lk-address-row:first-child { padding-top: 0; }
.lk-address-row__label { font-weight: 700; color: var(--color-navy); font-size: 15px; margin-bottom: 4px; }
.lk-address-row__text { color: var(--color-text); font-size: 14px; }
.lk-address-row__note { color: var(--color-text-muted); font-size: 13px; margin-top: 4px; }
.lk-address-row__delete { border: none; background: none; color: var(--color-text-muted); cursor: pointer; font-size: 18px; padding: 4px; flex-shrink: 0; }
.lk-address-row__delete:hover { color: var(--color-accent); }

/* ---- Авторизация (login.php) ---- */
.lk-auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--color-bg-soft);
}
.lk-auth-box {
  width: 100%;
  max-width: 400px;
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 36px 32px;
  box-shadow: 0 10px 30px rgba(30, 41, 59, 0.08);
}
/* Логотип вдвое крупнее прежних 30px: подпись «Личный кабинет» под ним убрали,
   и он остался единственным опознавательным знаком страницы. Нижний отступ
   вырос с 8 до 24px — воздух до заголовка раньше давала как раз эта подпись. */
.lk-auth-box__logo { display: block; height: 60px; margin: 0 auto 24px; }
.lk-auth-box__badge {
  display: block;
  text-align: center;
  color: var(--color-accent);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 24px;
}
.lk-auth-box h1 { font-size: 20px; text-align: center; margin: 0 0 20px; color: var(--color-navy); }
.lk-auth-box .hint { font-size: 13px; color: var(--color-text-muted); margin-top: 8px; text-align: center; }
.lk-auth-box .form-row { margin-bottom: 16px; }
.lk-auth-box .form-row label { display: block; font-size: 13px; font-weight: 700; color: var(--color-text-muted); margin-bottom: 6px; }
.lk-auth-box .form-row input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 2px solid var(--color-bg-soft);
  border-radius: var(--radius-sm);
  font-family: var(--font-main);
  /* Общий кегль полей сайта. На телефоне 15px к тому же вызывал автозум iOS —
     страница дёргалась при попадании в поле логина. */
  font-size: 16px;
  color: var(--color-navy);
}
.lk-code-input {
  width: 100%;
  text-align: center;
  font-size: 28px;
  letter-spacing: 12px;
  padding: 14px;
  border: 2px solid var(--color-bg-soft);
  border-radius: var(--radius-sm);
  font-family: var(--font-main);
}
.lk-blocked-message {
  background: #fdecea;
  color: #b3261e;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 14px;
  text-align: center;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .lk-topbar { display: flex; }
  .lk-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 280px;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 50;
    overflow-y: auto;
  }
  .lk-sidebar.is-open { transform: translateX(0); }
  .lk-sidebar__close { display: block; }
  .lk-main { padding: 24px 18px 40px; }
}

/* ---- Контактные лица ---- */
/* Строка контакта: поля в ряд, корзина сбоку. Сетка, а не флекс, — колонки у
   всех строк обязаны совпадать по ширине, иначе список читается ступенькой. */
.lk-contact-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #eef1f6;
}
.lk-contact-row:first-child { padding-top: 0; }
.lk-contact-row:last-of-type { border-bottom: none; }
.lk-contact-row__fields {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.3fr 1fr;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.lk-contact-row__fields .form-row { margin: 0; }
/* Почта, которой вошли в кабинет: менять её здесь нельзя, и поле должно
   выглядеть иначе, чем остальные, — иначе непонятно, почему не печатается. */
.lk-contact-row input[readonly] { background: #f4f5f8; color: var(--color-text-muted); }
.lk-contact-row__self {
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
  padding: 0 4px 10px;
  flex-shrink: 0;
}
.lk-contact-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.lk-hint { color: var(--color-text-muted); font-size: 14px; line-height: 1.5; margin: 0 0 16px; }
.lk-form-error { color: #b3261e; font-size: 14px; margin: 0 0 12px; }
.lk-form-ok { color: #177a3e; font-size: 14px; margin: 0 0 12px; }
/* На узком экране поля контакта встают колонкой: четыре инпута в строку на
   телефоне превращаются в четыре щели. */
@media (max-width: 900px) {
  .lk-contact-row { align-items: flex-start; }
  .lk-contact-row__fields { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .lk-contact-row__fields { grid-template-columns: 1fr; }
}

/* Пояснение у подписи поля в кабинете — тем же тоном, что «необязательно» в
   форме заказа: это подсказка, а не часть названия. */
.lk-label-note { font-weight: 400; color: #7a8699; font-size: 13px; }