/*
 * styles.css
 * @version 1.13
 * @date 05/07/2026
 * @author - Kent C. Kollasch
 *
 * Copyright © 2026 Kent C. Kollasch
 * All rights reserved.
 *
 * This software and associated documentation files are proprietary
 * and confidential. Unauthorized copying, distribution, or modification
 * is prohibited.
 *
 * @file size: 12730
 * @lines: 534
 *
 * Version History (newest first, last 5 only):
 * v1.13 05/07/2026 - Updated #dealer_checkboxes label rule to font-size:14px and gap:6px (with !important) so dealer names are larger and have more space between checkbox and name, matching the JS dynamic styling and page consistency. All other rules preserved. Updated by Kent C. Kollasch
 * v1.12 05/07/2026 - Added high-specificity #dealer_checkboxes, label, and input rules to override global label { display:block; font-weight:bold; margin-bottom:5px } and input { width:100%; max-width:400px } styles that were causing large left whitespace indent and extra spacing in Sales History dealer checkbox list. Checkbox now truly flush left with tight 4px gap to dealer name. All other rules and modularity preserved. Updated by Kent C. Kollasch
 * v1.11 05/04/2026 - Added #activeFilters CSS rule for consistent light-green rounded filter summary bar matching reference image and other tabs. Updated by Kent C. Kollasch
 * v1.10 04/27/2026 - Moved all Sales Backlog tab-specific styles (.quick-btn, .apply-btn, .export-btn, .btn-warning, etc.) from modules/backlog_view.php into central styles.css for true modularity and to reduce backlog_view.php size dramatically. All existing rules preserved.
 * v1.9 04/10/2026 - Fixed incomplete v1.9 delivery: full merge of previous v1.8 + centralized ECR-style claims tab rules (.claims-tab-links, .tab-content). Updated by Kent C. Kollasch
 */

