:root {
    --red: #ed102b;
    --ink: #081b38;
    --muted: #53627b;
    --stroke: #e3e9f0
}

* {
    box-sizing: border-box
}

html, body {
    margin: 0;
    min-height: 100%;
    font-family: "Segoe UI",Arial,sans-serif;
    color: var(--ink)
}

button, input, select {
    font: inherit
}

button, a {
    cursor: pointer
}

a {
    color: inherit
}

.login-page {
    background: #dceaf5
}

.login-stage {
    min-height: 100svh;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(110deg,#f7fafc 0%,#d6e8f4 47%,#0d4e7c 100%)
}

.tech-scene {
    position: absolute;
    inset: 0 0 0 27%;
    z-index: -3;
    background: linear-gradient(90deg,rgba(255,255,255,.8),rgba(255,255,255,.02) 32%,rgba(0,39,78,.3)),url('/assets/technology-backdrop.jpg') center center/cover no-repeat;
    filter: saturate(.95)
}

.mesh {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.82) 27%,rgba(255,255,255,.10) 54%,rgba(8,52,92,.26) 100%),linear-gradient(140deg,transparent 70%,rgba(255,255,255,.7) 70%,rgba(255,255,255,.12) 82%,transparent 82%)
}

.red-diagonal {
    position: absolute;
    z-index: -1;
    top: -10%;
    left: 57%;
    height: 49%;
    width: 3px;
    background: var(--red);
    transform: rotate(-39deg);
    transform-origin: top
}

.login-header {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 42px 4.5vw 0;
    z-index: 10;
}
.aeci-logo {
    width: 225px;
    max-height: 67px;
    object-fit: contain;
    object-position: left
}

.header-divider {
    height: 43px;
    width: 1px;
    background: #273b55
}

.product-title {
    font-size: 23px;
    white-space: nowrap
}

    .product-title:after {
        content: '';
        display: block;
        background: var(--red);
        width: 68px;
        height: 3px;
        margin-top: 8px
    }

.login-main {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(380px,475px);
    gap: 5vw;
    align-items: center;
    min-height: calc(100svh - 160px);
    padding: 20px 4.5vw 70px
}

.story h1 {
    font-size: clamp(38px,4.15vw,66px);
    line-height: 1.04;
    letter-spacing: -2.5px;
/*    margin: 0;
    font-weight: 750*/
}

    .story h1 span {
        color: var(--red)
    }

.accent {
    width: 74px;
    height: 4px;
    background: var(--red);
    margin: 26px 0 18px
}

.story > p {
    font-size: clamp(17px,1.45vw,23px);
    line-height: 1.5;
    margin: 0 0 38px
}

.features {
    display: flex;
    gap: clamp(18px,4vw,65px)
}

.feature {
    min-width: 130px;
    display: flex;
    flex-direction: column;
    gap: 5px
}

.feature-icon {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    background: #fff;
    border-radius: 13px;
    box-shadow: 0 8px 20px #0b32551c;
    color: var(--red);
    font-size: 48px;
    margin-bottom: 7px
}

.feature b {
    font-size: 16px
}

.feature small {
    font-size: 15px;
    line-height: 1.5
}

.sign-in-card {
    background: #6e232300;
    border-radius: 13px;
    padding: 52px 32px 40px;
    box-shadow: 0 22px 55px #0a28412a;
    text-align: center
}

    .sign-in-card h2 {
        font-size: clamp(28px,2.8vw,40px);
        letter-spacing: -1px;
        margin: 0 0 7px
    }

.card-subtitle {
    font-size: clamp(23px,2vw,31px);
    color: #56637d;
    margin: 0
}

.card-accent {
    height: 3px;
    width: 67px;
    background: var(--red);
    margin: 22px auto 33px
}

.microsoft-signin {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    text-decoration: none;
    border: 0;
/*background: white;*/
    padding: 15px 8px;
    color: black;
    font-size: 19px;
    font-weight: 600;
    border-radius: 7px;
    transition: background .15s
}

    .microsoft-signin:hover, .microsoft-signin:focus-visible {
        background: #f1f5f9;
        outline: 2px solid #b6c5d5;
        outline-offset: 2px
    }

