/* TandaBui Institute - Branding CSS
 * Brand colors and styling for login page + main UI
 */

:root {
  --tanda-primary: #2CBFA3;
  --tanda-secondary: #AEF2EB;
  --tanda-accent: #AFF2EB;
  --tanda-dark: #010D00;
  --tanda-white: #FFFFFF;
}

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

/* Light aqua background for login page */
body.task-login {
  background: var(--tanda-secondary) !important;
  min-height: 100vh !important;
  margin: 0 !important;
}

/* Layout wrapper: flex container to center the card */
body.task-login #layout,
body.task-login.action-none #layout {
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* Hide the default heading */
body.task-login h1.voice,
body.task-login #layout > h1 {
  display: none !important;
}

/* Login card container (uses #layout-content) */
body.task-login #layout-content {
  background: var(--tanda-white) !important;
  max-width: 400px !important;
  width: 400px !important;
  margin: 0 auto !important;
  padding: 40px 30px !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
  text-align: center !important;
}

/* Logo styling - constrain size */
body.task-login #logo {
  text-align: center !important;
  margin-bottom: 25px !important;
  background: transparent !important;
  padding: 0 !important;
}

body.task-login #logo img,
body.task-login #logo svg {
  max-width: 220px !important;
  max-height: 90px !important;
  width: auto !important;
  height: auto !important;
  display: inline-block !important;
  object-fit: contain !important;
}

/* Login form */
body.task-login #login-form {
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

/* Table-based layout from Elastic: keep it simple */
body.task-login #login-form table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 0 !important;
}

body.task-login #login-form table tbody {
  width: 100% !important;
}

/* Completely hide the label column */
body.task-login #login-form table td.title,
body.task-login #login-form table td.title label {
  display: none !important;
}

/* Input cell holds the field */
body.task-login #login-form table td.input {
  padding: 0 !important;
  margin: 0 0 12px 0 !important;
}

/* Hide any remaining labels (we use placeholders instead) */
body.task-login #login-form label {
  display: none !important;
}

/* Position the button group inside the card */
body.task-login #login-form p.formbuttons {
  margin: 10px 0 0 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

/* Input fields */
body.task-login #login-form input[type="text"],
body.task-login #login-form input[type="password"],
body.task-login #login-form input[type="email"],
body.task-login #login-form .form-control {
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
  padding: 12px 15px !important;
  font-size: 14px !important;
  background: #f9f9f9 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}

body.task-login #login-form input:focus {
  border-color: var(--tanda-primary) !important;
  outline: none !important;
  background: var(--tanda-white) !important;
}

/* Login button */
body.task-login #login-form button[type="submit"],
body.task-login #login-form input[type="submit"],
body.task-login #login-form .button.submit,
body.task-login #login-form .button.mainaction {
  background: var(--tanda-primary) !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 12px 20px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: white !important;
  width: 100% !important;
  margin-top: 4px !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}

body.task-login #login-form button[type="submit"]:hover,
body.task-login #login-form .button.submit:hover,
body.task-login #login-form .button.mainaction:hover {
  background: #229680 !important;
}

/* Footer inside login card */
body.task-login #login-footer {
  text-align: center !important;
  margin-top: 20px !important;
  padding-top: 15px !important;
  border-top: 1px solid #eee !important;
}

body.task-login #login-footer .support-link {
  display: inline-block !important;
  margin-bottom: 8px !important;
  font-size: 13px !important;
  color: var(--tanda-primary) !important;
  text-decoration: none !important;
}

body.task-login #login-footer .support-link:hover {
  text-decoration: underline !important;
}

body.task-login #login-footer .brand-tagline {
  color: #666 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin: 0 !important;
}

/* Hide global support link outside card */
body.task-login #supportlink {
  display: none !important;
}

/* ============================================================
   MAIN UI BRANDING (after login)
   ============================================================ */

/* Header/toolbar branding */
#layout > .header {
  background-color: var(--tanda-primary) !important;
}

/* Sidebar task buttons: active = brand color, inactive = grey */
#taskmenu a.button {
  color: var(--tanda-white) !important;
  background-color: transparent !important; /* let Elastic's dark bar show for inactive */
}

#taskmenu a.button.selected {
  background-color: var(--tanda-primary) !important;
}

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

/* Keep Compose action prominent in brand color */
#taskmenu a.button.compose:not(.selected) {
  background-color: var(--tanda-primary) !important;
}

/* Primary buttons */
.button.primary,
.btn-primary,
a.button.mainaction {
  background-color: var(--tanda-primary) !important;
  border-color: var(--tanda-primary) !important;
}

.button.primary:hover,
.btn-primary:hover,
a.button.mainaction:hover {
  background-color: #229680 !important;
  border-color: #229680 !important;
}

/* Links */
a {
  color: var(--tanda-primary);
}

a:hover {
  color: #229680;
}

/* Selection/highlight colors */
.listing li.selected,
.listing tr.selected td {
  background-color: var(--tanda-secondary) !important;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: var(--tanda-primary);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #229680;
}

/* Final login alignment + cleanup overrides */
body.task-login #login-form table {
  max-width: 320px !important;  /* narrower than card to give side padding */
  margin: 0 auto !important;    /* center horizontally in the card */
}

body.task-login #login-form table td {
  background: transparent !important; /* remove any gray cell background */
}

/* Hide grey login input icons (user/pass) */
body.task-login #login-form .input-group-prepend,
body.task-login #login-form .input-group-text,
body.task-login #login-form .input-group-text.icon,
body.task-login #login-form .input-group-text.icon.user,
body.task-login #login-form .input-group-text.icon.pass {
  display: none !important;
}

body.task-login #login-form .input-group {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}