/* MedCalc Branding + Professional Footer Hotfix
   This file is intentionally self-contained. It styles the dynamic branding
   already present in the layout and fixes the raw footer seen when this asset
   was missing or not uploaded. */

/* Uploaded logo and initials */
.brand-logo-image{
    width:100%;
    height:100%;
    object-fit:contain;
    border-radius:16px;
    background:#fff;
    padding:5px;
}
.brand-mark-image{
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
.brand-login-logo-image{
    width:88px;
    height:88px;
    object-fit:contain;
    border-radius:22px;
    background:#fff;
    padding:8px;
    border:1px solid #e2e8f0;
    box-shadow:0 12px 32px rgba(15,23,42,.10);
}

/* Branding Settings live preview */
.brand-preview-mark,
.brand-preview-image-box{
    flex:0 0 62px;
    width:62px;
    height:62px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#2563eb 0%,#06b6d4 100%);
    color:#fff;
    font-size:1.12rem;
    font-weight:800;
    letter-spacing:.08em;
    box-shadow:0 14px 30px rgba(37,99,235,.18);
}
.brand-preview-image{
    width:100%;
    height:100%;
    object-fit:contain;
    border-radius:18px;
    background:#fff;
    padding:6px;
}
.brand-footer-preview{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:.32rem;
    padding:.72rem .82rem;
    border:1px solid #e2e8f0;
    border-radius:13px;
    background:linear-gradient(105deg,#fff,#f8fbff);
    color:#64748b;
    font-size:.76rem;
}
.brand-footer-preview span:first-child{
    color:#0f172a;
    font-weight:750;
}

/* Ensure the application uses a proper footer layout even when app.css uses
   a different .main display mode. */
.app-shell .main{
    display:flex !important;
    flex-direction:column !important;
    min-height:100vh !important;
}
.app-shell .main > .content-area{
    flex:1 1 auto !important;
    min-height:0;
}

/* Compact, quiet, high-end application footer. */
.app-shell .main > .medcalc-app-footer{
    flex:0 0 auto;
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    margin:1.1rem 1.7rem .95rem;
    padding:.82rem 1rem;
    border:1px solid #e5eaf2;
    border-radius:16px;
    background:linear-gradient(105deg,#ffffff 0%,#fbfdff 62%,#f3f8ff 100%);
    color:#64748b;
    box-shadow:0 2px 9px rgba(15,23,42,.028);
    font-size:.77rem;
    line-height:1.35;
}
.medcalc-footer-brand{
    min-width:0;
    display:flex !important;
    align-items:center;
    gap:.72rem;
}
.medcalc-footer-logo,
.medcalc-footer-mark{
    flex:0 0 36px;
    width:36px !important;
    height:36px !important;
    border-radius:11px;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
}
.medcalc-footer-logo{
    object-fit:contain;
    padding:4px;
    border:1px solid #e2e8f0;
    background:#fff;
}
.medcalc-footer-mark{
    padding:0;
    border:0;
    background:linear-gradient(135deg,#2563eb,#06b6d4);
    color:#fff;
    font-size:.72rem;
    font-weight:850;
    letter-spacing:.06em;
    box-shadow:0 8px 18px rgba(37,99,235,.16);
}
.medcalc-footer-brand strong{
    display:block;
    color:#0f172a;
    font-size:.78rem;
    font-weight:770;
    white-space:nowrap;
}
.medcalc-footer-brand small{
    display:block;
    margin-top:1px;
    color:#64748b;
    font-size:.72rem;
    white-space:normal;
}
.medcalc-footer-status{
    flex:0 0 auto;
    display:inline-flex !important;
    align-items:center;
    gap:.4rem;
    padding:.38rem .66rem;
    border:1px solid #d1fae5;
    border-radius:999px;
    background:#ecfdf5;
    color:#047857;
    font-size:.71rem;
    font-weight:760;
    white-space:nowrap;
}
.medcalc-footer-status i{
    font-size:.8rem;
}

/* Login footer */
.medcalc-login-footer{
    display:flex !important;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:.38rem;
    margin:1.25rem auto 0;
    color:#64748b;
    font-size:.75rem;
    text-align:center;
}
.medcalc-login-footer strong{
    color:#334155;
    font-weight:750;
}

/* Mobile */
@media (max-width: 767px){
    .app-shell .main > .medcalc-app-footer{
        margin:.9rem .75rem .75rem;
        padding:.75rem;
        display:block !important;
    }
    .medcalc-footer-brand{
        justify-content:center;
        text-align:left;
    }
    .medcalc-footer-status{
        display:flex !important;
        justify-content:center;
        margin:.7rem auto 0;
        width:max-content;
    }
}