.ms-icon {
    display: grid;
    grid-template-columns: repeat(2,10px);
    grid-template-rows: repeat(2,10px);
    gap: 2px;
    flex: none
}

    .ms-icon i:nth-child(1) {
        background: #f25022
    }

    .ms-icon i:nth-child(2) {
        background: #7fba00
    }

    .ms-icon i:nth-child(3) {
        background: #00a4ef
    }

    .ms-icon i:nth-child(4) {
        background: #ffb900
    }

.arrow {
    font-size: 30px;
    color: var(--red);
    font-weight: 400
}

.or-divider {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 22px 0 28px;
    color: #293e58
}

    .or-divider:before, .or-divider:after {
        content: '';
        height: 1px;
        background: #d7e0e9;
        flex: 1
    }

.secure-note {
    display: flex;
    align-items: center;
    gap: 20px;
    text-align: left;
    justify-content: center;
    font-size: 15px;
    line-height: 1.5;
    color: #fff
}

.login-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 18px 4vw;
    color: #fff;
        background: linear-gradient(90deg,#0826421c,#08213cb8);
    font-size: 14px
}

    .login-footer strong {
        color: #ff3246
    }

.motto {
    font-weight: 700
}

    .motto em {
        font-weight: 400
    }

.hub-page {
    background: #f5f7fa
}

.hub-layout {
    display: grid;
    grid-template-columns: 245px minmax(0,1fr);
    min-height: 100vh
}

.sidebar {
    background: white;
    border-right: 1px solid var(--stroke);
    padding: 28px 17px
}

    .sidebar img {
        width: 165px
    }

    .sidebar nav {
        display: grid;
        gap: 6px;
        margin-top: 45px
    }

    .sidebar button {
        border: 0;
        background: transparent;
        text-align: left;
        padding: 14px;
        border-radius: 9px;
        color: #293951
    }

        .sidebar button.active, .sidebar button:hover {
            background: #fff0f2;
            color: var(--red)
        }

.hub-main {
    padding: 30px clamp(20px,3.5vw,60px)
}

.hub-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px
}

    .hub-top h1 {
        margin: 0;
        font-size: 26px
    }

.profile {
    display: flex;
    align-items: center;
    gap: 15px
}

    .profile small {
        display: block;
        color: var(--muted)
    }

.avatar {
    background: #e9eef6;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    font-weight: 700
}

.logout {
    border: 1px solid #e0e5eb;
    background: white;
    border-radius: 7px;
    padding: 9px 13px
}

.hub-hero {
    background: linear-gradient(115deg,#071c37,#15577b);
    color: white;
    border-radius: 16px;
    margin: 32px 0;
    padding: 34px
}

    .hub-hero h2 {
        font-size: 30px;
        margin: 0 0 8px
    }

    .hub-hero p {
        margin: 0;
        color: #d9e9f2
    }

.hub-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
    margin: 24px 0
}

    .hub-toolbar input {
        border: 1px solid #d6dde7;
        border-radius: 9px;
        padding: 13px;
        width: min(420px,100%)
    }

.hub-tabs {
    display: flex;
    gap: 7px;
    flex-wrap: wrap
}

    .hub-tabs button {
        background: white;
        border: 1px solid #dce2eb;
        border-radius: 30px;
        padding: 9px 15px
    }

        .hub-tabs button.active {
            background: #fff0f2;
            border-color: #ffb9c3;
            color: var(--red)
        }

.app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(245px,1fr));
    gap: 19px
}

.app-card {
    background: white;
    border: 1px solid var(--stroke);
    border-radius: 14px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 205px;
    box-shadow: 0 3px 14px #11284608
}

    .app-card h3 {
        margin: 0;
        font-size: 18px
    }

    .app-card p {
        margin: 0;
        color: #5b6980;
        line-height: 1.5;
        flex: 1
    }

    .app-card .category {
        color: #a4122a;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px
    }

.app-actions {
    display: flex;
    gap: 10px
}

    .app-actions button {
        border: 1px solid #e2e7ed;
        background: #fff;
        border-radius: 7px;
        padding: 10px
    }

    .app-actions .launch {
        background: var(--red);
        border-color: var(--red);
        color: white;
        flex: 1
    }

.empty {
    padding: 40px;
    border: 1px dashed #ccd5e0;
    border-radius: 12px;
    background: white;
    color: #53627b
}

.notice {
    padding: 12px 15px;
    background: #fff4db;
    border: 1px solid #eed6a1;
    border-radius: 8px;
    margin-top: 15px
}

