/* ===============================
   VARIABLES
   (kept in sync with aimslms-frontend.css / aimslms-auth.css
   so the plugin reads as one design system)
=============================== */
:root {
    /* Color palette */
    --aimslms-primary: #667eea;
    --aimslms-secondary: #764ba2;
    --aimslms-accent: #ffb703;
    --aimslms-dark: #1a1a2e;
    --aimslms-white: #fff;
    --aimslms-green: #3ab500;
    --aimslms-red: #ff0000;
    --aimslms-danger: #e74c3c;
    --aimslms-danger-dark: #c0392b;
    --aimslms-warning: #f39c12;
    --aimslms-info: #3498db;
    --aimslms-info-dark: #2980b9;
    --aimslms-success-bg: #e9f8e9;
    --aimslms-success-text: #2f7a2f;

    /* Back-compat aliases */
    --aimslms-primary-dark: var(--aimslms-dark);
    --aimslms-primary-accent: var(--aimslms-primary);
    --aimslms-secondary-accent: var(--aimslms-secondary);

    /* Text */
    --aimslms-text-primary: #2d2d2d;
    --aimslms-text-secondary: #6b6b6b;

    /* Surfaces */
    --aimslms-bg: #f8f9fa;
    --aimslms-background-light: #eef0f6;
    --aimslms-card-bg: #ffffff;
    --aimslms-border: #e5e5e5;
    --aimslms-border-color: var(--aimslms-border);

    /* Typography */
    --aimslms-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Spacing scale (4px base) */
    --aimslms-space-1: 4px;
    --aimslms-space-2: 8px;
    --aimslms-space-3: 12px;
    --aimslms-space-4: 16px;
    --aimslms-space-5: 24px;
    --aimslms-space-6: 32px;

    /* Radius scale */
    --aimslms-radius-sm: 6px;
    --aimslms-radius-md: 12px;
    --aimslms-radius-lg: 20px;

    /* Shadows */
    --aimslms-shadow-sm: 0 2px 8px rgba(20, 20, 40, .06);
    --aimslms-shadow-md: 0 10px 25px rgba(20, 20, 40, .10);
    --aimslms-shadow-lg: 0 20px 45px rgba(20, 20, 40, .16);

    /* Motion */
    --aimslms-transition-fast: 0.15s ease;
    --aimslms-transition: 0.25s ease;
    --aimslms-ease: cubic-bezier(.4, 0, .2, 1);
}

.aimslms-dashboard,
.aimslms-dashboard * {
    box-sizing: border-box;
}

.aimslms-dashboard {
    display: flex;
    justify-content: space-between;
    padding: 50px 0px 100px;
    font-family: var(--aimslms-font);
    flex-wrap: wrap;
}

.aimslms-dashboard-sidebar {
    width: 25%;
    background: #fff;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    flex-direction: column;
    gap: 0.5rem;
    border-style: solid;
    border-width: 1px;
    border-color: var(--aimslms-border-color);
    border-radius: var(--aimslms-radius-md);
    box-shadow: var(--aimslms-shadow-sm);
    position: relative;
    padding: 18px;
    box-sizing: border-box;
    margin-bottom: 30px;
}

.aimslms-dashboard-menu a {
    display: block;
    padding: 12px;
    margin-bottom: 8px;
    border-radius: var(--aimslms-radius-sm);
    text-decoration: none;
    transition: background var(--aimslms-transition), color var(--aimslms-transition);
}

.aimslms-dashboard-menu a:hover:not(.active) {
    background: var(--aimslms-background-light);
}

.aimslms-dashboard-menu a:focus-visible {
    outline: 2px solid var(--aimslms-primary);
    outline-offset: 2px;
}

.aimslms-dashboard-menu a.active {
    background: var(--aimslms-primary);
    color: #fff;
    box-shadow: var(--aimslms-shadow-sm);
}

.aimslms-dashboard-content {
    width: 72%;
    display: flex;
    gap: 30px;
    flex-direction: column;
}
.aimslms-profile-wrapper, .aimslms-profile-wrapper .active{
    display: flex;
    gap: 30px;
    flex-direction: column;
}
.aimslms-dashboard-content h2{
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 800;
}
.aimslms-dashboard-content h3{
    font-size: clamp(16px, 2.2vw, 18px);
    font-weight: 700;
    margin-bottom: 20px;
}
.aimslms-dashboard-content p{
    font-size: clamp(14px, 2.2vw, 16px);
    padding-top: 10px;
}
.aimslms-dashboard-cards {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
}

