/*==================================================

    EasyPeasy UI Framework
    Version 1.0

    STRUCTURE.CSS

    Layout only

==================================================*/

.unselectable{
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;

    -webkit-touch-callout:none;
    -webkit-user-drag:none;
}


/****************************************************

RESET

****************************************************/

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    height:100%;
}

body{

    height:100%;
    margin:0;

    font-family:var(--ep-font-main);

    font-size:var(--ep-font-md);

    overflow:hidden;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

}

button{

    font:inherit;

}

input,
select,
textarea{

    font:inherit;

}



/****************************************************

APPLICATION

****************************************************/

.ep-app{

    display:flex;

    width:100%;

    height:100vh;
    height:100dvh;

}



/****************************************************

SIDEBAR

****************************************************/

.ep-sidebar{

    width:var(--ep-sidebar-width);

    min-width:var(--ep-sidebar-width);

    display:flex;

    flex-direction:column;

    transition:
        width var(--ep-slow) var(--ep-ease);

    overflow:hidden;

    z-index:var(--ep-z-sidebar);

}


/*======================================
 SIDEBAR PILLS / BADGES
======================================*/

.ep-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:22px;
    height:22px;
    padding:0 .55rem;

    border-radius:999px;

    background:var(--ep-primary);
    color:#fff;

    font-size:.72rem;
    font-weight:700;
    line-height:1;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.25),
        0 2px 6px rgba(0,0,0,.12);

    transition:.25s;
}


.ep-menu-right .ep-badge{
    min-width:18px;
    height:18px;
    padding:0 .4rem;

    font-size:.68rem;
}
.ep-menu-item:hover .ep-badge{
    transform:scale(1.08);
}

.ep-menu-item.ep-active .ep-badge{
    background:#fff;
    color:var(--ep-primary);
}

.ep-badge-red{
    background:#D22837;
}

.ep-badge-green{
    background:#26CC98;
}

.ep-badge-blue{
    background:#3b82f6;
}

.ep-badge-orange{
    background:#FFBD49;
}

.ep-badge-purple{
    background:#8b5cf6;
}

.ep-badge-grey{
    background:#94a3b8;
}
/****************************************************

COLLAPSED

****************************************************/

.ep-sidebar.ep-collapsed{

    width:var(--ep-sidebar-collapsed);

    min-width:var(--ep-sidebar-collapsed);

}



/****************************************************

LOGO

****************************************************/

.ep-logo{
position:relative;
    overflow:hidden;

    height:var(--ep-header-height);

    display:flex;
    align-items:center;
    gap:18px;

    padding:0 var(--ep-space-24);

    background:#fff;
	

}

.ep-logo::after{

    content:"";

    position:absolute;

    inset:0;

    background:url("../img/skyline2.png")
               center bottom
               no-repeat;

    background-size:cover;

    opacity:.08;

    pointer-events:none;

}

.ep-logo i{

    width:30px;

    text-align:center;

    font-size:30px;

}

.ep-logo span{

    white-space:nowrap;

    transition:
        opacity var(--ep-fast),
        width var(--ep-fast);

}



/****************************************************

MENU

****************************************************/

.ep-menu{

    flex:1;

    overflow-y:auto;

    padding:var(--ep-space-20);

}



.ep-menu-item{

    display:flex;

    align-items:center;

    gap:18px;

    height:54px;

    padding:0 var(--ep-space-16);

    border-radius:var(--ep-radius-lg);

    transition:
        all var(--ep-normal-speed) var(--ep-ease);

    margin-bottom:8px;

    cursor:pointer;

}



.ep-menu-item i{

    width:26px;

    text-align:center;

    font-size:20px;

    flex-shrink:0;

}



.ep-menu-item span{

    white-space:nowrap;

    overflow:hidden;

}



/****************************************************

COLLAPSED MENU

****************************************************/

.ep-sidebar.ep-collapsed .ep-logo{

    justify-content:center;

    padding:0;

}



.ep-sidebar.ep-collapsed .ep-logo span{

    opacity:0;

    width:0;

}



.ep-sidebar.ep-collapsed .ep-menu{

    padding:14px;

}



.ep-sidebar.ep-collapsed .ep-menu-item{

    justify-content:center;

    padding:0;

    gap:0;

}



.ep-sidebar.ep-collapsed .ep-menu-item span{

    opacity:0;

    width:0;

}



/****************************************************

MAIN

****************************************************/

.ep-main{

    flex:1;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    min-width:0;

}



/****************************************************

HEADER

****************************************************/

.ep-header{

    height:var(--ep-header-height);

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 var(--ep-space-30);

    flex-shrink:0;

}



/****************************************************

LEFT / RIGHT

****************************************************/

.ep-header-left,
.ep-header-right{

    display:flex;

    align-items:center;

    gap:14px;

}

/* =========================================================
   TOPBAR — MOBILE ICON SPACING
   ========================================================= */

@media (max-width:768px){

    .ep-header-left,
    .ep-header-right{
        gap:10px;
    }

    .ep-header-right{
        margin-left:auto;
        padding-left:6px;
    }

    .ep-header-right > *{
        flex:0 0 auto;
    }

    .ep-btn-icon{
        width:42px;
        height:42px;
        flex:0 0 42px;

        display:flex;
        align-items:center;
        justify-content:center;
    }
}


/* Small phones */
@media (max-width:576px){

    .ep-header-left,
    .ep-header-right{
        gap:8px;
    }

    .ep-header-right{
        padding-left:4px;
    }

    .ep-btn-icon{
        width:40px;
        height:40px;
        flex-basis:40px;
    }
}


/* Very small phones */
@media (max-width:420px){

    .ep-header{
        padding-left:8px;
        padding-right:8px;
    }

    .ep-header-left,
    .ep-header-right{
        gap:7px;
    }

    .ep-header-right{
        padding-left:3px;
    }

    .ep-btn-icon{
        width:38px;
        height:38px;
        flex-basis:38px;
    }
}

/****************************************************

CONTENT

****************************************************/

.ep-content{

    flex:1;

    overflow:auto;

    padding:var(--ep-space-30);

}




/****************************************************

PAGE

****************************************************/

.ep-page{

    width:100%;

    max-width:var(--ep-content-max);

    margin:auto;

}
.ep-page-exit{
    animation:epPageExit .45s forwards;
}

@keyframes epPageExit{

    0%{
        opacity:1;
        transform:translateY(0) scale(1);
    }

    100%{
        opacity:0;
        transform:translateY(-35px) scale(.98);
        filter:blur(5px);
    }

}

.ep-transition{
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:0;
    background:
        linear-gradient(120deg,
        transparent,
        rgba(79,124,255,.18),
        transparent);
}

.ep-transition.play{
    animation:epSweep .45s;
}

@keyframes epSweep{

    from{
        opacity:0;
        transform:translateX(-120%);
    }

    30%{
        opacity:1;
    }

    to{
        opacity:0;
        transform:translateX(120%);
    }

}

/****************************************************

CARDS

****************************************************/


.ep-card{
margin-top:20px;
    border-radius:var(--ep-card-radius);

    padding:var(--ep-card-padding);
	 position:relative;
    /* keeps the switch inside */

}


.ep-action-card{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    min-height:190px;
    height:100%;
}


/*==============================
 ICON BACKGROUND WORKSPACE CARD
==============================*/


.ep-workspace-card{
    position:relative;
    overflow:hidden;
}

.ep-card-watermark{
    position:absolute;
    right:-15px;
    bottom:-15px;

    font-size:7rem;

    color:#4f7cff;
    opacity:.45;

    transform:rotate(-18deg);

    pointer-events:none;
}

.ep-icon{
    color:#4F7CFF;
    font-size:1.1em;
    text-shadow:0 0 8px rgba(79,124,255,.35);
}

/*==============================
 EUROPEAN WATERMARK
==============================*/
.language-card{
    position:relative;
    
    isolation:isolate;
}

.language-card::after{
    content:"";

    position:absolute;
    inset:0;                 /* fills the entire card */

    background:
        url("/assets/img/europeanflag.jpg")
        center center
        no-repeat;

    background-size:85%;     /* try 80%, 90%, or 100% */

    opacity:.16;             /* watermark, not decoration */

    transform:rotate(-8deg);

    pointer-events:none;
    z-index:0;
}

.language-card > *{
    position:relative;
    z-index:1;
}

/* Keep the content above the watermark */

.language-card > *{
    position:relative;
    z-index:1;
}

/*=========================================
  AI Corner Ribbon
=========================================*/

.ep-ai-corner-ribbon{
    position:absolute;
    top:0;
    left:0;

    padding:6px 16px 6px 12px;

    background:linear-gradient(
        135deg,
        #6E5BFF,
        #4F7CFF,
        #5FD3FF
    );

    color:#fff;

    font-size:.68rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;

    border-radius:22px 0 18px 0;

    display:flex;
    align-items:center;
    gap:6px;

    box-shadow:
        0 8px 18px rgba(79,124,255,.28);

    z-index:10;

    overflow:hidden;
}

.ep-ai-corner-ribbon i{
    font-size:.8rem;
}

.ep-ai-corner-ribbon::after{
    content:"";
    position:absolute;
    inset:0;

    background:linear-gradient(
        120deg,
        transparent 20%,
        rgba(255,255,255,.45) 45%,
        transparent 70%
    );

    transform:translateX(-120%);
    animation:epAIRibbon 3.5s linear infinite;
}

@keyframes epAIRibbon{

    0%{
        transform:translateX(-120%);
    }

    30%{
        transform:translateX(130%);
    }

    100%{
        transform:translateX(130%);
    }

}
/*==============================
 ACTIVITY CARD
==============================*/

.activity-card{
    position:relative;
    overflow:hidden;
    padding:2rem;
}



.activity-link{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    height:100%;
    color:inherit;
    text-decoration:none;
	  margin-top:10px;
}



/*=================================
 ACTIVITY QUICK CARD
=================================*/

.ep-activity-card{

    position:relative;

    overflow:hidden;

}

/* Watermark dedicated to activity cards */

.ep-activity-watermark{

    position:absolute;

    right:-8px;
    bottom:-8px;

    font-size:4.6rem;

    color:#4F7CFF;

    opacity:.15;

    transform:rotate(-18deg);

    pointer-events:none;

    transition:all .30s ease;

}

/* Optional hover effect */

.ep-activity-card:hover .ep-activity-watermark{

    transform:rotate(-18deg) scale(1.08);

    opacity:.24;

}

/*==============================
 TOP RIGHT TOGGLE
==============================*/

.activity-switch{
    position:absolute;
    top:14px;
    right:14px;

    width:36px;
    height:20px;

    margin-bottom:0;
    z-index:20;
}

.activity-switch input{
    position:absolute;
    inset:0;
    opacity:0;
    cursor:pointer;
}

.activity-switch .ep-slider{
    position:absolute;
    inset:0;

    border-radius:999px;

    background:#d9e2ef;
    border:1px solid rgba(0,0,0,.05);

    box-shadow:
        inset 0 1px 3px rgba(0,0,0,.12),
        0 1px 2px rgba(255,255,255,.7);

    transition:.25s ease;
}

.activity-switch .ep-slider:before{
    content:"";

    position:absolute;

    width:16px;
    height:16px;

    left:2px;
    top:1px;

    border-radius:50%;

    background:#fff;

    box-shadow:
        0 2px 6px rgba(0,0,0,.20);

    transition:.25s ease;
}

.activity-switch input:checked + .ep-slider{
    background:linear-gradient(
        135deg,
        var(--ep-primary),
        var(--ep-secondary)
    );
}

.activity-switch input:checked + .ep-slider:before{
    transform:translateX(16px);
}

/* Waiting for server */
.activity-switch.saving .ep-slider{

    background:#cfd6df !important;

    transition:.2s;
}

