/*
Theme Name:   Trendsform
Theme URI:       Enter Your URL
Description:      Trendsform Theme - view project style
Author:             Trendsform
Author URI:      https://trendsform.io
Template:         sinatra
Version:            1.0.0
Text Domain:    Trensform
*/

.project-container {
    padding: 0 10px;
    font-family: Arial, sans-serif;
}

.project-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 20px;
    padding: 0 25px;
    flex-wrap: nowrap;
 
}


.project-title {

    font-size: clamp(1rem, 2vw, 2em); /* Dynamically adjusts font size */
    margin: 0;
    color: #333;
    text-align: left;
    white-space: wrap; /* Prevent text from wrapping */
    overflow: hidden;
    text-overflow: ellipsis; /* Show ellipsis if the text is too long */
    flex-shrink: 1; /* Allow the text to shrink if necessary */
    /*max-width: 185px;*/
    /*width: 80%;*/
    flex-wrap: wrap;
}

.project-view-actions {
    display: flex;
    justify-content: flex-start; /* Align buttons to the left */
    gap: 20px; /* Space between the buttons */
    margin-top: 20px; /* Add some spacing from the top */
}

.project-view-actions button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e6f7ff; 
    border: 1px solid #ddd; 
    border-radius: 1px; 
    padding: 10px 20px; 
    font-size: 14px; 
    font-weight: bold;
    color: #007bff; 
    cursor: pointer;
    transition: all 0.3s ease; 
    text-decoration: none; 
}

.project-view-actions button:hover {
    background-color: #eaf1ff; /* Light blue background on hover */
    border-color: #007bff; /* Blue border on hover */
    color: #0056b3; /* Darker blue text on hover */
}

.project-view-actions button .icon {
    margin-right: 8px; /* Add space between icon and text */
    font-size: 16px; /* Slightly larger icon */
}


.btn-edit-project:hover {
    background-color: #dff0d8;
    color: #3c763d;
}

.btn-export-project {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}


.combined-chart-section {
    margin-bottom: 30px;

    background-color: white;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    /*box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);*/
    padding: 20px;
    box-sizing: border-box;
    /*flex: 1 1 calc(33.333% - 20px);*/
    /*max-width: calc(33.333% - 20px);*/
    flex: 1 1 0;
    /*min-width: 300px;*/
    display: flex;
    flex-direction: column;
    /*border: 1px solid transparent;*/
    transition: border 0.3s ease;
    height: auto !important;
    /*aspect-ratio: 2;*/
    /*max-height: 450px;*/
    /*overflow: hidden; /* Prevent overflow if content is too large */

}

.combined-chart-section canvas {
    /*flex: 2;*/
    /*width: 800px !important;*/
    /*height: 400px !important; */
    max-width: 100% !important; /* Prevent stretching */
    max-height: 350px !important; /* Prevent stretching */
    margin-left: 10px; /* Adds space between the keyword name and chart */
    margin-right: 10px; /* Adds space between the chart and growth info */
    display: block; /* Ensures proper rendering inside the row */
}

.project-pagination-controls {
    text-align: center;
    margin-top: 20px;
}

.project-pagination-button {
    /*margin: 0 5px;*/
        text-decoration: none;
    margin: 0 10px;
    padding: 8px 16px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    color: #333;
    cursor: pointer;
}

.project-pagination-button:hover:enabled {
    background-color: #e0e0e0;
    cursor: pointer;
}

.project-pagination-button:hover:disabled {
    /*background-color: #e0e0e0;*/
    cursor: text;
}

.project-charts-container {
    display: grid;
    //grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}

.project-chart-card-track {
    display: flex;
    /*flex-direction: column;*/
    align-items: center;
    justify-content: space-between;
    padding: 5px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    justify-content: space-between;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.project-chart-card-track canvas {
    /*flex: 2;*/
    width: 120px !important; /* Fixed width for consistent size */
    height: 60px !important; /* Fixed height for consistent size */
    max-width: 120px; /* Prevent stretching */
    max-height: 60px; /* Prevent stretching */
    margin-left: 10px; /* Adds space between the keyword name and chart */
    margin-right: 10px; /* Adds space between the chart and growth info */
    display: block; /* Ensures proper rendering inside the row */
}

.project-view-keyword-name {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1; /* Occupies less space for chart and growth */
    gap: 10px; /* Adds space between chart and growth */
    max-width: 60%;
}
.keyword-name {
    flex: 3;
    text-align: left;
    max-width: 60%;
}
.project-view-keyword-name h3 {
    font-size: 1.2rem;
    margin: 0;
    color: #333;
}

.project-view-keyword-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1; /* Occupies less space for chart and growth */
    gap: 10px; /* Adds space between chart and growth */
    max-width: 40%;
}


.ai-assistant-section {
    margin-top: 30px;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
}

.chat-message {
    margin-bottom: 10px;
}

.chat-message.user {
    text-align: right;
    color: blue;
}

.chat-message.assistant {
    text-align: left;
    color: green;
}

.chat-message.error {
    color: red;
    font-style: italic;
}