/*
|--------------------------------------------------------------------------
| DASHBOARD LAYOUT
|--------------------------------------------------------------------------
*/

.trm-dashboard-layout{

    display:flex;

    min-height:100vh;

    background:#f5f5f5;
}


/*
|--------------------------------------------------------------------------
| SIDEBAR
|--------------------------------------------------------------------------
*/

.trm-sidebar{

    width:260px;

    background:#1e293b;

    color:#ffffff;

    padding:30px 20px;

    flex-shrink:0;
}


.trm-sidebar-title{

    font-size:24px;

    font-weight:700;

    margin-bottom:30px;
}


/*
|--------------------------------------------------------------------------
| SIDEBAR MENU
|--------------------------------------------------------------------------
*/

.trm-sidebar-menu{

    list-style:none;

    padding:0;

    margin:0;
}


.trm-sidebar-menu li{

    margin-bottom:12px;
}


.trm-sidebar-menu a{

    display:block;

    padding:14px 16px;

    border-radius:10px;

    text-decoration:none;

    font-size:17px;

    font-weight:500;

    color:#ffffff;

    transition:0.3s;
}


.trm-sidebar-menu a:hover{

    background:#334155;
}


/*
|--------------------------------------------------------------------------
| ACTIVE SIDEBAR MENU
|--------------------------------------------------------------------------
*/

.trm-sidebar-menu a.trm-active-menu{

    background:#2563eb;
}


/*
|--------------------------------------------------------------------------
| DASHBOARD CONTENT
|--------------------------------------------------------------------------
*/

.trm-dashboard-content{

    flex:1;

    padding:40px;

    background:#f8fafc;

    overflow-x:auto;
}


/*
|--------------------------------------------------------------------------
| COURSES HEADER
|--------------------------------------------------------------------------
*/

.trm-courses-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

    margin-bottom:30px;
}


.trm-courses-header h2{

    margin:0;

    font-size:46px;

    font-weight:700;

    color:#0f172a;
}


/*
|--------------------------------------------------------------------------
| CREATE CHAPTER BUTTON
|--------------------------------------------------------------------------
*/

.trm-create-course-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    background:#2563eb;

    color:#ffffff !important;

    text-decoration:none;

    padding:14px 24px;

    border-radius:10px;

    font-size:17px;

    font-weight:600;

    transition:0.3s;
}


.trm-create-course-btn:hover{

    opacity:0.9;
}


/*
|--------------------------------------------------------------------------
| COURSES TABLE
|--------------------------------------------------------------------------
*/

.trm-course-table{

    width:100%;

    border-collapse:collapse;

    background:#ffffff;

    border-radius:14px;

    overflow:hidden;
}


.trm-course-table thead{

    background:#e2e8f0;
}


.trm-course-table th{

    padding:18px 14px;

    text-align:left;

    font-size:16px;

    font-weight:700;

    color:#0f172a;
}


.trm-course-table td{

    padding:18px 14px;

    border-bottom:1px solid #e5e7eb;

    vertical-align:middle;

    font-size:16px;

    color:#0f172a;
}


.trm-course-table tr:last-child td{

    border-bottom:none;
}


/*
|--------------------------------------------------------------------------
| ACTION BUTTON GROUP
|--------------------------------------------------------------------------
*/

.trm-action-group{

    display:flex;

    gap:10px;

    flex-wrap:wrap;
}


/*
|--------------------------------------------------------------------------
| ACTION BUTTON
|--------------------------------------------------------------------------
*/

.trm-action-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:90px;

    padding:10px 18px;

    border-radius:8px;

    text-decoration:none;

    font-size:15px;

    font-weight:600;

    color:#ffffff !important;

    background:#0f172a;

    transition:0.3s;
}


.trm-action-btn:hover{

    opacity:0.9;
}


/*
|--------------------------------------------------------------------------
| VIEW BUTTON
|--------------------------------------------------------------------------
*/

.trm-view-btn{

    background:#16a34a;
}


/*
|--------------------------------------------------------------------------
| DELETE BUTTON
|--------------------------------------------------------------------------
*/

.trm-delete-btn{

    background:#dc2626;
}


/*
|--------------------------------------------------------------------------
| ATTACH QUIZ BUTTON
|--------------------------------------------------------------------------
*/

.trm-attach-btn{

    background:#2563eb;
}


/*
|--------------------------------------------------------------------------
| SUCCESS MESSAGE
|--------------------------------------------------------------------------
*/

.trm-success-message{

    background:#dcfce7;

    color:#166534;

    padding:16px 20px;

    border-radius:10px;

    margin-bottom:25px;

    font-weight:600;
}


/*
|--------------------------------------------------------------------------
| FORM WRAPPER
|--------------------------------------------------------------------------
*/