.activity-switch.saving .ep-slider:before{

    animation:epSaving .8s linear infinite;

}

@keyframes epSaving{

    0%{
        transform:translateX(0);
    }

    50%{
        transform:translateX(3px);
    }

    100%{
        transform:translateX(0);
    }

}

/*==============================
 DISABLED
==============================*/

.activity-card.disabled i,
.activity-card.disabled h5{
    opacity:.35;
}

.activity-card.disabled small{
    opacity:.55;
}
/****************************************************

BUTTONS

****************************************************/



/* =========================================================
   DISABLED / DEACTIVATED BUTTONS
   ========================================================= */

/* Native disabled buttons */
button:disabled,
button[disabled],
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled {
    cursor: not-allowed;
    opacity: .55;
    filter: grayscale(.15);
    pointer-events: none;
}

/* EasyPeasy buttons */
.ep-btn:disabled,
.ep-btn.disabled,
.ep-btn[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .55;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
}

/* Prevent hover effects on disabled buttons */
.ep-btn:disabled:hover,
.ep-btn.disabled:hover,
.ep-btn[aria-disabled="true"]:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: inherit;
}

/* Disabled primary buttons */
.ep-btn-primary:disabled,
.ep-btn-primary.disabled,
.ep-btn-primary[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .45;
    filter: grayscale(.2);
}

/* Disabled outline buttons */
.ep-btn-outline:disabled,
.ep-btn-outline.disabled,
.ep-btn-outline[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .45;
    filter: grayscale(.2);
}

/* Disabled light / soft buttons */
.ep-btn-light:disabled,
.ep-btn-light.disabled,
.ep-btn-light[aria-disabled="true"],
.ep-btn-soft:disabled,
.ep-btn-soft.disabled,
.ep-btn-soft[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .5;
    filter: grayscale(.15);
}

/* Disabled large buttons */
.ep-btn-lg:disabled,
.ep-btn-lg.disabled,
.ep-btn-lg[aria-disabled="true"] {
    cursor: not-allowed;
    transform: none !important;
}

/* Disabled buttons inside cards */
.ep-card .ep-btn:disabled,
.ep-card .ep-btn.disabled,
.ep-card .ep-btn[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .5;
    transform: none !important;
    box-shadow: none !important;
}



.ep-btn-icon{

    width:46px;

    height:46px;

    display:flex;

    justify-content:center;

    align-items:center;

    border:none;

    border-radius:var(--ep-button-radius);

    cursor:pointer;

    transition:
        all var(--ep-normal-speed) var(--ep-ease);

}



.ep-btn-icon i{

    font-size:20px;

}

.ep-btn.position-relative{
    position:relative;
}

.ep-btn .badge{
    z-index:2;
}


/****************************************************

PROFILE

****************************************************/

.ep-profile{

    display:flex;

    align-items:center;

    gap:12px;

    border:none;

    background:none;

    cursor:pointer;

}



.ep-profile img{

    width:var(--ep-avatar-md);

    height:var(--ep-avatar-md);

    border-radius:50%;

    object-fit:cover;

}



/****************************************************

UTILITIES

****************************************************/

.ep-flex{

    display:flex;

}

.ep-flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.ep-flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.ep-grow{

    flex:1;

}



/****************************************************

SCROLLBAR

****************************************************/

::-webkit-scrollbar{

    width:8px;

    height:8px;

}

::-webkit-scrollbar-thumb{

    border-radius:999px;

}



/****************************************************

RESPONSIVE

****************************************************/

@media(max-width:992px){

.ep-sidebar{

    position:fixed;

    left:0;

    top:0;

    bottom:0;

}

.ep-sidebar.ep-collapsed{

    transform:translateX(-100%);

    width:var(--ep-sidebar-width);

}

.ep-header{

    padding:0 var(--ep-space-16);

}

.ep-content{

    padding:var(--ep-space-20);

}

}

/*==================================================
 EasyPeasy UI Framework
 STRUCTURE.CSS v1.1
 Layout Engine
==================================================*/

/*********************
 GRID
*********************/

.ep-grid{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:var(--ep-space-20);
    width:100%;
}

.ep-grid-tight{gap:var(--ep-space-10);}
.ep-grid-loose{gap:var(--ep-space-30);}

.ep-span-1{grid-column:span 1;}
.ep-span-2{grid-column:span 2;}
.ep-span-3{grid-column:span 3;}
.ep-span-4{grid-column:span 4;}
.ep-span-5{grid-column:span 5;}
.ep-span-6{grid-column:span 6;}
.ep-span-7{grid-column:span 7;}
.ep-span-8{grid-column:span 8;}
.ep-span-9{grid-column:span 9;}
.ep-span-10{grid-column:span 10;}
.ep-span-11{grid-column:span 11;}
.ep-span-12{grid-column:span 12;}

.ep-quarter{grid-column:span 3;}
.ep-third{grid-column:span 4;}
.ep-half{grid-column:span 6;}
.ep-two-thirds{grid-column:span 8;}
.ep-three-quarters{grid-column:span 9;}
.ep-full{grid-column:span 12;}

.ep-col-auto{grid-column:auto;}
.ep-col-fill{grid-column:1/-1;}

/*********************
 FLEX HELPERS
*********************/

.ep-row{
    display:flex;
    flex-wrap:wrap;
    gap:var(--ep-space-20);
}

.ep-stack{
    display:flex;
    flex-direction:column;
    gap:var(--ep-space-20);
}

.ep-stack-sm{gap:var(--ep-space-10);}
.ep-stack-lg{gap:var(--ep-space-30);}

.ep-cluster{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--ep-space-16);
}

.ep-center{
    display:flex;
    align-items:center;
    justify-content:center;
}

.ep-space-between{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.ep-fill{flex:1;}
.ep-grow{flex-grow:1;}
.ep-shrink{flex-shrink:1;}

/*********************
 WIDGET ENGINE
*********************/

.ep-widget{
    display:flex;
    flex-direction:column;
    min-width:0;
}

.ep-widget-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
}

.ep-widget-toolbar{
    display:flex;
    align-items:center;
    gap:.5rem;
}

.ep-widget-body{
    flex:1;
    min-height:0;
}

.ep-widget-footer{
    margin-top:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

/*********************
 SCROLL AREAS
*********************/

.ep-scroll{
    overflow:auto;
    min-height:0;
}

.ep-scroll-x{overflow-x:auto;}
.ep-scroll-y{overflow-y:auto;}

/*********************
 SIDEBAR GROUPS
*********************/
.ep-menu-parent{
    display:flex;
    align-items:center;

    width:100%;
    min-height:54px;

    padding:0 var(--ep-space-16);
    margin-bottom:8px;

    border:none;
    background:none;
    border-radius:var(--ep-radius-lg);

    cursor:pointer;

    transition:all var(--ep-normal-speed) var(--ep-ease);
}

.ep-menu-left{
    display:flex;
    align-items:center;
    gap:18px;
    flex:1;
    min-width:0;
	
}

.ep-menu-left i{
    width:26px;
    text-align:center;
    font-size:20px;
    flex-shrink:0;
}

.ep-menu-left span{
    white-space:nowrap;
    overflow:hidden;
}

.ep-menu-right{
    display:flex;
    align-items:center;
    margin-left:auto;
    margin-right:-15px;
}

.ep-menu-arrow{
    font-size:14px;
    transition:transform .25s ease;
}

.ep-menu-group.ep-open > .ep-menu-parent .ep-menu-arrow{
    transform:rotate(90deg);
}


/* ==========================================
   ACTIVE CLASS MENU
========================================== */

#classMenuGroup{

    margin:8px 0 16px;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        rgba(79,124,255,.10),
        rgba(79,124,255,.04)
    );

    border:1px solid rgba(79,124,255,.15);

    overflow:hidden;

    box-shadow:
        0 8px 24px rgba(79,124,255,.08);
}

#classMenuGroup > .ep-menu-parent{

    margin:0;

    background:transparent;

    font-weight:700;

    color:#2b4da8;
}

#classMenuGroup > .ep-menu-parent:hover{

    background:rgba(79,124,255,.08);
}

#classMenuGroup .ep-menu-left i{

    width:36px;
    height:36px;

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

    border-radius:50%;

    background:#4F7CFF;
    color:#fff;

    font-size:1rem;

    box-shadow:
        0 8px 18px rgba(79,124,255,.30);
}

#classMenuGroup .ep-menu-arrow{

    color:#4F7CFF;
}

#classMenuGroup .ep-submenu{

    background:rgba(255,255,255,.65);
}

#classMenuGroup .ep-submenu .ep-menu-item{

    margin:4px 8px;
    border-radius:12px;
}

#classMenuGroup .ep-submenu .ep-menu-item:hover{

    background:#fff;
}

/*********************
 PAGE HELPERS
*********************/

.ep-section{
    margin-bottom:var(--ep-space-30);
}

.ep-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    flex-wrap:wrap;
}

.ep-divider-h{
    width:100%;
    height:1px;
}

.ep-overlay{
    position:absolute;
    inset:0;
}

.ep-relative{position:relative;}
.ep-sticky{position:sticky;top:0;}
.ep-fixed{position:fixed;}

/*********************
 RESPONSIVE
*********************/

@media(max-width:1200px){
    .ep-xl-12{grid-column:span 12;}
}

@media(max-width:992px){
    .ep-lg-12{grid-column:span 12;}
    .ep-quarter,.ep-third,.ep-half,.ep-two-thirds,.ep-three-quarters{
        grid-column:span 12;
    }
}

@media(max-width:768px){
    .ep-grid{
        grid-template-columns:1fr;
    }
    [class*="ep-span-"]{
        grid-column:span 1;
    }
    .ep-row{
        flex-direction:column;
    }
}




/***********************
 SUBMENUS
************************/

.ep-submenu{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .28s ease;
}

.ep-submenu>div{
    overflow:hidden;
}

.ep-menu-group.ep-open>.ep-submenu{
    grid-template-rows:1fr;
}


.ep-menu-group.ep-open > .ep-submenu{
    display:block !important;
    max-height:none !important;
    grid-template-rows:unset !important;
    overflow:visible !important;
}

.ep-menu-group.ep-open > .ep-submenu > div{
    overflow:visible !important;
}


/***********************
 USER PANEL
************************/

.ep-user-panel{
    display:flex;
    align-items:center;
    gap:1rem;
    padding:1rem;
}

.ep-user-meta{
    display:flex;
    flex-direction:column;
    min-width:0;
    flex:1;
}

.ep-user-actions{
    display:flex;
    gap:.5rem;
}

/***********************
 SIDEBAR DOCK
************************/

.ep-sidebar-dock{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:.5rem;
    padding:1rem;
}

.ep-dock-item{
    display:flex;
    align-items:center;
    justify-content:center;
    aspect-ratio:1;
}

/***********************
 HOVER PANEL
************************/

.ep-hover-panel{
    position:absolute;
    left:calc(100% + 12px);
    top:0;
    min-width:240px;
    display:none;
    z-index:999;
}

.ep-sidebar.ep-collapsed .ep-menu-group:hover>.ep-hover-panel{
    display:block;
}


/***********************
 KEYBOARD NAVIGATION
************************/

.ep-menu-item:focus-visible,
.ep-menu-parent:focus-visible{
    outline:none;
}

.ep-menu-item{
    min-height:48px;
}

.ep-menu-item,
.ep-menu-parent{
    display:flex;
    align-items:center;
}


/*==================================================
 EasyPeasy UI Framework
 STRUCTURE.CSS v1.3
 Widget Layout Engine
==================================================*/

/*==================================================
 GENERIC WIDGET
==================================================*/

.ep-widget{
    display:flex;
    flex-direction:column;
    min-width:0;
    min-height:140px;
}

