/* MEETER WEBMAIL - ЧИСТЫЙ CSS БЕЗ КОНФЛИКТОВ */
/* Только цвета и визуальные стили, НЕ ТРОГАЕМ layout! */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* === ЦВЕТА === */
:root {
  --m-bg: #0a0514;
  --m-panel: rgba(12, 6, 24, 0.95);
  --m-border: rgba(255, 255, 255, 0.08);
  --m-border-light: rgba(0, 229, 255, 0.25);
  --m-text: #e8edff;
  --m-text-muted: rgba(255, 255, 255, 0.65);
  --m-cyan: #00e5ff;
  --m-magenta: #ff00ff;
}

/* === СТРАНИЦА ЛОГИНА === */

/* Скрыть заголовок */
h1.voice {
  display: none !important;
}

/* Логотип - позиционирование как в elastic */
#meeter-logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  position: relative !important;
  top: 12vh !important;
}

#meeter-logo .meeter-camera {
  width: 48px !important;
  height: 48px !important;
}

#meeter-logo .meeter-wordmark {
  height: 32px !important;
  width: auto !important;
}

/* Поля ввода - ТЁМНЫЕ в стиле проекта */
#login-form .input-group {
  position: relative !important;
  margin-bottom: 16px !important;
}

#login-form .input-group .input-group-prepend,
#login-form .input-group-text {
  background: rgba(10, 5, 20, 0.8) !important;
  border: 1px solid rgba(0, 229, 255, 0.3) !important;
  border-right: none !important;
  border-radius: 12px 0 0 12px !important;
  min-width: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Иконка пользователя (SVG) */
#login-form .input-group:first-of-type .input-group-text,
#login-form .input-group:has(#rcmloginuser) .input-group-text {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%2300e5ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E") !important;
  background-color: rgba(10, 5, 20, 0.8) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 22px !important;
}

/* Иконка замка (SVG) */
#login-form .input-group:nth-of-type(2) .input-group-text,
#login-form .input-group:has(#rcmloginpwd) .input-group-text {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%2300e5ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'%3E%3C/path%3E%3C/svg%3E") !important;
  background-color: rgba(10, 5, 20, 0.8) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 22px !important;
}

/* Поля ввода - тёмные с белым текстом */
#login-form input.form-control,
#login-form input[type="text"],
#login-form input[type="password"] {
  background: rgba(10, 5, 20, 0.95) !important;
  background-color: rgba(10, 5, 20, 0.95) !important;
  border: 1px solid rgba(0, 229, 255, 0.3) !important;
  border-left: none !important;
  border-radius: 0 12px 12px 0 !important;
  color: #ffffff !important;
  padding: 14px 20px !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;
}

#login-form input.form-control:focus,
#login-form input[type="text"]:focus,
#login-form input[type="password"]:focus {
  background: rgba(10, 5, 20, 0.95) !important;
  background-color: rgba(10, 5, 20, 0.95) !important;
  border-color: var(--m-cyan) !important;
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.25) !important;
  outline: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Убрать белый фон при автозаполнении */
#login-form input:-webkit-autofill,
#login-form input:-webkit-autofill:hover,
#login-form input:-webkit-autofill:focus,
#login-form input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px rgba(10, 5, 20, 0.95) inset !important;
  box-shadow: 0 0 0 1000px rgba(10, 5, 20, 0.95) inset !important;
  -webkit-text-fill-color: #ffffff !important;
  background-color: rgba(10, 5, 20, 0.95) !important;
  caret-color: #ffffff !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

#login-form input.form-control::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.5) !important;
}

/* Копирайт */
#login-footer {
  margin-top: 20px !important;
  text-align: center !important;
}

.meeter-copyright {
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 12px !important;
  letter-spacing: 0.5px !important;
}