.admin-form {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
    max-width: 860px;
    background: #fff;
    border: 1px solid var(--stroke);
    padding: 22px;
    border-radius: 12px
}

    .admin-form label {
        display: grid;
        gap: 6px;
        font-size: 13px;
        font-weight: 650
    }

    .admin-form input, .admin-form select {
        padding: 11px;
        border: 1px solid #dce2e8;
        border-radius: 7px
    }

    .admin-form button {
        background: var(--red);
        color: #fff;
        border: 0;
        border-radius: 7px;
        padding: 12px
    }

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    margin-top: 18px
}

    .admin-table td, .admin-table th {
        text-align: left;
        border-bottom: 1px solid #e6e9ef;
        padding: 12px;
        font-size: 13px
    }

    .admin-table button {
        border: 1px solid #ddd;
        background: white;
        padding: 7px;
        border-radius: 5px
    }

@media(max-width:980px) {
    .login-main {
        grid-template-columns: 1fr;
        gap: 35px;
        padding-top: 65px;
        padding-bottom: 100px
    }

    .sign-in-card {
        max-width: 530px;
        margin: auto;
        width: 100%
    }

    .login-stage {
        min-height: 100vh
    }

    .login-footer {
        position: relative
    }

    .login-header {
        padding-top: 25px
    }

    .features {
        gap: 25px
    }

    .tech-scene {
        inset: 0
    }

    .hub-layout {
        grid-template-columns: 1fr
    }

    .sidebar {
        padding: 15px;
        display: flex;
        align-items: center;
        gap: 20px
    }

        .sidebar nav {
            display: flex;
            margin: 0;
            flex-wrap: wrap
        }

        .sidebar img {
            width: 100px
        }
}

@media(max-width:600px) {
    .login-header {
        gap: 10px
    }

    .aeci-logo {
        width: 130px
    }

    .product-title {
        font-size: 15px
    }

    .header-divider {
        height: 29px
    }

    .login-main {
        padding: 55px 20px 40px
    }

    .story h1 {
        font-size: 37px;
        letter-spacing: -1.2px
    }

    .features {
        gap: 8px;
        justify-content: space-between
    }

    .feature {
        min-width: 0
    }

    .feature-icon {
        width: 55px;
        height: 55px;
        font-size: 35px
    }

    .feature small {
        font-size: 12px
    }

    .feature b {
        font-size: 13px
    }

    .sign-in-card {
        padding: 30px 20px
    }

    .microsoft-signin {
        font-size: 16px
    }

    .login-footer {
        flex-direction: column;
        align-items: flex-start
    }

    .hub-top {
        flex-wrap: wrap
    }

    .admin-form {
        grid-template-columns: 1fr
    }
}
/* V7 approved login layout: clean photographic asset, no text embedded in image. */
.login-page {
    background: #eaf1f7
}