.ep-widget-xs{min-height:120px;}
.ep-widget-sm{min-height:180px;}
.ep-widget-md{min-height:260px;}
.ep-widget-lg{min-height:360px;}
.ep-widget-xl{min-height:520px;}
.ep-widget-fill{height:100%;}

/*==================================================
 HEADER
==================================================*/

.ep-widget-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    flex-wrap:wrap;
}

.ep-widget-title{
    display:flex;
    align-items:center;
    gap:.75rem;
    min-width:0;
}

.ep-widget-actions{
    display:flex;
    gap:12px;
    align-items:center;
    flex-wrap:wrap;
}

.ep-btn-danger-outline{
    background:#fff;
    color:#dc3545;
	
    border:1px solid rgba(220,53,69,.28);

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .2s ease,
        box-shadow .25s ease;
}

.ep-btn-danger-outline:hover{
    background:#dc3545;
    color:#fff;
    border-color:#dc3545;

    transform:translateY(-2px);

    box-shadow:
        0 10px 24px rgba(220,53,69,.28);
}

.ep-btn-danger-outline:active{
    transform:translateY(0);
}

.ep-btn-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
}

.ep-widget-body{
    flex:1;
    min-height:0;
    display:flex;
    flex-direction:column;
}

.ep-widget-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    margin-top:auto;
}

/*==================================================
 STATISTICS
==================================================*/

.ep-stat{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:1rem;
}

.ep-stat-icon{display:flex;align-items:center;justify-content:center;}
.ep-stat-content{display:flex;flex-direction:column;min-width:0;}
.ep-stat-value{}
.ep-stat-label{}
.ep-stat-trend{display:flex;align-items:center;}




/* =========================================================
   COLOURFUL TEACHER SNAPSHOT CARDS
   ========================================================= */

.ep-stat-card{
    position:relative;
    overflow:hidden;

    min-height:145px;
    padding:1.4rem 1.5rem 1.3rem 1.8rem;

    border:none;
    border-radius:24px;

    color:#fff;

    box-shadow:
        0 12px 28px rgba(40,60,100,.15),
        inset 0 1px 0 rgba(255,255,255,.25);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


/* =========================================================
   COLOURS
   ========================================================= */

/* Classes — blue pencil */
.row.g-4.mb-5 > div:nth-child(1) .ep-stat-card{
    background:linear-gradient(
        135deg,
        #5B86FF 0%,
        #4774EA 100%
    );
}


/* Pupils — green pencil */
.row.g-4.mb-5 > div:nth-child(2) .ep-stat-card{
    background:linear-gradient(
        135deg,
        #43C994 0%,
        #22B77A 100%
    );
}


/* Recording — sunny yellow */
.row.g-4.mb-5 > div:nth-child(3) .ep-stat-card{
    background:linear-gradient(
        135deg,
        #FFC95A 0%,
        #F3A82B 100%
    );
}


/* Live sessions — coral */
.row.g-4.mb-5 > div:nth-child(4) .ep-stat-card{
    background:linear-gradient(
        135deg,
        #FF7180 0%,
        #EF5365 100%
    );
}


/* =========================================================
   COLOURFUL PENCIL EFFECT
   ========================================================= */

.ep-stat-card::before{
    content:"";

    position:absolute;

    left:-15px;
    top:-25px;

    width:70px;
    height:190px;

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

    transform:rotate(18deg);

    border-radius:12px;

    pointer-events:none;
}


/* subtle diagonal pencil strokes */

.ep-stat-card::after{
    content:"";

    position:absolute;
    right:-35px;
    bottom:-45px;

    width:150px;
    height:150px;

    background:
        repeating-linear-gradient(
            -45deg,
            rgba(255,255,255,.13) 0 4px,
            transparent 4px 12px
        );

    transform:rotate(-8deg);

    opacity:.65;

    pointer-events:none;
}


/* =========================================================
   ICON
   ========================================================= */

.ep-stat-card > i{
    position:relative;
    z-index:2;

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

    width:50px;
    height:50px;

    margin-left:5px;
    margin-bottom:.8rem;

    border-radius:15px;

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

    color:#fff;

    font-size:1.4rem;

    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.25),
        0 5px 12px rgba(0,0,0,.08);
}


/* =========================================================
   NUMBER
   ========================================================= */

.ep-stat-card h2{
    position:relative;
    z-index:2;

    margin:0;

    color:#fff;

    font-family:var(--ep-font-title);
    font-size:2.15rem;
    line-height:1;

    font-weight:800;

    text-shadow:
        0 2px 5px rgba(0,0,0,.10);
}


/* =========================================================
   LABEL
   ========================================================= */

.ep-stat-card p{
    position:relative;
    z-index:2;

    margin:.45rem 0 0;

    color:rgba(255,255,255,.9);

    font-size:.88rem;
    font-weight:700;

    letter-spacing:.01em;
}


/* =========================================================
   HOVER
   ========================================================= */

.ep-stat-card:hover{
    transform:translateY(-5px);

    box-shadow:
        0 20px 40px rgba(40,60,100,.20),
        inset 0 1px 0 rgba(255,255,255,.3);
}

.ep-stat-card:hover > i{
    transform:rotate(-5deg) scale(1.08);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:600px){

    .ep-stat-card{
        min-height:125px;
        padding:1.15rem 1.2rem 1.1rem 1.45rem;
        border-radius:20px;
    }

    .ep-stat-card > i{
        width:42px;
        height:42px;

        font-size:1.15rem;
    }

    .ep-stat-card h2{
        font-size:1.8rem;
    }

    .ep-stat-card p{
        font-size:.8rem;
    }
}
/*==================================================
 PROFILE
==================================================*/

.ep-profile-card{
    display:flex;
    flex-direction:column;
}

.ep-profile-top{
    display:flex;
    align-items:center;
    gap:1rem;
}

.ep-profile-meta{
    flex:1;
    min-width:0;
}

.ep-profile-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1rem;
}

.ep-profile-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:.75rem;
}

/*==================================================
 CHAT
==================================================*/

.ep-chat{
    display:flex;
    flex-direction:column;
    gap:1rem;
    min-height:0;
}

.ep-chat-messages{
    flex:1;
    overflow:auto;
    display:flex;
    flex-direction:column;
    gap:1rem;
}

.ep-chat-row{
    display:flex;
    gap:.75rem;
    align-items:flex-end;
}

.ep-chat-row.ep-chat-right{
    justify-content:flex-end;
}

.ep-chat-avatar{flex-shrink:0;}

.ep-chat-bubble{
    max-width:75%;
}

.ep-chat-input{
    display:flex;
    gap:.75rem;
    align-items:center;
}


.ep-chat{
    display:flex;
    flex-direction:column;
    height:420px;
}

.ep-chat-messages{
    flex:1;
    overflow-y:auto;
    overflow-x:hidden;

    padding-right:10px;

    display:flex;
    flex-direction:column;
    gap:16px;

    scroll-behavior:smooth;
}

/* nice scrollbar */

.ep-chat-messages::-webkit-scrollbar{
    width:8px;
}

.ep-chat-messages::-webkit-scrollbar-thumb{
    background:rgba(0,0,0,.18);
    border-radius:20px;
}

.ep-chat-messages::-webkit-scrollbar-track{
    background:transparent;
}
/*==================================================
 TIMELINE
==================================================*/

.ep-timeline{
    display:flex;
    flex-direction:column;
    gap:1rem;
}

.ep-timeline-item{
    display:grid;
    grid-template-columns:24px 1fr;
    gap:1rem;
}

.ep-timeline-line{
    display:flex;
    flex-direction:column;
    align-items:center;
}

/*==================================================
 CALENDAR
==================================================*/

.ep-calendar{
    display:flex;
    flex-direction:column;
    height:100%;
}

.ep-calendar-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.ep-calendar-body{
    flex:1;
}

/*==================================================
 CHART
==================================================*/

.ep-chart{
    display:flex;
    flex-direction:column;
    min-height:320px;
}

.ep-chart-canvas{
    flex:1;
    min-height:260px;
}


.ep-chart-small{

    position:relative;

    height:170px;

    width:100%;

    margin:10px auto 20px;

}

.ep-chart-small canvas{

    width:100%!important;

    height:170px!important;

}
/*==================================================
 EDUCATION WIDGETS
==================================================*/

.ep-reading-widget,
.ep-speaking-widget,
.ep-listening-widget,
.ep-homework-widget,
.ep-ai-widget,
.ep-podcast-widget,
.ep-recording-widget,
.ep-certificate-widget,
.ep-course-widget{
    display:flex;
    flex-direction:column;
    min-height:0;
}

/*==================================================
 LISTS
==================================================*/

.ep-list{
    display:flex;
    flex-direction:column;
    min-height:0;
}

.ep-list-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
}

/*==================================================
 DASHBOARD
==================================================*/

.ep-dashboard{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:var(--ep-space-20);
}

.ep-dashboard-main{grid-column:span 8;}
.ep-dashboard-side{grid-column:span 4;}
.ep-dashboard-full{grid-column:span 12;}

/*==================================================
 RESPONSIVE
==================================================*/

@media(max-width:992px){
    .ep-dashboard-main,
    .ep-dashboard-side{
        grid-column:span 12;
    }

    .ep-profile-top{
        flex-direction:column;
        align-items:flex-start;
    }

    .ep-profile-stats{
        grid-template-columns:1fr;
    }

    .ep-chat-bubble{
        max-width:90%;
    }
}


/* Mobile: avatar only in header */
@media (max-width:768px){

    .ep-profile span{
        display:none;
    }

    .ep-profile{
        padding:0;
        gap:0;
    }

    .ep-profile::after{
        display:none;   /* hides Bootstrap dropdown arrow */
    }

}
/*==================================================
 EasyPeasy UI Framework
 STRUCTURE.CSS v1.4
 Component Layout Library
==================================================*/

/*==============================
 MINI BOXES / KPI
==============================*/

.ep-kpi{
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:1rem;
    align-items:center;
    min-height:110px;
}

.ep-kpi-icon{display:flex;align-items:center;justify-content:center;}
.ep-kpi-content{display:flex;flex-direction:column;min-width:0;}
.ep-kpi-side{display:flex;flex-direction:column;align-items:flex-end;}

/*==============================
 INFO BOX
==============================*/

.ep-info-box{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:1rem;
    align-items:center;
    min-height:90px;
}

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

.ep-hero-layout{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:2rem;
    align-items:center;
    min-height:280px;
}

.ep-hero{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:60px;
    padding:42px 48px;
}

.ep-hero-actions{
    display:flex;
    gap:14px;
    margin-top:30px;
    flex-wrap:wrap;
}

.ep-live-card{
    display:inline-flex;
    align-items:center;
    gap:14px;

    width:fit-content;
    max-width:100%;

    padding:12px 22px;

    border-radius:999px;

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

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.25);

    color:#fff;

    box-shadow:
        0 8px 30px rgba(0,0,0,.15);

    white-space:normal;
}

#connected-users{
    min-width:0;
}

@media (max-width:768px){

    .ep-hero{
        flex-direction:column;
        gap:24px;
        text-align:center;
        padding:28px 24px;
    }

    .ep-today-right{
        width:100%;
        display:flex;
        justify-content:center;
    }

    .ep-live-card{
        width:100%;
        justify-content:center;
        padding:12px 16px;
    }

    #connected-users{
        flex:1;
        text-align:center;
    }

}

.ep-live-indicator{
    position:relative;
    width:18px;
    height:18px;
    flex-shrink:0;
}

/* Pulsing halo */
.ep-pulse-ring{
    position:absolute;
    left:50%;
    top:50%;
    width:18px;
    height:18px;
    transform:translate(-50%,-50%);
    border:2px solid rgba(34,197,94,.45);
    border-radius:50%;
    background:transparent;
    animation:epPulse 2s infinite;
    z-index:1;
}