.trm-form-wrapper{

    width:100%;

    max-width:none;

    background:#ffffff;

    padding:25px;

    border-radius:16px;

    box-shadow:0 2px 10px rgba(0,0,0,0.05);

    box-sizing:border-box;
}


.trm-form-wrapper h2{

    margin-top:0;

    margin-bottom:30px;

    font-size:42px;

    color:#0f172a;
}


/*
|--------------------------------------------------------------------------
| FORM GROUP
|--------------------------------------------------------------------------
*/

.trm-form-group{

    margin-bottom:30px;
}


.trm-form-group label{

    display:block;

    margin-bottom:10px;

    font-size:18px;

    font-weight:600;

    color:#0f172a;
}


/*
|--------------------------------------------------------------------------
| INPUT FIELD
|--------------------------------------------------------------------------
*/

.trm-form-group input[type="text"],
.trm-form-group input[type="number"]{

    width:100%;

    padding:14px 16px;

    border:1px solid #cbd5e1;

    border-radius:10px;

    font-size:16px;

    box-sizing:border-box;

}


/*
|--------------------------------------------------------------------------
| SUBMIT BUTTON
|--------------------------------------------------------------------------
*/

.trm-submit-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    background:#2563eb;

    color:#ffffff;

    border:none;

    padding:14px 26px;

    border-radius:10px;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:0.3s;
}


.trm-submit-btn:hover{

    opacity:0.9;
}


/*
|--------------------------------------------------------------------------
| WORDPRESS EDITOR FIX
|--------------------------------------------------------------------------
*/

.trm-form-wrapper .wp-editor-wrap{

    border-radius:12px;

    overflow:hidden;
}


.trm-form-wrapper .mce-tinymce{

    border-radius:12px !important;
}


/*
|--------------------------------------------------------------------------
| RESPONSIVE
|--------------------------------------------------------------------------
*/

@media ( max-width:768px ){

    .trm-dashboard-layout{

        flex-direction:column;
    }

    .trm-sidebar{

        width:100%;
    }

    .trm-dashboard-content{

        padding:20px;
    }

    .trm-courses-header{

        align-items:flex-start;
    }

    .trm-course-table{

        min-width:900px;
    }

    .trm-form-wrapper{

        padding:20px;
    }

    .trm-form-wrapper h2{

        font-size:32px;
    }
}


/*
|--------------------------------------------------------------------------
| PUBLISH BUTTON
|--------------------------------------------------------------------------
*/

.trm-publish-btn{

    background:#16a34a;
}


/*
|--------------------------------------------------------------------------
| DRAFT BUTTON
|--------------------------------------------------------------------------
*/

.trm-draft-btn{

    background:#f59e0b;
}

/*
|--------------------------------------------------------------------------
| TRM PAGE HEADER
|--------------------------------------------------------------------------
*/

.trm-page-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

    margin-bottom:30px;
}


.trm-page-header-left{

    display:flex;

    flex-direction:column;

    gap:8px;
}


.trm-page-title{

    margin:0;

    font-size:48px;

    font-weight:800;

    line-height:1.1;

    color:#0f172a;
}


.trm-page-subtitle{

    margin:0;

    font-size:16px;

    color:#64748b;

    font-weight:500;
}


.trm-page-actions{

    display:flex;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;
}


/*
|--------------------------------------------------------------------------
| PAGE ACTION BUTTON
|--------------------------------------------------------------------------
*/

.trm-page-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:120px;

    padding:14px 22px;

    border-radius:12px;

    text-decoration:none;

    background:#2563eb;

    color:#ffffff !important;

    font-size:16px;

    font-weight:700;

    transition:0.3s;
}


.trm-page-btn:hover{

    opacity:0.9;
}


/*
|--------------------------------------------------------------------------
| SECONDARY BUTTON
|--------------------------------------------------------------------------
*/

.trm-page-btn-secondary{

    background:#0f172a;
}


/*
|--------------------------------------------------------------------------
| RESPONSIVE
|--------------------------------------------------------------------------
*/

@media ( max-width:768px ){

    .trm-page-title{

        font-size:36px;
    }

}

/*
|--------------------------------------------------------------------------
| MOBILE SIDEBAR IMPROVEMENT
|--------------------------------------------------------------------------
*/

.trm-mobile-toggle{

    display:none;

    background:#0f172a;

    color:#ffffff;

    padding:16px 20px;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    border-radius:10px;

    margin:15px;

    text-align:center;
}


/*
|--------------------------------------------------------------------------
| MOBILE + TABLET
|--------------------------------------------------------------------------
*/

@media ( max-width:768px ){

    .trm-dashboard-layout{

        flex-direction:column;
    }

    .trm-mobile-toggle{

        display:block;
    }

    .trm-sidebar{

        display:none;

        width:100%;

        padding:20px;
    }

    .trm-sidebar.trm-sidebar-open{

        display:block;
    }

    .trm-dashboard-content{

        width:100%;

        padding:20px;
    }

}

