/* =========================================
   TutorSpace - Ultra Modern Portal (Mobile Fixed)
   ========================================= */

/* --- 1. Variables & Base Theme --- */
:root {
    --ltc-primary: #4e73df;
    --ltc-primary-dark: #224abe;
    --ltc-success: #1cc88a;
    --ltc-info: #36b9cc;
    --ltc-warning: #f6c23e;
    --ltc-danger: #e74a3b;
    --ltc-dark: #2e303e;
    --ltc-light: #f8f9fc;
    --ltc-text-main: #4a4c58;
    --ltc-text-muted: #858796;
    --ltc-border-radius: 16px;
    --ltc-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    --ltc-shadow-hover: 0 15px 35px rgba(50, 50, 93, 0.1);
}

/* Blank Page Reset */
header, footer, #masthead, #colophon, .site-header, .site-footer, .sidebar, #sidebar, #secondary, .widget-area, .entry-header, .entry-footer, .ast-header-breadcrumb, .breadcrumb { display: none !important; }
html, body { margin: 0 !important; padding: 0 !important; height: 100%; width: 100%; background-color: var(--ltc-light) !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; overflow-x: hidden; }
#page, .site, .site-content, .entry-content { margin: 0 !important; padding: 0 !important; max-width: 100% !important; background: transparent !important; }

/* Wrapper */
.ltc-portal-wrapper {
    position: absolute; top: 0; left: 0; right: 0; min-height: 100vh;
    background: linear-gradient(180deg, #f8f9fc 0%, #eef1f5 100%);
    padding: 40px 20px;
    box-sizing: border-box;
    z-index: 999;
}

#main-content {
    background: #f8f9fc !important;
}
/* Admin Bar Fix */
body.admin-bar .ltc-portal-wrapper { top: 32px; min-height: calc(100vh - 32px); }
@media screen and (max-width: 782px) { body.admin-bar .ltc-portal-wrapper { top: 46px; min-height: calc(100vh - 46px); } }

.ltc-portal-container-inner { max-width: 1000px; margin: 0 auto; width: 100%; }

/* --- 2. Animations --- */
@keyframes fadeDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.animate-fade-down { animation: fadeDown 0.6s ease-out forwards; }
.animate-fade-up { opacity: 0; animation: fadeUp 0.6s ease-out forwards; }

/* --- 3. Modern Header --- */
.ltc-modern-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 40px; flex-wrap: wrap; gap: 15px;
}
.ltc-modern-header .header-content { flex: 1; min-width: 280px; }
.ltc-modern-header h1 { font-size: 2rem; font-weight: 800; color: var(--ltc-dark); margin: 0; letter-spacing: -0.5px; line-height: 1.2; }
.ltc-modern-header .highlight-text { color: var(--ltc-primary); position: relative; display: inline-block; }
.ltc-modern-header p { color: var(--ltc-text-muted); font-size: 1.1rem; margin: 8px 0 0 0; }
.ltc-modern-header .header-date {
    background: #fff; padding: 10px 20px; border-radius: 50px; white-space: nowrap;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); color: var(--ltc-primary); font-weight: 700;
}

/* --- 4. Navigation Pills --- */
.ltc-modern-nav {
    background: #fff; 
    padding: 5px; 
    border-radius: 50px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03); 
    
    /* Centering Logic */
    display: flex;
    justify-content: center;
    flex-wrap: wrap; 
    gap: 5px;
    width: fit-content; /* Shrink to fit content */
    margin: 0 auto 40px auto; /* Center horizontally & add bottom margin */
}

.ltc-modern-nav .nav-item { 
    margin: 0; 
} 

.ltc-modern-nav .nav-link {
    border-radius: 50px; 
    padding: 10px 24px; 
    color: var(--ltc-text-muted);
    font-weight: 600; 
    transition: all 0.3s ease; 
    border: none; 
    background: transparent;
    white-space: nowrap;
}

.ltc-modern-nav .nav-link:hover { 
    color: var(--ltc-primary); 
    background: rgba(78, 115, 223, 0.05); 
}

.ltc-modern-nav .nav-link.active {
    background: var(--ltc-primary); 
    color: #fff; 
    box-shadow: 0 4px 12px rgba(78, 115, 223, 0.3);
}

.ltc-modern-nav i { 
    margin-right: 8px; 
}