@keyframes epPulse{
    0%{
        transform:translate(-50%,-50%) scale(.6);
        opacity:1;
    }
    100%{
        transform:translate(-50%,-50%) scale(2.2);
        opacity:0;
    }
}

/* Green dot */
.ep-live-dot{
    position:absolute;
    left:50%;
    top:50%;
    width:10px;
    height:10px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:#22c55e;
    box-shadow:0 0 8px rgba(34,197,94,.7);
    z-index:2;
}

/*==============================
 LIVE SESSION ACTIVE
==============================*/

.live-session-card{
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.live-session-card.live-active{
    border:1px solid rgba(255,59,48,.45);
    animation:liveGlow 1.8s ease-in-out infinite;
}

@keyframes liveGlow{

    0%,100%{
        transform:translateY(0);
        box-shadow:
            var(--ep-shadow-md),
            0 0 0 rgba(255,59,48,0);
    }

    50%{
        transform:translateY(0px);
        box-shadow:
            var(--ep-shadow-lg),
            0 0 22px rgba(255,59,48,.45),
            0 0 45px rgba(255,59,48,.18);
    }

}

.live-session-card.live-active{
    animation:liveGlow 2.5s ease-in-out infinite;
}


.ep-save-dot{
    display:inline-block;
    width:10px;
    height:10px;
    margin-left:10px;

    border-radius:50%;

    background:#ff3b30;

    opacity:0;
    transform:scale(.8);

    transition:
        opacity .25s ease,
        transform .25s ease,
        background .25s ease;
}

.ep-save-dot.active{
    opacity:1;
    transform:scale(1);
    animation:epLivePulse 1.6s ease-in-out infinite;
}

@keyframes epLivePulse {

    0%{
        transform:scale(1);
        box-shadow:
            0 0 0 0 rgba(255,59,48,.70),
            0 0 12px rgba(255,59,48,.60);
    }

    50%{
        transform:scale(1.12);
        box-shadow:
            0 0 0 10px rgba(255,59,48,.18),
            0 0 18px rgba(255,59,48,.85);
    }

    100%{
        transform:scale(1);
        box-shadow:
            0 0 0 18px rgba(255,59,48,0),
            0 0 10px rgba(255,59,48,.35);
    }

}
/*==============================
 ACTIVITY FEED
==============================*/

.ep-feed{
    display:flex;
    flex-direction:column;
    min-height:0;
}

.ep-feed-item{
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:1rem;
    align-items:start;
}

/*==============================
 COMMAND BAR
==============================*/

.ep-commandbar{
    display:flex;
    align-items:center;
    gap:1rem;
    flex-wrap:wrap;
}

.ep-command-actions{
    display:flex;
    gap:.5rem;
    margin-left:auto;
}

/*==============================
 FILE MANAGER
==============================*/

.ep-file-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
    gap:1rem;
}

.ep-file-card{
    display:flex;
    flex-direction:column;
}

/*==============================
 KANBAN
==============================*/

.ep-kanban{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:1.5rem;
}

.ep-kanban-column{
    display:flex;
    flex-direction:column;
    min-height:500px;
}

.ep-kanban-list{
    display:flex;
    flex-direction:column;
    gap:1rem;
    flex:1;
}

/*==============================
 DRAWER
==============================*/

.ep-drawer{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    width:min(420px,100%);
    display:flex;
    flex-direction:column;
    z-index:900;
}

.ep-drawer-header,
.ep-drawer-footer{
    flex-shrink:0;
}

.ep-drawer-body{
    flex:1;
    overflow:auto;
}

/*==============================
 MODAL
==============================*/

.ep-modal-layout{
    display:flex;
    flex-direction:column;
    min-height:300px;
}

.ep-modal-header,
.ep-modal-footer{
    flex-shrink:0;
}

.ep-modal-body{
    flex:1;
    overflow:auto;
}


/*==================================================
  ANTI CHEAT LOG
==================================================*/

.ep-log-timeline{

    display:flex;
    flex-direction:column;
    gap:12px;

}

.ep-log-entry{

    display:flex;
    align-items:flex-start;
    gap:14px;

    padding:16px;

    background:#fff;

    border:1px solid #E7ECF5;

    border-radius:16px;

    transition:.2s;

}

.ep-log-entry:hover{

    background:#F8FBFF;

    border-color:#4F7CFF;

}

.ep-log-icon{

    color:#FF8A00;

    font-size:1.15rem;

    margin-top:2px;

    flex-shrink:0;

}

.ep-log-text{

    white-space:pre-wrap;

    word-break:break-word;

    font-family:"JetBrains Mono", monospace;

    font-size:.9rem;

    color:#374151;

    line-height:1.6;

    width:100%;

}


/*==================================================
  ANTI CHEAT MODAL
==================================================*/

#antiCheatModal .modal-dialog{

    margin-top:90px;      /* below fixed header */

    margin-bottom:20px;

    max-width:1200px;

}

#antiCheatModal .modal-content{

    border:none;

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 25px 60px rgba(0,0,0,.18);

}

#antiCheatModal .modal-body{

    max-height:calc(100vh - 190px);

    overflow-y:auto;

}

.modal-backdrop{
    z-index:9998 !important;
}

#antiCheatModal{
    z-index:9999 !important;
}
/*==============================
 STEPPER
==============================*/

.ep-stepper{
    display:flex;
    gap:1rem;
    flex-wrap:wrap;
}

.ep-step{
    display:flex;
    align-items:center;
    gap:.75rem;
}

/*==============================
 CERTIFICATE
==============================*/

.ep-certificate-layout{
    display:grid;
    grid-template-rows:auto 1fr auto;
    min-height:900px;
}

.ep-certificate-header,
.ep-certificate-footer{
    text-align:center;
}

.ep-certificate-body{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.ep-certificate{

    display:flex;
    align-items:center;
    gap:1rem;

    padding:1rem 1.25rem;

    border-radius:18px;

    background:linear-gradient(135deg,#fffef7,#fff6d6);

    border:2px solid #F4D35E;

    box-shadow:
        0 10px 24px rgba(0,0,0,.08);
		margin-bottom:20px;

}

.ep-certificate-seal{

    width:60px;
    height:60px;

    border-radius:50%;

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

    background:#F4D35E;

    color:#fff;

    font-size:1.7rem;

    flex-shrink:0;

}

.ep-certificate-content{

    flex:1;

}

.ep-certificate-label{

    display:inline-block;

    font-size:.72rem;

    text-transform:uppercase;

    letter-spacing:.12em;

    color:#b38a00;

    font-weight:700;

    margin-bottom:.25rem;

}

.ep-certificate-content h5{

    margin:0;

    font-weight:700;

}

.ep-certificate-content small{

    color:#6c757d;

}

.ep-certificate-check{

    font-size:1.6rem;

    color:#2ecc71;

}
/*MINI CERTIFICATE*/

/* =====================================
   MINI CERTIFICATE
===================================== */

.ep-certificate-tile{

    display:inline-flex;
    align-items:center;
    gap:.6rem;

    padding:.45rem .9rem;

    min-width:120px;
    height:42px;

    border-radius:14px;

    background:linear-gradient(
        180deg,
        #FFF9E3 0%,
        #F8E7A6 100%
    );

    border:1px solid rgba(212,175,55,.35);

    color:#8B6A00;

    font-size:.82rem;
    font-weight:700;
    letter-spacing:.02em;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.8),
        0 4px 10px rgba(212,175,55,.15);

    user-select:none;
}

.ep-certificate-tile i{

    font-size:1.1rem;

    color:#D4AF37;

    margin:0;

    text-shadow:0 1px 2px rgba(255,255,255,.6);
}


/*==============================
 PRINT
==============================*/

.ep-print-page{
    width:210mm;
    min-height:297mm;
    margin:auto;
    display:flex;
    flex-direction:column;
}

/*==============================
 RESPONSIVE
==============================*/

@media(max-width:992px){

.ep-hero-layout{
    grid-template-columns:1fr;
}

.ep-command-actions{
    width:100%;
    margin-left:0;
}

.ep-kanban{
    grid-template-columns:1fr;
}

.ep-kpi,
.ep-info-box,
.ep-feed-item{
    grid-template-columns:1fr;
}

}

/*==================================================
 EasyPeasy UI Framework
STRUCTURE.CSS v1.5
Workspace & Application Engine
==================================================*/

/*========================
 WORKSPACE
========================*/

.ep-workspace{
    display:grid;
    grid-template-columns:280px minmax(0,1fr) 340px;
    height:100%;
    min-height:0;
}

.ep-workspace-main{
    display:flex;
    flex-direction:column;
    min-width:0;
    min-height:0;
}

.ep-workspace-side{
    display:flex;
    flex-direction:column;
    min-height:0;
}

.ep-workspace-card{
    position:relative;
    overflow:hidden;
}

.ep-workspace-ribbon{

    position:absolute;

    top:16px;
    right:16px;

    width:42px;
    height:42px;

    border-radius:12px;

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

    backdrop-filter:blur(10px);

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

    box-shadow:0 8px 20px rgba(0,0,0,.12);
}

.ep-workspace-ribbon img{
    width:24px;
    border-radius:3px;
}

.ep-workspace-card{
    transition:all .35s cubic-bezier(.2,.8,.2,1);
}

.ep-workspace-card.active{
    transform:scale(1.06);
    z-index:10;
    box-shadow:0 30px 60px rgba(79,124,255,.25);
}

.ep-workspace-card.fading{
    opacity:.25;
    transform:scale(.96);
    filter:blur(2px);
}

#teacherWorkspace{
    opacity:0;
    transform:
        translateY(45px)
        scale(.97);
}

#teacherWorkspace.visible{

    animation:workspaceReveal .55s
    cubic-bezier(.22,1,.36,1)
    forwards;

}

@keyframes workspaceReveal{

    0%{
        opacity:0;
        transform:
            translateY(45px)
            scale(.97);
    }

    60%{
        opacity:1;
    }

    100%{
        opacity:1;
        transform:
            translateY(0)
            scale(1);
    }

}


/*========================
 SPLIT PANES
========================*/

.ep-split-h{
    display:grid;
    grid-template-columns:1fr 6px 1fr;
    min-height:0;
}

.ep-split-v{
    display:grid;
    grid-template-rows:1fr 6px 1fr;
    min-height:0;
}

.ep-split-divider{
    cursor:col-resize;
}

.ep-split-divider-h{
    cursor:row-resize;
}

/*========================
 TABS
========================*/

.ep-tabbar{
    display:flex;
    align-items:center;
    overflow:auto;
    white-space:nowrap;
}

.ep-tab{
    display:flex;
    align-items:center;
    gap:.6rem;
    min-height:46px;
    flex-shrink:0;
}

.ep-tab-close{
    margin-left:.4rem;
}

/*========================
 TOOLBAR
========================*/

.ep-toolbar-main{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    flex-wrap:wrap;
}

.ep-toolbar-group{
    display:flex;
    align-items:center;
    gap:.5rem;
    flex-wrap:wrap;
}

/*========================
 INSPECTOR
========================*/

.ep-inspector{
    display:flex;
    flex-direction:column;
    min-height:0;
}

.ep-inspector-section{
    display:flex;
    flex-direction:column;
    gap:.75rem;
}

/*========================
 DRAWER STACK
========================*/

.ep-drawer-stack{
    display:flex;
    flex-direction:column;
    gap:1rem;
}

.ep-drawer-item{
    display:flex;
    flex-direction:column;
}

/*========================
 LESSON PAGE
========================*/

.ep-lesson-layout{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:2rem;
}

.ep-lesson-main,
.ep-lesson-side{
    display:flex;
    flex-direction:column;
    min-height:0;
}

