/* PostfixAdmin — оформление под DEKRA.
 *
 * Подключается через $CONF['theme_custom_css'] после штатного bootstrap.css,
 * поэтому сам PostfixAdmin не трогается и переживает обновление пакета.
 *
 * Bootstrap 3 держит цвета литералами в правилах, а не в переменных, поэтому
 * здесь их приходится перекрывать поимённо. Свои значения собраны в токенах
 * сверху — менять цвет темы нужно только там.
 */

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

:root {
  --pa-paper:     #F2F4F1;
  --pa-surface:   #FFFFFF;
  --pa-surface-2: #E9EDE7;
  --pa-ink:       #191F1A;
  --pa-muted:     #5C665E;
  --pa-rule:      #DBE1D9;
  --pa-accent:    #27418C;
  --pa-accent-hi: #1D3271;
  --pa-accent-bg: #E3E8F5;
  --pa-danger:    #9B2C2C;
  --pa-warn:      #8A5A12;
  --pa-ok:        #3F6B4A;
  --pa-radius:    4px;
  --pa-ui:   "Inter Tight", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pa-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --pa-paper:     #131714;
    --pa-surface:   #1A1F1B;
    --pa-surface-2: #222823;
    --pa-ink:       #E7EDE6;
    --pa-muted:     #98A49A;
    --pa-rule:      #2A312C;
    --pa-accent:    #93A9EE;
    --pa-accent-hi: #B4C4F5;
    --pa-accent-bg: #1E2740;
    --pa-danger:    #E58A8A;
    --pa-warn:      #D6A341;
    --pa-ok:        #7CBB8B;
  }
}

/* ── Основа ──────────────────────────────────────────────────────── */

body,
body.page-main {
  background: var(--pa-paper);
  color: var(--pa-ink);
  font-family: var(--pa-ui);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--pa-accent); }
a:hover, a:focus { color: var(--pa-accent-hi); }
a:focus-visible { outline: 2px solid var(--pa-accent); outline-offset: 2px; }

code, kbd, pre, .mono {
  font-family: var(--pa-mono);
  background: var(--pa-surface-2);
  color: var(--pa-ink);
  border: 0;
}

h1, h2, h3, h4 { font-weight: 650; letter-spacing: -0.015em; color: var(--pa-ink); }

body > .container,
body > .container-fluid { padding-top: 76px; max-width: 1180px; }

/* ── Шапка ───────────────────────────────────────────────────────── */

.navbar-default {
  background: var(--pa-surface);
  border: 0;
  border-bottom: 1px solid var(--pa-rule);
  box-shadow: none;
  border-radius: 0;
  min-height: 56px;
}

.navbar-default .navbar-brand {
  color: var(--pa-ink);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 17px;
  display: flex;
  align-items: center;
  height: 56px;
}
.navbar-default .navbar-brand:hover { color: var(--pa-accent); }
/* Логотипа в поставке нет ничего, кроме растрового по умолчанию — прячем,
   текстовая марка читается лучше и не размывается на плотных экранах. */
.navbar-brand img { display: none; }

.navbar-default .navbar-nav > li > a {
  color: var(--pa-muted);
  font-weight: 500;
  padding-top: 18px;
  padding-bottom: 18px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus { color: var(--pa-ink); background: transparent; }

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  background: var(--pa-accent-bg);
  color: var(--pa-accent);
}

