/* === KOD9 OVERRIDE ON ELASTIC SKIN === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@600;700&display=swap');

:root {
  --kod9-orange: #F97316;
  --kod9-orange-2: #EA580C;
  --kod9-orange-soft: #FFEDD5;
  --kod9-text: #111827;
  --kod9-muted: #6B7280;
  --kod9-border: #E5E7EB;
  --kod9-bg: #F9FAFB;
}

/* Шрифт везде */
body, html, .ui.input, .btn, .button, input, select, textarea, .menu, .toolbar, .header, .footer,
.titlebar, .titlebar h1, .titlebar h2, .listing, .listing tr, .messagelist, .quota, .formbuttons {
  font-family: 'Inter', system-ui, -apple-system, 'SF Pro Text', sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* Логотип в шапке (login + main) — заменяем через background-image */
#logo,
.minimal #logo,
.layout-content .header .topline,
.popupmenu .header,
#frame-header .header {
  /* no-op: лого ставим через .login-form */
}

/* Login-страница */
.login-form {
  border-radius: 14px !important;
  border: 1px solid var(--kod9-border) !important;
  box-shadow: 0 12px 32px -8px rgba(17,24,39,.08) !important;
}

/* Логотип на login */
.layout-content.task-login .header .logo,
#login-form .header .logo,
form .header img.logo,
.task-login #content .header img,
.task-login img.logo {
  display: none !important;
}
.task-login form .header,
.task-login #content .header,
.layout-content.task-login .header {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 50' style='font-family:JetBrains Mono,monospace'><g transform='translate(0,16)' fill='%23F97316'><path d='M24.8467 17.9874H15.6103L11.5522 14.4983L9.23641 17.9874H0L11.9366 0H20.2932L17.0417 6.22653L24.8467 17.9874Z'/><path d='M39.1831 6.23949L31.3778 18H26.6823L22.0092 11.1137H26.7124L29.5082 6.90086H27.6736L25.8317 9.67595H21.1574L18.877 6.2403L23.0078 0.0129547H35.0437L39.1831 6.23949Z'/></g><text x='50' y='30' fill='%23F97316' font-size='20' font-weight='600' font-family='JetBrains Mono,monospace' letter-spacing='-0.5'>kodnine</text></svg>") !important;
  background-position: center 24px !important;
  background-repeat: no-repeat !important;
  background-size: 160px auto !important;
  height: 90px !important;
  padding-top: 70px !important;
}
.task-login .formcontent h1 {
  display: none !important;
}
.task-login .formcontent {
  padding-top: 8px !important;
}

/* Кнопки primary — оранжевые */
.btn.btn-primary,
button.btn-primary,
.button.mainaction,
button.mainaction,
input.mainaction,
.formbuttons input.mainaction,
.formbuttons button.mainaction,
a.button.mainaction {
  background: var(--kod9-orange) !important;
  border-color: var(--kod9-orange) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(249,115,22,.25) !important;
  border-radius: 8px !important;
}
.btn.btn-primary:hover,
button.btn-primary:hover,
.button.mainaction:hover,
button.mainaction:hover,
input.mainaction:hover,
a.button.mainaction:hover {
  background: var(--kod9-orange-2) !important;
  border-color: var(--kod9-orange-2) !important;
  box-shadow: 0 4px 12px rgba(249,115,22,.35) !important;
}

/* Ссылки и акценты */
a, a:visited {
  color: var(--kod9-orange);
}
a:hover {
  color: var(--kod9-orange-2);
}

/* Активный пункт меню — оранжевая полоска */
.toolbarmenu li.active a,
.popupmenu li.active a,
#layout-menu li.active a,
.menu li.selected a,
.special-buttons.toolbar a.button.selected,
.toolbar a.button.selected,
.listing tr.selected td {
  color: var(--kod9-orange) !important;
}

/* Фокус на input */
.form-control:focus,
input:focus, select:focus, textarea:focus,
.ui.input:focus {
  border-color: var(--kod9-orange) !important;
  box-shadow: 0 0 0 3px rgba(249,115,22,.15) !important;
  outline: none !important;
}

/* Toolbar — белый фон, тонкая граница */
.layout-content > .header,
.task-mail .layout-content > .header,
#layout-menu {
  border-bottom: 1px solid var(--kod9-border);
}

/* Checkbox/radio акцент */
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--kod9-orange);
}

/* Список писем — hover слегка оранжевый */
.messagelist tr:hover td,
.listing tr:hover td {
  background-color: rgba(249,115,22,.04) !important;
}

/* Бейджи новых сообщений */
.messagelist tr.unread .subject,
.messagelist tr.unread .fromto,
.messagelist tr.unread .date,
.messagelist tr.unread .threads {
  font-weight: 600 !important;
}

/* Скроллбар тонкий */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.25); }



/* === БОКОВОЙ TASKMENU — оранжевые акценты, светлый по умолчанию === */
#taskmenu,
#layout-menu,
.layout-sidebar > .menu,
.menu.toolbar {
  background: #FFFFFF !important;
  border-right: 1px solid var(--kod9-border) !important;
}
#taskmenu a,
#taskmenu .button,
#layout-menu a,
.menu .button {
  color: var(--kod9-text) !important;
}
#taskmenu a:hover,
#layout-menu a:hover {
  background: rgba(249,115,22,.06) !important;
  color: var(--kod9-orange) !important;
}
#taskmenu a.selected,
#taskmenu a.button.selected,
#layout-menu a.selected,
.menu .button.selected {
  background: rgba(249,115,22,.1) !important;
  color: var(--kod9-orange) !important;
  border-left: 3px solid var(--kod9-orange) !important;
}
#taskmenu a svg,
#layout-menu a svg,
.menu .button svg {
  fill: currentColor !important;
  color: inherit !important;
}