/*========================
 QUIZ PAGE
========================*/

.ep-quiz-layout{
    display:grid;
    grid-template-columns:1fr 320px;
    gap:2rem;
}

.ep-quiz-main,
.ep-quiz-panel{
    display:flex;
    flex-direction:column;
}

/*========================
 AI CHAT PAGE
========================*/

.ep-ai-layout{
    display:grid;
    grid-template-columns:320px 1fr;
    gap:1.5rem;
}

.ep-ai-history,
.ep-ai-chat{
    display:flex;
    flex-direction:column;
    min-height:0;
}

/*========================
 RECORDING PAGE
========================*/

.ep-record-layout{
    display:grid;
    grid-template-columns:1fr 380px;
    gap:2rem;
}

.ep-record-main,
.ep-record-analysis{
    display:flex;
    flex-direction:column;
}

/*========================
 CERTIFICATE PAGE
========================*/

.ep-certificate-page{
    display:grid;
    grid-template-columns:1fr;
    gap:2rem;
}

/*========================
 FLOATING ACTIONS
========================*/

.ep-fab-group{
    position:fixed;
    right:2rem;
    bottom:2rem;
    display:flex;
    flex-direction:column;
    gap:.75rem;
    z-index:800;
}

/*========================
 RESPONSIVE
========================*/

@media(max-width:1200px){
    .ep-workspace{
        grid-template-columns:1fr;
    }

    .ep-workspace-side{
        order:3;
    }

    .ep-ai-layout,
    .ep-record-layout,
    .ep-quiz-layout,
    .ep-lesson-layout{
        grid-template-columns:1fr;
    }
}

@media(max-width:768px){
    .ep-split-h,
    .ep-split-v{
        display:flex;
        flex-direction:column;
    }

    .ep-split-divider,
    .ep-split-divider-h{
        display:none;
    }

    .ep-fab-group{
        right:1rem;
        bottom:1rem;
    }
}

/*==================================================
 EasyPeasy UI Framework
STRUCTURE.CSS v1.6
Dashboard & Productivity Engine
==================================================*/

/*==========================
 DASHBOARD ZONES
==========================*/

.ep-dashboard-shell{
    display:grid;
    grid-template-columns:minmax(0,1fr) 340px;
    gap:var(--ep-space-20);
    min-height:0;
}

.ep-dashboard-content,
.ep-dashboard-sidebar{
    display:flex;
    flex-direction:column;
    min-height:0;
}

.ep-dashboard-zone{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:var(--ep-space-20);
}

.ep-dashboard-btn{
    display:flex !important;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    gap:.55rem;

    min-height:105px;
    padding:1rem 1.2rem;

    text-align:center;

    border:1px solid rgba(79,124,255,.12);
    border-radius:22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(244,248,255,.96)
        );

    color:#40516F;

    box-shadow:
        0 8px 22px rgba(60,90,150,.10),
        inset 0 1px 0 rgba(255,255,255,.9);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        background .22s ease,
        color .22s ease;

    position:relative;
    overflow:hidden;
}

/* little decorative glow */
.ep-dashboard-btn::before{
    content:"";
    position:absolute;
    width:80px;
    height:80px;
    border-radius:50%;

    top:-35px;
    right:-25px;

    background:rgba(79,124,255,.10);

    pointer-events:none;
}

/* icon */
.ep-dashboard-btn i{
    position:relative;
    z-index:1;

    width:48px;
    height:48px;

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

    font-size:1.55rem;
    line-height:1;

    border-radius:16px;

    background:linear-gradient(
        135deg,
        #4F7CFF,
        #765DFF
    );

    color:#fff;

    box-shadow:
        0 7px 16px rgba(79,124,255,.25);

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

/* label */
.ep-dashboard-btn span{
    position:relative;
    z-index:1;

    line-height:1.2;

    font-size:.92rem;
    font-weight:700;

    color:#40516F;

    transition:color .22s ease;
}

/* hover */
.ep-dashboard-btn:hover{
    transform:translateY(-4px) scale(1.02);

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #F1F5FF
        );

    color:#3159C9;

    box-shadow:
        0 14px 30px rgba(60,90,150,.16),
        0 0 0 3px rgba(79,124,255,.06);
}

.ep-dashboard-btn:hover i{
    transform:translateY(-2px) rotate(-4deg) scale(1.08);

    box-shadow:
        0 10px 22px rgba(79,124,255,.32);
}

.ep-dashboard-btn:hover span{
    color:#3159C9;
}

/* pressed */
.ep-dashboard-btn:active{
    transform:translateY(-1px) scale(.99);
}

/* keyboard accessibility */
.ep-dashboard-btn:focus-visible{
    outline:none;

    box-shadow:
        0 0 0 4px rgba(79,124,255,.20),
        0 10px 24px rgba(60,90,150,.14);
}

/* smaller screens */
@media(max-width:600px){
    .ep-dashboard-btn{
        min-height:92px;
        border-radius:19px;
    }

    .ep-dashboard-btn i{
        width:42px;
        height:42px;
        font-size:1.35rem;
        border-radius:14px;
    }

    .ep-dashboard-btn span{
        font-size:.86rem;
    }
}



.ep-dashboard-btn{
    position:relative;
}

/* Special-needs notification */
.ep-dashboard-btn #specialNeedsBadge{
    position:absolute !important;

    top:8px !important;
    right:8px !important;
    left:auto !important;

    transform:none !important;

    min-width:22px;
    height:22px;

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

    padding:0 6px;

    border-radius:999px;

    font-size:.7rem;
    font-weight:800;
    line-height:1;

    background:#FF5A67 !important;
    color:#fff;

    border:3px solid #fff;

    box-shadow:
        0 4px 10px rgba(255,90,103,.28);

    z-index:10;
}

.ep-masonry{
    columns:320px;
    column-gap:var(--ep-space-20);
}

.ep-masonry>*{
    break-inside:avoid;
    display:inline-block;
    width:100%;
    margin-bottom:var(--ep-space-20);
}

/*==========================
 COMMAND PALETTE
==========================*/

.ep-command-palette{
    position:fixed;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding-top:10vh;
    z-index:1200;
}

.ep-command-window{
    width:min(760px,95vw);
    display:flex;
    flex-direction:column;
    max-height:70vh;
}

.ep-command-results{
    overflow:auto;
    min-height:0;
}

.ep-command-item{
    display:flex;
    align-items:center;
    gap:1rem;
    min-height:54px;
}

/*==========================
 NOTIFICATION CENTER
==========================*/

.ep-notification-layout{
    display:flex;
    flex-direction:column;
    min-height:420px;
}

.ep-notification-list{
    flex:1;
    overflow:auto;
}

.ep-notification-item{
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:1rem;
    align-items:start;
}


.ep-notification-actions {
    display: flex;
    gap: 7px;
    margin-top: 8px;
}

.ep-notification-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-height: 34px;
    padding: 6px 12px;

    border: 0;
    border-radius: 8px;

    font-size: .78rem;
    font-weight: 600;

    cursor: pointer;
    transition: all .15s ease;
}

.ep-notification-print-btn {
    background: #edf5ff;
    color: #1769aa;
}

.ep-notification-print-btn:hover {
    background: #dcecff;
}

.ep-notification-pdf-btn {
    background: #f3f4f6;
    color: #374151;
}

.ep-notification-pdf-btn:hover {
    background: #e5e7eb;
}
/*==========================
 FILE EXPLORER
==========================*/

.ep-file-explorer{
    display:flex;
    flex-direction:column;
    min-height:0;
}

.ep-file-tree{
    display:flex;
    flex-direction:column;
}

.ep-file-node{
    display:flex;
    align-items:center;
    gap:.75rem;
    min-height:40px;
}

.ep-file-children{
    padding-left:1.5rem;
}

/*==========================
 CHAT ADVANCED
==========================*/

.ep-chat-typing{
    display:flex;
    align-items:center;
    gap:.5rem;
}

.ep-chat-attachments{
    display:flex;
    flex-wrap:wrap;
    gap:.75rem;
}

.ep-chat-file{
    display:flex;
    align-items:center;
    gap:.5rem;
}

/*==========================
 EMPTY STATES
==========================*/

.ep-empty{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    min-height:260px;
    gap:1rem;
}

.ep-empty-actions{
    display:flex;
    flex-wrap:wrap;
    gap:.75rem;
}

/*==========================
 BREADCRUMB
==========================*/

.ep-breadcrumb{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:.5rem;
}

.ep-breadcrumb-item{
    display:flex;
    align-items:center;
    gap:.5rem;
}

/*==========================
 PRINT GRID
==========================*/

.ep-print-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:8mm;
}

.ep-print-card{
    break-inside:avoid;
}

/*==========================
 RESPONSIVE
==========================*/

@media(max-width:992px){

.ep-dashboard-shell{
    grid-template-columns:1fr;
}

.ep-print-grid{
    grid-template-columns:1fr;
}

.ep-masonry{
    columns:1;
}

}

/*==================================================
 EasyPeasy UI Framework
STRUCTURE.CSS v1.7
Application Shell Engine
==================================================*/

/*==========================
 WINDOW SYSTEM
==========================*/

.ep-window{
    display:flex;
    flex-direction:column;
    min-width:280px;
    min-height:180px;
}

.ep-window-header,
.ep-window-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    flex-shrink:0;
}

.ep-window-body{
    flex:1;
    min-height:0;
    overflow:auto;
}

/*==========================
 DOCKING
==========================*/

.ep-dock-layout{
    display:grid;
    grid-template-areas:
        "top top top"
        "left main right"
        "bottom bottom bottom";
    grid-template-columns:260px 1fr 320px;
    grid-template-rows:auto 1fr auto;
    min-height:100%;
}

.ep-dock-top{grid-area:top;}
.ep-dock-left{grid-area:left;min-width:0;}
.ep-dock-main{grid-area:main;min-width:0;}
.ep-dock-right{grid-area:right;min-width:0;}
.ep-dock-bottom{grid-area:bottom;}

/*==========================
 RESIZABLE PLACEHOLDERS
==========================*/

.ep-resizable{
    position:relative;
    min-width:0;
    min-height:0;
}

.ep-resize-e,
.ep-resize-s,
.ep-resize-se{
    position:absolute;
    z-index:5;
}

.ep-resize-e{
    top:0;right:0;bottom:0;width:8px;
    cursor:col-resize;
}

.ep-resize-s{
    left:0;right:0;bottom:0;height:8px;
    cursor:row-resize;
}

.ep-resize-se{
    right:0;bottom:0;width:14px;height:14px;
    cursor:nwse-resize;
}

/*==========================
 FILTER BAR
==========================*/

.ep-filterbar{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.75rem;
}

.ep-filter-group{
    display:flex;
    align-items:center;
    gap:.5rem;
}

/*==========================
 FORM LAYOUTS
==========================*/

.ep-form{
    display:flex;
    flex-direction:column;
    gap:1.25rem;
}

.ep-form-row{
    display:grid;
    grid-template-columns:220px 1fr;
    gap:1rem;
    align-items:center;
}

.ep-form-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:1.25rem;
}

/*==========================
 MASTER DETAIL
==========================*/

.ep-master-detail{
    display:grid;
    grid-template-columns:360px 1fr;
    gap:1.5rem;
    min-height:0;
}

.ep-master-list,
.ep-detail-panel{
    display:flex;
    flex-direction:column;
    min-height:0;
}

/*==========================
 CLASSROOM
==========================*/

.ep-classroom{
    display:grid;
    grid-template-columns:320px 1fr;
    gap:1.5rem;
}

.ep-class-list,
.ep-class-content{
    display:flex;
    flex-direction:column;
    min-height:0;
}

.ep-grading-layout{
    display:grid;
    grid-template-columns:1fr 420px;
    gap:1.5rem;
}

