/* =========================================================
   ARMADKO Mail — Dark Dashboard Theme v5
   less.js removed from layout.html — this loads LAST, wins
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --arm-bg:        #0d0d1a;
  --arm-sidebar:   #11111e;
  --arm-card:      #161628;
  --arm-card-2:    #1c1c32;
  --arm-border:    #252542;
  --arm-accent:    #7c3aed;
  --arm-accent2:   #9d5bf4;
  --arm-pink:      #ec4899;
  --arm-text:      #e2e2f0;
  --arm-muted:     #6b6b8a;
  --arm-active-bg: rgba(124,58,237,0.18);
  --arm-active:    #7c3aed;
  --arm-input:     #1c1c32;
  --arm-shadow:    0 8px 32px rgba(0,0,0,0.5);
  --arm-r:         10px;
  --arm-r-sm:      7px;
  --arm-t:         all 0.18s ease;
}

/* =========================================================
   GLOBAL
   ========================================================= */
html, body {
  font-family: 'Inter','Segoe UI',Arial,sans-serif !important;
  background: var(--arm-bg) !important;
  color: var(--arm-text) !important;
}
a { color: var(--arm-accent2) !important; }
a:hover { color: #fff !important; text-decoration: none !important; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--arm-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--arm-accent); }

/* =========================================================
   LOGIN PAGE
   ========================================================= */

/* Dark background for the full login page */
.task-login body,
body.task-login { background: var(--arm-bg) !important; }

.task-login #layout { background: var(--arm-bg) !important; }

/* Center the logo and form as a card */
.task-login #layout-content {
  background: var(--arm-bg) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  padding: 20px !important;
  text-align: center !important;
}

/* Logo: reset Roundcube's top:16vh positioning */
.task-login #logo {
  position: static !important;
  top: auto !important;
  display: block !important;
  margin: 0 auto 8px !important;
  max-height: 56px !important;
  max-width: 200px !important;
  width: auto !important;
}

/* Tagline via pseudo-element after logo */
.task-login #logo::after {
  content: 'Ваша почта. Надёжно. Быстро.';
  display: block !important;
  font-size: 13px !important;
  color: var(--arm-muted) !important;
  margin-top: 8px !important;
  font-weight: 400 !important;
  letter-spacing: 0.3px !important;
}

/* Login form card */
#login-form {
  background: var(--arm-card) !important;
  border: 1px solid var(--arm-border) !important;
  border-radius: 18px !important;
  padding: 32px 36px 28px !important;
  box-shadow: var(--arm-shadow) !important;
  position: static !important;
  top: auto !important;
  width: 95% !important;
  max-width: 360px !important;
  margin: 16px auto 0 !important;
}

/* Login input styling */
.task-login input[type=text],
.task-login input[type=password],
.task-login input[type=email] {
  background: var(--arm-input) !important;
  border: 1.5px solid var(--arm-border) !important;
  color: var(--arm-text) !important;
  border-radius: var(--arm-r-sm) !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
  font-family: inherit !important;
  width: 100% !important;
  transition: var(--arm-t) !important;
}
.task-login input:focus {
  border-color: var(--arm-accent) !important;
  background: var(--arm-card) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.2) !important;
}
.task-login input::placeholder { color: var(--arm-muted) !important; }
.task-login .input-group-text {
  background: var(--arm-input) !important;
  border-color: var(--arm-border) !important;
  color: var(--arm-muted) !important;
}

