/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #f8f9fa; /* Light gray background */
    color: #333; /* Dark gray text */
    line-height: 1.6;
}

/* Main content area */
main {
    padding: 20px;
    max-width: 1200px; /* Limit maximum width */
    margin: 0 auto; /* Center content */
}

/* Styling for the card that holds the dashboard content */
.trade-card {
    background: #ffffff; /* White background */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    padding: 20px;
    margin-top: 20px;
}

/* Heading style */
.text-secondary {
    color: #6c757d; /* Gray color for headings */
    text-align: center;
    margin-bottom: 20px;
}

/* Form styling */
form {
    display: flex;
    flex-wrap: wrap; /* Allow form elements to wrap on smaller screens */
    gap: 15px; /* Spacing between form elements */
}

.form-label {
    font-weight: bold;
    color: #495057; /* Dark gray for labels */
}

.form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #ced4da; /* Light gray border */
    border-radius: 4px;
    font-size: 1rem;
    transition: border-color 0.3s ease; /* Smooth transition for focus */
}

/* Style for focused input fields */
.form-control:focus {
    border-color: #007bff; /* Blue border on focus */
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Blue shadow on focus */
}

/* Form column widths */
.col-md-6,
.col-md-12 {
    flex: 1 1 calc(50% - 15px); /* Two columns on larger screens */
}

.col-md-12 {
    flex: 1 1 100%; /* Full width on smaller screens */
}

/* Textarea styling */
textarea.form-control {
    resize: vertical; /* Allow vertical resizing */
    min-height: 100px;
}

/* Button styling */
button.btn-primary {
    background-color: #007bff; /* Blue background */
    border-color: #007bff;
    color: white;
    font-size: 1rem;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transitions */
}

button.btn-primary:hover {
    background-color: #0056b3; /* Darker blue on hover */
    transform: scale(1.02); /* Slightly enlarge on hover */
}

button.btn-primary:active {
    transform: scale(0.98); /* Slightly shrink on click */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .col-md-6 {
        flex: 1 1 100%; /* Full width columns on small screens */
    }
}

/* Button group for navigation */
.btn-group .btn {
    margin-right: 5px; /* Add some spacing between buttons */
}
.btn-group .btn.active {
    background-color: #0056b3; /* Darker blue for active button */
    border-color: #0056b3;
}

/* ========================================
   Execution Trades Table - Fixed Layout
   ======================================== */
.execution-trades-table {
    width: 100%;
    table-layout: fixed; /* Critical: forces column widths */
    font-size: 0.9rem; /* Slightly smaller text to help fit */
}

.execution-trades-table th,
.execution-trades-table td {
    padding: 8px 6px; /* Reduced padding */
    text-align: left;
    word-wrap: break-word;
    overflow: hidden;
    vertical-align: top;
    line-height: 1.4;
}

/* Column Widths - Sum to 100% */
.execution-trades-table .col-date        { width: 9%;  white-space: nowrap; }
.execution-trades-table .col-trade-num   { width: 9%;  }
.execution-trades-table .col-position    { width: 9%;  }
.execution-trades-table .col-trend       { width: 16%; }
.execution-trades-table .col-direction   { width: 14%; }
.execution-trades-table .col-stoploss    { width: 14%; }
.execution-trades-table .col-pl          { width: 10%; }
.execution-trades-table .col-rate        { width: 19%; } /* Widest for long text */

/* Optional: Better hover & striping */
.execution-trades-table tbody tr:hover {
    background-color: #f5f8ff;
}

.execution-trades-table tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
}

/* Ensure no overflow on container */
#execution-content .table-responsive {
    overflow-x: hidden !important;
}

/* Mobile fallback: allow scroll only on very small screens */
@media (max-width: 992px) {
    #execution-content .table-responsive {
        overflow-x: auto !important;
    }
    .execution-trades-table {
        font-size: 0.8rem;
    }
}

/* Strategy Adjustments Table Styling */
.strategy-adjustments-table {
    width: 100%;
    table-layout: fixed; /* Ensures columns respect the defined widths */
}

.strategy-adjustments-table th,
.strategy-adjustments-table td {
    padding: 8px;
    text-align: left;
    word-wrap: break-word; /* Ensures long text wraps within the cell */
}

/* Column Widths */
.strategy-adjustments-table .col-date,
.strategy-adjustments-table .col-trade-number {
    width: 15%; /* Equal width for Date and Trade Number */
}

.strategy-adjustments-table .col-current-strategy,
.strategy-adjustments-table .col-problem {
    width: 35%; /* Equal width for Current Strategy and Problem */
}

/* Prevent Date from Wrapping */
.strategy-adjustments-table .col-date {
    white-space: nowrap; /* Ensures the date stays in one line */
}

/* Optional Enhancements */
.table-responsive {
    overflow-x: auto;
}

.strategy-adjustments-table tbody tr:hover {
    background-color: #f5f5f5; /* Light gray background on hover */
}

.strategy-adjustments-table tbody tr:nth-child(odd) {
    background-color: #f9f9f9; /* Light gray for odd rows */
}

/* Added styles for a cleaner look */
h3 {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    color: #007bff;
}

.table {
    margin-bottom: 1rem;
    color: #212529;
}

.table-hover tbody tr:hover {
    background-color: rgba(0, 123, 255, 0.075);
}

.text-light {
    color: #f8f9fa !important;
}

.form-select { /* For select dropdowns */
    width: 100%;
    padding: 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
    appearance: none; /* Remove default OS styling */
    background-color: white; /* Ensure background is white */
}
/* Style the dropdown arrow (using a background image) */
.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

/* Focus style for select dropdowns */
.form-select:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}