.aimslms-card {
    background: #fff;
    padding: 20px;
    border-radius: var(--aimslms-radius-md);
    text-align: center;
    display: flex;
    gap: 15px;
    border: 1px solid var(--aimslms-border-color);
    box-shadow: var(--aimslms-shadow-sm);
    transition: transform var(--aimslms-transition), box-shadow var(--aimslms-transition);
}
.aimslms-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--aimslms-shadow-md);
}
.aimslms-dashboard-menu{
    width: 100%;
}
.aimslms-dashboard-menu-link{
    display: flex;
    -webkit-box-align: center;
    flex-direction: row;
    gap: 0.5rem;
    justify-content: space-between;
}
.aimslms-dashboard-menu-link .aimslms-menu {
    display: flex;
    align-items: center;
    gap: 7px;
}
.aimslms-dashboard-menu-link .aimslms-menu svg{
    width: 20px;
}
.aimslms-dashboard-menu-link .aimslms-menu .aimslms-menu-title{
    min-width: max-content;
}
.aimslms-dashboard-menu-link .aimslms-menu .aimslms-menu-title p{
    margin: 0;
}
.aimslms-dashboard-menu-link svg.menu-icon, .aimslms-menu-icon svg {
    width: 18px;
    color: #000;
    fill: #000;
}
.aimslms-dashboard-menu-link .account-sidebar-menu-item{
    font-size: 16px;
    color: #000;
}
.aimslms-dashboard-menu a.active .aimslms-dashboard-menu-link svg.menu-icon, .aimslms-dashboard-menu a.active .aimslms-menu-icon svg, .aimslms-dashboard-menu a.active .aimslms-dashboard-menu-link .account-sidebar-menu-item, .aimslms-dashboard-menu a.active .aimslms-dashboard-menu-link svg{
    color: #fff;
    fill: #fff;
}
.aimslms-user-box {
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 2px solid var(--aimslms-border-color);
    padding-bottom: 30px;
    width: 100%;
    justify-content: center;
}
.aimslms-user-box img {
    border-radius: 50%;
    object-fit: cover;
    width: 45px;
    height: 45px;
    box-shadow: var(--aimslms-shadow-sm);
    border: 2px solid #fff;
}
.aimslms-user-box h4{
    font-size: 16px;
    font-weight: 600;
    color: #000;
    text-transform: capitalize;
}
.aimslms-dashboard h1{
    margin: 0 !important;
    padding: 0 !important;
}
.aimslms-inner-card-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    background: #6c63ff14;
    border-radius: var(--aimslms-radius-sm);
    gap: 15px;
    flex-shrink: 0;
}
.aimslms-inner-card-icon svg{
     fill: var(--aimslms-primary);
}
.aimslms-inner-card-info h3{
    font-size: 16px;
    font-weight: 700;
}
.aimslms-inner-card-info p{
    font-size: 12px;
}
.aimslms-continue-study-box, .aimslms-title-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.aimslms-continue-study-box h2{
    font-size: 18px;
    font-weight: 700;
}
.aimslms-shadow-none{
    box-shadow:none !important;
}

.aimslms-profile-view,
.aimslms-profile-edit,
.aimslms-profile-password {
    display: none;
}

