/* ------------------------------------------------------------------
   QBTAAX Webmail — child skin of Elastic.
   Inherits everything from Elastic, then repaints the accent from
   Roundcube blue (#37beff) to the QBTAAX brand green (#22A02A).
   Upgrading Roundcube does not touch this file.
   ------------------------------------------------------------------ */
@import url("../../elastic/styles/styles.min.css");

:root{
  --qb-green:#22a02a;
  --qb-green-hover:#29b833;
  --qb-green-dark:#1b8222;
  --qb-ring:rgba(34,160,42,.45);
}

/* ---- primary actions: login, send, save, create ---- */
.btn-primary,
button.btn.btn-primary,
input.btn-primary,
#rcmloginsubmit,
.formbuttons .btn.btn-primary{
  background:var(--qb-green)!important;
  border-color:var(--qb-green)!important;
  color:#fff!important;
}
.btn-primary:hover,
#rcmloginsubmit:hover,
.formbuttons .btn.btn-primary:hover{
  background:var(--qb-green-hover)!important;
  border-color:var(--qb-green-hover)!important;
}
.btn-primary:focus,
.btn-primary:active,
#rcmloginsubmit:focus{
  background:var(--qb-green-hover)!important;
  border-color:var(--qb-green-dark)!important;
  box-shadow:0 0 0 .2rem var(--qb-ring)!important;
}
.btn-primary:disabled{background:var(--qb-green)!important;opacity:.55}

/* ---- links ---- */
a,a:active,a:visited{color:var(--qb-green)}
a:hover{color:var(--qb-green-hover)}

/* ---- selected rows in the message list & folder list ---- */
#messagelist tbody tr.selected > td,
#messagelist tbody tr.selected:focus > td,
.listing li.selected > a,
.listing li.selected > div > a,
.listing tr.selected > td,
#folderlist li.selected > a{
  background-color:var(--qb-green)!important;
  color:#fff!important;
}
.listing li.selected > a *,
#messagelist tbody tr.selected > td *{color:#fff!important}

/* ---- unread counter badges ---- */
.listing li a .unreadcount,
#folderlist li a .unreadcount,
.badge-primary{
  background-color:var(--qb-green)!important;
  color:#fff!important;
}

/* ---- toolbar & menu highlights ---- */
.toolbar a.button:hover,
.toolbar a.button:focus,
#taskmenu a.selected,
#taskmenu a:hover{color:var(--qb-green)!important}
#taskmenu a.selected:before{color:var(--qb-green)!important}

/* ---- form focus states ---- */
input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus,
.form-control:focus{
  border-color:var(--qb-green)!important;
  box-shadow:0 0 0 .15rem var(--qb-ring)!important;
}

/* ---- checkboxes / switches ---- */
input[type=checkbox].custom-control-input:checked ~ .custom-control-label::before,
.custom-control-input:checked ~ .custom-control-label::before{
  background-color:var(--qb-green)!important;
  border-color:var(--qb-green)!important;
}

/* ---- progress / loading bar ---- */
#messagestack div.loading,
.progress-bar{background-color:var(--qb-green)!important}

/* ---- login screen: give the brand mark room to breathe ---- */
#login-form .box-inner{padding-top:26px}
#login-form #logo{max-height:56px;width:auto;margin-bottom:22px}
#login-form .banner,
#login-form .product-name{color:var(--qb-green)}