/* --- 5. Modern Cards --- */
.ltc-modern-card {
    background: #fff; border-radius: var(--ltc-border-radius);
    box-shadow: var(--ltc-shadow); border: 1px solid rgba(0,0,0,0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden; height: 100%; display: flex; flex-direction: column;
}
@media (hover: hover) {
    .ltc-modern-card:hover { transform: translateY(-5px); box-shadow: var(--ltc-shadow-hover); }
}

/* Student Card */
.card-header-gradient {
    background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);
    padding: 25px; color: white; display: flex; align-items: center; gap: 15px;
}
.student-avatar {
    width: 50px; height: 50px; min-width: 50px; background: rgba(255,255,255,0.2);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; font-weight: 800; border: 2px solid rgba(255,255,255,0.3);
}
.card-header-gradient h3 { font-size: 1.2rem; margin: 0; font-weight: 700; color: #fff; line-height: 1.2; }
.badge-grade {
    background: rgba(255,255,255,0.2); padding: 2px 10px; border-radius: 20px; display: inline-block; margin-top: 4px;
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
}
.card-body-modern { padding: 25px; flex-grow: 1; }

/* Timeline */
.section-label { font-size: 0.75rem; text-transform: uppercase; color: var(--ltc-text-muted); font-weight: 700; margin-bottom: 20px; letter-spacing: 1px; }
.ltc-timeline { position: relative; border-left: 2px solid #e3e6f0; margin-left: 10px; padding-left: 25px; }
.timeline-item { position: relative; margin-bottom: 25px; }
.timeline-item:last-child { margin-bottom: 0; }
.timeline-dot {
    width: 12px; height: 12px; background: #fff; border: 3px solid var(--ltc-primary);
    border-radius: 50%; position: absolute; left: -32px; top: 5px;
}
.timeline-content { background: #f8f9fc; padding: 15px; border-radius: 12px; border: 1px solid #edf0f5; }
.timeline-meta { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 0.8rem; flex-wrap: wrap; gap: 5px; }
.timeline-meta .date { font-weight: 700; color: var(--ltc-dark); }
.timeline-meta .tutor { color: var(--ltc-primary); font-weight: 600; }
.timeline-content p { margin: 0; font-size: 0.9rem; color: var(--ltc-text-main); line-height: 1.5; }

/* Empty States */
.empty-timeline, .empty-state { text-align: center; color: var(--ltc-text-muted); padding: 20px 0; }
.empty-state .empty-icon { font-size: 3rem; margin-bottom: 1rem; color: #d1d3e2; }

/* --- 6. Forms & Inputs --- */
.modern-label { font-size: 0.85rem; font-weight: 700; color: var(--ltc-text-main); margin-bottom: 8px; display: block; }
.modern-input {
    border: 2px solid #eaecf4; border-radius: 10px; padding: 12px 15px;
    font-size: 0.95rem; color: #5a5c69; transition: all 0.2s; background: #fff; width: 100%; box-sizing: border-box;
}
.modern-input:focus { border-color: var(--ltc-primary); box-shadow: 0 0 0 4px rgba(78, 115, 223, 0.1); outline: none; }
.student-input-group { background: #f8f9fc; padding: 20px; border-radius: 12px; border: 1px solid #edf0f5; }
.student-label { margin-bottom: 15px; color: var(--ltc-primary); font-weight: 700; border-bottom: 1px solid #e3e6f0; padding-bottom: 10px; }

/* --- 7. Buttons --- */
.btn-modern {
    border: none; padding: 12px 25px; border-radius: 50px; font-weight: 700;
    cursor: pointer; transition: all 0.3s; font-size: 0.95rem; display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none;
}
.btn-modern:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.15); color: #fff; }
.btn-primary-gradient { background: linear-gradient(135deg, #4e73df 0%, #224abe 100%); color: white; }
.btn-success-gradient { background: linear-gradient(135deg, #1cc88a 0%, #13855c 100%); color: white; }
.btn-danger-gradient { background: linear-gradient(135deg, #e74a3b 0%, #be2617 100%); color: white; }
.btn-outline-primary { border: 2px solid var(--ltc-primary); color: var(--ltc-primary); background: transparent; }
.btn-outline-primary:hover { background: var(--ltc-primary); color: white; }

/* --- 8. Action Cards --- */
.action-card { padding: 30px; text-align: center; display: flex; flex-direction: column; align-items: center; height: 100%; }
.action-card .card-icon {
    width: 70px; height: 70px; min-height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 2rem; margin-bottom: 20px;
}
.danger-theme .card-icon { background: rgba(231, 74, 59, 0.1); color: var(--ltc-danger); }
.success-theme .card-icon { background: rgba(28, 200, 138, 0.1); color: var(--ltc-success); }
.action-card h3 { font-size: 1.4rem; font-weight: 700; margin-bottom: 10px; color: var(--ltc-dark); }
.action-card p { color: var(--ltc-text-muted); margin-bottom: 20px; font-size: 0.95rem; }
.card-actions { width: 100%; text-align: left; margin-top: auto; }

/* Upload Zone */
.upload-zone { border: 2px dashed #d1d3e2; background: #fff; transition: border-color 0.2s; }
.upload-zone:hover { border-color: var(--ltc-primary); }
.upload-icon-wrapper { font-size: 3rem; color: #d1d3e2; margin-bottom: 15px; }

/* =========================================
   9. MOBILE RESPONSIVE TWEAKS (FIXED SCROLL)
   ========================================= */

@media (max-width: 991px) {
    .ltc-portal-wrapper { padding: 30px 15px; }
}

@media (max-width: 768px) {
    .ltc-portal-wrapper { padding: 20px 10px; }
    
    /* Header Stack - Scale down size */
    .ltc-modern-header { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 25px; }
    .ltc-modern-header h1 { font-size: 1.7rem; } 
    .ltc-modern-header .header-date { width: 100%; text-align: center; margin-top: 10px; }

    /* --- NAVIGATION SCROLL FIX --- */
    /* We use ID selector to override Bootstrap's flex classes */
    #ltc-parent-tabs.ltc-modern-nav { 
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* Prevent wrapping to next line */
        overflow-x: auto !important;  /* Enable horizontal scroll */
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        
        justify-content: flex-start !important; /* Force left alignment for scrolling */
        
        width: 100% !important;
        max-width: 100vw !important; /* Ensure it doesn't exceed viewport */
        margin: 0 -10px 25px -10px !important; /* Negative margin to reach edges of screen */
        padding: 5px 10px 15px 10px !important; /* Internal padding for shadows/scroll bar space */
        
        gap: 10px !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    
    /* Force items to keep their width */
    #ltc-parent-tabs .nav-item { 
        flex: 0 0 auto !important; /* Do not shrink! */
        margin: 0 !important;
    }
    
    /* Style the pills */
    #ltc-parent-tabs .nav-link { 
        white-space: nowrap !important; /* Prevent text wrapping */
        padding: 10px 20px !important; 
        font-size: 0.9rem !important; 
        background: #fff !important; 
        border: 1px solid #e3e6f0;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
        border-radius: 50px !important;
    }
    
    #ltc-parent-tabs .nav-link.active {
        background: var(--ltc-primary) !important;
        color: #fff !important;
        border-color: var(--ltc-primary) !important;
    }
    
    /* Hide Scrollbar visually but keep functionality */
    #ltc-parent-tabs::-webkit-scrollbar { height: 0px; background: transparent; }
    
    /* --- END NAVIGATION FIX --- */

    /* Fix Card Padding */
    .ltc-modern-card.p-5 { padding: 1.5rem !important; }
    .card-header-gradient { padding: 20px; }
    .card-body-modern { padding: 20px; }
    
    /* Timeline adjustments */
    .ltc-timeline { margin-left: 0; padding-left: 20px; border-left: 2px solid #e3e6f0; }
    .timeline-dot { left: -27px; width: 10px; height: 10px; border-width: 2px; }
    
    /* Upload Zone Fixes */
    .upload-zone { padding: 30px 15px !important; }
    .upload-zone h3 { font-size: 1.5rem; }

    /* Buttons */
    .btn-modern { width: 100%; margin-bottom: 10px; }
    .text-end { text-align: center !important; } 
    
    /* Action Cards */
    .action-card { padding: 25px 20px; }
}

@media (max-width: 480px) {
    /* Small Mobile */
    .ltc-modern-header h1 { font-size: 1.5rem; }
    .ltc-modern-header p { font-size: 0.95rem; }
    .student-avatar { width: 40px; height: 40px; min-width: 40px; font-size: 1rem; }
    .card-header-gradient h3 { font-size: 1.1rem; }
}

/* ==========================================================================
   CONTAINED IMAGE PREVIEWS — 20.1.114
   Preview images retain their intrinsic aspect ratio and are only scaled down
   to fit the available modal or preview stage. They are never stretched,
   cropped, or forced to fill both dimensions.
   ========================================================================== */
.ltc-image-preview-stage {
    min-width: 0;
    min-height: 0;
    overflow: hidden !important;
}
.ltc-contained-preview-image,
img[data-ltc-image-preview="1"] {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    flex: 0 1 auto;
}
.modal .ltc-contained-preview-image,
.modal img[data-ltc-image-preview="1"] {
    max-width: calc(100vw - 3rem) !important;
    max-height: calc(100vh - 10rem) !important;
}
#training-preview-modal .modal-body,
#training-preview-modal #tp-image-container {
    min-height: 0;
    height: calc(85vh - 72px);
}
#training-preview-modal #tp-image {
    max-width: calc(100% - 2rem) !important;
    max-height: calc(100% - 2rem) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    border-radius: 8px;
}
#vault-preview-modal #vault-preview-img {
    max-width: 95% !important;
    max-height: 95% !important;
}
#ws-preview-image {
    max-width: 100% !important;
    max-height: min(70vh, 100%) !important;
}