/* static/css/style.css (v1.8.2) */
/* This is the main CSS file. It imports all other modular stylesheets. */
/* The order of imports matters due to the CSS cascade. */

/* 1. Base styles, variables, and global resets */
@import url("base.css");

/* 2. Reusable components */
@import url("components/header.css");
@import url("components/buttons.css");
@import url("components/tables.css");

/* 3. Page-specific layouts and styles */
@import url("pages/landing.css");
@import url("pages/dashboard.css");
@import url("pages/auth.css");

/* Responsive styles could be in their own file too, but for simplicity, they are kept here for now. */
@media (max-width: 992px) {
    .main-columns, .ranking-grid, .ranking-summary-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .hero-section h1 { font-size: 2.5em; }
    .pricing-plan.featured, .pricing-plan.popular {
        transform: scale(1); /* Disable zoom on mobile */
    }
    .public-header .container {
        flex-direction: column;
        gap: 15px;
    }
}

/* For cleaner tables without logos */
.team-name-no-logo {
    display: block;
    padding: 2px 0;
}

/* For colored text patterns */
.pattern-text {
    font-weight: 600;
}
.pattern-perfect { color: #e67e22; }
.pattern-pressure { color: #e74c3c; }
.pattern-gathering { color: #f1c40f; }
.pattern-probes { color: #3498db; }
.pattern-watch { color: #9b59b6; }
.pattern-midfield { color: #7f8c8d; }
.pattern-halftime, .pattern-default { color: #95a5a6; }

/* For Blink Effect */
.dashboard-card.blink {
    transition: background-color 0.2s ease-in-out;
    background-color: #3a3a3a; /* A slightly lighter shade for the blink */
}
/* --- Schedule Table Column Balancing --- */
.schedule-table {
    table-layout: fixed; /* Ensures table respects the assigned column widths */
    width: 100%;
}

.schedule-table th:nth-child(1) { width: 15%; } /* Time Column */
.schedule-table th:nth-child(2) { width: 30%; } /* League Column */
.schedule-table th:nth-child(3) { width: 40%; } /* Fixture Column */
.schedule-table th:nth-child(4) { width: 15%; } /* Status Column */


/* --- New Status Color Styles --- */
.status-live {
    color: #28a745; /* Bright Green */
    font-weight: bold;
}

.status-ns {
    color: #ffc107; /* Yellow */
    font-weight: bold;
}

.status-other {
    color: #dc3545; /* Bright Red */
    font-weight: bold;
}

.status-ft {
    color: #ffffff; /* White */
}
/* --- Stat Cell with Trend Indicator --- */
.stat-value {
    font-size: 1em; /* Or your default table font size */
    font-weight: 600;
}

.stat-trend {
    font-size: 0.8em;
    color: var(--text-secondary); /* A slightly dimmer color */
    letter-spacing: 2px; /* Adds some space between symbols */
    margin-top: 2px;
}
/* --- Blink Effect for Table Row Update --- */
@keyframes blink-animation {
    0% { background-color: var(--background-secondary); }
    50% { background-color: #3a3a3a; } /* Lighter color for the blink */
    100% { background-color: var(--background-secondary); }
}

.blink-update {
    animation: blink-animation 0.8s ease-in-out;
}
/* --- Fixture Link Color Fix --- */
.match-link {
    color: #d1d5db; /* A light, off-white color */
    text-decoration: none;
    font-weight: 600;
}
.match-link:hover {
    text-decoration: underline;
    color: #ffffff;
}
/* --- Trend Symbol Colors --- */
.stat-trend .trend-up {
    color: #28a745; /* สีเขียว */
}

.stat-trend .trend-down {
    color: #dc3545; /* สีแดง */
}

.stat-trend .trend-neutral {
    color: var(--text-secondary); /* สีเทา (สีเดิม) */
}
/* In static/css/style.css */

/* --- Fix for Schedule Table Overflow --- */
#schedule-section .table-container {
    max-height: 400px; /* จำกัดความสูงสูงสุดของตารางไว้ที่ 400px */
    overflow-y: auto;  /* เพิ่ม Scrollbar แนวตั้งเมื่อข้อมูลเกินขนาด */
}

/* --- Fix for Column Widths in Schedule Table --- */
.schedule-table {
    width: 100%;
    table-layout: auto; /* เปลี่ยนจาก fixed เป็น auto เพื่อให้เบราว์เซอร์ช่วยจัดขนาด */
}

.schedule-table th,
.schedule-table td {
    padding: 12px 10px; /* ปรับ Padding เล็กน้อยเพื่อความสวยงาม */
    white-space: nowrap; /* ป้องกันการตัดคำที่ไม่จำเป็น */
}

/* กำหนดความกว้างเริ่มต้นให้แต่ละคอลัมน์ แต่ยังคงยืดหยุ่นได้ */
.schedule-table .schedule-time {
    width: 10%;
}
.schedule-table .schedule-league {
    width: 25%;
}
.schedule-table .schedule-fixture {
    width: 35%; /* ให้พื้นที่กับชื่อแมตช์มากที่สุด */
}
.schedule-table .schedule-odds {
    width: 20%;
}
.schedule-table .schedule-status {
    width: 10%;
    text-align: center;
}