/*
|--------------------------------------------------------------------------
| MOBILE RIGHT SCROLL HINT
|--------------------------------------------------------------------------
*/

@media ( max-width:768px ){

    .trm-mobile-toggle{

        position:relative;

        overflow:hidden;
    }

    /*
    |--------------------------------------------------------------------------
    | SLIDE HINT TEXT
    |--------------------------------------------------------------------------
    */

    .trm-mobile-toggle::after{

        content:'⇄ Slide Right To View More';

        display:block;

        margin-top:8px;

        font-size:13px;

        font-weight:500;

        color:rgba(255,255,255,0.75);

        letter-spacing:0.3px;

        animation:trmSlideHint 1.5s infinite;
    }

}


/*
|--------------------------------------------------------------------------
| SLIDE ANIMATION
|--------------------------------------------------------------------------
*/

@keyframes trmSlideHint{

    0%{

        transform:translateX(0);
    }

    50%{

        transform:translateX(8px);
    }

    100%{

        transform:translateX(0);
    }

}

/*
|--------------------------------------------------------------------------
| TRM ACCORDION
|--------------------------------------------------------------------------
*/

.trm-accordion{

    margin-bottom:20px;

    border:1px solid #dbe3ec;

    border-radius:10px;

    overflow:hidden;

    background:#ffffff;
}


.trm-accordion-button{

    width:100%;

    border:none;

    background:#f8fafc;

    padding:18px 20px;

    text-align:left;

    cursor:pointer;

    font-size:18px;

    font-weight:700;

    color:#0f172a;

    display:flex;

    justify-content:space-between;

    align-items:center;
}


.trm-accordion-button:hover{

    background:#eef2f7;
}


.trm-accordion-icon{

    font-size:22px;

    font-weight:700;
}


.trm-accordion-content{

    display:none;

    padding:20px;

    border-top:1px solid #e5e7eb;

    background:#ffffff;
}


.trm-accordion.active .trm-accordion-content{

    display:block;
}


.trm-accordion.active .trm-accordion-icon{

    transform:rotate(45deg);
}

/*
|--------------------------------------------------------------------------
| TRM PREREQUISITES
|--------------------------------------------------------------------------
*/

.trm-prerequisites{

    margin:20px 0;

}

.trm-prerequisites h3{

    margin-bottom:20px;

    text-align:center;

}

.trm-prerequisites ul{

    list-style:none;

    padding:0;

    margin:0;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:15px;

}

.trm-prerequisites li{

    margin:0;

}

.trm-prerequisites li a{

    display:inline-block;

    padding:12px 22px;

    background:#3478f6;

    color:#fff !important;

    text-decoration:none !important;

    border-radius:12px;

    font-weight:600;

    transition:0.3s;

    box-shadow:0 2px 8px rgba(0,0,0,0.15);

}

.trm-prerequisites li a:hover{

    background:#2563eb;

    transform:translateY(-2px);

}

/*
|--------------------------------------------------------------------------
| PREREQUISITE DEBUG TEST
|--------------------------------------------------------------------------
*/

.trm-prerequisites li::before,
.trm-prerequisites li::after,
.trm-prerequisites a::before,
.trm-prerequisites a::after{

    display:none !important;

    content:none !important;

}

.trm-prerequisites li::before,
.trm-prerequisites li::after,
.trm-prerequisites a::before,
.trm-prerequisites a::after{

    display:none !important;

    content:none !important;

}

/*
|--------------------------------------------------------------------------
| TABLE SCROLL HINT
|--------------------------------------------------------------------------
*/

.trm-table-scroll-hint{

    display:none;

}

@media ( max-width:768px ){

    .trm-table-scroll-hint{

        display:block;

        text-align:center;

        font-size:13px;

        font-weight:700;

        color:#2563eb;

        margin-bottom:12px;

        animation:trmSlideHint 1.5s infinite;

    }

}

/*
|--------------------------------------------------------------------------
| TRM NODE FRONTEND
|--------------------------------------------------------------------------
*/

.trm-node-container{

    max-width:1200px;

    margin:40px auto;

    padding:20px;

}

.trm-node-card{

    background:#ffffff;

    padding:30px;

    border-radius:16px;

    box-shadow:0 2px 12px rgba(0,0,0,0.08);

    margin-bottom:25px;

}

.trm-node-title{

    font-size:48px;

    font-weight:800;

    margin-bottom:15px;

}

.trm-node-meta{

    color:#64748b;

    font-size:18px;

}

/*
|--------------------------------------------------------------------------
| STUDY SUBSECTIONS
|--------------------------------------------------------------------------
*/