.dropdown-menu {
  background: var(--pa-surface);
  border: 1px solid var(--pa-rule);
  border-radius: var(--pa-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  padding: 4px;
}
.dropdown-menu > li > a { color: var(--pa-ink); border-radius: 3px; padding: 6px 12px; }
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus { background: var(--pa-accent-bg); color: var(--pa-accent); }
.dropdown-menu .divider { background: var(--pa-rule); }

.navbar-default .navbar-toggle { border-color: var(--pa-rule); }
.navbar-default .navbar-toggle .icon-bar { background: var(--pa-ink); }
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus { background: var(--pa-surface-2); }

/* ── Карточки ────────────────────────────────────────────────────── */

.panel {
  background: var(--pa-surface);
  border: 1px solid var(--pa-rule);
  border-radius: var(--pa-radius);
  box-shadow: none;
}
.panel-default > .panel-heading,
.panel .header {
  background: var(--pa-surface-2);
  border-bottom: 1px solid var(--pa-rule);
  color: var(--pa-ink);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.panel-footer {
  background: var(--pa-surface);
  border-top: 1px solid var(--pa-rule);
  color: var(--pa-muted);
}

/* ── Таблицы ─────────────────────────────────────────────────────── */

.table { color: var(--pa-ink); font-size: 14px; margin-bottom: 0; }

.table > thead > tr > th {
  background: var(--pa-surface-2);
  border-bottom: 1px solid var(--pa-rule);
  color: var(--pa-muted);
  font-family: var(--pa-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: bottom;
  /* Заголовки переносятся: среди них есть длинные фразы целиком,
     и в одну строку они растягивают таблицу за пределы экрана. */
  white-space: normal;
  word-break: normal;
  line-height: 1.3;
  padding: 8px 12px;
}

.table > tbody > tr > td {
  border-top: 1px solid var(--pa-rule);
  vertical-align: middle;
  padding: 9px 12px;
}
/* Адреса и числа выравниваются по колонке — цифры одинаковой ширины. */
.table > tbody > tr > td { font-variant-numeric: tabular-nums; }

.table-hover > tbody > tr:hover { background: var(--pa-accent-bg); }
.table-striped > tbody > tr:nth-of-type(odd) { background: transparent; }

/* ── Кнопки ──────────────────────────────────────────────────────── */

.btn {
  border-radius: var(--pa-radius);
  font-weight: 550;
  font-size: 14px;
  padding: 6px 14px;
  border: 1px solid transparent;
  box-shadow: none;
  text-shadow: none;
  transition: background-color .12s ease, border-color .12s ease;
}
.btn:focus-visible { outline: 2px solid var(--pa-accent); outline-offset: 2px; }
.btn-sm { font-size: 12.5px; padding: 4px 10px; }

.btn-primary { background: var(--pa-accent); border-color: var(--pa-accent); color: #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: var(--pa-accent-hi); border-color: var(--pa-accent-hi); color: #fff;
}

.btn-default {
  background: var(--pa-surface);
  border-color: var(--pa-rule);
  color: var(--pa-ink);
}
.btn-default:hover, .btn-default:focus { background: var(--pa-surface-2); border-color: var(--pa-muted); color: var(--pa-ink); }

/* Удаление — единственное необратимое действие в панели, поэтому цвет
   оставлен насыщенным, но приглушённее бутстраповского алого. */
.btn-danger { background: var(--pa-danger); border-color: var(--pa-danger); color: #fff; }
.btn-danger:hover, .btn-danger:focus { filter: brightness(0.9); color: #fff; }

.btn-warning { background: var(--pa-warn); border-color: var(--pa-warn); color: #fff; }
.btn-warning:hover, .btn-warning:focus { filter: brightness(0.9); color: #fff; }

.btn-group > .btn { border-radius: var(--pa-radius); }
/* Раскладку кнопок панель делает через float и pull-right — flex здесь
   их ломает, поэтому только зазор между группами. */
.btn-toolbar > .btn-group { margin-bottom: 4px; }

/* ── Формы ───────────────────────────────────────────────────────── */

.form-control {
  background: var(--pa-surface);
  border: 1px solid var(--pa-rule);
  border-radius: var(--pa-radius);
  color: var(--pa-ink);
  box-shadow: none;
  font-size: 14px;
  height: 36px;
}
.form-control:focus {
  border-color: var(--pa-accent);
  box-shadow: 0 0 0 3px var(--pa-accent-bg);
  outline: none;
}
.form-control::placeholder { color: var(--pa-muted); opacity: .8; }
textarea.form-control { height: auto; }

label, .control-label { color: var(--pa-ink); font-weight: 550; }
.help-block { color: var(--pa-muted); font-size: 12.5px; }

/* ── Сообщения ───────────────────────────────────────────────────── */

.alert { border-radius: var(--pa-radius); border-width: 1px; border-left-width: 3px; }
.alert-success { background: var(--pa-surface); border-color: var(--pa-rule); border-left-color: var(--pa-ok); color: var(--pa-ink); }
.alert-danger  { background: var(--pa-surface); border-color: var(--pa-rule); border-left-color: var(--pa-danger); color: var(--pa-ink); }
.alert-warning { background: var(--pa-surface); border-color: var(--pa-rule); border-left-color: var(--pa-warn); color: var(--pa-ink); }
.alert-info    { background: var(--pa-surface); border-color: var(--pa-rule); border-left-color: var(--pa-accent); color: var(--pa-ink); }

/* ── Вход ────────────────────────────────────────────────────────── */

div#login {
  max-width: 26rem;
  margin: 4rem auto;
  background: var(--pa-surface);
  border: 1px solid var(--pa-rule);
  border-radius: 6px;
  padding: 2rem 1.75rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
div#login h1, div#login h2, div#login h3 { margin-top: 0; font-size: 1.3rem; }

/* ── Подвал ──────────────────────────────────────────────────────── */

.footer {
  background: transparent;
  border-top: 1px solid var(--pa-rule);
  color: var(--pa-muted);
}
.footer a { color: var(--pa-muted); text-decoration: underline; text-underline-offset: 2px; }
.footer a:hover { color: var(--pa-accent); }

/* ── Мелочи ──────────────────────────────────────────────────────── */

.glyphicon { opacity: .75; }
span.active { color: var(--pa-ok); font-weight: 600; }
hr { border-top-color: var(--pa-rule); }
.well { background: var(--pa-surface-2); border-color: var(--pa-rule); box-shadow: none; border-radius: var(--pa-radius); }
.pagination > li > a,
.pagination > li > span { background: var(--pa-surface); border-color: var(--pa-rule); color: var(--pa-accent); }
.pagination > .active > a,
.pagination > .active > span { background: var(--pa-accent); border-color: var(--pa-accent); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ── Широкие таблицы ─────────────────────────────────────────────── */

/* Список доменов — десять колонок и длинные подписи. Прокрутка живёт
   внутри карточки, чтобы страница не ехала горизонтально целиком. */
.panel > .table,
.panel > form > .table { margin: 0; }
.panel { overflow-x: auto; }

/* Колонки с кнопками действий не переносятся и не растягиваются. */
.table > tbody > tr > td:last-child,
.table > tbody > tr > td:nth-last-child(2) { white-space: nowrap; width: 1%; }
.table .btn { margin: 1px 0; }

/* Индикатор квоты у PostfixAdmin позиционируется абсолютно и при
   выключенных квотах показывает пустую рамку — она только мешает. */
.quota, .quota_bg { display: none; }
.quota_text {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  text-align: left;
  font-family: var(--pa-mono);
  font-size: 12.5px;
  color: var(--pa-ink);
}

/* ── Страница входа ──────────────────────────────────────────────────
 *
 * PostfixAdmin выдаёт контейнер с инлайновым `width: min-content` и
 * `min-width: 600px`. Ширину страницы в итоге задаёт селектор языков —
 * сорок пунктов, самый длинный «Chinese simplified (gb2312)». Поля ввода
 * при этом остаются узкими. Инлайн-стиль перебивается только !important.
 */

body.page-login {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem 3rem;
}

/* Шапка здесь несёт только логотип, который мы и так прячем, — пустая
   полоса вверху не нужна, идентичность сервера уходит в карточку. */
body.page-login .navbar { display: none; }
body.page-login br { display: none; }
body.page-login .footer { position: static; height: auto; line-height: 1.6; margin-top: 2rem; }

body.page-login > .container {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 27rem;
  padding: 0;
}

body.page-login #login {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 2rem 1.9rem 1.9rem;
  background: var(--pa-surface);
  border: 1px solid var(--pa-rule);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px -18px rgba(0,0,0,.30);
}

/* Кто ты и чем управляешь — до того, как вводить пароль. Три домена
   перечислены не для красоты: на этой машине их действительно три, и
   администратор по строке видит, туда ли он попал. */
body.page-login #login::before {
  content: "mail.dekra.online";
  display: block;
  font-family: var(--pa-mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--pa-ink);
  letter-spacing: -0.01em;
}
body.page-login #login h2 {
  font-size: 12px;
  font-weight: 500;
  font-family: var(--pa-mono);
  letter-spacing: 0.02em;
  color: var(--pa-muted);
  margin: 0.3rem 0 1.6rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--pa-rule);
  line-height: 1.45;
}

/* .well тут только контейнер формы — рамка внутри рамки лишняя. */
body.page-login .well {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

body.page-login .form-group { margin-bottom: 1.1rem; }

body.page-login label {
  display: block;
  font-family: var(--pa-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pa-muted);
  margin-bottom: 0.4rem;
}

/* Селектор языков штатного класса не имеет — приводим его к тем же
   размерам, что и поля, и не даём растягивать страницу длинными
   названиями языков. */
body.page-login .form-control,
body.page-login select[name="lang"] {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 42px;
  padding: 0 0.75rem;
  font-size: 14.5px;
  background: var(--pa-paper);
  border: 1px solid var(--pa-rule);
  border-radius: var(--pa-radius);
  color: var(--pa-ink);
  text-overflow: ellipsis;
}
body.page-login select[name="lang"] {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.2rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--pa-muted) 50%),
                    linear-gradient(135deg, var(--pa-muted) 50%, transparent 50%);
  background-position: right 1.05rem center, right 0.8rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
body.page-login .form-control:focus,
body.page-login select[name="lang"]:focus {
  border-color: var(--pa-accent);
  box-shadow: 0 0 0 3px var(--pa-accent-bg);
  outline: none;
}

/* Язык — вспомогательный выбор, а не третье поле ввода: отделяем его
   от учётных данных и приглушаем. */
body.page-login .form-group:has(select[name="lang"]) {
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--pa-rule);
}

body.page-login .btn-primary,
body.page-login input[type="submit"] {
  width: 100%;
  height: 42px;
  margin-top: 1.4rem;
  font-size: 15px;
  font-weight: 600;
}