/*
OpenAlbaResearchMap
Member Profile Styles (memberProfil.css)
*/

:root{
    --mp_primary:#2d6cdf;
    --mp_bg:#f5f7fb;
    --mp_card:#fff;
    --mp_border:#e2e8f0;
    --mp_text:#222;
    --mp_muted:#666;
    --mp_success:#22c55e;
}


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.mp_body{

    font-family:Arial,Helvetica,sans-serif;
    background:var(--mp_bg);
    color:var(--mp_text);
    line-height:1.6;
}



.mp_badge{
    background:#e8f8ee;
    color:#0f7a35;
    padding:6px 12px;
    border-radius:20px;
    font-size:.9rem;
    font-weight:bold;
}


.mp_container{
    max-width:1000px;
    margin:30px auto;
    padding:20px;
}



.mp_btn{
    display:inline-block;
    margin-bottom:20px;
    color:var(--mp_primary);
    text-decoration:none;
    font-weight:bold;
}


.mp_card{
    background:var(--mp_card);
    border-radius:10px;
    border:1px solid var(--mp_border);
    padding:20px;
    margin-bottom:20px;
    box-shadow:0 3px 10px rgba(0,0,0,.05);
}

.mp_profile_header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    margin-bottom:20px;
}


.mp_grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:20px;
}

.mp_dt{
    font-weight:bold;
    margin-top:12px;
}

.mp_dd{
    color:var(--mp_muted);
}



.mp_tags{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    list-style:none;
    margin-top:15px;
}

.mp_tags li{
    background:#e8f0ff;
    color:var(--mp_primary);
    padding:8px 14px;
    border-radius:20px;
}


.mp_project{
    border-left:5px solid var(--mp_primary);
    padding:15px;
    margin-top:15px;
    background:#fafafa;
}

.mp_project a{
    display:inline-block;
    margin-top:10px;
    text-decoration:none;
    color:var(--mp_primary);
    font-weight:bold;
}


.mp_project_role span{
    font-weight:bold;
}

@media (prefers-color-scheme:dark){

:root{
    --mp_bg:#121212;
    --mp_card:#1d1d1d;
    --mp_text:#eee;
    --mp_border:#333;
    --mp_muted:#bbb;

}

.mp_project{
    background:#262626;
}
}

/* Member data form page */
.mf-page{
    padding:22px;
}

.mf-shell{
    max-width:1100px;
    margin:0 auto;
}

.mf-topbar{
    margin-bottom:18px;
}

.mf-topbar h1{
    margin:0;
    color:#1f4e79;
}

.mf-topbar p{
    margin:8px 0 0;
    color:#4f6378;
}