.trm-study-subsections{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.trm-subsection-btn{

    width:100%;

    text-align:left;

    padding:14px 16px;

    background:#ffffff;

    border:1px solid #dbeafe;

    border-radius:8px;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

}

.trm-subsection-btn:hover{

    background:#eff6ff;

}

.trm-section-btn{
    width:100%;
    text-align:left;
    padding:12px 15px;
    margin:12px 0;
    border:1px solid #d1d5db;
    border-radius:6px;
    background:#f8fafc;
    cursor:pointer;
    font-size:15px;
    font-weight:600;
}

.trm-section-btn:hover{
    background:#eef2ff;
}

.trm-subsection-btn{
    width:100%;
    text-align:left;
    padding:10px 12px;
    margin:8px 0;
    border:1px solid #e5e7eb;
    border-radius:6px;
    background:#ffffff;
    cursor:pointer;
    font-size:14px;
    font-weight:600;
}

.trm-subsection-btn:hover{
    background:#f9fafb;
}

/*
|--------------------------------------------------------------------------
| GUIDANCE GRID
|--------------------------------------------------------------------------
*/

.trm-guidance-grid{

    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(320px,1fr)
        );

    gap:20px;

    margin-top:15px;
}

.trm-guidance-card{

    border:1px solid #dbe3ec;

    border-radius:10px;

    overflow:hidden;

    background:#ffffff;
}

.trm-guidance-card h3{

    margin:0;

    padding:14px 18px;

    background:#f8fafc;

    border-bottom:1px solid #e5e7eb;

    font-size:18px;
}

/* ==========================================
   TRM Frontend Node Layout
========================================== */

.trm-node-container{

    max-width:1200px;

    margin:10px auto;

    padding:0 25px;

    box-sizing:border-box;

}

.trm-form-wrapper{

    width:100%;

}

.trm-node-hero{

    padding:0;

    margin:0 0 15px 0;

}

.trm-node-hero-type{

    color:#64748b;

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:8px;

}

.trm-node-title{

    margin:0;

    font-size:42px;

    font-weight:700;

    line-height:1.1;

}

/* ==========================================
   TRM Learning Workspace
========================================== */

.trm-card{
    background:#fff;
    border:1px solid #dbe4ee;
    border-radius:10px;
    padding:18px;
    margin:18px 0;
    box-shadow:0 2px 6px rgba(0,0,0,.04);
    box-sizing:border-box;
}

.trm-section-title{
    margin:0 0 12px;
    font-size:20px;
    font-weight:600;
    color:#1e293b;
}

.trm-accordion-title{
    cursor:pointer;
    background:#f8fafc;
    border:1px solid #dbe4ee;
    border-radius:8px;
    padding:10px 16px;
    margin:20px 0 0;
    font-size:20px;
    font-weight:600;
    color:#1e293b;
    transition:.2s;
}

.trm-accordion-title:hover{
    background:#eef6ff;
}

.trm-link{
    color:#2563eb;
    text-decoration:none;
    font-weight:500;
}

.trm-link:hover{
    text-decoration:underline;
}

/* ==========================================================
TRM-F001 HERO CARD
========================================================== */

.trm-hero-card{
    
    border:1px solid #dbe4ee;

    border-radius:12px;

    background:#ffffff;
    
    
    flex:1;
    min-width:180px;
    text-align:center;
    cursor:pointer;
    padding:20px;
    transition:all .25s ease;
}

.trm-hero-card:hover{

    transform:translateY(-4px) scale(1.02);

    background:#f8fbff;

    border:1px solid #2563eb;

    box-shadow:0 12px 28px rgba(37,99,235,.18);

}

.trm-hero-card{

    overflow:hidden;

}



/* ==========================================================
TRM-F001 HERO LINK
========================================================== */

.trm-hero-link{

    color:#2563eb;

    font-weight:600;

    text-decoration:underline;

    text-underline-offset:3px;

    cursor:inherit;

    transition:all .2s ease;

}

.trm-hero-card:hover .trm-hero-link{

    text-decoration:none;

    color:#1d4ed8;

}

/* ==========================================================
TRM-F002

HERO SECTION

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

.trm-node-hero{

    padding:20px;

    margin-bottom:24px;

    background:linear-gradient(135deg,#f8fbff,#eef5ff);

    border:1px solid #dbe4ee;

    border-radius:12px;

}

.trm-node-type{

    display:inline-block;

    background:#2563eb;

    color:#ffffff;

    padding:6px 14px;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:14px;

    text-transform:uppercase;

}

.trm-node-title{

    margin:0;

    font-size:42px;

    font-weight:700;

    line-height:1.2;

    color:#0f172a;

}

.trm-parent{

    margin:12px 0 0;

    font-size:16px;

    color:#475569;

}

.trm-parent a{

    color:#2563eb;

    text-decoration:none;

}

.trm-parent a:hover{

    text-decoration:underline;

}