/* Login submit button */
.task-login button[type=submit],
.task-login input[type=submit],
.task-login .btn.mainaction,
.task-login .formbuttons .btn {
  background: linear-gradient(135deg, #7c3aed 0%, #9d5bf4 100%) !important;
  border: none !important;
  color: #fff !important;
  border-radius: var(--arm-r-sm) !important;
  padding: 13px 22px !important;
  width: 100% !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  cursor: pointer !important;
  transition: var(--arm-t) !important;
  box-shadow: 0 6px 22px rgba(124,58,237,0.4) !important;
  margin-top: 4px !important;
}
.task-login button[type=submit]:hover,
.task-login input[type=submit]:hover { box-shadow: 0 8px 28px rgba(124,58,237,0.6) !important; transform: translateY(-1px) !important; }

#login-footer { color: var(--arm-muted) !important; font-size: 12px !important; margin-top: 16px !important; text-align: center !important; }
#login-footer a { color: var(--arm-accent2) !important; }

/* =========================================================
   MAIN LAYOUT
   ========================================================= */
#layout { background: var(--arm-bg) !important; }

/* =========================================================
   LEFT NAV — #layout-menu (220px set in styles.css)
   ========================================================= */
#layout-menu {
  background: var(--arm-sidebar) !important;
  border-right: 1px solid var(--arm-border) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Logo header in sidebar */
#layout-menu .popover-header {
  background: var(--arm-sidebar) !important;
  border-bottom: 1px solid var(--arm-border) !important;
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 16px !important;
}
#layout-menu .popover-header img {
  max-height: 36px !important;
  max-width: 160px !important;
  width: auto !important;
}

/* Task menu */
#taskmenu {
  background: transparent !important;
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 10px 0 !important;
}

/* Nav item base */
#taskmenu a,
#taskmenu .button {
  display: flex !important;
  align-items: center !important;
  height: auto !important;
  min-height: 40px !important;
  line-height: 1.3 !important;
  padding: 10px 14px !important;
  margin: 1px 8px !important;
  border-radius: var(--arm-r-sm) !important;
  color: var(--arm-muted) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: var(--arm-t) !important;
  background: transparent !important;
  border-bottom: none !important;
  border-left: 3px solid transparent !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#taskmenu a:hover { color: var(--arm-text) !important; background: rgba(124,58,237,0.1) !important; }
#taskmenu a.selected,
#taskmenu a.active {
  color: var(--arm-accent2) !important;
  background: var(--arm-active-bg) !important;
  border-left-color: var(--arm-active) !important;
  font-weight: 600 !important;
}

/* FORCE SHOW inner text — override a.button.icon>span.inner{display:none} */
#taskmenu span.inner,
#taskmenu a span.inner,
#taskmenu a > span.inner,
#taskmenu a.button.icon > span.inner,
#taskmenu a.button.icon span.inner {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 13.5px !important;
  font-weight: inherit !important;
  padding: 0 !important;
}

/* Icon formatting */
#taskmenu a:before {
  float: none !important;
  display: inline-block !important;
  width: 20px !important;
  min-width: 20px !important;
  text-align: center !important;
  margin-right: 10px !important;
  flex-shrink: 0 !important;
}

/* Compose button highlight */
#taskmenu a.compose {
  background: var(--arm-accent) !important;
  color: #fff !important;
  border-left: 3px solid transparent !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 16px rgba(124,58,237,0.35) !important;
  margin-bottom: 6px !important;
}
#taskmenu a.compose:hover { background: var(--arm-accent2) !important; box-shadow: 0 4px 22px rgba(124,58,237,0.6) !important; color: #fff !important; }

/* Bottom special buttons */
#taskmenu .special-buttons { border-top: 1px solid var(--arm-border) !important; margin-top: auto !important; padding-top: 8px !important; }
#taskmenu a.logout { color: var(--arm-pink) !important; }
#taskmenu a.logout:hover { background: rgba(236,72,153,0.12) !important; }

/* =========================================================
   FOLDER TREE SIDEBAR
   ========================================================= */
#layout-sidebar { background: var(--arm-sidebar) !important; border-right: 1px solid var(--arm-border) !important; }
#layout-sidebar .header {
  background: var(--arm-sidebar) !important;
  border-bottom: 1px solid var(--arm-border) !important;
  color: var(--arm-text) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  min-height: 60px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 14px !important;
}
#layout-sidebar .header .button { color: var(--arm-muted) !important; }
#layout-sidebar .header .button:hover { color: var(--arm-accent2) !important; }

/* Folder list */
#mailboxlist a, .folderlist a, .treelist li a {
  color: var(--arm-muted) !important;
  padding: 8px 14px !important;
  font-size: 13.5px !important;
  transition: var(--arm-t) !important;
  border-left: 3px solid transparent !important;
  display: flex !important;
  align-items: center !important;
}
#mailboxlist a:hover, .folderlist a:hover { color: var(--arm-text) !important; background: rgba(124,58,237,0.07) !important; }
#mailboxlist li.selected a, .folderlist li.selected a, .treelist li.selected a {
  color: var(--arm-accent2) !important;
  background: var(--arm-active-bg) !important;
  border-left-color: var(--arm-active) !important;
  font-weight: 600 !important;
}

