/* ============================================
   Catalyst Login Styles
   Extracted from layout.html inline styles
   ============================================ */

body.task-login,
body.task-login * {
  box-sizing: border-box;
}

body.task-login {
  margin: 0;
  padding: 0;
  background: #fafafa;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

html.dark-mode body.task-login,
html.dark body.task-login {
  background: #09090b;
}

/* Roundcube layout containers */
body.task-login #layout {
  display: block;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0;
  margin: 0;
  max-width: none;
  background: transparent;
  width: 100%;
  position: relative;
}

body.task-login #layout-content {
  display: block;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0;
  margin: 0;
  max-width: none;
  background: transparent;
  width: 100%;
  position: relative;
}

body.task-login #layout > *:not(#layout-content) {
  display: none;
}

/* ============================================
   FORM TABLE TO BLOCK CONVERSION
   ============================================ */
body.task-login #login-form table,
body.task-login #login-form table tbody {
  display: block;
  width: 100%;
  border: none;
  background: none;
  margin: 0;
  padding: 0;
  border-collapse: collapse;
}

body.task-login #login-form table tr {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}

body.task-login #login-form table tr + tr {
  margin-top: 1.25rem;
}

body.task-login #login-form table td {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
}

/* ============================================
   LABEL STYLING
   ============================================ */
body.task-login #login-form table td.title label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5rem;
  font-weight: 500;
  color: #18181b;
  user-select: none;
}

html.dark-mode body.task-login #login-form table td.title label,
html.dark body.task-login #login-form table td.title label {
  color: #ffffff;
}

/* ============================================
   INPUT STYLING
   ============================================ */
body.task-login #login-form table td.input {
  position: relative;
  display: block;
  width: 100%;
}

body.task-login #login-form table td.input::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--catalyst-radius-lg);
  background: white;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

html.dark-mode body.task-login #login-form table td.input::before,
html.dark body.task-login #login-form table td.input::before {
  background: transparent;
  box-shadow: none;
}

body.task-login #login-form table td.input:has(input:focus)::after {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: var(--catalyst-radius-lg);
  box-shadow: 0 0 0 2px #3b82f6;
}

html.dark-mode body.task-login #login-form table td.input:has(input:focus)::after,
html.dark body.task-login #login-form table td.input:has(input:focus)::after {
  box-shadow: 0 0 0 2px #60a5fa;
}

body.task-login #login-form table td.input input[type="text"],
body.task-login #login-form table td.input input[type="password"] {
  position: relative;
  display: block;
  width: 100%;
  appearance: none;
  border-radius: var(--catalyst-radius-lg);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5rem;
  font-family: inherit;
  color: #18181b;
  border: 1px solid var(--catalyst-border);
  background: transparent;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

body.task-login #login-form table td.input input::placeholder {
  color: #71717a;
}

body.task-login #login-form table td.input input:hover {
  border-color: rgba(9, 9, 11, 0.2);
}

html.dark-mode body.task-login #login-form table td.input input[type="text"],
html.dark-mode body.task-login #login-form table td.input input[type="password"],
html.dark body.task-login #login-form table td.input input[type="text"],
html.dark body.task-login #login-form table td.input input[type="password"] {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
}

html.dark-mode body.task-login #login-form table td.input input:hover,
html.dark body.task-login #login-form table td.input input:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

/* ============================================
   SVG LOGO DARK MODE
   ============================================ */
html.dark-mode .svg-globe-dark,
html.dark .svg-globe-dark {
  fill: #52525b;
}

html.dark-mode .svg-globe-light,
html.dark .svg-globe-light {
  fill: #3f3f46;
}

/* ============================================
   SELECT (HOST DROPDOWN) STYLING
   ============================================ */
body.task-login #login-form table td.input select {
  position: relative;
  display: block;
  width: 100%;
  appearance: none;
  border-radius: var(--catalyst-radius-lg);
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5rem;
  font-family: inherit;
  color: #18181b;
  border: 1px solid var(--catalyst-border);
  background: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2371717a' viewBox='0 0 16 16'%3E%3Cpath d='M4.47 5.97a.75.75 0 0 1 1.06 0L8 8.44l2.47-2.47a.75.75 0 1 1 1.06 1.06l-3 3a.75.75 0 0 1-1.06 0l-3-3a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

body.task-login #login-form table td.input select:hover {
  border-color: rgba(9, 9, 11, 0.2);
}

html.dark-mode body.task-login #login-form table td.input select,
html.dark body.task-login #login-form table td.input select {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.1);
  background-color: rgba(255, 255, 255, 0.05);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23a1a1aa' viewBox='0 0 16 16'%3E%3Cpath d='M4.47 5.97a.75.75 0 0 1 1.06 0L8 8.44l2.47-2.47a.75.75 0 1 1 1.06 1.06l-3 3a.75.75 0 0 1-1.06 0l-3-3a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E");
}

html.dark-mode body.task-login #login-form table td.input select:hover,
html.dark body.task-login #login-form table td.input select:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

html.dark-mode body.task-login #login-form table td.input select option,
html.dark body.task-login #login-form table td.input select option {
  background: #27272a;
  color: #ffffff;
}

/* ============================================
   HIDE ROUNDCUBE DEFAULT ELEMENTS
   ============================================ */
body.task-login #login-form p.formbuttons,
body.task-login #login-form .formbuttons,
body.task-login #login-form table .button {
  display: none;
}

/* ============================================
   DARK MODE — ADDITIONAL OVERRIDES
   ============================================ */

/* Ensure #layout and #layout-content have no background in dark mode */
html.dark-mode body.task-login #layout,
html.dark body.task-login #layout,
html.dark-mode body.task-login #layout-content,
html.dark body.task-login #layout-content {
  background: transparent;
}

/* Message/notification bar dark mode */
html.dark-mode body.task-login #messagestack,
html.dark body.task-login #messagestack {
  color: #ffffff;
}

/* Mobile logo — give it a subtle light bg in dark mode so the green "d" is clear */
html.dark-mode body.task-login .login-logo-mobile,
html.dark body.task-login .login-logo-mobile {
  background: #ffffff;
  border-radius: 0.75rem;
}