/* =============================================================================
   Eesti Valuuta Terminal — визуальный стиль в духе "ВКонтакте 2010"
   Плотная сетка, синяя шапка, белые панели с тонкой рамкой, аккуратные кнопки.
   ============================================================================= */

:root {
  --header-blue-1: #6C93BF;
  --header-blue-2: #3F6D9E;
  --header-blue-3: #2C4F79;
  --accent-blue: #5B7FA6;
  --accent-blue-dark: #4A6D94;
  --link-blue: #2B587C;
  --link-blue-hover: #1B3F5C;
  --bg-page: #E7EBEE;
  --panel-bg: #FFFFFF;
  --panel-bg-alt: #F2F5F7;
  --border-color: #C7D1DA;
  --border-color-dark: #A9B7C3;
  --text-main: #2B333A;
  --text-muted: #6C7A86;
  --green: #4A8F4A;
  --green-bg: #EAF4EA;
  --red: #B23B3B;
  --red-bg: #FBEAEA;
  --yellow: #9C7A1E;
  --yellow-bg: #FBF3DD;
  --radius: 4px;
  --font-main: Tahoma, Verdana, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-page);
  color: var(--text-main);
  font-family: var(--font-main);
  font-size: 13px;
  line-height: 1.45;
}

a { color: var(--link-blue); text-decoration: none; }
a:hover { color: var(--link-blue-hover); text-decoration: underline; }

button, input, select, textarea { font-family: var(--font-main); font-size: 13px; }

/* --- Кнопки --------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--accent-blue-dark);
  background: linear-gradient(to bottom, #7EA2C8, var(--accent-blue-dark));
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
}
.btn:hover { background: linear-gradient(to bottom, #8CAED2, #3F5F82); text-decoration: none; }
.btn:active { background: var(--accent-blue-dark); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn-secondary {
  background: var(--panel-bg-alt);
  color: var(--link-blue);
  border: 1px solid var(--border-color-dark);
  font-weight: normal;
}
.btn-secondary:hover { background: #E4E9ED; }

.btn-danger {
  background: linear-gradient(to bottom, #D08484, #A94A4A);
  border-color: #8C3A3A;
}
.btn-danger:hover { background: linear-gradient(to bottom, #D89393, #973F3F); }

.btn-small { padding: 3px 9px; font-size: 12px; }
.btn-block { display: block; width: 100%; }

/* --- Шапка ------------------------------------------------------------------ */
.topbar {
  background: linear-gradient(to bottom, var(--header-blue-1), var(--header-blue-3));
  border-bottom: 2px solid var(--header-blue-3);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px;
  gap: 10px;
  flex-wrap: wrap;
}
.topbar .brand { display: flex; align-items: center; gap: 8px; font-weight: bold; font-size: 15px; }
.topbar .brand img { height: 28px; width: 28px; display: block; }
.topbar .brand span { text-shadow: 0 1px 1px rgba(0,0,0,0.25); }
.topbar-right { display: flex; align-items: center; gap: 10px; }

.lang-switch { display: flex; gap: 4px; }
.lang-switch button {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  padding: 3px 7px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 11px;
}
.lang-switch button.active { background: #fff; color: var(--header-blue-3); font-weight: bold; }

.topbar a.logout-link { color: #E4ECF4; font-size: 12px; }

/* --- Общий каркас страницы ------------------------------------------------- */
.app-shell { display: flex; max-width: 980px; margin: 12px auto; gap: 12px; padding: 0 10px; }

.sidebar {
  width: 190px;
  flex-shrink: 0;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  overflow: hidden;
  align-self: flex-start;
}
.sidebar nav a, .sidebar nav button.nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: none;
  border-bottom: 1px solid var(--border-color);
  background: var(--panel-bg);
  color: var(--link-blue);
  cursor: pointer;
  font-size: 13px;
}
.sidebar nav a:last-child, .sidebar nav button.nav-link:last-child { border-bottom: none; }
.sidebar nav a:hover, .sidebar nav button.nav-link:hover { background: var(--panel-bg-alt); text-decoration: none; }
.sidebar nav a.active, .sidebar nav button.nav-link.active { background: var(--accent-blue); color: #fff; font-weight: bold; }
.nav-badge {
  margin-left: auto;
  background: var(--red);
  color: #fff;
  border-radius: 9px;
  font-size: 11px;
  padding: 0 6px;
  min-width: 16px;
  text-align: center;
}

.content { flex: 1; min-width: 0; }

.panel {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  margin-bottom: 12px;
}
.panel-header {
  background: var(--panel-bg-alt);
  border-bottom: 1px solid var(--border-color);
  padding: 8px 12px;
  font-weight: bold;
  font-size: 14px;
  color: var(--header-blue-3);
}
.panel-body { padding: 14px; }

/* --- Формы ------------------------------------------------------------------ */
.field { margin-bottom: 10px; }
.field label { display: block; margin-bottom: 3px; color: var(--text-muted); font-size: 12px; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border-color-dark);
  border-radius: var(--radius);
  background: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--accent-blue);
  outline-offset: -1px;
}
.field-error { color: var(--red); font-size: 12px; margin-top: 3px; }
.form-error-box { background: var(--red-bg); border: 1px solid var(--red); color: var(--red); padding: 8px 10px; border-radius: var(--radius); margin-bottom: 10px; font-size: 12px; }
.form-success-box { background: var(--green-bg); border: 1px solid var(--green); color: var(--green); padding: 8px 10px; border-radius: var(--radius); margin-bottom: 10px; font-size: 12px; }