/* DARK MODE — Roundcube ставит .dark-mode на <html> */
html.dark-mode #taskmenu,
html.dark-mode #layout-menu,
html.dark-mode .layout-sidebar > .menu {
  background: #13131A !important;
  border-right: 1px solid #1F2937 !important;
}
html.dark-mode #taskmenu a,
html.dark-mode #layout-menu a {
  color: #E5E7EB !important;
}
html.dark-mode #taskmenu a:hover,
html.dark-mode #layout-menu a:hover {
  background: rgba(249,115,22,.12) !important;
  color: var(--kod9-orange) !important;
}
html.dark-mode #taskmenu a.selected,
html.dark-mode #layout-menu a.selected {
  background: rgba(249,115,22,.15) !important;
  color: var(--kod9-orange) !important;
}
html.dark-mode body,
html.dark-mode .layout-content,
html.dark-mode #layout-content {
  background: #0A0A0F !important;
  color: #E5E7EB !important;
}


/* === НИЖНИЕ ССЫЛКИ САЙДБАРА (Темный режим / О программе / Выход) === */
#taskmenu-bottom,
.layout-sidebar .footer,
.layout-menu .footer,
.menu-footer,
#topline-bottom {
  background: #FFFFFF !important;
  border-top: 1px solid var(--kod9-border) !important;
}
#taskmenu-bottom a,
.layout-sidebar .footer a,
.menu-footer a {
  color: var(--kod9-text) !important;
}
html.dark-mode #taskmenu-bottom,
html.dark-mode .layout-sidebar .footer,
html.dark-mode .menu-footer {
  background: #13131A !important;
  border-top: 1px solid #1F2937 !important;
}

/* === ЛОГОТИП ВЕРХНИЙ — kodnine === */
.layout-sidebar > .header,
#layout-sidebar .header {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 18'><g fill='%23F97316'><path d='M24.8467 17.9874H15.6103L11.5522 14.4983L9.23641 17.9874H0L11.9366 0H20.2932L17.0417 6.22653L24.8467 17.9874Z'/><path d='M39.1831 6.23949L31.3778 18H26.6823L22.0092 11.1137H26.7124L29.5082 6.90086H27.6736L25.8317 9.67595H21.1574L18.877 6.2403L23.0078 0.0129547H35.0437L39.1831 6.23949Z'/></g></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 32px auto !important;
  background-color: #FFFFFF !important;
  border-bottom: 1px solid var(--kod9-border) !important;
}
.layout-sidebar > .header > *,
#layout-sidebar .header > * {
  visibility: hidden !important;
}
html.dark-mode .layout-sidebar > .header,
html.dark-mode #layout-sidebar .header {
  background-color: #13131A !important;
  border-bottom: 1px solid #1F2937 !important;
}

/* === ПИСАТЬ КНОПКА — pencil — увеличим читаемость === */
#taskmenu a.compose,
#taskmenu a.button.compose {
  background: var(--kod9-orange) !important;
  color: #fff !important;
  border-left: none !important;
}
#taskmenu a.compose:hover {
  background: var(--kod9-orange-2) !important;
}
#taskmenu a.compose svg,
#taskmenu a.button.compose svg {
  fill: #fff !important;
}

/* === Логотип ВЕРХНИЙ — просто оранжевый брендинг === */
.skip-content,
#layout-menu .topline,
#topline,
.menu .topline,
.layout-menu .topline {
  background: var(--kod9-orange) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 18'><g fill='%23ffffff'><path d='M24.8467 17.9874H15.6103L11.5522 14.4983L9.23641 17.9874H0L11.9366 0H20.2932L17.0417 6.22653L24.8467 17.9874Z'/><path d='M39.1831 6.23949L31.3778 18H26.6823L22.0092 11.1137H26.7124L29.5082 6.90086H27.6736L25.8317 9.67595H21.1574L18.877 6.2403L23.0078 0.0129547H35.0437L39.1831 6.23949Z'/></g></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 28px auto !important;
  border-bottom: 1px solid var(--kod9-orange-2) !important;
}
.skip-content > *,
#layout-menu .topline > *,
.menu .topline > * {
  visibility: hidden !important;
}

/* === НИЖНИЕ кнопки (Тёмный режим / О программе / Выход) — светлый фон === */
#taskmenu .last,
.menu .menu-end,
#layout-menu > .menu .menu-end,
.layout-menu.menu .menu-end {
  background: #FFFFFF !important;
  border-top: 1px solid var(--kod9-border) !important;
}
.menu .menu-end a,
#layout-menu > .menu .menu-end a {
  color: var(--kod9-text) !important;
}
.menu .menu-end a svg {
  fill: currentColor !important;
}

/* Кнопка выхода (logout) — красная только в hover, обычно тёмная */
a.button.logout,
#taskmenu a.logout {
  color: var(--kod9-text) !important;
}
a.button.logout:hover,
#taskmenu a.logout:hover {
  color: #DC2626 !important;
  background: rgba(220,38,38,.08) !important;
}
a.button.logout svg,
#taskmenu a.logout svg {
  fill: currentColor !important;
}

/* Текст в taskmenu — не обрезать */
#taskmenu a span,
#layout-menu a span,
.menu .button span {
  font-size: 11px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  text-align: center !important;
  line-height: 1.2 !important;
  padding: 0 4px !important;
}