/* ============================================================
   Akuratek Portal — Profile / Account / UI polish
   ============================================================ */

body{
    background:
        #f4f7fb;
}

.topbar{
    min-height:72px;

    padding:
        0 28px;

    background:
        rgba(255,255,255,.96);

    border-bottom:
        1px solid #e5eaf1;

    box-shadow:
        0 1px 8px
        rgba(15,23,42,.035);
}

.navbar{
    top:72px;

    gap:6px;

    padding:
        10px 28px;

    background:
        rgba(255,255,255,.95);

    backdrop-filter:
        blur(14px);

    border-bottom:
        1px solid #e7ebf0;
}

.nav-button{
    border-radius:
        10px;

    padding:
        9px 14px;

    transition:
        background .16s ease,
        color .16s ease,
        transform .16s ease;
}

.nav-button:hover{
    transform:
        translateY(-1px);
}

.content{
    width:
        min(1440px,100%);

    margin:
        0 auto;

    padding:
        30px;
}

.page-header{
    margin-bottom:
        22px;
}

.page-header h1{
    letter-spacing:
        -.55px;
}

.panel,
.stat-card,
.module{
    border:
        1px solid #e4e9f0;

    border-radius:
        16px;

    box-shadow:
        0 8px 30px
        rgba(15,23,42,.035);
}

button,
.primary,
.secondary{
    border-radius:
        10px;
}

input,
select,
textarea{
    border-radius:
        10px !important;
}

.pa-top-account{
    display:inline-flex;
    align-items:center;
    gap:7px;
}

.pa-login-help{
    margin-top:
        18px;

    padding-top:
        16px;

    border-top:
        1px solid #e6eaf0;

    color:
        #667085;

    font-size:
        13px;

    line-height:
        1.55;

    text-align:center;
}

.pa-login-help strong{
    color:
        #173b67;
}

.pa-shell{
    display:grid;

    grid-template-columns:
        minmax(0,1fr);

    gap:
        20px;
}

.pa-hero{
    position:relative;

    overflow:hidden;

    padding:
        28px;

    border:
        1px solid #dce7f1;

    border-radius:
        20px;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(0,166,207,.14),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #ffffff,
            #f7fbff
        );

    box-shadow:
        0 14px 40px
        rgba(13,49,87,.055);
}

.pa-eyebrow{
    margin-bottom:
        8px;

    color:
        #087ea6;

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        .8px;

    text-transform:
        uppercase;
}

.pa-hero h1{
    margin:
        0 0 8px;

    color:
        #0b223d;

    font-size:
        28px;

    letter-spacing:
        -.7px;
}

.pa-hero p{
    max-width:
        760px;

    margin:
        0;

    color:
        #667085;
}

.pa-card{
    padding:
        24px;

    border:
        1px solid #e3e9f0;

    border-radius:
        18px;

    background:
        #fff;

    box-shadow:
        0 9px 32px
        rgba(15,23,42,.035);
}

.pa-card-head{
    display:flex;

    align-items:flex-start;
    justify-content:space-between;

    gap:
        20px;

    margin-bottom:
        22px;
}

.pa-card-head h2{
    margin:
        0 0 5px;

    color:
        #142d49;

    font-size:
        19px;
}

.pa-card-head p{
    margin:0;

    color:#667085;

    font-size:13px;
}

.pa-grid{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:
        18px;
}

.pa-grid-3{
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:
        18px;
}

.pa-field{
    display:flex;

    flex-direction:column;

    gap:
        7px;
}

.pa-field-wide{
    grid-column:
        1 / -1;
}

.pa-field label{
    color:
        #344054;

    font-size:
        13px;

    font-weight:
        650;
}

.pa-field input,
.pa-field textarea{
    width:
        100%;

    min-height:
        43px;

    padding:
        10px 12px;

    border:
        1px solid #d7dee7;

    background:
        #fff;

    color:
        #101828;

    font:
        inherit;
}

.pa-field textarea{
    min-height:
        96px;

    resize:
        vertical;
}

.pa-field input:focus,
.pa-field textarea:focus{
    outline:none;

    border-color:
        #4b8fd2;

    box-shadow:
        0 0 0 3px
        rgba(37,112,181,.10);
}

.pa-field input[readonly],
.pa-field input:disabled,
.pa-field textarea:disabled{
    background:
        #f7f8fa;

    color:
        #667085;
}

.pa-actions{
    display:flex;

    justify-content:flex-end;

    gap:
        10px;

    margin-top:
        22px;
}

.pa-save{
    min-height:
        42px;

    padding:
        0 18px;

    border:
        0;

    border-radius:
        10px;

    background:
        linear-gradient(
            135deg,
            #155ca6,
            #0499c2
        );

    color:#fff;

    font-weight:
        700;

    cursor:pointer;
}

.pa-save:disabled{
    opacity:.5;
    cursor:not-allowed;
}

.pa-note{
    padding:
        13px 15px;

    border-radius:
        11px;

    background:
        #f6f9fc;

    color:
        #5d6b7e;

    font-size:
        13px;
}

.pa-note-success{
    background:
        #eefbf5;

    color:
        #176647;
}

.pa-note-error{
    background:
        #fff2f2;

    color:
        #a33a3a;
}

.pa-security-grid{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(0,1fr);

    gap:
        20px;
}

.pa-meta{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:
        12px;
}

.pa-meta-item{
    padding:
        14px;

    border:
        1px solid #e6ebf0;

    border-radius:
        12px;

    background:
        #fafbfd;
}

.pa-meta-item small{
    display:block;

    margin-bottom:
        4px;

    color:
        #7a889a;

    font-size:
        11px;
}

.pa-meta-item strong{
    color:
        #253d57;

    font-size:
        13px;

    word-break:
        break-word;
}

.pa-badge{
    display:inline-flex;

    align-items:center;

    min-height:
        25px;

    padding:
        0 9px;

    border-radius:
        999px;

    background:
        #edf7fd;

    color:
        #087ba5;

    font-size:
        11px;

    font-weight:
        800;
}

@media(max-width:900px){

    .pa-grid,
    .pa-grid-3,
    .pa-security-grid{
        grid-template-columns:
            1fr;
    }

    .content{
        padding:
            22px 16px;
    }
}

@media(max-width:600px){

    .topbar{
        padding:
            0 14px;
    }

    .navbar{
        padding:
            9px 14px;
    }

    .pa-card,
    .pa-hero{
        padding:
            19px;
    }

    .pa-card-head{
        flex-direction:
            column;
    }

    .pa-meta{
        grid-template-columns:
            1fr;
    }
}


/* ============================================================
   Forced password mode
   ============================================================ */

body.pa-force-password
#appView
.navbar
.nav-button:not([data-page="accountSecurity"]){
    display:none !important;
}

.pa-force-banner{
    display:flex;
    flex-direction:column;
    gap:5px;

    padding:16px 18px;

    border:1px solid #f0c36c;
    border-radius:14px;

    background:#fff9e8;
    color:#795514;

    box-shadow:
        0 8px 28px
        rgba(122,85,20,.06);
}

.pa-force-banner strong{
    font-size:15px;
}

.pa-force-banner span{
    font-size:13px;
    line-height:1.55;
}

.pa-force-banner[hidden]{
    display:none !important;
}

body.pa-force-password
#paAccountForm{
    opacity:.72;
}

body.pa-force-password
#paPasswordForm{
    border-color:#e7ba5b;

    box-shadow:
        0 10px 34px
        rgba(130,92,20,.08);
}