/* Unread count badge */
.unreadcount, span.badge {
  background: var(--arm-accent) !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 1px 7px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  margin-left: auto !important;
}

/* Folder sidebar footer / quota */
#layout-sidebar .footer { background: var(--arm-sidebar) !important; border-top: 1px solid var(--arm-border) !important; }
.quota-widget .progressbar { background: var(--arm-border) !important; border-radius: 4px !important; }
.quota-widget .progressbar .value { background: linear-gradient(90deg, var(--arm-accent), var(--arm-accent2)) !important; }

/* =========================================================
   MESSAGE LIST
   ========================================================= */
#layout-list { background: var(--arm-bg) !important; border-right: 1px solid var(--arm-border) !important; }
#messagelist-header.header, #layout-list .header {
  background: var(--arm-card) !important;
  border-bottom: 1px solid var(--arm-border) !important;
  min-height: 58px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 14px !important;
  color: var(--arm-text) !important;
}
.header-title, #messagelist-header .header-title { color: var(--arm-text) !important; font-weight: 600 !important; font-size: 15px !important; }

/* Message rows */
#messagelist tr, .messagelist tr { border-bottom: 1px solid var(--arm-border) !important; background: var(--arm-bg) !important; transition: var(--arm-t) !important; }
#messagelist tr:hover td, .messagelist tr:hover td { background: var(--arm-card-2) !important; }
#messagelist tr.selected td, .messagelist tr.selected td { background: var(--arm-active-bg) !important; }
#messagelist td, .messagelist td { color: var(--arm-muted) !important; border: none !important; padding: 10px !important; font-size: 13.5px !important; }
#messagelist tr.unread td, .messagelist tr.unread td { color: var(--arm-text) !important; }
#messagelist tr.unread .subject, .messagelist tr.unread .subject,
#messagelist tr.unread .from, .messagelist tr.unread .from { font-weight: 600 !important; color: var(--arm-text) !important; }
#messagelist th, .messagelist th { background: var(--arm-card) !important; color: var(--arm-muted) !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.7px !important; border-bottom: 1px solid var(--arm-border) !important; padding: 8px 10px !important; font-weight: 700 !important; }

/* Searchbar */
.searchbar, #mailsearchform { background: var(--arm-card) !important; border-bottom: 1px solid var(--arm-border) !important; }
.searchbar input, #mailsearchform input[type=text] {
  background: var(--arm-input) !important;
  border: 1px solid var(--arm-border) !important;
  color: var(--arm-text) !important;
  border-radius: var(--arm-r-sm) !important;
  padding: 7px 12px !important;
  font-size: 13.5px !important;
}
.searchbar input:focus, #mailsearchform input:focus { border-color: var(--arm-accent) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(124,58,237,0.15) !important; }
.searchbar input::placeholder, #mailsearchform input::placeholder { color: var(--arm-muted) !important; }

/* Page nav */
.pagenav, #layout-list .footer { background: var(--arm-card) !important; border-top: 1px solid var(--arm-border) !important; color: var(--arm-muted) !important; font-size: 12px !important; }
.pagenav a, .pagenav button { color: var(--arm-muted) !important; background: transparent !important; border: none !important; }
.pagenav a:hover { color: var(--arm-accent2) !important; }

/* =========================================================
   CONTENT AREA
   ========================================================= */
#layout-content { background: var(--arm-bg) !important; }
#layout-content .header { background: var(--arm-card) !important; border-bottom: 1px solid var(--arm-border) !important; min-height: 58px !important; }

/* Override white iframe background area */
#messagecontframe, .iframe-wrapper iframe { background: var(--arm-bg) !important; }

/* =========================================================
   TOOLBAR
   ========================================================= */