.aimslms-profile-view.active,
.aimslms-profile-edit.active,
.aimslms-profile-password.active {
    display: flex;
}
.aimslms-form {
    width: 100%;
}
.aimslms-dashboard .aimslms-form-group{
    margin: 0;
}
.aimslms-dashboard .aimslms-form-group label{
    font-size: 14px;
    font-weight: 400;
}
.aimslms-back{
    width: 36px;
    height: 36px;
    border-radius: var(--aimslms-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: background var(--aimslms-transition-fast), transform var(--aimslms-transition-fast);
}
.aimslms-back:hover {
    background: var(--aimslms-background-light);
}
.aimslms-back:focus-visible {
    outline: 2px solid var(--aimslms-primary);
    outline-offset: 2px;
}
.aimslms-profile-password .aimslms-form-group{
    margin-bottom: 20px;
}
.aimslms-profile-avatar{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}
.aimslms-profile-avatar .aimslms-avtar-box{
    position: relative;
    z-index: 0;
}
.aimslms-profile-avatar .aimslms-avatar-actions{
    width: 30px;
    height: 30px;
    padding: 5px;
    background: #d4dcff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 111;
    border: 2px solid #fff;
    cursor: pointer;
    transition: transform var(--aimslms-transition-fast), background var(--aimslms-transition-fast);
}
.aimslms-profile-avatar .aimslms-avatar-actions:hover{
    transform: scale(1.08);
}
.aimslms-avatar-action-menu {
    position: absolute;
    bottom: -33px;
    width: max-content;
    background: #fff;
    border: 1px solid var(--aimslms-border-color);
    border-radius: var(--aimslms-radius-sm);
    box-shadow: var(--aimslms-shadow-md);
    padding: 5px 0px;
    right: -100px;
    display: none;
}
.aimslms-avatar-action-menu button{
    display: flex;
    align-items: center;
    gap: 7px;
    background-color: transparent;
    width: 100%;
    padding: 6px 10px;
    border: none;
    border-radius: var(--aimslms-radius-sm);
    cursor: pointer;
    transition: background var(--aimslms-transition-fast), color var(--aimslms-transition-fast);
}
.aimslms-avatar-action-menu button:hover{
    background-color: var(--aimslms-primary);
    color: #fff;
}
.aimslms-avatar-action-menu button svg{
    width: 14px;
    color: #000;
    fill: #000;    
}
.aimslms-avatar-action-menu p{
    font-size: 16px;
    color: #000;
    padding: 0;
}
.aimslms-avatar-action-menu.active {
    display: block;
}
.aimslms-session-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    border: 1px solid var(--aimslms-border-color);
    padding: 15px;
    border-radius: var(--aimslms-radius-md);
    transition: border-color var(--aimslms-transition), box-shadow var(--aimslms-transition);
}
.aimslms-session-box:hover{
    box-shadow: var(--aimslms-shadow-sm);
}
.aimslms-session-info{
    font-size: 16px;
}
.aimslms-session-info strong{
    font-weight: 800;
}
.aimslms-session-box.current{
    border: 1px solid #48bb87
}
.aimslms-session-info .aimslms-badge{
    background: #48bb781a;
    color: #48bb78;
    margin-left: 10px;
    padding: 3px 10px;
    border-radius: var(--aimslms-radius-sm);
    font-weight: 600;
    font-size: 12px;
}
.aimslms-session-info small{
    display: block;
}
.aimslms-course-filters{
    margin: 30px 0px;
}
#aimslms-courses-list .aimslms-course-started{
    display: none;
}
.aimslms-progress-label{
    font-size: 14px;
}
.aimslms-course-list-btn{
    width: 100%;
    display: inline-block;
    text-align: center;
    margin-top: 10px;
}
.aimslms-dashboard-course-list.aimslms-courses-grid{
    grid-template-columns: repeat(1, 1fr);
    gap:20px;
}
.aimslms-dashboard-course-list.aimslms-courses-grid .aimslms-course-thumb{
    width: calc(23% - 10px);
    height: 170px;
}
.aimslms-dashboard-course-list.aimslms-courses-grid .aimslms-course-content{
    width: calc(77% - 10px);
    display: flex;
    justify-content: space-between;
    padding: 20px 20px 20px 0px;
    gap:20px;
}
.aimslms-dashboard-course-list.aimslms-courses-grid .aimslms-course-content .aimslms-course-info{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:8px;
}
.aimslms-dashboard-course-list.aimslms-courses-grid .aimslms-course-content .aimslms-course-info .aimslms-course-tags{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.aimslms-dashboard-course-list.aimslms-courses-grid .aimslms-course-content .aimslms-course-info .aimslms-course-title{
    font-size:20px;
    font-weight:600;
    margin:4px 0;
}
.aimslms-dashboard-course-list.aimslms-courses-grid .aimslms-course-content .aimslms-course-info .aimslms-course-started{
    font-size:14px;
    color:#777;
}
.aimslms-dashboard-course-list.aimslms-courses-grid .aimslms-course-content .aimslms-course-progress{
    width:240px;
}
.aimslms-dashboard-course-list.aimslms-courses-grid .aimslms-course-content .aimslms-progress-bar{
    height:6px;
    background:#eee;
    border-radius:5px;
    margin:8px 0 14px;
    overflow:hidden;
}
.aimslms-dashboard-content .aimslms-dashboard-course-list.aimslms-courses-grid h3 {
    margin-bottom: 0px;
}
.aimslms-dashboard-content .aimslms-dashboard-course-list.aimslms-courses-grid p {
    font-size: clamp(12px, 2.2vw, 14px);
}
.aimslms-dashboard-course-list .aimslms-dashboard-course-card.aimslms-course-card {
    display: flex;
    align-items: start;
    border-radius:12px;
    gap:25px;
}
.aimslms-dashboard-course-list .aimslms-course-card .aimslms-course-thumb{
    flex-shrink:0;
}
.aimslms-dashboard-course-list .aimslms-course-card .aimslms-course-thumb img{
    object-fit: cover;
    width: 100%;
    height: auto;
}
.aimslms-empty-state {
    grid-column: 1 / -1; /* 👈 spans all columns */
    text-align: center;
    padding: 60px 20px;
}
.aimslms-empty-title {
    font-size: 18px;
    color: #666;
    margin: 20px 0;
}
/* Loader Wrapper */
.aimslms-loader {
    grid-column: 1 / -1;
    text-align: center;
    padding: 50px 20px;
    color: #666;
}
/* Spinner */
.aimslms-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e5e7eb;
    border-top: 4px solid #4f46e5;
    border-radius: 50%;
    animation: aimslms-spin 0.8s linear infinite;
    display: inline-block;
    margin-bottom: 12px;
}
.aimslms-order-single table.aimslms-table tr td{
    width: 50%;
}
.aimslms-order-single table.aimslms-table tr td b{
    font-weight: 700 !important;
}
table.aimslms-table.order-highlight tr td:last-child{
    text-align: right !important;
}
.aimslms-btn.completed{
    color: #155724;
    background: #d4edda;
    pointer-events: none;
}
.aimslms-btn.pending{
    color: #000;
    background-color: #ffc107;
    pointer-events: none;
}
@keyframes aimslms-spin {
    to { transform: rotate(360deg); }
}
.aimslms-certificate-card{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}
.aimslms-certificate-card .aimslms-certificate-left {
    display: flex;
    align-items: center;
    gap: 20px;
}
.aimslms-certificate-card .aimslms-certificate-center .aimslms-course-title, .aimslms-certificate-card .aimslms-certificate-center .aimslms-course-title a {
    font-size: 16px;
    font-weight: 600;
    color: var(--aimslms-green);
    line-height: normal;
    margin-bottom:10px;
    text-transform: capitalize;
    text-align: left;
}
.aimslms-certificate-card .aimslms-certificate-center .aimslms-course-date{
    padding: 0;
    font-size: 14px;
}
.aimslms-certificate-card .aimslms-cert-icon{
    width: 50px;
    height: 50px;
    padding: 14px;
    background: var(--aimslms-border-color);
    border-radius: var(--aimslms-radius-md);
    color: #fff;
    fill: var(--aimslms-green);
    flex-shrink: 0;
}

