@import "../design/luftschloss.css";
@import "../design/fonts.css";
/* The inherited Elastic form keeps Roundcube's login and CSRF behaviour. */
html, body.task-login { background: var(--muted); color: var(--foreground); font-family: var(--font-sans); }
.task-login #layout-content { background: var(--card); width: min(100% - 2rem, 28rem); height: auto; min-height: 0; flex: none; margin: auto; padding: var(--spacing-8); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); text-align: left; }
.task-login #layout { min-height: 100dvh; height: auto; padding-block: var(--spacing-8); align-items: center; }
.suite-login-brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-2); margin-bottom: var(--spacing-8); }
.suite-login-brand img { max-width: 10rem; height: auto; }
.suite-login-brand span { font-size: var(--font-size-sm); color: var(--muted-foreground); }
.task-login h1 { font-family: var(--font-heading); font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-tight); line-height: var(--line-height-tight); margin-bottom: var(--spacing-3); }
.suite-login-intro { font-size: var(--font-size-sm); color: var(--muted-foreground); margin-bottom: var(--spacing-6); }
.task-login #login-form { position: static; width: 100%; max-width: none; margin: 0; }
.task-login #login-form .input-group { margin-bottom: var(--spacing-4); }
.task-login #login-form .input-group-text { background: var(--muted); color: var(--muted-foreground); border-color: var(--input); }
.task-login #rcmloginsubmit { width: 100%; min-height: 2.75rem; border: 0; border-radius: var(--radius-lg); background: var(--primary); color: var(--primary-foreground); font-family: var(--font-sans); font-weight: var(--font-weight-medium); box-shadow: var(--shadow-xs); }
.task-login #rcmloginsubmit:hover { background: color-mix(in srgb, var(--primary) 92%, transparent); }
.task-login #login-footer { margin-top: var(--spacing-6); color: var(--muted-foreground); font-size: var(--font-size-xs); }
.task-login :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

.task-login #rcmloginsubmit:disabled { cursor: wait; opacity: .75; }
.task-login #rcmloginsubmit { display: flex; align-items: center; justify-content: center; gap: .75rem; }
.task-login #rcmloginsubmit .css-spinloader { width: 1.25rem; height: 1.25rem; border-top-width: 2px; }
.suite-login-status { margin-top: 1rem; color: var(--muted-foreground); font-size: var(--font-size-sm); }
.suite-login-status:empty { display: none; }