.mf-form{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.mf-tab-nav{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    gap:8px;
    padding:10px 12px 0;
    margin:0 0 -1px;
    position:relative;
    z-index:2;
}

.mf-tab-btn{
    position:relative;
    border:1px solid #c6d8ec;
    border-bottom:none;
    background:linear-gradient(180deg, #fdfefe 0%, #edf4fb 100%);
    color:#355a7a;
    border-radius:14px 14px 0 0;
    padding:12px 16px 13px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 -1px 0 rgba(255,255,255,0.8) inset;
    letter-spacing:.01em;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}

.mf-tab-btn::after{
    content:"";
    position:absolute;
    left:10px;
    right:10px;
    bottom:-1px;
    height:1px;
    background:transparent;
}

.mf-tab-btn.is-active{
    background:#ffffff;
    color:#1f4e79;
    border-color:#b8cce0;
    box-shadow:0 -2px 10px rgba(31,78,121,0.08), 0 1px 0 rgba(255,255,255,0.95) inset;
    transform:translateY(1px);
    z-index:3;
}

.mf-tab-btn:hover{
    color:#1f4e79;
    box-shadow:0 -2px 12px rgba(31,78,121,0.08);
}

.mf-tab-btn.mf-tab-invalid{
    border-color:#d73a3a;
    background:linear-gradient(180deg, #fffefe 0%, #fff1f1 100%);
    color:#8a1f1f;
}

.mf-tab-btn.is-active.mf-tab-invalid{
    background:#fff6f6;
    color:#8a1f1f;
    border-color:#d73a3a;
}

.mf-tab-panel{
    display:none;
}

.mf-tab-panel.is-active{
    display:block;
    background:#ffffff;
    border:1px solid #b8cce0;
    border-radius:0 14px 14px 14px;
    box-shadow:0 12px 26px rgba(31,78,121,0.08);
    padding:16px;
    position:relative;
    top:-1px;
}

.mf-grid{
    display:grid;
    gap:16px;
}

.mf-grid-2{
    grid-template-columns:repeat(2, minmax(0, 1fr));
}

.mf-card{
    background:#ffffff;
    border:1px solid #d9e3ee;
    border-radius:12px;
    padding:16px;
    box-shadow:0 8px 20px rgba(31,78,121,0.07);
}

.mf-card h2{
    margin:0 0 12px;
    color:#1f4e79;
    font-size:1.05rem;
}

.mf-card h3{
    margin:8px 0;
    color:#365d83;
    font-size:.95rem;
}

.mf-card label{
    display:block;
    margin:10px 0 6px;
    font-weight:600;
    color:#30475f;
}

.mf-card input,
.mf-card select,
.mf-card textarea{
    width:100%;
    border:1px solid #cfdceb;
    border-radius:10px;
    padding:11px 12px;
    font:inherit;
    background:#fbfdff;
}

.mf-card input:focus,
.mf-card select:focus,
.mf-card textarea:focus{
    outline:none;
    border-color:#2d6cdf;
    box-shadow:0 0 0 3px rgba(45,108,223,0.14);
}

.mf-inline-group{
    margin-top:12px;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
}

.mf-inline-group span{
    font-weight:600;
    color:#30475f;
    margin-right:8px;
}

.mf-inline-group label{
    margin:0;
    font-weight:500;
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.mf-inline-group input[type="radio"]{
    width:auto;
}

.mf-static-value{
    margin-top:10px;
    color:#4a6078;
}

.mf-required-hint{
    margin-bottom:10px;
    color:#4d6480;
    font-size:.9rem;
}

.mf-required-marker{
    color:#c23737;
    font-weight:700;
}
.mf-required-empty{
    border-color:#f0ad2f !important;
    background:#fff8e9 !important;
}

.mf-divider{
    border-top:1px dashed #cfdceb;
    margin:14px 0;
}

.mf-check-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
}

.mf-scrollbox{
    max-height:260px;
    overflow:auto;
    padding-right:6px;
}

.mf-check{
    display:flex;
    align-items:center;
    gap:8px;
    border:1px solid #d7e4f1;
    border-radius:10px;
    padding:8px 10px;
    background:#f7fbff;
}

.mf-check input{
    width:auto;
    margin:0;
}

.mf-project-row{
    border:1px solid #d6e6f4;
    border-radius:12px;
    background:#ffffff;
    padding:5px;
}

.mf-project-row-main{
    display:flex;
    flex-direction:column;
    background:#d6d6c1;
    padding:5px;
    gap:10px;
}

.mf-project-check{
    margin:0;
}

.mf-project-role-group{
    padding:10px;
    border:1px solid #e1ebf6;
    border-radius:10px;
    background:#f7fbff;
}

.mf-project-role-group label{
    margin:0 0 6px;
    font-size:.88rem;
    color:#355a80;
}

.mf-dynamic-rows{
    margin-top:10px;
    display:flex;
    flex-direction:column;
    gap:8px;
}
.mf-new-zone{
    margin-top:12px;
    padding:12px;
    border:1px dashed #bdd1ea;
    border-radius:12px;
    background:#eef7ff;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.mf-new-zone-title{
    font-weight:700;
    color:#2e5984;
    margin-bottom:8px;
}

.mf-inline-row{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    padding:10px;
    border:1px solid #d8e7f6;
    border-radius:10px;
    background:#ffffff;
}

.mf-add-btn,
.mf-remove-btn{
    border:none;
    border-radius:10px;
    background:#e9f1ff;
    color:#204b80;
    font-weight:700;
    cursor:pointer;
}

.mf-add-btn{
    margin-top:4px;
    padding:12px 20px;
    border-radius:999px;
    background:linear-gradient(135deg, #18a957 0%, #0b7d3d 100%);
    color:#ffffff;
    box-shadow:0 10px 18px rgba(24,169,87,0.24);
    align-self:flex-start;
}

.mf-add-btn:hover{
    filter:brightness(1.08);
}

.mf-remove-btn{
    width:42px;
    height:42px;
    font-size:1.1rem;
}

.mf-project-create-box{
    border:1px solid #c8dcf1;
    border-radius:12px;
    background:#ffffff;
    padding:12px;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.mf-project-create-box textarea{
    min-height:84px;
}

.mf-profile-create-box{
    border:1px solid #c8dcf1;
    border-radius:12px;
    background:#ffffff;
    padding:12px;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.mf-profile-create-row{
    display:grid;
    grid-template-columns:1fr 42px;
    gap:8px;
    margin-top:8px;
    align-items:start;
}

.mf-profile-create-row input{
    width:100%;
}

.mf-profile-entry{
    border:1px solid #c8dcf1;
    border-radius:12px;
    background:#ffffff;
    padding:12px;
    margin-top:8px;
    box-shadow:0 6px 16px rgba(31,78,121,0.06);
}

.mf-profile-entry-head{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.mf-profile-entry-title-wrap{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
}

.mf-profile-entry-title{
    font-weight:700;
    color:#214a79;
}

.mf-profile-entry-value{
    color:#5c7286;
    font-size:.92rem;
    word-break:break-word;
}

.mf-profile-icon-btn{
    width:22px;
    height:22px;
    border:none;
    background:transparent;
    color:#8a96a3;
    cursor:pointer;
    padding:0;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:.85rem;
    line-height:1;
}

.mf-profile-icon-btn:hover{
    color:#5c6876;
    background:#eef3f8;
}

.mf-profile-edit-panel{
    margin-top:10px;
    padding-top:10px;
    border-top:1px dashed #d8e5f2;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.mf-hidden{
    display:none !important;
}

.mf-profile-entry-open{
    background:#fafdff;
}

.mf-project-create-row{
    display:grid;
    grid-template-columns:1fr 42px;
    gap:8px;
    margin-top:8px;
    align-items:start;
}

.mf-project-create-row textarea{
    min-height:70px;
    resize:vertical;
}

.mf-audit-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px 16px;
    color:#4d6177;
}

.mf-invalid{
    border-color:#d73a3a !important;
    background:#fff6f6 !important;
}

.mf-hint{
    margin:0 0 8px;
    color:#5f7388;
    font-size:.95rem;
}

.mf-subhint{
    margin:8px 0 0;
    color:#6e8195;
    font-size:.85rem;
    word-break:break-all;
}

.mf-actions{
    display:flex;
    justify-content:flex-end;
}

.mf-submit{
    border:none;
    border-radius:999px;
    background:linear-gradient(135deg, #2d6cdf 0%, #1f4e79 100%);
    color:#fff;
    padding:12px 24px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 10px 18px rgba(31,78,121,0.22);
}

.mf-submit:hover{
    filter:brightness(1.04);
}

.mf-alert{
    border-radius:10px;
    padding:11px 14px;
    margin-bottom:12px;
    font-weight:600;
}

.mf-alert-success{
    background:#e8f8ee;
    border:1px solid #bde7cc;
    color:#16673a;
}

.mf-alert-error{
    background:#ffeaea;
    border:1px solid #f6c1c1;
    color:#8a1f1f;
}

@media (max-width:900px){
    .mf-grid-2{
        grid-template-columns:1fr;
    }

    .mf-check-grid{
        grid-template-columns:1fr;
    }

    .mf-project-row,
    .mf-project-create-row,
    .mf-profile-create-row,
    .mf-profile-entry,
    .mf-audit-grid,
    .mf-project-create-box{
        grid-template-columns:1fr;
    }

    .mf-project-create-row textarea{
        grid-column:auto;
    }

    .mf-page{
        padding:14px;
    }
}

/* Admin page */
.admin-page{
    background:#eef3f9;
}

.admin-shell{
    max-width:1540px;
    margin:0 auto;
    padding:18px;
}

.admin-topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:16px;
}

.admin-topbar h1{
    margin:0;
    color:#1f4e79;
}

.admin-member-meta{
    color:#5f7388;
}

.admin-layout{
    display:grid;
    grid-template-columns:320px 1fr;
    gap:16px;
    align-items:start;
}

.admin-sidebar{
    position:sticky;
    top:18px;
    max-height:calc(100vh - 36px);
    overflow:auto;
}

.admin-sidebar h2,
.admin-member-header h2,
.admin-project-card h2,
.admin-area-card h2,
.admin-institution-card h2{
    margin:0 0 12px;
    color:#1f4e79;
}

.admin-member-list{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.admin-filter-box{
    margin:10px 0 14px;
}

.admin-filter-label{
    display:block;
    margin-bottom:6px;
    font-weight:700;
    color:#214a79;
}

.admin-list-filter{
    width:100%;
    border:1px solid #c9d8e7;
    border-radius:10px;
    padding:10px 12px;
    background:#fff;
    color:#26455f;
}

.admin-empty-state{
    margin-top:8px;
    color:#6e8195;
    font-size:.93rem;
}

.admin-member-item{
    display:block;
    padding:12px;
    border:1px solid #d6e4f1;
    border-radius:12px;
    text-decoration:none;
    color:#274862;
    background:#f8fbff;
}

.admin-member-item.is-active{
    border-color:#2d6cdf;
    background:#eaf2ff;
    box-shadow:0 0 0 3px rgba(45,108,223,.10) inset;
}

.admin-main{
    min-width:0;
}

.admin-member-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    margin-bottom:14px;
}

.admin-alert{
    margin-bottom:14px;
}

.admin-tab-nav{
    margin-top:8px;
}

.admin-project-card,
.admin-area-card,
.admin-member-card,
.admin-institution-card{
    margin-bottom:12px;
}

.admin-card-note{
    color:#5f7388;
    font-size:.93rem;
    margin:0 0 10px;
}

.admin-project-members{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:8px;
}

.admin-project-members-list-static{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:6px;
}

.admin-member-row-static{
    display:grid;
    grid-template-columns:minmax(0,1fr) 180px;
    gap:8px;
    align-items:center;
    padding:8px 10px;
    border:1px solid #d6e4f1;
    border-radius:10px;
    background:#f8fbff;
    color:#274862;
}

.admin-member-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) 180px 42px;
    gap:8px;
    align-items:end;
}

.admin-member-row select,
.admin-member-row input,
.admin-project-card input,
.admin-project-card textarea,
.admin-area-card input,
.admin-institution-card input{
    width:100%;
}

.admin-mini-btn{
    border:none;
    border-radius:10px;
    background:#e9f1ff;
    color:#204b80;
    font-weight:700;
    cursor:pointer;
    padding:10px 14px;
}

.admin-mini-btn.remove{
    background:#ffeaea;
    color:#8a1f1f;
}

.admin-inline-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
}

.admin-savebar{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-end;
    padding-top:6px;
}

.admin-compact{
    max-width:420px;
}

.admin-add-row{
    margin-top:10px;
}

.admin-hidden{
    display:none;
}

@media (max-width:1100px){
    .admin-layout{
        grid-template-columns:1fr;
    }

    .admin-sidebar{
        position:relative;
        top:auto;
        max-height:none;
    }
}