/* Базові стилі elastic. Тема-спадкоємець ЗАМІНЮЄ однойменний файл
   батьківської теми, а не доповнює його — без цього імпорту вебпошта
   лишається зовсім без оформлення. Шлях відносний, бо все віддається
   через static.php. */
@import url("../../elastic/styles/styles.min.css");

/* ═══════════════════════════════════════════════════════════════
   Пошта · Адвокат Наталія Павловська — тема входу
   Палітра взята з pavlovska.com.ua (чорний + шампанське золото),
   щоб перехід із сайту в пошту не виглядав як перехід у чужий сервіс.
   Структура успадкована від теми advokat: там уже вирішені реальні
   вади Elastic (обрізана картка входу, зсуви 16vh/20vh).

   ⚠️ Шрифтів сайту (Source Serif 4, Jost) на сервері НЕМАЄ, а @font-face
   на відсутній файл дає 404 і мовчазний відкат на системний шрифт.
   Тому тут одразу системні стеки — Georgia для серифа, system-ui для решти.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --bg:#F4F1EA; --ink:#17171A; --dark:#0B0B0D;
  --gold:#C6A25F; --gold-text:#8A6B32; --gold-hi:#DCC084;
  --line:#DDD5C4; --muted:#565349; --cream:#F4F1EA;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.33,1,.68,1);
}

/* ── тло: чорна панель, як шапка сайту ── */
body.task-login{
  background:var(--dark) !important;
  min-height:100vh;margin:0 !important;padding:0 !important;
  font-family:var(--sans) !important;
}
body.task-login h1.voice{
  position:absolute !important;width:1px !important;height:1px !important;
  overflow:hidden !important;clip:rect(0,0,0,0) !important;
}
body.task-login #layout{
  background:transparent !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  min-height:100vh !important;
}

/* ── картка входу ── */
body.task-login #layout-content{
  background:var(--bg) !important;
  border:none !important;border-radius:24px !important;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.6) !important;
  padding:46px 42px 38px !important;
  width:min(94vw,430px) !important;max-width:430px !important;
  position:relative !important;
  /* Elastic задає картці фіксовану висоту й ховає переповнення — через це
     форма обрізалась знизу. Висоту віддаємо вмісту. */
  display:flex !important;flex-direction:column !important;justify-content:flex-start !important;
  height:auto !important;min-height:0 !important;max-height:none !important;
  overflow:visible !important;flex:0 0 auto !important;
}
/* тонка золота смуга зверху — акцент сайту */
body.task-login #layout-content::before{
  content:'' !important;position:absolute !important;top:0;left:0;right:0;
  height:3px !important;background:var(--gold) !important;
}

/* ── логотип ── */
/* Elastic зсуває логотип правилом `position:relative; top:16vh` — саме воно
   створювало 200 px порожнечі всередині картки й виштовхувало форму за її межі.
   Гасимо зсув і повертаємо логотип у звичайний потік. */
body.task-login #logo{
  display:block !important;position:static !important;top:auto !important;
  margin:0 auto 22px !important;
  max-height:70px !important;width:auto !important;max-width:100% !important;
}
/* підпис під логотипом (product_name) */
body.task-login #login-footer{
  margin-top:26px !important;padding-top:20px !important;
  border-top:1px solid var(--line) !important;
  font:600 10px/1.4 var(--sans) !important;letter-spacing:.2em !important;
  text-transform:uppercase !important;color:var(--gold-text) !important;
  text-align:center !important;
}

/* ── поля ── */
/* Друга половина зсуву Elastic: сама форма стоїть на `top:20vh`.
   Разом із 16vh логотипа це й ламало картку — тому гасимо обидва зсуви. */
