/* Base Styling Matrix Elements */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f4f6f9; color: #333; min-height: 100vh; display: flex; flex-direction: column; }
main { flex-grow: 1; }

/* 1. Header & Branding Design */
header { background-color: #ffffff; box-shadow: 0 2px 4px rgba(0,0,0,0.05); padding: 20px 30px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 1000; }
.logo { font-size: 26px; font-weight: 800; color: #007bff; text-decoration: none; letter-spacing: -0.5px; }
.logo span { color: #28a745; }
nav { display: flex; align-items: center; gap: 20px; }
nav a { text-decoration: none; color: #4a5568; font-weight: 600; font-size: 15px; transition: color 0.2s; }
nav a:hover { color: #007bff; }
.nav-highlight { background-color: #007bff; color: white !important; padding: 8px 16px; border-radius: 4px; }
.nav-highlight:hover { background-color: #0056b3; }

/* 2. Social Media Join Banner */
.social-join-section { background-color: #ffffff; padding: 40px 20px; text-align: center; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; margin-top: 40px; }
.social-join-section h3 { font-size: 22px; color: #1a202c; margin-bottom: 8px; }
.social-join-section p { color: #718096; font-size: 15px; margin-bottom: 20px; }
.social-links-wrapper { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
.social-card { display: flex; align-items: center; gap: 8px; text-decoration: none; color: white; padding: 10px 20px; border-radius: 6px; font-weight: bold; font-size: 14px; transition: transform 0.2s; }
.social-card:hover { transform: translateY(-2px); }
.ts-telegram { background-color: #0088cc; }
.ts-twitter { background-color: #1da1f2; }
.ts-linkedin { background-color: #0077b5; }

/* 3. Global Platform Footer Layout */
footer { background-color: #1a202c; color: #a0aec0; padding: 40px 20px 20px 20px; font-size: 14px; }
.footer-container { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; border-bottom: 1px solid #2d3748; padding-bottom: 30px; }
.footer-column { flex: 1; min-width: 250px; }
.footer-column h4 { color: white; font-size: 16px; margin-bottom: 15px; font-weight: 600; }
.footer-column p { line-height: 1.6; font-size: 13.5px; }
.footer-links { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { color: #a0aec0; text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: white; }
.footer-bottom { text-align: center; padding-top: 20px; font-size: 12px; color: #718096; }
/* ========================================================
   GLOBAL MOBILE VIEWPORT BREAKOUT FIXES
   ======================================================== */

/* 1. Force the root bodies to never allow horizontal scrolling */
html, body {
    max-width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

/* 2. Fix the Master Header Container Layout Stack */
@media (max-width: 768px) {
    header {
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
        padding: 15px 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    header nav {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
    }

    header nav a {
        font-size: 13px !important;
        padding: 6px 12px !important;
        margin: 0 !important;
        white-space: nowrap;
    }
}

/* 3. Force the Portfolio Datatable Grid to Scroll Internally instead of Breaking Layouts */
@media (max-width: 768px) {
    /* If your table is wrapped in a div, apply this rule to that wrapper */
    table, .table-wrapper {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap; /* Keeps text legible while scrolling sideways */
    }
}

/* 4. Ensure Footer Stacks Perfectly Clean instead of Squeezing Columns */
@media (max-width: 768px) {
    .footer-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        padding: 20px 15px !important;
        box-sizing: border-box !important;
    }

    .footer-column {
        width: 100% !important;
        margin: 0 !important;
    }
}