.ep-paper,
.ep-grading-tools{
    display:flex;
    flex-direction:column;
}

/*==========================
 SHORTCUT OVERLAY
==========================*/

.ep-shortcuts{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:1rem;
}

.ep-shortcut{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:1rem;
}

/*==========================
 RESPONSIVE
==========================*/

@media(max-width:1100px){

.ep-dock-layout,
.ep-master-detail,
.ep-classroom,
.ep-grading-layout{
    grid-template-columns:1fr;
    grid-template-areas:
        "top"
        "main"
        "left"
        "right"
        "bottom";
}

.ep-form-row{
    grid-template-columns:1fr;
}

}

@media(max-width:768px){

.ep-filterbar,
.ep-filter-group{
    flex-direction:column;
    align-items:stretch;
}

.ep-shortcuts{
    grid-template-columns:1fr;
}

}













/*==================================================
AUTHENTICATION
==================================================*/

.ep-auth{

min-height:100vh;

display:grid;

grid-template-columns:1.2fr 520px;

align-items:center;

gap:4rem;

padding:3rem;

}

.ep-auth-preview{

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

}

.ep-auth-panel{

width:100%;
max-width:520px;

}

@media(max-width:992px){

.ep-auth{

grid-template-columns:1fr;

}

.ep-auth-preview{

display:none;

}

}


/*==================================================
count down
==================================================*/



.ep-live-row{
    display:flex;
    align-items:center;
    gap:14px;
	margin:10px;
}

.ep-live-label{
    flex:1;
}

.ep-practice-countdown{
    width:74px;
    text-align:right;
    font-weight:600;
    font-variant-numeric:tabular-nums;
    color:var(--ep-primary);
    opacity:0;
    transition:.25s;
    white-space:nowrap;
}

.ep-practice-countdown.active{
    opacity:1;
}


/*==================================================
TOOLTIP
==================================================*/

/* Tooltip */
.tooltip{
    --bs-tooltip-bg:#1f2937;
    --bs-tooltip-color:#fff;
    --bs-tooltip-border-radius:14px;
    --bs-tooltip-padding-x:14px;
    --bs-tooltip-padding-y:10px;
    --bs-tooltip-font-size:.88rem;
    --bs-tooltip-max-width:260px;
    --bs-tooltip-opacity:1;
    z-index:99999;
}

.tooltip .tooltip-inner{
    background:linear-gradient(180deg,#243447,#1f2937);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:
        0 12px 30px rgba(0,0,0,.22),
        0 3px 10px rgba(0,0,0,.12);
    font-weight:500;
    line-height:1.45;
}

.tooltip .tooltip-arrow::before{
    border-top-color:#1f2937 !important;
}

.bi-info-circle{
    color:#4F7CFF;
    cursor:pointer;
    font-size:.95rem;
    transition:.25s;
}

.bi-info-circle:hover{
    color:#2563eb;
    transform:scale(1.15);
}


/*==================================================
FEEDBACK
==================================================*/
.ep-feedback-card{
    display:flex;
    flex-direction:column;
    gap:1.5rem;
}

.ep-feedback-stats{
    display:flex;
    flex-direction:column;
    gap:1rem;
}

.ep-feedback-stat{
    display:flex;
    align-items:center;
    gap:1rem;
}

.ep-feedback-icon{
    width:48px;
    height:48px;
    border-radius:14px;

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

    font-size:1.2rem;

    flex-shrink:0;
}

.ep-feedback-value{
    display:block;
    font-size:1.35rem;
    font-weight:700;
    color:#1f2937;
}

.ep-feedback-stat small{
    color:#6b7280;
    font-size:.85rem;
}

.ep-feedback-chart{
    margin-top:.5rem;
}

.ep-chart-title{
    font-weight:600;
    margin-bottom:1rem;
    color:#374151;
}

.ep-feedback-chart{
    position:relative;
    height:220px;
    width:100%;
}

.ep-feedback-footer{
    margin-top:1.5rem;
    padding-top:1rem;
    border-top:1px solid rgba(0,0,0,.06);
}

.ep-feedback-footer .ep-btn{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:.75rem;
}

/*==================================================
LOG OUT
==================================================*/

.ep-logout-btn{
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.ep-logout-btn:hover{
    transform:translateY(-2px);
}

.ep-logout-btn:active,
.ep-logout-btn.active{
    transform:scale(.96);
    box-shadow:inset 0 3px 10px rgba(0,0,0,.18);
    background:#ffe8e8;
}


/****************************************************
 SIDEBAR
****************************************************/

.ep-sidebar{

    position:relative;

    display:flex;
    flex-direction:column;

    width:var(--ep-sidebar-width);
    min-width:var(--ep-sidebar-width);

    transition:
        width .28s ease,
        transform .28s ease;

    overflow:hidden;

    z-index:999;

}

/****************************************************
 LOGO
****************************************************/

.ep-logo{

    height:var(--ep-header-height);

    display:flex;
    align-items:center;
    gap:18px;

    padding:0 var(--ep-space-24);

    flex-shrink:0;

}

.ep-logo i{

    width:30px;

    text-align:center;

    font-size:30px;

}

.ep-logo span{

    white-space:nowrap;

    transition:.25s;

}

/****************************************************
 MENU
****************************************************/

.ep-menu{

    flex:1;

    overflow-y:auto;

    padding:20px 14px;

 flex:1;
    overflow-y:auto;
    padding:var(--ep-space-20);

    background:
        linear-gradient(
            rgba(255,255,255,.15),
            rgba(255,255,255,.15)
        ),
        url("../img/carreaux.bmp");

    background-repeat:repeat;
    background-size:auto;
    background-position:top left;
}

/****************************************************
 MENU ITEMS
****************************************************/

.ep-menu-item,
.ep-menu-parent{

    display:flex;
    align-items:center;

    width:100%;
    min-height:52px;

    gap:16px;

    padding:0 16px;

    margin-bottom:6px;

    border:none;
    background:none;

    border-radius:16px;

    cursor:pointer;

    text-decoration:none;

    transition:
        background .25s,
        color .25s,
        transform .2s;

}

.ep-menu-item:hover,
.ep-menu-parent:hover{

    transform:translateX(3px);

}

.ep-menu-item i,
.ep-menu-left i{

    width:24px;

    text-align:center;

    flex-shrink:0;

    font-size:20px;

}

.ep-menu-left{

    display:flex;
    align-items:center;

    gap:16px;

    flex:1;

    min-width:0;

}

.ep-menu-right{

    margin-left:auto;

}

.ep-menu-arrow{

    transition:transform .25s;

}

.ep-menu-group.ep-open>.ep-menu-parent .ep-menu-arrow{

    transform:rotate(90deg);

}

/****************************************************
 SUBMENU
****************************************************/

.ep-submenu{

    display:none;

    margin-left:18px;

    margin-bottom:10px;

}

.ep-menu-group.ep-open>.ep-submenu{

    display:block;

}

/****************************************************
 COLLAPSED
****************************************************/

.ep-sidebar.ep-collapsed{

    width:72px;
    min-width:72px;

}

.ep-sidebar.ep-collapsed .ep-logo{

    justify-content:center;

    padding:0;

}

.ep-sidebar.ep-collapsed .ep-logo span{

    width:0;

    opacity:0;

}

.ep-sidebar.ep-collapsed .ep-menu-item span,
.ep-sidebar.ep-collapsed .ep-menu-parent span,
.ep-sidebar.ep-collapsed .ep-menu-arrow{

    display:none;

}

.ep-sidebar.ep-collapsed .ep-menu-item,
.ep-sidebar.ep-collapsed .ep-menu-parent{

    justify-content:center;

    padding:0;

}

.ep-sidebar.ep-collapsed .ep-submenu{

    display:none !important;

}

/****************************************************
 MOBILE SIDEBAR
****************************************************/

.ep-sidebar-overlay{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;
    visibility:hidden;

    transition:
        opacity .25s ease,
        visibility .25s ease;

    z-index:998;

}

.ep-sidebar-overlay.show{

    opacity:1;
    visibility:visible;

}

@media (max-width:992px){

    .ep-sidebar{

        position:fixed;

        top:0;
        left:0;
        bottom:0;

        width:var(--ep-sidebar-width);
        min-width:var(--ep-sidebar-width);

        transform:translateX(-100%);

        box-shadow:0 12px 40px rgba(0,0,0,.18);

        z-index:999;

    }

    .ep-sidebar.ep-mobile-open{

        transform:translateX(0);

    }

    /* On mobile we never use the collapsed state */

    .ep-sidebar.ep-collapsed{

        width:var(--ep-sidebar-width);
        min-width:var(--ep-sidebar-width);

    }

    .ep-sidebar.ep-collapsed .ep-logo{

        justify-content:flex-start;

        padding:0 var(--ep-space-24);

    }

    .ep-sidebar.ep-collapsed .ep-logo span{

        width:auto;
        opacity:1;

    }

    .ep-sidebar.ep-collapsed .ep-menu-item,
    .ep-sidebar.ep-collapsed .ep-menu-parent{

        justify-content:flex-start;

        padding:0 16px;

    }

    .ep-sidebar.ep-collapsed .ep-menu-item span,
    .ep-sidebar.ep-collapsed .ep-menu-parent span,
    .ep-sidebar.ep-collapsed .ep-menu-arrow{

        display:initial;

    }

    .ep-main{

        margin-left:0;

    }

}

/* =========================================================
   MOBILE VIEWPORT / BOTTOM-SCROLL SAFETY
   ========================================================= */
@media (max-width: 768px){
    .ep-app{
        height:100dvh;
        min-height:100dvh;
    }

    .ep-content{
        padding-bottom:calc(var(--ep-space-20) + 50px) !important;
        -webkit-overflow-scrolling:touch;
    }
}

/* =====================================
   QUICK WIDGETS BAR MOBILE LAYOUT
===================================== */

@media (max-width:991.98px){

    .ep-mobile-hide{
        display:none !important;
    }

}


/* =====================================================
   Reading Hero
===================================================== */

.ep-reading-hero{
    min-height:360px;

    background:
       linear-gradient(
    90deg,
    rgba(255,255,255,.90) 45%,
    rgba(255,255,255,.65) 70%,
    rgba(255,255,255,.25) 90%,
    rgba(255,255,255,0) 100%
),
        url("../AI/readingcorner.jpg") center center / cover no-repeat !important;
}

.ep-reading-overlay{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;

    max-width:620px;
    min-height:360px;

    padding:3.5rem;
    color:#fff;
}

.ep-reading-overlay h2{
    color:black;
    font-size:2.5rem;
    font-weight:700;
}

.ep-reading-overlay p{
    font-size:1.15rem;
    line-height:1.7;
    color:#2A559A;
}

.ep-reading-overlay .ep-icon{
    color:#FFD54A;
}

.ep-btn-glass{
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.35);
    color:#fff;
    backdrop-filter:blur(12px);
    transition:.25s;
}

.ep-btn-glass:hover{
    background:rgba(255,255,255,.24);
    color:#fff;
}

@media (max-width:768px){

    .ep-reading-hero,
    .ep-reading-overlay{
        min-height:300px;
    }

    .ep-reading-overlay{
        padding:2rem;
    }

    .ep-reading-overlay h2{
        font-size:2rem;
    }

    .ep-reading-overlay p{
        font-size:1rem;
    }

}


/*MENU DROPDOWN TEST */

.ep-dropdown-list{

    width:380px;

    padding:0;

    overflow:hidden;

    border:none;

    border-radius:20px;

    box-shadow:0 18px 45px rgba(0,0,0,.15);

}

.ep-dropdown-header{

    display:flex;
    align-items:center;

    padding:16px 20px;

    font-weight:700;

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

    background:#fff;

}

.ep-dropdown-body{

    max-height:420px;

    overflow-y:auto;

}

.ep-dropdown-body .dropdown-item{

    padding:14px 18px;

    border-bottom:1px solid #f1f4f8;

    transition:.2s;

}

.ep-dropdown-body .dropdown-item:last-child{

    border-bottom:none;

}

.ep-dropdown-body .dropdown-item:hover{

    background:#EEF4FF;

}

.ep-dropdown-footer{

    padding:14px;

    text-align:center;

    border-top:1px solid var(--ep-border);

    background:#fff;

}

.ep-dropdown-footer a{

    text-decoration:none;

    font-weight:600;

}

.ep-profile .dropdown-item i,
.dropdown-menu .dropdown-item i{
    width:1.25rem;
    margin-right:.6rem;
    text-align:center;
    color:var(--ep-primary);
    opacity:.85;
}

.ep-assessment-summary{
    display:flex;
    align-items:center;
    gap:2rem;
    margin-bottom:1.5rem;
}

.ep-level-badge{
    width:120px;
    height:120px;
    border-radius:24px;
    background:linear-gradient(135deg,#4F7CFF,#7B61FF);
    color:#fff;
    font-size:3rem;
    font-weight:800;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    box-shadow:0 18px 40px rgba(79,124,255,.25);
}

.ep-level-content{
    flex:1;
}

.ep-level-content h3{
    margin:.6rem 0;
}

.ep-level-content p{
    margin:0;
    color:var(--ep-text-muted);
    line-height:1.6;
}


/* ==========================================================
   Language Lab Media Types
   ========================================================== */

.ep-media-callout{
    display:flex;
    align-items:center;
    gap:40px;
    padding:30px;
    border-radius:20px;
    background:#fff;
    border:1px solid rgba(0,0,0,.06);
}

.ep-media-types{
    display:flex;
    gap:28px;
    flex-wrap:wrap;
    justify-content:center;
}

.ep-media-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-width:90px;
    transition:.25s ease;
    cursor:default;
}

.ep-media-item:hover{
    transform:translateY(-6px);
}

.ep-media-item i{
    font-size:3.5rem;
    margin-bottom:10px;
    filter:drop-shadow(0 8px 18px rgba(0,0,0,.12));
}

.ep-media-item span{
    font-size:.82rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:#6b7280;
}

/* File colours */

.ep-pdf{
    color:#ef4444;
}

.ep-video{
    color:#6366f1;
}

.ep-audio{
    color:#10b981;
}

.ep-image{
    color:#f59e0b;
}

/* Text */

.ep-media-text{
    flex:1;
}

.ep-media-text h5{
    margin:0 0 10px;
    font-size:1.35rem;
    font-weight:700;
}

.ep-media-text p{
    margin:0;
    color:#6b7280;
    line-height:1.6;
    max-width:650px;
}

/* Mobile */

@media (max-width:768px){

    .ep-media-callout{
        flex-direction:column;
        text-align:center;
        gap:25px;
    }

    .ep-media-types{
        gap:22px;
    }

    .ep-media-item{
        min-width:70px;
    }

    .ep-media-item i{
        font-size:3rem;
    }
}




/* ==========================================================
  SHINY EFFECT
   ========================================================== */


.ep-workspace-title{
    position:relative;
    display:inline-block;

    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;

    color:#111827;

    background:
        linear-gradient(
            110deg,
            #4b5563 0%,
            #ffffff 18%,
            #2563eb 28%,
            #ffffff 38%,
            #4b5563 60%
        );

    background-size:250% auto;

    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;

    animation:epWorkspaceShine 15s linear infinite;
}

@keyframes epWorkspaceShine{

    0%{
        background-position:-250% center;
    }

    100%{
        background-position:250% center;
    }

}




/*==================================================
BOOKSHELF
==================================================*/

.ep-bookshelf-wrapper{

    position:relative;

}

.ep-bookshelf{

    display:flex;

    gap:24px;

    overflow-x:auto;
    overflow-y:hidden;

    scroll-behavior:smooth;

    scroll-snap-type:x proximity;

    padding:10px 60px 20px;

    scrollbar-width:none;

}

.ep-bookshelf::-webkit-scrollbar{

    display:none;

}

.ep-book{

    flex:0 0 190px;

    scroll-snap-align:start;

}

.ep-book .ep-card{

    transition:.25s;

}

.ep-book .ep-card:hover{

    transform:translateY(-6px);

}

.ep-shelf-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    background:white;

    box-shadow:var(--ep-shadow-md);

    z-index:5;

    transition:.25s;

}