/* === SALES BACKLOG TAB SPECIFIC STYLES (moved from inline <style> in backlog_view.php) === */
.quick-btn { padding: 8px 16px; border: 2px solid #003366; background: #fff; color: #003366; border-radius: 4px; cursor: pointer; font-weight: bold; }
.quick-btn:hover { background: #003366; color: #fff; }
.quick-btn.active { background: #003366; color: #fff; border-color: #003366; }
.apply-btn, .reset-btn { padding: 8px 16px; border-radius: 4px; text-decoration: none; }
.apply-btn { background: #003366; color: white; border: none; }
.reset-btn { color: #003366; border: 1px solid #003366; }
.result-count { font-weight: bold; color: #003366; }
.export-btn { padding: 8px 16px; background: #003366; color: white; border: none; border-radius: 4px; text-decoration: none; display: inline-block; }
.btn-warning { background: #ffc107; color: #212529; }
.btn-info { background: #17a2b8; color: white; }

/* (rest of original styles.css content unchanged - full file preserved) */
:root {
    --primary-color: #003366;
    --secondary-color: #FFA500;
    --background-color: #FFFFFF;
    --text-color: #333333;
    --font-family: Arial, sans-serif;
}

body {
    font-family: var(--font-family);
    background-color: var(--background-color);
    color: var(--text-color);
    margin: 0;
    padding: 0;
}

/* === LOGIN PAGE SPECIFIC STYLES (higher specificity) === */
body.login-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    background: #f0f2f5;
    font-family: Arial, Helvetica, sans-serif;
}

body.login-page .header {
    background: #ffffff;
    padding: 15px 0;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: flex;
    justify-content: center;
    align-items: center;
}

body.login-page .logo img {
    height: 70px;
    max-width: 100%;
}

body.login-page .main-content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* === ECR CONTENT CARD STYLE (single source of truth - used by Dashboard, Diary, Claims) === */
.dashboard-container, .diary-container {
    max-width: 1450px;
    margin: 20px auto;
    padding: 0 40px;
    box-sizing: border-box;
    width: 100%;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.dashboard-grid, .diary-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: stretch;
    padding: 20px 0;
}

.dashboard-section-header, .diary-section-header {
    background: #003366;
    color: white;
    padding: 14px 25px;
    margin: 0 0 20px 0;
    border-radius: 8px 8px 0 0;
    font-size: 1.4em;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.dashboard-card, .diary-card, .stat-box {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    margin-bottom: 25px;
}

.dashboard-card:hover, .diary-card:hover, .stat-box:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.dashboard-card h2, .diary-card h2, .stat-box h3 {
    color: #36A2EB;
    margin-bottom: 20px;
    font-size: 1.5em;
    text-align: center;
}

/* Diary-specific table styling (centralized from inline) */
.table-container {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 600px;
}

table {
    border-collapse: collapse;
    width: 100%;
    font-size: 12px;
}

th, td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
    white-space: nowrap;
    line-height: 1.2;
}

th {
    position: sticky;
    top: 0;
    background-color: #0056b3 !important;
    color: white !important;
    z-index: 2;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}

tr:hover {
    background-color: #e6f7ff;
    transition: background-color 0.3s;
}

.diary-entries {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    background: #f9f9f9;
    max-height: 200px;
    overflow-y: auto;
    border-radius: 4px;
}

.diary-entry {
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    font-size: 0.9em;
    position: relative;
    padding-left: 20px;
}

.diary-entry:before {
    content: '\1F4DD';
    position: absolute;
    left: 0;
    top: 0;
}

.collapsible {
    cursor: pointer;
    color: #007bff;
    text-decoration: underline;
    font-weight: bold;
}

.add-entry-form textarea {
    width: 100%;
    height: 60px;
    resize: vertical;
    border-radius: 4px;
    border: 1px solid #ccc;
    padding: 8px;
}

.add-entry-form input[type="submit"] {
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 4px;
    font-weight: bold;
}

.add-entry-form input[type="submit"]:hover {
    background: linear-gradient(135deg, #45a049, #4CAF50);
}

.add-entry-form input[type="file"] {
    margin-top: 5px;
}

/* Claims tab-specific styles (centralized from inline) */
.claims-tab-links {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #ffffff;
}

.claims-tab-links button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    color: #000000;
}

.claims-tab-links button:hover {
    background-color: #e0e0e0;
}

.claims-tab-links button.active {
    background-color: #d0d0d0;
}

.tab-content {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

/* Original app header styles (unchanged) */
.header {
    background-color: var(--primary-color);
    color: white;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header .logo img {
    height: 50px;
}

.header .nav {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: flex-end;
}

.header .nav a {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.header .nav a i {
    font-size: 1.1em;
}

/* Remaining styles (unchanged) */
.footer {
    background-color: var(--primary-color);
    color: white;
    text-align: center;
    padding: 10px 0;
    position: fixed;
    bottom: 0;
    width: 100%;
}

.main-content {
    padding: 20px;
    padding-bottom: 60px;
    min-height: calc(100vh - 120px);
}

.tab-title {
    margin: 0;
    font-size: 1.8em;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #003366;
}

.tab-title i {
    font-size: 1.4em;
}

.tab-content-wrapper {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

form {
    margin: 20px 0;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

input, select {
    width: 100%;
    max-width: 400px;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

button {
    background-color: var(--primary-color);
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: var(--secondary-color);
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

th {
    background-color: var(--primary-color);
    color: white;
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}

.error {
    color: red;
}

.dashboard-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 20px;
}

/* Login container & form styles */
.login-container {
    background: #ffffff;
    padding: 30px 40px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    width: 100%;
    max-width: 600px;
    box-sizing: border-box;
}

.login-container h1 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

.login-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.login-form input[type="text"],
.login-form input[type="password"] {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
}

.login-form input[type="submit"] {
    width: 100%;
    padding: 14px;
    background: #0066cc;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
}

.login-form input[type="submit"]:hover {
    background: #0055aa;
}

.links {
    text-align: center;
    margin-top: 20px;
}

.links a {
    color: #0066cc;
    text-decoration: none;
}

.links a:hover {
    text-decoration: underline;
}

.footer {
    background: #ffffff;
    padding: 12px;
    text-align: center;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
    font-size: 14px;
    color: #666;
}

/* === ACTIVE FILTERS SUMMARY BAR (matches reference image + other tabs) === */
#activeFilters {
    background-color: #e8f5e9;
    border: 1px solid #a5d6a7;
    border-radius: 16px;
    padding: 8px 16px;
    margin-top: 10px;
    font-size: 13px;
    color: #003366;
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    line-height: 1.4;
}

/* === DEALER CHECKBOX STYLING (Sales History tab) ===
   High-specificity rules so dealer names are 14px with 6px gap between
   checkbox and name (consistent with page and JS dynamic creation).
   Also keeps flush-left behavior.
*/
#dealer_checkboxes {
    padding: 2px 8px 2px 2px !important;
    margin: 0 !important;
    box-sizing: border-box;
}

#dealer_checkboxes label {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 1px 0 !important;
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1.3 !important;
    cursor: pointer;
}

#dealer_checkboxes input[type="checkbox"] {
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: 14px;
    vertical-align: middle;
}

#dealer_checkboxes label span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}