/* General styling for form and table */


/* Table styles */
#resultsTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 30px;
}

#resultsTable th, #resultsTable td {
    padding: 10px;
    text-align: left;
    font-size: 14px;
    color: #063572 !important; /* Light yellow */
}

#resultsTable th {
    background-color: #063572 !important; /* Charcoal background */
    color: #e0e0e0 !important; /* Light yellow for headers */
}

#resultsTable tbody tr:nth-child(odd) {
    background-color: #f1f1f1 !important; /* Slightly darker grey for odd rows */
}

#resultsTable tbody tr:nth-child(even) {
    background-color: #f9f9f9 !important; /* Light grey for even rows */
}

#resultsTable tbody tr:hover {
    background-color: #e0e0e0; /* Highlight row on hover */
}



/* DataTables pagination controls */
.dataTables_paginate {
    margin-top: 20px;
    text-align: center;
}

/* Make pagination button text yellow, keep original background */
.dataTables_paginate a, 
.dataTables_paginate span {
    padding: 5px 10px;
    margin: 0 5px;
    background-color: transparent; /* No background change */
    color: #063572 !important; /* Yellow text */
    text-decoration: none;
    border-radius: 5px;
    border: none; /* No border */
    cursor: pointer;
}

/* Hover effect for all pagination buttons (including Previous and Next) */
.dataTables_paginate a:hover, 
.dataTables_paginate span:hover {
    background-color: transparent !important; /* No background change */
    color: #ffffff !important; /* White text on hover */
}

/* Current page button - only yellow text */
.dataTables_paginate .current {
    background-color: transparent !important; /* No background */
    color: #063572 !important; /* Yellow text */
    font-weight: bold;
    border: none;
}

/* Styling for 'Previous' and 'Next' buttons to match page numbers */
.dataTables_paginate .paginate_button.previous,
.dataTables_paginate .paginate_button.next {
    color: #063572 !important; /* Yellow text */
}

/* Hover effect for 'Previous' and 'Next' buttons */
.dataTables_paginate .paginate_button.previous:hover,
.dataTables_paginate .paginate_button.next:hover {
    color: #ffffff !important; /* White text on hover */
}

/* DataTables 'Show entries' dropdown and 'Search' input */
.dataTables_length label,
.dataTables_filter label,
.dataTables_info {
    color: #063572 !important; /* Yellow text for labels and info text */
    font-size: 14px;
}

.dataTables_length select {
    padding: 5px;
    font-size: 14px;
    color: #063572 !important; /* Yellow text */
    background-color: #e0e0e0 !important; /* Dark background for dropdown */
    border: 1px solid #063572 !important; /* Yellow border */
    border-radius: 5px;
}

.dataTables_filter input {
    padding: 5px;
    font-size: 14px;
    border-radius: 5px;
    border: 1px solid #063572 !important; /* Yellow border */
    color: #063572 !important; /* Yellow text */
    background-color:#e0e0e0 !important; /* Dark background */
}

/* Chart container */
#chartContainer {
    background-color: #e9e9e9; /* Light grey background */
    border: 2px solid #063572; /* Navy border */
    border-radius: 8px; /* Rounded corners */
    padding: 20px; /* Optional: Adds padding around the chart */
    margin-top: 30px; /* Ensure there's space above */
    width: 100%;
    height: 600px;
}

#dogChart {
    width: 100% !important;
    height: 100% !important;
}

/* Center the table title */
.table-container h2 {
    text-align: center;
    color: #063572; /* Navy color for the title */
}

/* Center the chart title */
#chartTitle {
    color: #063572; /* Navy color for the title */
    text-align: center; /* Center the title */
    margin-top: 30px; /* Space between the table and chart title */
}

/* Styling for Dog details */
.dog-info {
    padding: 20px;
    text-align: center;
}

.dog-details p {
    font-size: 1.2em;
    margin: 5px 0;
}

.dog-info h3, .dog-info h4 {
    color: #063572; /* Navy color for the AKC number and Call Name */
}

.dog-info h4 {
    color: #ca2026; /* Red color for Call Name */
}

.dog-info .dog-details {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.dog-info .dog-details p {
    margin: 0;
}

.dog-info .dog-details p strong {
    margin-right: 5px;
}

.dog-photo-preview {
    max-width: 200px;
    margin-top: 20px;
}