/* Zuri Gardens brand theme. Palette pulled from the Zuri Amazon Finds visual:
 *   Deep forest green, warm cream, terracotta accent, sage detail.
 */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Inter:wght@400;500;600&display=swap');

:root {
    --zg-cream:        #F2EADA;
    --zg-cream-soft:   #F8F1DD;
    --zg-cream-card:   #FAF4E3;
    --zg-forest:       #284A2C;
    --zg-forest-deep:  #1E3A22;
    --zg-terracotta:   #A8442A;
    --zg-terracotta-d: #8A3920;
    --zg-sage:         #8B9970;
    --zg-ink:          #2A2520;
    --zg-muted:        #6C5F4E;
}

/* ---------- LOGIN PAGE ---------- */

body.task-login {
    background:
        radial-gradient(circle at 20% 10%, rgba(139,153,112,0.10), transparent 40%),
        radial-gradient(circle at 80% 90%, rgba(168,68,42,0.06), transparent 45%),
        var(--zg-cream) !important;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    color: var(--zg-ink);
}

body.task-login #layout-content,
body.task-login .formcontainer,
body.task-login #login-form {
    background: transparent;
}

body.task-login #login-form {
    max-width: 420px;
    margin: 6vh auto;
    padding: 40px 36px;
    background: var(--zg-cream-card);
    border: 1px solid rgba(40, 74, 44, 0.15);
    border-radius: 14px;
    box-shadow: 0 20px 40px -24px rgba(40, 74, 44, 0.25);
    position: relative;
}

/* Sage accent line, echoing the leaf flourish in the brand layout */
body.task-login #login-form::before {
    content: "";
    display: block;
    width: 56px;
    height: 2px;
    background: var(--zg-sage);
    margin: 4px auto 28px;
    opacity: 0.65;
}

body.task-login #login-form h1,
body.task-login #login-form legend,
body.task-login #login-form .formtitle {
    font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    color: var(--zg-forest);
    font-weight: 600;
    font-size: 2rem;
    letter-spacing: 0.01em;
    text-align: center;
    border: 0;
    margin: 0 0 4px;
}

body.task-login #login-form label {
    color: var(--zg-muted);
    font-weight: 500;
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.task-login #login-form input.form-control,
body.task-login #login-form input[type="text"],
body.task-login #login-form input[type="password"] {
    background: #ffffff;
    border: 1px solid rgba(40, 74, 44, 0.22);
    border-radius: 10px;
    color: var(--zg-ink);
    padding: 12px 14px;
    transition: border-color 120ms, box-shadow 120ms;
}

body.task-login #login-form input.form-control:focus,
body.task-login #login-form input[type="text"]:focus,
body.task-login #login-form input[type="password"]:focus {
    border-color: var(--zg-sage);
    box-shadow: 0 0 0 3px rgba(139, 153, 112, 0.28);
    outline: 0;
}

/* Submit button — the terracotta price-chip color */
body.task-login #login-form button.btn-primary,
body.task-login #login-form input.button.mainaction,
body.task-login #login-form button.mainaction,
body.task-login #rcmloginsubmit {
    background: var(--zg-terracotta);
    border: 1px solid var(--zg-terracotta);
    color: var(--zg-cream-soft);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.875rem;
    border-radius: 10px;
    padding: 12px 16px;
    width: 100%;
    transition: background 120ms, transform 80ms;
}

body.task-login #login-form button.btn-primary:hover,
body.task-login #login-form input.button.mainaction:hover,
body.task-login #login-form button.mainaction:hover,
body.task-login #rcmloginsubmit:hover {
    background: var(--zg-terracotta-d);
    border-color: var(--zg-terracotta-d);
}

body.task-login #login-form button.btn-primary:active,
body.task-login #rcmloginsubmit:active {
    transform: translateY(1px);
}

/* Top bar / brand strip */
body.task-login header#layout-header,
body.task-login #topline {
    background: var(--zg-forest) !important;
    color: var(--zg-cream-soft) !important;
    border-bottom: 0;
}

body.task-login header#layout-header * {
    color: var(--zg-cream-soft) !important;
}

/* Links */
body.task-login a {
    color: var(--zg-forest);
}
body.task-login a:hover {
    color: var(--zg-terracotta);
}

/* Error / notice banners */
body.task-login .ui.alert.alert-danger,
body.task-login .ui.alert.alert-warning {
    background: rgba(168, 68, 42, 0.10);
    color: var(--zg-terracotta-d);
    border-color: rgba(168, 68, 42, 0.25);
    border-radius: 10px;
}

body.task-login .ui.alert.alert-success {
    background: rgba(139, 153, 112, 0.15);
    color: var(--zg-forest);
    border-color: rgba(139, 153, 112, 0.35);
    border-radius: 10px;
}

/* Tagline below the form title (rendered if site has a footer) */
body.task-login .tagline {
    color: var(--zg-muted);
    font-style: italic;
    text-align: center;
    margin-top: 8px;
    font-size: 0.95rem;
}

/* ---------- POST-LOGIN APP (gentle continuity, not a full reskin) ---------- */

/* Top app bar: cream so the Zuri wordmark + dark icons read naturally. */
body:not(.task-login) #layout-header,
body:not(.task-login) .header {
    background: var(--zg-cream-soft) !important;
    color: var(--zg-ink) !important;
    border-bottom: 1px solid rgba(40, 74, 44, 0.18);
}

body:not(.task-login) #layout-header *,
body:not(.task-login) .header * {
    color: var(--zg-ink);
}

/* Toolbar icons and buttons in the header */
body:not(.task-login) #layout-header a,
body:not(.task-login) #layout-header button,
body:not(.task-login) #layout-header .button,
body:not(.task-login) .header a,
body:not(.task-login) .header button {
    color: var(--zg-forest) !important;
}

body:not(.task-login) #layout-header a:hover,
body:not(.task-login) #layout-header button:hover,
body:not(.task-login) .header a:hover {
    color: var(--zg-terracotta) !important;
}

/* Logo: give it room and a touch of left padding so it sits nicely */
body:not(.task-login) #logo,
body:not(.task-login) .header .logo {
    padding-left: 4px;
}
body:not(.task-login) #logo img,
body:not(.task-login) .header img {
    max-height: 28px;
    width: auto;
}

/* Primary buttons (Compose, etc.) keep the terracotta accent */
body:not(.task-login) .btn-primary,
body:not(.task-login) a.button.create.disabled,
body:not(.task-login) a.button.create {
    background: var(--zg-terracotta) !important;
    border-color: var(--zg-terracotta) !important;
    color: var(--zg-cream-soft) !important;
}

body:not(.task-login) .btn-primary:hover,
body:not(.task-login) a.button.create:hover {
    background: var(--zg-terracotta-d) !important;
    border-color: var(--zg-terracotta-d) !important;
}