.login-stage {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(110deg,#f8fafc 0%,#e6eff6 53%,#3a6e90 100%)
}

.tech-scene {
    inset: 0 0 0 39%;
/*    background: linear-gradient(90deg,rgba(242,248,252,.55) 0%,rgba(242,248,252,.04) 38%,rgba(5,37,68,.22) 100%),url('/assets/technology-scene-clean.jpg') center center/100% 100% no-repeat;
    filter: saturate(1.02)*/
}

.mesh {
    background: linear-gradient(90deg,#f8fafc 0%,rgba(248,250,252,.96) 24%,rgba(248,250,252,.83) 37%,rgba(248,250,252,.08) 63%,rgba(10,47,78,.12) 100%),linear-gradient(137deg,transparent 77%,rgba(235,242,249,.64) 77%,rgba(235,242,249,.13) 91%,transparent 91%)
}

.red-diagonal {
    top: -10%;
    left: 65%;
    height: 46%;
    width: 2px;
    transform: rotate(-38deg)
}

.login-header {
/*    position: relative;
*/
    z-index: 1;
    padding: 42px 4.6vw 0;
    gap: 24px
}

.aeci-logo {
    width: 226px
}

.login-main {
    position: relative;
    z-index: 1;
    flex: 1;
    min-height: 0;
    grid-template-columns: minmax(0,1fr) minmax(370px,475px);
    gap: clamp(25px,4vw,70px);
    padding: 55px 4.6vw 60px;
    align-items: center
}

.story {
    max-width: 690px
}

    .story h1 {
        font-size: clamp(42px,4.1vw,66px);
        line-height: 1.055;
        letter-spacing: -2px
    }

    .story > p {
        margin-bottom: 35px
    }

.features {
    gap: clamp(20px,4.2vw,76px)
}

.feature-icon {
    width: 74px;
    height: 74px
}

    .feature-icon svg {
        width: 42px;
        height: 42px
    }

.sign-in-card {
    width: 100%;
    max-width: 475px;
    padding: 52px 34px 42px;
    border-radius: 14px;
    box-shadow: 0 22px 65px rgba(3,23,46,.2);
    /* Center the card horizontally */
    margin: 0 auto;
}
.login-stage {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.microsoft-signin {
    padding: 17px 11px;
    gap: 16px;
    font-size: 19px;
    justify-content: space-between;
    min-height: 68px
}

    .microsoft-signin .signin-label {
        white-space: nowrap
    }

.login-footer {
/*    position: relative;
    z-index: 1;*/
    flex: none;
    padding: 17px 4.6vw;
    background: linear-gradient(90deg, rgb(134 134 134), rgb(241 241 241 / 85%));
    font-size: 14px
}

@media(max-width:1000px) {
    .login-main {
        grid-template-columns: 1fr;
        gap: 45px;
        padding-top: 65px
    }

    .story {
        max-width: 100%
    }

    .sign-in-card {
        margin: 0 auto
    }

    .tech-scene {
        inset: 0 0 0 25%;
        opacity: .65
    }

    .mesh {
        background: linear-gradient(90deg,rgba(248,250,252,.98),rgba(248,250,252,.8) 70%,rgba(248,250,252,.4))
    }

    .red-diagonal {
        display: none
    }
}

@media(max-width:600px) {
    .login-header {
        padding: 26px 20px 0;
        gap: 12px
    }

    .aeci-logo {
        width: 130px
    }

    .login-main {
        padding: 54px 20px 45px
    }

    .story h1 {
        font-size: clamp(34px,9vw,43px);
        letter-spacing: -1.1px
    }

    .story > p {
        font-size: 16px
    }

    .desktop-break {
        display: none
    }

    .features {
        gap: 12px
    }

    .feature-icon {
        width: 56px;
        height: 56px
    }

        .feature-icon svg {
            width: 34px;
            height: 34px
        }

    .feature small {
        font-size: 11px
    }

    .feature b {
        font-size: 13px
    }

    .sign-in-card {
        padding: 36px 19px
    }

        .sign-in-card h2 {
            font-size: 29px
        }

    .microsoft-signin {
        font-size: 15px;
        padding: 13px 3px;
        gap: 7px
    }

    .ms-icon {
        grid-template-columns: repeat(2,9px);
        grid-template-rows: repeat(2,9px)
    }

/*    .login-footer {
        padding: 16px 20px;
        gap: 8px;
        font-size: 12px
    }*/
}

/* UAT: make Microsoft SSO call-to-action permanently visible without hover. */
.login-page .microsoft-signin, .login-page .microsoft-signin:link, .login-page .microsoft-signin:visited {
    box-sizing:border-box; width:100%; min-height:65px; background:#fff!important;
    border:2px solid #a50028!important; box-shadow:0 8px 20px rgba(68,0,18,.18)!important;
    color:#191919!important; display:grid!important; grid-template-columns:32px 1fr 24px;
    align-items:center!important; column-gap:12px!important; padding:13px 19px!important;
    border-radius:12px!important; font-weight:750!important; text-decoration:none!important;
}
.login-page .microsoft-signin .signin-label { text-align:center!important; white-space:normal!important; line-height:1.25; }
.login-page .microsoft-signin .arrow { color:#ab0027!important; text-align:center!important; font-size:24px; }
.login-page .microsoft-signin:hover { background:#fff3f6!important; border-color:#7f001b!important; transform:translateY(-1px); }
.login-page .microsoft-signin:focus-visible { outline:3px solid #a50028!important; outline-offset:3px!important; }
@media(max-width:440px) { .login-page .microsoft-signin { font-size:15px!important; padding:12px 10px!important; gap:8px!important; } }

/* Only Microsoft Entra sign-in is offered; suppress misleading OR divider. */
.login-page .or-divider { display:none!important; }