/* ================================
   SIDEBAR
================================ */

.sidebar{

    width:260px;
    min-width:260px;

    height:100vh;

    position:sticky;

    top:0;

    padding:24px 17px;

    display:flex;
    flex-direction:column;

    color:white;

    background:

    linear-gradient(
        180deg,
        #484b80,
        #30335b
    );

}


.brand{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:30px;

}


.brand-icon{

    width:52px;
    height:52px;

    border-radius:16px;

    display:flex;

    align-items:center;
    justify-content:center;

    font-weight:bold;

    font-size:19px;

    background:

    linear-gradient(
        135deg,
        #7568ee,
        #a094ff
    );

}


.brand h2{
    margin:0;
}


.brand small{
    color:#d4d7ea;
}


.menu button{

    width:100%;

    border:0;

    background:transparent;

    color:#e6e8f4;

    padding:14px;

    margin-bottom:6px;

    text-align:left;

    border-radius:12px;

}


.menu button:hover{
    background:#ffffff17;
}


.safe-box{

    margin-top:auto;

    padding:15px;

    border-radius:16px;

    background:#ffffff0e;

    border:1px solid #ffffff18;

    font-size:12px;

    line-height:1.6;

    color:#d7daea;

}


.credit{

    margin-top:16px;

    color:#aeb4cc;

    font-size:12px;

    line-height:1.5;

}


/* ================================
   MAIN
================================ */

.main{

    flex:1;

    min-width:0;

}


header{

    min-height:84px;

    position:sticky;

    top:0;

    z-index:20;

    display:flex;

    align-items:center;

    padding:14px 30px;

    background:#ffffff;

    border-bottom:
    1px solid var(--line);

}


.header-info{
    flex:1;
}


header small{
    color:#8a90a3;
}


header h1{

    margin:3px 0 0;

    font-size:21px;

}


.tool-button{

    border:
    1px solid var(--line);

    background:#ffffff;

    border-radius:11px;

    padding:9px 12px;

    font-weight:bold;

}

.header-actions{
    display:flex;
    align-items:center;
    gap:8px;
}

.profile-chip{
    min-height:42px;
    border:1px solid #d9e4f0;
    border-radius:12px;
    padding:8px 12px;
    background:#f4f1ff;
    color:#5547c8;
    font-weight:850;
}

.profile-sidebar-button{
    display:flex;
    align-items:center;
    gap:9px;
    margin-top:8px;
    border:1px solid #ffffff24!important;
    background:#ffffff10!important;
}

.profile-selector{max-width:850px;margin:25px auto;text-align:center;}
.profile-selector h2{font-size:clamp(29px,5vw,45px);margin:8px 0 12px;color:#303763;}
.profile-selector>p{color:#6d768d;line-height:1.55;}
.profile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin:28px 0;}
.profile-card{min-height:205px;border:3px solid #dce5f1;border-radius:24px;background:#fff;padding:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;color:#26385f;font-weight:850;box-shadow:0 8px 22px rgba(40,53,91,.08);transition:.16s;}
.profile-card:hover,.profile-card:focus-visible{transform:translateY(-3px);border-color:#7161e8;box-shadow:0 12px 28px rgba(70,57,160,.15);}
.profile-symbol{width:86px;height:86px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:43px;font-weight:900;}
.profile-card[data-profile="P"] .profile-symbol{background:#2878e3;}
.profile-card[data-profile="D"] .profile-symbol{background:#35a866;border-radius:22px;}
.profile-card[data-profile="T"] .profile-symbol{background:#ed8a32;clip-path:polygon(50% 4%,96% 92%,4% 92%);padding-top:20px;}
.profile-card strong{font-size:24px;}
.profile-card small{color:#798299;line-height:1.4;}
.profile-note{padding:15px;border-radius:16px;background:#eef8ff;color:#3c5e79;font-size:14px;line-height:1.5;}
.active-profile-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;padding:11px 15px;border:1px solid #ddd8fb;border-radius:15px;background:#f5f2ff;color:#4f43bd;font-weight:850;}

@media(max-width:700px){
    .profile-chip{padding:8px 10px;min-width:45px;font-size:0;}
    .profile-chip::before{content:attr(data-short);font-size:16px;}
    .profile-grid{grid-template-columns:1fr;gap:11px;}
    .profile-card{min-height:125px;flex-direction:row;justify-content:flex-start;text-align:left;padding:15px 20px;}
    .profile-symbol{width:66px;height:66px;font-size:32px;flex:none;}
}

.home-header-button{
    display:none;
    min-width:44px;
    min-height:44px;
    align-items:center;
    justify-content:center;
    border:1px solid var(--line);
    background:#ffffff;
    color:var(--ink);
    border-radius:11px;
    font-size:23px;
    font-weight:bold;
}


.content{

    padding:30px;

    max-width:1400px;

    margin:auto;

}


/* ================================
   HERO
================================ */

.hero{

    min-height:310px;

    border-radius:28px;

    padding:42px;

    display:grid;

    grid-template-columns:
    1.15fr .85fr;

    align-items:center;

    gap:35px;

    background:

    linear-gradient(
        135deg,
        #ffffff,
        #edf8ff 48%,
        #f4edff
    );

    box-shadow:
    0 14px 42px
    rgba(58,68,112,.09);

}


.hero-badge{

    display:inline-block;

    padding:7px 12px;

    border-radius:999px;

    background:#e8faef;

    color:#2d8057;

    font-size:11px;

    font-weight:bold;

}


.hero h2{

    margin:18px 0 14px;

    font-size:43px;

    line-height:1.08;

    color:#35376a;

}


.hero p{

    color:#696f82;

    line-height:1.65;

}


.hero-button{

    border:0;

    border-radius:13px;

    padding:14px 21px;

    color:white;

    font-weight:bold;

    background:

    linear-gradient(
        135deg,
        #675be5,
        #8175ed
    );

}


.hero-visual{

    min-height:210px;

    border-radius:24px;

    padding:28px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    color:#ffffff;

    background:

    linear-gradient(
        145deg,
        #7064e8,
        #988df4
    );

}


.hero-number{

    font-size:52px;

    font-weight:bold;

}


/* ================================
   SECTION
================================ */

.section-title{

    margin:33px 0 18px;

}


.section-title small{

    color:var(--purple);

    font-weight:bold;

}


.section-title h2{

    margin:5px 0;

}

/* =====================================
   ΕΝΕΡΓΗ ΚΑΤΗΓΟΡΙΑ ΑΡΙΣΤΕΡΟΥ ΜΕΝΟΥ
===================================== */

.menu button{
    width:100%;
    min-height:48px;
    text-align:left;
    white-space:normal;
    line-height:1.35;
    transition:
        background-color .2s ease,
        color .2s ease,
        transform .2s ease;
}

.menu button:hover{
    background:rgba(255,255,255,.10);
    transform:translateX(2px);
}

.menu button.active{
    background:rgba(255,255,255,.16);
    color:#ffffff;
    box-shadow:inset 4px 0 0 #8d7cff;
}

/* Κύλιση του αριστερού μενού σε κινητά και μικρές οθόνες */
.sidebar,
aside {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    padding-bottom: 35px;
}
.sidebar::-webkit-scrollbar,
aside::-webkit-scrollbar {
    width: 6px;
}

.sidebar::-webkit-scrollbar-thumb,
aside::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.35);
    border-radius: 999px;
}