/* === БАЗОВЫЕ ЭЛЕМЕНТЫ === */
html, body {
  background: linear-gradient(180deg, #080313 0%, #0a0514 50%, #140a24 100%) !important;
  background-attachment: fixed !important;
  color: var(--m-text) !important;
}

body {
  font-family: 'Inter', -apple-system, sans-serif !important;
}

/* === ВЕРХНЯЯ СТРОКА (topline) === */
.topline {
  background: rgba(10, 5, 20, 0.9) !important;
  border-bottom: 1px solid var(--m-border) !important;
  color: var(--m-text) !important;
}

.topline a,
.topline span,
.topline .username {
  color: var(--m-text) !important;
}

.topline a:hover {
  color: var(--m-cyan) !important;
}

/* Email адрес в topline */
#topline .username,
.topline .account-name {
  color: var(--m-cyan) !important;
  font-weight: 500 !important;
}

/* === ГЛАВНОЕ МЕНЮ (левая панель с иконками) === */
#layout-menu {
  background: linear-gradient(180deg, rgba(0,0,0,0.9), rgba(10,5,20,0.95)) !important;
  border-right: 1px solid var(--m-border-light) !important;
  min-width: 70px !important;
  width: auto !important;
}

#layout-menu .popover-header {
  background: rgba(10, 5, 20, 0.8) !important;
  border-bottom: 1px solid var(--m-border) !important;
}

/* Логотип и название в меню */
#layout-menu .logo,
#layout-menu .popover-header .logo {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

#layout-menu .logo img,
#layout-menu #logo {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  filter: drop-shadow(0 0 8px var(--m-cyan)) !important;
}

#layout-menu .logo-text {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--m-cyan) !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

#taskmenu a.button {
  color: var(--m-text-muted) !important;
  padding: 8px 4px !important;
  margin: 2px 4px !important;
  border-radius: 6px !important;
  text-align: center !important;
  font-size: 10px !important;
}

#taskmenu a.button .inner {
  color: inherit !important;
  font-size: 10px !important;
  white-space: nowrap !important;
}

#taskmenu a.button:hover,
#taskmenu a.button.selected {
  color: var(--m-text) !important;
  background: rgba(0, 229, 255, 0.15) !important;
}

/* Кнопка Написать */
#taskmenu .compose,
#taskmenu a.button.compose {
  background: linear-gradient(120deg, var(--m-cyan), var(--m-magenta)) !important;
  color: #000 !important;
  font-weight: 600 !important;
  padding: 10px 8px !important;
  margin: 8px 4px !important;
  border-radius: 8px !important;
  text-align: center !important;
}

#taskmenu .compose .inner,
#taskmenu a.button.compose .inner {
  color: #000 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}

/* === САЙДБАР (папки) === */
#layout-sidebar {
  background: var(--m-panel) !important;
  border-right: 1px solid var(--m-border) !important;
}

#layout-sidebar .header {
  background: rgba(10, 5, 20, 0.8) !important;
  border-bottom: 1px solid var(--m-border) !important;
  color: var(--m-text) !important;
}

/* Header с email адресом */
#layout-sidebar .header .header-title,
#layout-sidebar .header a,
#layout-sidebar .header span {
  color: var(--m-text) !important;
  font-size: 13px !important;
}

/* Кнопка аккаунта/email */
.header .username,
.header .account-link,
#layout-sidebar .header .button-inner,
a.button.compose {
  color: var(--m-text) !important;
}

#layout-sidebar .scroller {
  background: transparent !important;
}

/* Папки */
#layout-sidebar .listing li a,
.folderlist li a {
  color: var(--m-text-muted) !important;
}

#layout-sidebar .listing li a:hover,
#layout-sidebar .listing li.selected a,
.folderlist li a:hover,
.folderlist li.selected a {
  background: rgba(0, 229, 255, 0.1) !important;
  color: var(--m-text) !important;
}

/* Счётчики непрочитанных */
.unreadcount {
  background: linear-gradient(120deg, var(--m-cyan), var(--m-magenta)) !important;
  color: #000 !important;
}

/* === СПИСОК СООБЩЕНИЙ === */
#layout-list {
  background: var(--m-panel) !important;
  border-right: 1px solid var(--m-border) !important;
}

#layout-list .header {
  background: rgba(10, 5, 20, 0.8) !important;
  border-bottom: 1px solid var(--m-border) !important;
  color: var(--m-text) !important;
}

#layout-list .scroller {
  background: transparent !important;
}

/* Toolbar - ВСЕ КНОПКИ КАК НАПИСАТЬ */
.header.toolbar {
  background: rgba(10, 5, 20, 0.8) !important;
}