body.task-login #login-form{
  background:transparent !important;border:none !important;padding:0 !important;
  position:static !important;top:auto !important;
  width:100% !important;max-width:100% !important;margin:0 !important;
}
body.task-login #login-form table{width:100% !important}
body.task-login #login-form table tbody,
body.task-login #login-form table tr{display:block !important;width:100% !important}
body.task-login #login-form table td.input.input-group{
  display:flex !important;align-items:center !important;width:100% !important;
  margin-bottom:14px !important;background:transparent !important;
  border:none !important;border-bottom:1px solid #C9C2B4 !important;border-radius:0 !important;
  transition:border-color .25s var(--ease) !important;
}
body.task-login #login-form table td.input:focus-within{
  border-bottom-color:var(--gold) !important;
}
body.task-login #login-form .input-group-prepend{background:transparent !important;border:none !important}
body.task-login #login-form .input-group-text.icon{
  background:transparent !important;border:none !important;
  color:#B0A896 !important;font-size:15px !important;padding:0 10px 0 0 !important;
  transition:color .25s var(--ease) !important;
}
body.task-login #login-form table td.input:focus-within .input-group-text.icon{color:var(--gold) !important}
body.task-login #login-form input.form-control{
  background:transparent !important;border:none !important;box-shadow:none !important;
  color:var(--ink) !important;font:400 16px/1.5 var(--sans) !important;
  padding:14px 0 !important;height:auto !important;
}
body.task-login #login-form input.form-control:focus{box-shadow:none !important;outline:none !important}
body.task-login #login-form input.form-control::placeholder{color:#9A9384 !important}

/* ── кнопка ── */
body.task-login .formbuttons{margin-top:26px !important;padding:0 !important}
body.task-login #rcmloginsubmit{
  width:100% !important;background:var(--dark) !important;color:var(--cream) !important;
  border:none !important;border-radius:999px !important;
  font:600 15px/1 var(--sans) !important;letter-spacing:.01em !important;
  text-transform:none !important;padding:19px 0 !important;
  transition:transform .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease) !important;
}
body.task-login #rcmloginsubmit:hover{
  background:var(--gold) !important;color:var(--dark) !important;
  transform:translateY(-2px) !important;
  box-shadow:0 14px 30px -12px rgba(11,11,13,.55) !important;
}
body.task-login #rcmloginsubmit:active{transform:translateY(0) !important}
body.task-login #rcmloginsubmit:focus-visible{
  outline:3px solid var(--gold-hi) !important;outline-offset:3px !important;
}

/* ── повідомлення про помилку ── */
body.task-login #messagestack div{
  background:var(--dark) !important;color:var(--cream) !important;
  border:none !important;border-left:3px solid var(--gold) !important;
  border-radius:12px !important;font:400 14px/1.6 var(--sans) !important;
}

@media (max-width:480px){
  body.task-login #layout-content{padding:40px 26px 34px !important;border-radius:18px !important}
}

/* після входу: прибираємо синь Elastic на користь палітри сайту */
/* Elastic будує кольори на CSS-змінних — перевизначаємо їх, а не полюємо
   на кожен селектор. Так тема переживе оновлення Roundcube. */
:root{
  --color-main:#0B0B0D; --color-main-dark:#000000;
  --color-primary:#0B0B0D; --color-link:#8A6B32; --color-link-hover:#C6A25F;
  --color-btn-primary-background:#0B0B0D;
  --color-btn-primary-background-hover:#C6A25F;
  --color-list-selected-background:rgba(198,162,95,.14);
  --color-message-link:#8A6B32;
  --color-spinner-dark:#C6A25F;
}
/* верхні панелі й бічне меню */
#layout-menu,#taskmenu{background:#0B0B0D !important}
#taskmenu a.selected,#taskmenu a:hover{color:#DCC084 !important}
#taskmenu a.selected:before{background:#C6A25F !important}
.header,#layout-sidebar > .header,#layout-list > .header{
  background:#0B0B0D !important;color:#F4F1EA !important}
.header a,.header .header-title{color:#F4F1EA !important}
/* виділений лист */
#messagelist tr.selected td,.listing li.selected{
  background:rgba(198,162,95,.14) !important;color:#17171A !important}
#messagelist tr.selected td a{color:#17171A !important}
/* кнопки дій */
a.button.btn-primary,button.btn-primary,input.btn-primary{
  background:#0B0B0D !important;border-color:#0B0B0D !important;color:#F4F1EA !important}
a.button.btn-primary:hover,button.btn-primary:hover{
  background:#C6A25F !important;border-color:#C6A25F !important;color:#0B0B0D !important}
/* лічильник непрочитаних */
.unreadcount,#messagelist tr.unread td.subject{color:#8A6B32 !important}
.folderlist .unreadcount,#folderlist .unreadcount{
  background:#C6A25F !important;color:#0B0B0D !important}