.ep-shelf-arrow:hover{

    background:var(--ep-primary);

    color:white;

}

.ep-shelf-arrow.left{

    left:0;

}

.ep-shelf-arrow.right{

    right:0;

}



.modal-library {
    z-index: 99999 !important;
}

.modal-library-dialog {
    z-index: 100000 !important;
    position: relative;
}

.modal-library-backdrop {
    z-index: 99990 !important;
}

/* ==================================================
   RETURN MODAL — GLOBAL BOOTSTRAP LAYER
================================================== */

#returnModal{
    z-index:9999 !important;
}

#returnModal + .modal-backdrop{
    z-index:9998 !important;
}

#returnModal .modal-dialog{
    position:relative;
    z-index:10000;
}




/* ==================================================
   HEADER NOTIFICATIONS
   ================================================== */

.ep-notification-dropdown{
    position:relative;
}

.ep-notification-button{
    position:relative;
}


/* Notification dropdown */

.ep-notification-menu{
    width:380px;
    max-width:calc(100vw - 30px);
    padding:0.5rem;
    overflow:hidden;
}


/* Header */

.ep-notification-header{
    padding:.8rem 1rem;
    border-bottom:1px solid var(--ep-border);
    margin-bottom:.25rem;
}

.ep-notification-header > div{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.ep-notification-header strong{
    font-size:.95rem;
    color:var(--ep-text);
}


/* Count */

.ep-notification-count{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:22px;
    height:22px;

    padding:0 7px;

    border-radius:999px;

    background:var(--ep-danger);
    color:#fff;

    font-size:.7rem;
    font-weight:700;
}


/* Individual notification */

.ep-notification-item{
    display:flex;
    align-items:flex-start;

    gap:.8rem;

    padding:.85rem .75rem !important;

    white-space:normal;

    border-radius:14px;
}

.ep-notification-item:hover{
    background:#EEF4FF;
}


/* Icon */

.ep-notification-cover{
    flex:0 0 46px;

    width:46px;
    height:58px;

    border-radius:8px;

    overflow:hidden;

    background:#EEF4FF;

    box-shadow:0 2px 6px rgba(0,0,0,.08);
}

.ep-notification-cover img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
}

.ep-notification-cover-empty{
    width:100%;
    height:100%;

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

    color:var(--ep-primary);

    font-size:1.1rem;
}


/* Text */

.ep-notification-content{
    min-width:0;

    display:flex;
    flex-direction:column;

    gap:2px;
}

.ep-notification-content strong{
    font-size:.8rem;
    color:var(--ep-primary);
}

.ep-notification-content span{
    font-size:.9rem;
    font-weight:600;
    color:var(--ep-text);

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.ep-notification-content small{
    color:var(--ep-text-light);
    font-size:.78rem;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.ep-notification-content small b{
    color:var(--ep-text);
}


/* Empty */

.ep-notification-empty{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:.6rem;

    padding:1.5rem 1rem;

    color:var(--ep-text-light);
    font-size:.85rem;
}

.ep-notification-empty i{
    color:var(--ep-success);
    font-size:1.1rem;
}


/* Footer */

.ep-notification-footer{
    border-top:1px solid var(--ep-border);

    margin-top:.25rem;

    padding:.65rem .75rem .4rem;

    text-align:center;
}

.ep-notification-footer a{
    color:var(--ep-primary);
    font-size:.8rem;
    font-weight:600;
}

.ep-notification-footer a:hover{
    color:var(--ep-secondary);
}


/* Mobile */

@media(max-width:600px){

    .ep-notification-menu{
        position:fixed !important;

        top:calc(var(--ep-header-height) + 4px) !important;

        left:50% !important;
        right:auto !important;

        transform:translateX(-50%) !important;

        width:calc(100vw - 20px) !important;
        max-width:360px !important;

        margin:0 !important;

        border-radius:16px;

        box-sizing:border-box;
    }

}

@media (max-width: 992px){
    .ep-content{
        padding-bottom:150px;
    }
}

/* =========================================================
   LOGOUT ITEM
   ========================================================= */

.ep-logout-item{
    display:flex;
    align-items:center;
    gap:.65rem;

    margin-top:.4rem;
    padding:.7rem .85rem;

    border-radius:13px;

    color:#D64552 !important;
    font-weight:600;

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

.ep-logout-item i{
    font-size:1.05rem;
    transition:transform .2s ease;
}

.ep-logout-item:hover,
.ep-logout-item:focus{
    background:#FFF0F1 !important;
    color:#C52F3D !important;

    transform:translateX(2px);
}

.ep-logout-item:hover i{
    transform:translateX(2px);
}

/* Mobile */
@media(max-width:576px){
    .ep-logout-item{
        padding:.75rem .9rem;
        min-height:44px;
    }

    .ep-logout-item i{
        font-size:1.1rem;
    }
}

/* =========================================================
   CONNECTED USERS
   Fixed footprint on mobile to prevent viewport reflow/zoom
   ========================================================= */

#connected-users{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:105px;
    min-width:105px;
    max-width:105px;

    height:24px;
    min-height:24px;

    flex:0 0 105px;

    font-size:14px;
    line-height:24px;
    white-space:nowrap;

    overflow:visible;

    font-variant-numeric:tabular-nums;
}


/* ---------- MOBILE ---------- */

@media (max-width:576px){

    #connected-users{
        display:inline-flex;
        align-items:center;
        justify-content:center;

        width:105px;
        min-width:105px;
        max-width:105px;

        height:24px;
        min-height:24px;

        flex:0 0 105px;

        font-size:14px;
        line-height:24px;
        white-space:nowrap;

        overflow:visible;

        font-variant-numeric:tabular-nums;
    }
}


/* ==========================================================
   TEST RESULTS — RESPONSIVE DIPLOMA
   ========================================================== */

#testResultsModal {
    z-index: 1060 !important;
    padding-left: 10px;
    padding-right: 10px;
}

#testResultsModal .modal-dialog {
    width: 100%;
    max-width: 620px;
    margin: 1rem auto;
}

#testResultsModal .modal-content {
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: 22px;
    background: linear-gradient(
        135deg,
        rgba(255,255,255,.99),
        rgba(248,250,255,.99)
    );
    box-shadow: 0 20px 60px rgba(20,40,90,.20);
}

/* Diploma */
#testResultsModal .test-diploma {
    position: relative;
    margin: 8px;
    padding: 22px 24px 20px;
    border: 2px solid #D9B84C;
    border-radius: 17px;
    background: linear-gradient(
        135deg,
        rgba(255,255,255,.98),
        rgba(255,251,235,.96)
    );
}

#testResultsModal .test-diploma::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(217,184,76,.38);
    border-radius: 12px;
    pointer-events: none;
}

#testResultsModal .test-diploma-content {
    position: relative;
    z-index: 2;
}

/* Medal */
.test-results-medal {
    width: 58px;
    height: 58px;
    margin: 0 auto 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,#FFD95B,#F4B400);
    color: #6B4A00;
    font-size: 1.65rem;
    box-shadow: 0 7px 20px rgba(244,180,0,.22);
}

/* Title */
.test-results-kicker {
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-weight: 700;
    color: #8B7355;
}

.test-results-title {
    margin: 2px 0 0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.9rem;
    line-height: 1.05;
    font-weight: 700;
    color: #4B3A22;
}

.test-results-subtitle {
    font-size: .88rem;
    color: #766A59;
    margin: 4px 0 14px;
}

