/* =============================================================================
   Roundcube Elastic Skin — Custom Branding for Thinkarhouse
   Primary: #2563eb | Dark accent: #1e3a8a
   These rules add layout-level customizations on top of the recolored styles.min.css
   ============================================================================= */

/* --- Login Page ------------------------------------------------------------ */
body.task-login {
  background: linear-gradient(135deg, #f0f4ff 0%, #dbe4ff 50%, #f5f7ff 100%);
}

body.task-login #login-form {
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(37, 99, 235, 0.14);
  border: 1px solid #c7d7fd;
  padding: 2rem 2.5rem 1.5rem;
}

body.task-login #logo {
  max-height: 60px;
  max-width: 240px;
  object-fit: contain;
  margin-bottom: 1.2rem;
}

body.task-login #login-form .input-group .form-control:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
  outline: none;
}

body.task-login #login-form button[type="submit"],
body.task-login .formbuttons button.mainaction {
  background: #2563eb !important;
  border-color: #2563eb !important;
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: background 0.2s, box-shadow 0.2s;
}

body.task-login #login-form button[type="submit"]:hover,
body.task-login .formbuttons button.mainaction:hover {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* --- Task Menu (left icon bar) --------------------------------------------- */
#taskmenu {
  background: #1e3a8a;
}

#taskmenu a,
#taskmenu button {
  color: rgba(255, 255, 255, 0.75) !important;
}

#taskmenu a:hover,
#taskmenu button:hover,
#taskmenu a.selected,
#taskmenu button.selected {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

/* --- Sidebar header -------------------------------------------------------- */
#layout-sidebar .header,
#layout-list .header {
  background: #f8faff;
  border-bottom: 1px solid #dbeafe;
}

/* --- Message list selected row --------------------------------------------- */
#messagelist tbody tr.selected td,
ul.treelist li.selected > .treetoggle + a,
ul.treelist li.selected > a {
  background: #eff6ff !important;
  border-left: 3px solid #2563eb;
}

/* --- Folder listing active item -------------------------------------------- */
#folderlist-content .mailbox.selected > a,
#folderlist-content li.selected > a {
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 600;
}

/* --- Unread badge ---------------------------------------------------------- */
.unreadcount,
.badge {
  background: #2563eb !important;
}

/* --- Toolbar buttons active state ------------------------------------------ */
.toolbar a.button.selected,
.toolbar button.selected {
  color: #2563eb;
  border-color: #2563eb;
}

/* --- Main action buttons --------------------------------------------------- */
a.button.primary,
button.primary,
.formbuttons button.mainaction {
  background: #2563eb !important;
  border-color: #2563eb !important;
  border-radius: 8px;
}

a.button.primary:hover,
button.primary:hover,
.formbuttons button.mainaction:hover {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
}

/* --- Compose form focus ---------------------------------------------------- */
#compose-subject:focus,
#composebody:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

/* --- Popup menus ----------------------------------------------------------- */
.popupmenu .active > a,
.popupmenu li > a:hover,
.popupmenu li > a:focus {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
}

/* --- Logo in top bar ------------------------------------------------------- */
#layout #logo img,
.header #logo img {
  max-height: 30px;
  object-fit: contain;
}

/* --- Mobile popover header: use icon instead of wide logo ------------------ */
.popover-header #logo,
#nav-menu .popover-header #logo {
  content: url('roundcube-icon.png');
  width: 36px !important;
  height: 36px !important;
  object-fit: contain;
}

/* --- Hide Mailvelope (PGP encryption - not installed/needed) --------------- */
a.button.encrypt,
button.encrypt,
.toolbar a[title*="mailvelope"],
.toolbar button[title*="mailvelope"],
#compose-encrypt,
#rcmrow_mailvelope_main_keyring,
#mailvelope-warning,
fieldset.sectionsbox .section-title[id*="mailvelope"],
tr.mailvelope,
.mailvelope-section {
  display: none !important;
}

/* --- Responsive ------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  body.task-login #logo {
    max-height: 46px;
  }

  body.task-login #login-form {
    padding: 1.5rem 1.2rem 1rem;
  }
}