.toolbar, #toolbar, .rcmail-toolbar { background: var(--arm-card) !important; border-bottom: 1px solid var(--arm-border) !important; }
.toolbar .button, .toolbar a, .toolbar button {
  color: var(--arm-muted) !important;
  background: transparent !important;
  border: none !important;
  border-radius: var(--arm-r-sm) !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
  transition: var(--arm-t) !important;
}
.toolbar .button:hover, .toolbar a:hover, .toolbar button:hover { color: var(--arm-text) !important; background: rgba(124,58,237,0.1) !important; }
.toolbar .button.disabled, .toolbar a.disabled { color: #2e2e4a !important; }

/* Toolbar inner spans - do NOT hide */
.toolbar .button span.inner { color: inherit !important; }

/* =========================================================
   HEADERS
   ========================================================= */
.header { background: var(--arm-card) !important; border-bottom: 1px solid var(--arm-border) !important; color: var(--arm-text) !important; }

/* =========================================================
   FORMS & INPUTS
   ========================================================= */
input:not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),
textarea, select {
  background: var(--arm-input) !important;
  border: 1px solid var(--arm-border) !important;
  color: var(--arm-text) !important;
  border-radius: var(--arm-r-sm) !important;
  font-family: inherit !important;
}
input:focus, textarea:focus, select:focus { border-color: var(--arm-accent) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(124,58,237,0.15) !important; }
input::placeholder, textarea::placeholder { color: var(--arm-muted) !important; }
label { color: var(--arm-muted) !important; font-size: 13px !important; }
.form-control { background: var(--arm-input) !important; border-color: var(--arm-border) !important; color: var(--arm-text) !important; }
.form-control:focus { background: var(--arm-card) !important; border-color: var(--arm-accent) !important; box-shadow: 0 0 0 3px rgba(124,58,237,0.15) !important; color: var(--arm-text) !important; }
.input-group-text { background: var(--arm-input) !important; border-color: var(--arm-border) !important; color: var(--arm-muted) !important; }
select option { background: var(--arm-card) !important; color: var(--arm-text) !important; }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn-primary { background: var(--arm-accent) !important; border-color: var(--arm-accent) !important; color: #fff !important; border-radius: var(--arm-r-sm) !important; font-weight: 600 !important; }
.btn-primary:hover { background: var(--arm-accent2) !important; border-color: var(--arm-accent2) !important; }
.btn-secondary { background: var(--arm-card) !important; border-color: var(--arm-border) !important; color: var(--arm-text) !important; border-radius: var(--arm-r-sm) !important; }
.btn-danger { background: transparent !important; border-color: var(--arm-pink) !important; color: var(--arm-pink) !important; border-radius: var(--arm-r-sm) !important; }
button.btn { border-radius: var(--arm-r-sm) !important; }

/* =========================================================
   POPUPS / MENUS
   ========================================================= */
.popupmenu, .popupmenu ul, #popupmenu {
  background: var(--arm-card) !important;
  border: 1px solid var(--arm-border) !important;
  border-radius: var(--arm-r-sm) !important;
  box-shadow: var(--arm-shadow) !important;
}
.popupmenu ul li a { color: var(--arm-text) !important; padding: 9px 16px !important; font-size: 13.5px !important; transition: var(--arm-t) !important; }
.popupmenu ul li a:hover, .popupmenu ul li a.active { background: var(--arm-active-bg) !important; color: var(--arm-accent2) !important; }
.popupmenu .separator, .popupmenu hr { border-color: var(--arm-border) !important; }

/* =========================================================
   DIALOGS
   ========================================================= */
.ui-dialog { background: var(--arm-card) !important; border: 1px solid var(--arm-border) !important; border-radius: var(--arm-r) !important; box-shadow: var(--arm-shadow) !important; color: var(--arm-text) !important; }
.ui-dialog .ui-dialog-titlebar { background: var(--arm-card) !important; border-bottom: 1px solid var(--arm-border) !important; color: var(--arm-text) !important; font-weight: 600 !important; padding: 16px 20px !important; border-radius: var(--arm-r) var(--arm-r) 0 0 !important; }
.ui-dialog .ui-dialog-content { background: var(--arm-card) !important; color: var(--arm-text) !important; }
.ui-dialog .ui-dialog-buttonpane { background: var(--arm-card) !important; border-top: 1px solid var(--arm-border) !important; }
.ui-widget, .ui-widget-content { background: var(--arm-card) !important; border-color: var(--arm-border) !important; color: var(--arm-text) !important; }
.ui-widget-overlay { background: rgba(0,0,0,0.7) !important; backdrop-filter: blur(4px) !important; }
.ui-dialog .ui-dialog-titlebar-close { background: transparent !important; border: none !important; color: var(--arm-muted) !important; }