.toolbar a.button,
.header.toolbar a.button,
#messagetoolbar a.button {
  background: linear-gradient(120deg, var(--m-cyan), var(--m-magenta)) !important;
  border: none !important;
  border-radius: 8px !important;
  color: #000 !important;
  padding: 8px 12px !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  text-shadow: none !important;
  box-shadow: 0 2px 8px rgba(0, 229, 255, 0.3) !important;
  transition: all 0.2s ease !important;
}

.toolbar a.button:hover,
.header.toolbar a.button:hover,
#messagetoolbar a.button:hover {
  background: linear-gradient(120deg, var(--m-magenta), var(--m-cyan)) !important;
  box-shadow: 0 4px 12px rgba(255, 0, 255, 0.4) !important;
  transform: translateY(-1px) !important;
}

.toolbar a.button .inner,
.header.toolbar a.button .inner,
#messagetoolbar a.button .inner {
  color: #000 !important;
  font-weight: 600 !important;
}

/* Поиск */
.searchbar input,
#quicksearchbar input {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: 20px !important;
  color: var(--m-text) !important;
}

.searchbar input:focus,
#quicksearchbar input:focus {
  border-color: var(--m-cyan) !important;
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.3) !important;
}

/* Таблица сообщений */
#messagelist thead {
  background: rgba(10, 5, 20, 0.6) !important;
}

#messagelist thead th {
  color: var(--m-text-muted) !important;
  border-bottom: 1px solid var(--m-border) !important;
}

#messagelist tbody tr {
  background: transparent !important;
}

#messagelist tbody tr:hover {
  background: rgba(0, 229, 255, 0.08) !important;
}

#messagelist tbody tr.selected {
  background: rgba(0, 229, 255, 0.15) !important;
}

#messagelist tbody tr.unread {
  font-weight: 600;
}

#messagelist td {
  color: var(--m-text) !important;
  border-bottom: 1px solid var(--m-border) !important;
}

/* === КОНТЕНТ (просмотр письма) === */
#layout-content {
  background: var(--m-panel) !important;
}

#layout-content .header {
  background: rgba(10, 5, 20, 0.8) !important;
  border-bottom: 1px solid var(--m-border) !important;
  color: var(--m-text) !important;
}

#layout-content .scroller {
  background: transparent !important;
}

/* Watermark (логотип Meeter) */
.watermark {
  opacity: 0.4 !important;
}

/* === ФОРМЫ И КНОПКИ === */
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: 6px !important;
  color: var(--m-text) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--m-cyan) !important;
  outline: none !important;
}

button,
.button,
.btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: 6px !important;
  color: var(--m-text) !important;
}

button:hover,
.button:hover,
.btn:hover {
  background: rgba(0, 229, 255, 0.15) !important;
  border-color: var(--m-border-light) !important;
}

.btn-primary,
.button.primary {
  background: linear-gradient(120deg, var(--m-cyan), var(--m-magenta)) !important;
  color: #000 !important;
  border: none !important;
}

/* === СТРАНИЦА ВХОДА === */
.task-login #layout-content {
  background: transparent !important;
}

#login-form {
  background: var(--m-panel) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
}

#login-form input {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: 24px !important;
  color: var(--m-text) !important;
  height: 44px !important;
}

#login-form input[type="submit"],
#login-form button[type="submit"] {
  background: linear-gradient(120deg, var(--m-cyan), var(--m-magenta)) !important;
  color: #000 !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 24px !important;
}

/* === СКРОЛЛБАРЫ === */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--m-cyan), var(--m-magenta));
  border-radius: 4px;
}

/* === FOOTER === */
#layout-sidebar .footer,
#layout-list .footer {
  background: rgba(10, 5, 20, 0.8) !important;
  border-top: 1px solid var(--m-border) !important;
  color: var(--m-text-muted) !important;
}

/* === ССЫЛКИ === */
a {
  color: var(--m-cyan) !important;
}

a:hover {
  color: var(--m-magenta) !important;
}

/* === МОДАЛЬНЫЕ ОКНА === */
.popover,
.modal-content {
  background: var(--m-panel) !important;
  border: 1px solid var(--m-border) !important;
}

.popover-header,
.modal-header {
  background: rgba(10, 5, 20, 0.8) !important;
  border-bottom: 1px solid var(--m-border) !important;
  color: var(--m-text) !important;
}

.modal-body,
.popover-body {
  color: var(--m-text) !important;
}