/* Website Presentation - Frontpage Styles (responsive, full-viewport) */
:root{
    --umm-primary: #0f172a; /* deep blue */
    --umm-accent: #1e3a8a;  /* darker blue */
    --umm-highlight: #60a5fa; /* light blue */
    --umm-bg: linear-gradient(180deg, rgba(14,42,128,0.95) 0%, rgba(96,165,250,0.9) 100%);
    --umm-text: #ffffff;
    /* Input colors — skins may override these variables to ensure good contrast */
    --umm-input-text: var(--umm-text);
    --umm-input-placeholder: rgba(255,255,255,0.75);
}

html,body,#umm-website-frontpage{
    height:100%;
    margin:0;
}

#umm-website-frontpage{
    width:100%;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
    color:var(--umm-text);
    background: var(--umm-bg);
    background-size:cover;
    background-position:center;
    box-sizing:border-box;
}

.umm-frontpage-inner{
    width:100%;
    max-width:100%;
    padding:40px;
    display:grid;
    grid-template-columns: 1fr 380px;
    gap:40px;
    align-items:center;
}

@media (max-width:900px){
    .umm-frontpage-inner{
        grid-template-columns: 1fr;
        padding:30px;
    }
}

.umm-branding{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.umm-logo {
    width:140px;
    height:140px;
    border-radius:16px;
    overflow:hidden;
    box-shadow: 0 8px 30px rgba(2,6,23,0.4);
    background: rgba(255,255,255,0.06);
    display:flex;
    align-items:center;
    justify-content:center;
}

.umm-logo img{ width:100%; height:100%; object-fit:contain; }

.umm-title {
    font-size:38px;
    font-weight:800;
    margin:0;
    letter-spacing:-0.5px;
    color:var(--umm-text);
}

.umm-subtitle{
    margin:0; font-size:20px; color:rgba(255,255,255,0.9); font-weight:600;
}

.umm-description{
    color:rgba(255,255,255,0.9);
    max-width:720px;
    line-height:1.5;
    font-size:15px;
}

.umm-copyright{
    font-size:12px; opacity:0.8; margin-top:18px;
}

/* Login card */
.umm-login-card{
    background: rgba(255,255,255,0.06);
    border-radius:16px;
    padding:24px;
    box-shadow: 0 6px 20px rgba(2,6,23,0.35);
    border: 1px solid rgba(255,255,255,0.06);
}

.umm-login-card h3{ margin:0 0 14px 0; font-size:20px; font-weight:700; }

.umm-login-form{
    display:flex; flex-direction:column; gap:12px;
}

.umm-input{
    width:100%;
    padding:12px 14px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
    color: var(--umm-input-text);
    font-size:14px;
}

/* Ensure placeholder text is visible and uses the skin-aware variable */
.umm-input::placeholder,
.umm-input::-webkit-input-placeholder,
.umm-input:-ms-input-placeholder {
    color: var(--umm-input-placeholder);
    opacity: 1; /* make sure browser doesn't reduce visibility further */
}

/* Slightly reduce placeholder opacity while the field is focused */
.umm-input:focus::placeholder {
    opacity: 0.75;
}

/* Autofill treatment so Chrome/Chromium doesn't make text invisible */
.umm-input:-webkit-autofill {
    -webkit-text-fill-color: var(--umm-input-text) !important;
}

.umm-btn{
    appearance:none; border:0; cursor:pointer;
    padding:12px 18px; border-radius:10px; font-weight:700; color:var(--umm-text);
    background: linear-gradient(90deg, var(--umm-accent), var(--umm-highlight));
    box-shadow: 0 6px 18px rgba(27,72,163,0.35);
}

.umm-btn:disabled{ opacity:0.6; cursor:not-allowed }

.umm-login-footer{ font-size:13px; color:rgba(255,255,255,0.85); margin-top:8px; }

/* small helpers */
.umm-center{ display:flex; align-items:center; justify-content:center; }

/* Accessibility focus states */
.umm-input:focus{ outline:2px solid rgba(96,165,250,0.3); outline-offset:2px }
.umm-btn:focus{ outline:3px solid rgba(96,165,250,0.25); outline-offset:1px }