/* --- Экран входа/регистрации ------------------------------------------------ */
.auth-wrap {
  max-width: 360px;
  margin: 40px auto;
  padding: 0 12px;
}
.auth-logo { text-align: center; margin-bottom: 14px; }
.auth-logo img { height: 64px; }
.auth-logo h1 { font-size: 17px; color: var(--header-blue-3); margin: 6px 0 0; }
.auth-tabs { display: flex; margin-bottom: -1px; }
.auth-tabs button {
  flex: 1;
  padding: 8px;
  background: var(--panel-bg-alt);
  border: 1px solid var(--border-color);
  border-bottom: none;
  cursor: pointer;
  color: var(--link-blue);
  font-weight: bold;
}
.auth-tabs button.active { background: var(--panel-bg); color: var(--text-main); }

/* --- Статусы / бейджи -------------------------------------------------------- */
.badge { display: inline-block; padding: 2px 8px; border-radius: 9px; font-size: 11px; font-weight: bold; }
.badge-pending { background: var(--yellow-bg); color: var(--yellow); }
.badge-approved { background: var(--green-bg); color: var(--green); }
.badge-rejected { background: var(--red-bg); color: var(--red); }
.badge-active { background: var(--green-bg); color: var(--green); }
.badge-closed { background: var(--panel-bg-alt); color: var(--text-muted); }
.badge-declined { background: var(--red-bg); color: var(--red); }

/* --- Списки заявок / переводов ---------------------------------------------- */
.list-item {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.list-item:last-child { border-bottom: none; }
.list-item .meta { font-size: 12px; color: var(--text-muted); }

/* --- Способы перевода: сетка карточек ---------------------------------------- */
.transfer-methods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.transfer-method-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--panel-bg-alt);
  padding: 16px 10px;
  text-align: center;
  cursor: pointer;
  color: var(--link-blue);
  font-weight: bold;
}
.transfer-method-card:hover { background: #E1E9F0; border-color: var(--accent-blue); }
.transfer-method-card .icon { font-size: 26px; display: block; margin-bottom: 8px; }

/* --- Чат поддержки ------------------------------------------------------------ */
.chat-window {
  display: flex;
  flex-direction: column;
  height: 420px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--panel-bg-alt);
}
.chat-messages { flex: 1; overflow-y: auto; padding: 10px; }
.chat-bubble { max-width: 75%; padding: 7px 10px; border-radius: 8px; margin-bottom: 8px; font-size: 13px; word-wrap: break-word; }
.chat-bubble.mine { background: var(--accent-blue); color: #fff; margin-left: auto; border-bottom-right-radius: 2px; }
.chat-bubble.theirs { background: #fff; border: 1px solid var(--border-color); margin-right: auto; border-bottom-left-radius: 2px; }
.chat-bubble .sender { font-size: 10px; opacity: 0.75; display: block; margin-bottom: 2px; }
.chat-input-row { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--border-color); background: var(--panel-bg); }
.chat-input-row input { flex: 1; }
.chat-empty-state { text-align: center; color: var(--text-muted); padding: 30px 10px; }

.chat-bubble.ai { background: var(--yellow-bg); border: 1px solid var(--yellow); }

.chat-quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid var(--border-color);
  background: var(--panel-bg-alt);
}
.quick-reply-chip {
  background: rgba(91, 127, 166, 0.16);
  color: var(--link-blue);
  border: 1px dashed var(--accent-blue);
  border-radius: 14px;
  padding: 5px 11px;
  font-size: 12px;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.15s, background 0.15s;
}
.quick-reply-chip:hover { opacity: 1; background: rgba(91, 127, 166, 0.3); }
.quick-reply-chip:disabled { opacity: 0.4; cursor: not-allowed; }

/* --- Уведомления --------------------------------------------------------------- */
.notif-item { padding: 10px 12px; border-bottom: 1px solid var(--border-color); font-size: 13px; }
.notif-item:last-child { border-bottom: none; }
.notif-item.unread { background: #F0F5FA; font-weight: bold; }
.notif-date { color: var(--text-muted); font-size: 11px; font-weight: normal; display: block; margin-top: 2px; }

/* --- Модальное окно подтверждения ----------------------------------------------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(20,30,40,0.45);
  display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 12px;
}
.modal-box { background: #fff; border: 1px solid var(--border-color-dark); border-radius: var(--radius); max-width: 380px; width: 100%; }
.modal-box .panel-header { display: flex; justify-content: space-between; }
.modal-box .panel-body { font-size: 13px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 10px 14px; border-top: 1px solid var(--border-color); background: var(--panel-bg-alt); }

/* --- Утилиты -------------------------------------------------------------------- */
.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }
.mt-8 { margin-top: 8px; }
.mb-8 { margin-bottom: 8px; }
.hidden { display: none !important; }
.spinner-row { text-align: center; padding: 20px; color: var(--text-muted); }

/* --- Мобильная адаптация --------------------------------------------------------- */
@media (max-width: 720px) {
  .app-shell { flex-direction: column; margin: 8px auto; }
  .sidebar { width: 100%; }
  .sidebar nav { display: flex; }
  .sidebar nav a, .sidebar nav button.nav-link {
    flex: 1; flex-direction: column; text-align: center; gap: 2px; font-size: 11px; padding: 8px 4px; border-bottom: none; border-right: 1px solid var(--border-color);
  }
  .sidebar nav a:last-child, .sidebar nav button.nav-link:last-child { border-right: none; }
  .transfer-methods { grid-template-columns: 1fr; }
  .topbar { padding: 8px 10px; }
  .chat-window { height: 60vh; }
}