/* =========================================================
   AUTOCOMPLETE
   ========================================================= */
.ui-autocomplete { background: var(--arm-card) !important; border-color: var(--arm-border) !important; box-shadow: var(--arm-shadow) !important; border-radius: var(--arm-r-sm) !important; }
.ui-autocomplete li { color: var(--arm-text) !important; padding: 8px 14px !important; border-bottom: 1px solid var(--arm-border) !important; }
.ui-autocomplete li:hover, .ui-state-focus { background: var(--arm-active-bg) !important; color: var(--arm-accent2) !important; }

/* =========================================================
   MESSAGE HEADER (reading pane)
   ========================================================= */
.message-header, #messageheader { background: var(--arm-card) !important; border-bottom: 1px solid var(--arm-border) !important; padding: 14px 16px !important; }
h2.subject, .subject { color: var(--arm-text) !important; font-weight: 700 !important; }
.addresses { color: var(--arm-muted) !important; }
.attachment-links, .attachment { background: var(--arm-input) !important; border: 1px solid var(--arm-border) !important; border-radius: var(--arm-r-sm) !important; color: var(--arm-text) !important; }

/* =========================================================
   NOTIFICATIONS
   ========================================================= */
#messagestack .notice, .notice { background: var(--arm-card) !important; border: 1px solid var(--arm-border) !important; border-radius: var(--arm-r-sm) !important; color: var(--arm-text) !important; box-shadow: var(--arm-shadow) !important; }
.notice.error { border-color: var(--arm-pink) !important; background: rgba(236,72,153,0.08) !important; color: var(--arm-pink) !important; }
.notice.confirmation { border-color: var(--arm-accent) !important; background: rgba(124,58,237,0.08) !important; color: var(--arm-accent2) !important; }

/* =========================================================
   CONTACTS
   ========================================================= */
.contactlist li a { color: var(--arm-muted) !important; padding: 10px 14px !important; transition: var(--arm-t) !important; border-left: 3px solid transparent !important; }
.contactlist li.selected a, .contactlist li a:hover { color: var(--arm-accent2) !important; background: var(--arm-active-bg) !important; border-left-color: var(--arm-active) !important; }

/* =========================================================
   SETTINGS
   ========================================================= */
.settings-sidebar .listing li a { color: var(--arm-muted) !important; padding: 10px 14px !important; border-left: 3px solid transparent !important; transition: var(--arm-t) !important; }
.settings-sidebar .listing li.selected a, .settings-sidebar .listing li a:hover { color: var(--arm-accent2) !important; background: var(--arm-active-bg) !important; border-left-color: var(--arm-active) !important; }

/* =========================================================
   TABLES
   ========================================================= */
table { color: var(--arm-text) !important; }
table th { background: var(--arm-card) !important; color: var(--arm-muted) !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; border-bottom: 1px solid var(--arm-border) !important; }
table td { border-bottom: 1px solid var(--arm-border) !important; }
table tr:hover td { background: var(--arm-card-2) !important; }

/* =========================================================
   MISC
   ========================================================= */
.propform, .formcontent, .propform td { background: transparent !important; color: var(--arm-text) !important; }
.scroller { background: var(--arm-bg) !important; }
.vcardattachment { background: var(--arm-card) !important; border-color: var(--arm-border) !important; }
.listbox { background: var(--arm-bg) !important; border-color: var(--arm-border) !important; }
.listbox .table-responsive { background: transparent !important; }

/* =========================================================
   RESPONSIVE — Mobile: icon-only sidebar
   ========================================================= */
@media (max-width: 768px) {
  #layout-menu { width: 52px !important; min-width: 52px !important; max-width: 52px !important; }
  #taskmenu span.inner, #taskmenu a span.inner, #taskmenu a > span.inner,
  #taskmenu a.button.icon > span.inner { display: none !important; }
  #taskmenu a:before { margin-right: 0 !important; }
  #taskmenu a { justify-content: center !important; padding: 12px 4px !important; }
}