/* Overall score */
.test-results-score {
    width: 88px;
    height: 88px;
    margin: 0 auto 15px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 4px solid #E5C65A;
    box-shadow: 0 8px 22px rgba(80,60,20,.10);
}

.test-results-score-value {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.75rem;
    line-height: 1;
    font-weight: 700;
    color: #6B4A00;
}

.test-results-score-label {
    margin-top: 3px;
    font-size: .58rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #8B7355;
}

/* Parts */
.test-results-parts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin: 0 auto 13px;
    max-width: 470px;
}

.test-results-part {
    min-width: 0;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255,255,255,.85);
    border: 1px solid rgba(217,184,76,.22);
}

.test-results-part-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .7rem;
    font-weight: 600;
    color: #6F6251;
}

.test-results-part-score {
    flex-shrink: 0;
    font-size: .75rem;
    font-weight: 800;
    color: #4B3A22;
}

.test-results-part .progress {
    height: 4px;
    margin-top: 5px;
    background: #EFE9DA;
}

.test-results-part .progress-bar {
    background: linear-gradient(90deg,#D9B84C,#F4B400);
}

/* Grade */
.test-results-grade {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #6B4A00;
    margin-bottom: 10px;
}

/* Footer */
#testResultsModal .test-results-footer {
    border-top: 1px solid rgba(217,184,76,.22);
    margin-top: 5px;
    padding-top: 10px;
}

#testResultsModal .test-results-footer p {
    font-size: .72rem;
    margin-bottom: 9px !important;
}

#testResultsModal .ep-btn-certificate {
    min-height: 38px;
    padding: 7px 18px;
    font-size: .82rem;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 767px) {

    #testResultsModal .modal-dialog {
        max-width: 540px;
    }

    #testResultsModal .test-diploma {
        padding: 20px 18px 18px;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 576px) {

    #testResultsModal {
        padding: 8px;
    }

    #testResultsModal .modal-dialog {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    #testResultsModal .modal-content {
        border-radius: 18px;
    }

    #testResultsModal .test-diploma {
        margin: 6px;
        padding: 18px 12px 15px;
        border-radius: 14px;
    }

    #testResultsModal .test-diploma::before {
        inset: 5px;
        border-radius: 10px;
    }

    .test-results-medal {
        width: 50px;
        height: 50px;
        font-size: 1.4rem;
        margin-bottom: 6px;
    }

    .test-results-kicker {
        font-size: .56rem;
    }

    .test-results-title {
        font-size: 1.65rem;
    }

    .test-results-subtitle {
        font-size: .8rem;
        margin-bottom: 10px;
    }

    .test-results-score {
        width: 76px;
        height: 76px;
        border-width: 3px;
        margin-bottom: 11px;
    }

    .test-results-score-value {
        font-size: 1.5rem;
    }

    .test-results-score-label {
        font-size: .52rem;
    }

    .test-results-parts {
        grid-template-columns: 1fr;
        gap: 5px;
        margin-bottom: 10px;
    }

    .test-results-part {
        padding: 7px 9px;
    }

    .test-results-part-name {
        font-size: .67rem;
    }

    .test-results-part-score {
        font-size: .7rem;
    }

    .test-results-grade {
        font-size: 1rem;
        margin-bottom: 7px;
    }

    #testResultsModal .test-results-footer {
        padding-top: 8px;
    }

    #testResultsModal .test-results-footer p {
        font-size: .65rem;
        margin-bottom: 7px !important;
    }

    #testResultsModal .ep-btn-certificate {
        min-height: 36px;
        padding: 6px 15px;
        font-size: .76rem;
    }
}


/* ==========================================================
   VERY SMALL PHONES
   ========================================================== */

@media (max-width: 380px) {

    #testResultsModal .test-diploma {
        padding: 15px 10px 12px;
    }

    .test-results-title {
        font-size: 1.5rem;
    }

    .test-results-medal {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
    }

    .test-results-score {
        width: 68px;
        height: 68px;
    }

    .test-results-score-value {
        font-size: 1.35rem;
    }
}



/* ==========================================================
   TEST RESULTS HEADER DROPDOWN
   ========================================================== */

.ep-results-dropdown {
    width: 340px;
    max-width: calc(100vw - 24px);
    padding: 0 !important;
    overflow: hidden;
    border: 0 !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 50px rgba(25,40,70,.16) !important;
}

/* Header */

.ep-results-dropdown .ep-dropdown-header {
    padding: 14px 16px;
    background: linear-gradient(
        135deg,
        #F8FAFF,
        #FDFBFF
    );
    border-bottom: 1px solid rgba(79,124,255,.10);
}

.ep-results-dropdown .ep-dropdown-header i {
    color: #4F7CFF;
}

.ep-results-dropdown .ep-topbar-badge {
    margin-left: auto;
}

/* Body */

.ep-results-dropdown .ep-dropdown-body {
    padding: 12px;
}

/* Individual result */

.ep-result-item {
    padding: 10px 11px;
    margin-bottom: 7px;
    border-radius: 11px;
    background: #F8FAFC;
    border: 1px solid #EDF0F5;
    transition: transform .15s ease, box-shadow .15s ease;
}

.ep-result-item:last-child {
    margin-bottom: 0;
}

.ep-result-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(40,60,100,.07);
}

.ep-result-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.ep-result-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .78rem;
    font-weight: 600;
    color: #344054;
}

.ep-result-score {
    flex: 0 0 auto;
    font-size: .78rem;
    font-weight: 800;
}

/* Score colors */

.ep-result-score.good {
    color: #20B26B;
}

.ep-result-score.low {
    color: #E05252;
}

/* Progress */

.ep-result-progress {
    height: 5px !important;
    overflow: hidden;
    border-radius: 20px;
    background: #E9EDF3 !important;
}

.ep-result-progress .progress-bar {
    border-radius: 20px;
    transition: width .4s ease;
}

.ep-result-progress .bg-success {
    background: linear-gradient(
        90deg,
        #4F7CFF,
        #20B26B
    ) !important;
}

.ep-result-progress .bg-danger {
    background: linear-gradient(
        90deg,
        #FF9A9A,
        #E05252
    ) !important;
}


/* ==========================================================
   OVERALL RESULT
   ========================================================== */

.ep-results-summary {
    margin-top: 12px;
    padding: 13px;
    border-radius: 14px;
    background: linear-gradient(
        135deg,
        #FFFDF5,
        #FFF9E8
    );
    border: 1px solid rgba(217,184,76,.22);
    text-align: center;
}

.ep-results-summary-label {
    font-size: .63rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 700;
    color: #8B7355;
}

.ep-results-average {
    margin-top: 1px;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 2rem;
    line-height: 1;
    font-weight: 700;
    color: #6B4A00;
}

.ep-results-grade {
    margin-top: 3px;
    font-size: .72rem;
    font-weight: 600;
    color: #766A59;
}


/* ==========================================================
   VIEW RESULTS BUTTON
   ========================================================== */

.ep-results-view-btn {
    width: 100%;
    margin-top: 10px;
    min-height: 38px;
    border-radius: 10px !important;
    font-size: .78rem !important;
}

.ep-results-view-btn i {
    margin-right: 5px;
}


/* ==========================================================
   EMPTY STATE
   ========================================================== */

.ep-results-empty {
    padding: 28px 15px;
    text-align: center;
}

.ep-results-empty i {
    display: block;
    margin-bottom: 8px;
    font-size: 2rem;
    color: #B8C0CC;
}

.ep-results-empty span {
    font-size: .8rem;
    color: #8A94A6;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 576px) {

    .ep-results-dropdown {
        width: 310px;
        max-width: calc(100vw - 20px);
    }

    .ep-results-dropdown .ep-dropdown-header {
        padding: 12px 14px;
    }

    .ep-results-dropdown .ep-dropdown-body {
        padding: 10px;
    }

    .ep-result-item {
        padding: 9px 10px;
    }

    .ep-results-summary {
        padding: 11px;
    }

    .ep-results-average {
        font-size: 1.8rem;
    }
}
/* =========================================================
   EASY PEASY — PORTRAIT TABLET EXPANDED SIDEBAR FIX
   ---------------------------------------------------------
   When the sidebar is OPEN on portrait tablets, keep the
   full menu labels visible. The real .ep-collapsed state
   remains icon-only.
   ========================================================= */
@media (min-width:768px) and (max-width:992px) and (orientation:portrait){

    /* Expanded sidebar: restore menu text */
    .ep-sidebar:not(.ep-collapsed) .ep-menu-item span,
    .ep-sidebar:not(.ep-collapsed) .ep-menu-parent span,
    .ep-sidebar:not(.ep-collapsed) .ep-menu-arrow{
        display:initial !important;
        opacity:1 !important;
        width:auto !important;
        visibility:visible !important;
    }

    /* Expanded sidebar: restore normal horizontal layout */
    .ep-sidebar:not(.ep-collapsed) .ep-menu-item,
    .ep-sidebar:not(.ep-collapsed) .ep-menu-parent{
        justify-content:flex-start !important;
        padding:0 16px !important;
        gap:16px !important;
    }

    /* Keep icon dimensions stable */
    .ep-sidebar:not(.ep-collapsed) .ep-menu-item i,
    .ep-sidebar:not(.ep-collapsed) .ep-menu-left i{
        width:24px !important;
        flex:0 0 24px !important;
    }

    /* Expanded logo */
    .ep-sidebar:not(.ep-collapsed) .ep-logo{
        justify-content:flex-start !important;
        padding:0 var(--ep-space-24) !important;
    }

    .ep-sidebar:not(.ep-collapsed) .ep-logo span{
        display:initial !important;
        opacity:1 !important;
        width:auto !important;
        visibility:visible !important;
    }
}


/* =========================================================
   PORTRAIT iPAD — CENTER BADGE / NUMBER PILLS
   Keep notification/count badges perfectly centered.
   ========================================================= */
@media (min-width:768px) and (max-width:992px) and (orientation:portrait){

    .ep-menu-right .ep-badge,
    .ep-menu-item .ep-badge,
    .ep-menu-parent .ep-badge{
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        text-align:center !important;
        line-height:1 !important;
        vertical-align:middle !important;
        flex:0 0 auto !important;
    }
}


/* Portrait iPad — move badge numbers 3px downward */
@media (min-width:768px) and (max-width:992px) and (orientation:portrait){
    .ep-menu-right .ep-badge,
    .ep-menu-item .ep-badge,
    .ep-menu-parent .ep-badge{
        transform:translateY(3px) !important;
    }
}


/* =========================================================
   iPAD — MAIN CONTENT / RIGHT COLUMN BREATHING ROOM
   Keep a visible gap between adjacent content columns.
   Only affects tablet/iPad widths.
   ========================================================= */
@media (min-width:768px) and (max-width:1024px){

    .ep-content{
        padding-left:20px !important;
        padding-right:20px !important;
    }

    .ep-content > .container-fluid{
        padding-left:0 !important;
        padding-right:0 !important;
    }
}


/* =========================================================
   iPAD — DASHBOARD COLUMN GAP
   Keep the existing 70/30 and 72/28 proportions while
   providing a clear 20px separation between the main
   content and the right-hand column.
   ========================================================= */

/* Older iPad landscape */
@media (min-width:768px) and (max-width:1024px) and (orientation:landscape){
    .ep-dashboard-shell{
        grid-template-columns:
            minmax(0,72fr)
            minmax(240px,28fr) !important;
        gap:20px !important;
    }
}

/* Older iPad portrait */
@media (min-width:768px) and (max-width:1024px) and (orientation:portrait){
    .ep-dashboard-shell{
        grid-template-columns:
            minmax(0,70fr)
            minmax(220px,30fr) !important;
        gap:20px !important;
    }
}