/* =====================================================
   RESPONSIVE DESIGN
===================================================== */
@media (max-width: 992px) {
    .aimslms-dashboard {
        flex-direction: column;
    }
    .aimslms-dashboard-sidebar,
    .aimslms-dashboard-content {
        width: 100%;
    }
    .aimslms-dashboard-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .aimslms-dashboard {
        padding: 30px 0 60px;
    }
    .aimslms-dashboard-cards {
        grid-template-columns: 1fr;
    }
    .aimslms-dashboard-course-list.aimslms-courses-grid .aimslms-course-thumb{
        width: 90px;
        height: 90px;
    }
    .aimslms-dashboard-course-list.aimslms-courses-grid .aimslms-course-content{
        width: calc(100% - 115px);
        flex-direction: column;
        padding: 0;
        gap: 8px;
    }
    .aimslms-dashboard-course-list.aimslms-courses-grid .aimslms-course-content .aimslms-course-progress{
        width: 100%;
    }
    .aimslms-dashboard-course-list .aimslms-dashboard-course-card.aimslms-course-card {
        gap: 15px;
        padding: 15px;
    }
    .aimslms-session-box{
        flex-direction: column;
        align-items: flex-start;
    }
    .aimslms-certificate-card{
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    .aimslms-profile-header {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .aimslms-dashboard-course-list.aimslms-courses-grid .aimslms-course-thumb{
        width: 70px;
        height: 70px;
    }
    .aimslms-dashboard-course-list.aimslms-courses-grid .aimslms-course-content{
        width: calc(100% - 90px);
    }
    .aimslms-user-box {
        flex-direction: column;
        text-align: center;
    }
}
.aimslms-dashboard .aimslms-dashboard-cards .aimslms-card .aimslms-inner-card-info{
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
.aimslms-dashboard .aimslms-dashboard-cards .aimslms-card .aimslms-inner-card-info .aimslms-inner-card-count, .aimslms-dashboard .aimslms-dashboard-cards .aimslms-card .aimslms-inner-card-info .aimslms-inner-card-title{
    margin: 0;
    padding: 0;
}