/* Think Tech Support webmail branding */
:root{ --tt-blue:#054677; --tt-blue2:#235787; --tt-cyan:#42e6e3; }

/* ============================ LOGIN PAGE ============================ */
body.task-login,
.task-login #layout,
.task-login #layout-content,
.task-login #layout-content .w-100{
  background:linear-gradient(135deg,#054677 0%,#235787 100%) !important;
}

/* Center the BOX on the page, with logo+name stacked above it.
   The ::after spacer mirrors the brand header height so the form lands dead-center. */
.task-login #layout-content{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:100vh !important;
}
.task-login .tt-brandhead{
  height:200px;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:center;
  margin:0;
}
.task-login #layout-content::after{ content:""; display:block; height:200px; }

.task-login #login-form,
.task-login img#logo,
.task-login .tt-brandname{
  position:static !important; top:auto !important; left:auto !important;
  transform:none !important; float:none !important;
}

/* Logo */
.task-login img#logo{
  max-height:150px !important; width:auto !important;
  display:block; margin:0 auto !important;
}

/* Brand name in white directly under the logo */
.task-login .tt-brandname{
  color:#ffffff !important;
  font-weight:600; font-size:24px; line-height:1.1;
  text-transform:uppercase; letter-spacing:.4px; text-align:center;
  margin:12px 0 0 !important;
  text-shadow:0 2px 6px rgba(0,0,0,.35);
}

/* Hide the default brand text at the bottom of the form */
.task-login #login-footer{ display:none !important; }

/* White login card */
.task-login #login-form{
  background:#ffffff !important;
  border-radius:14px !important;
  box-shadow:0 14px 40px rgba(0,0,0,.35) !important;
  padding:26px 26px 22px !important;
  width:420px !important; max-width:90vw !important;
  margin:0 auto !important;
}

/* LOGIN button -> exact match to home page "Get Support!" button */
.task-login button#rcmloginsubmit,
.task-login button[type=submit]{
  background-image:linear-gradient(135deg,#46fffb 0%,#235787 100%) !important;
  background-color:transparent !important;
  color:#ffffff !important; font-weight:700 !important;
  text-transform:uppercase !important; letter-spacing:.5px !important;
  border:0 !important; border-radius:0 !important;
  box-shadow:5px 5px 5px rgba(0,0,0,.83) !important;
  padding:12px 22px !important;
}
.task-login button#rcmloginsubmit:hover,
.task-login button[type=submit]:hover{ filter:brightness(1.06) !important; }

.task-login input.form-control:focus,
.task-login .form-control:focus{
  border-color:var(--tt-cyan) !important;
  box-shadow:0 0 0 .18rem rgba(66,230,227,.45) !important;
}

/* ===================== LOGGED-IN APP ACCENT ===================== */
/* Replace Elastic sky-blue (#37beff / #006a9d) accents with brand blue */

/* Selected list rows / folders */
.listing tbody tr.selected > td,
.listing li.selected > a,
.listing li.selected > div,
#messagelist tbody tr.selected td,
.folderlist li.selected > a,
ul.treelist li.selected > a{
  background-color:var(--tt-blue) !important;
  color:#fff !important;
}

/* Primary buttons (solid brand blue in the app) */
.btn-primary,
button.btn-primary,
.formbuttons .button.mainaction{
  background-color:var(--tt-blue) !important;
  border-color:var(--tt-blue) !important;
  color:#fff !important;
}
.btn-primary:hover,
button.btn-primary:hover{
  background-color:var(--tt-blue2) !important;
  border-color:var(--tt-blue2) !important;
}

/* Links & active toolbar/menu items */
a{ color:var(--tt-blue); }
#layout-menu .selected a,
.menu li.selected > a,
.pagenav a.active,
.toolbar a.button.selected{
  color:var(--tt-blue) !important;
}

/* Floating compose / action buttons */
a.button.create,
.floating-action-buttons a,
.menu .compose a.button{
  background-color:var(--tt-blue) !important;
  color:#fff !important;
}

/* Custom checkboxes / radios + form focus -> brand */
.custom-control-input:checked ~ .custom-control-label::before{
  background-color:var(--tt-blue) !important;
  border-color:var(--tt-blue) !important;
}
input[type=checkbox], input[type=radio]{ accent-color:var(--tt-blue); }
.form-control:focus, .form-check-input:focus{
  border-color:var(--tt-cyan) !important;
  box-shadow:0 0 0 .15rem rgba(66,230,227,.4) !important;
}

/* Unread count badges / highlights */
.unreadcount, span.badge.unread{
  background-color:var(--tt-blue) !important; color:#fff !important;
}