/* --- IMPORTATION DE POLICE (si nécessaire, mais déjà chargé par le thème) --- */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Oswald:wght@400;600&display=swap');

/* --- Variables de couleur pour une personnalisation facile --- */
:root {
    --color-background: #f4f7f9;       /* Gris clair pour le fond */
    --color-surface: #ffffff;          /* Blanc pour les conteneurs principaux */
    --color-text-primary: #333333;   /* Noir doux pour le texte principal */
    --color-text-secondary: #6c757d; /* Gris pour le texte secondaire */
    --color-border: #dee2e6;         /* Gris très clair pour les bordures */
    
    --color-blue: #3498db;           /* Bleu clair pour les accents */
    --color-red: #e74c3c;             /* Rouge pour les alertes/statuts négatifs */
    --color-green: #2ecc71;           /* Vert pour les statuts positifs */
    
    --font-primary: 'Oswald', Oswald, sans-serif;
    --font-monospace: 'Oswald', 'Oswald', monospace;
}

* {
    margin: 0;
    padding: 3;
    box-sizing: border-box;
}

body {
    font-family: var(--font-primary);
    background-color: var(--color-background);
    color: var(--color-text-primary);
    min-height: 100vh;
    padding: 20px;
}

.ham-logbook-container {
    max-width: 1400px;
    margin: 0 auto;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.ham-logbook-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--color-border);
}

.ham-logbook-header h3 {
    font-size: 2em;
    color: var(--color-text-primary);
}

.ham-logbook-controls {
    display: flex;
    gap: 10px;
}

.ham-btn {
    background-color: #e9ecef;
    color: var(--color-text-primary);
    border: 0px solid #ced4da;
    padding: 10px 15px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: normal;
    transition: all 0.2s ease;
    font-size: 0.9em;
}

.ham-btn:hover {
    background-color: #d8dde1;
    border-color: #b6bfc8;
    transform: translateY(-1px);
}

.ham-btn-primary {
    background-color: #fcd607;
  color: #303030;
    
}
.ham-btn-primary:hover {
    background-color: #98de70;
    border-color: #2980b9;
}

.ham-btn-secondary { /* Remplacé par le style par défaut .ham-btn */ }

/* Styles pour les champs de saisie */
.ham-logbook-container input[type="text"],
.ham-logbook-container input[type="date"],
.ham-logbook-container input[type="time"],
.ham-logbook-container input[type="number"],
.ham-logbook-container select,
.ham-logbook-container textarea {
    background-color: #fff !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text-primary) !important;
    padding: 8px 12px;
    border-radius: 5px;
    font-family: var(--font-primary);
    width: 100%;
}

.ham-logbook-container select option {
    background: #fff;
    color: var(--color-text-primary);
}

.ham-logbook-container input:focus,
.ham-logbook-container select:focus,
.ham-logbook-container textarea:focus {
    outline: none !important;
    border-color: var(--color-blue) !important;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2) !important;
}

.ham-search-box {
    background-color: #f8f9fa;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: center;
    border: 1px solid var(--color-border);
}

/* Styles de la table */
.ham-logbook-table-container { 
    border-radius: 10px; 
    overflow: hidden; 
    margin-bottom: 20px; 
    border: 1px solid var(--color-border);
}
.ham-logbook-table { 
    width: 100%; 
    border-collapse: collapse; 
    font-size: 0.9em;
}
.ham-logbook-table th { 
    background-color: #f6fef8; 
    color: #49a2ab;
    padding: 12px 10px; 
    text-align: left; 
    font-weight: 600; 
    border-bottom: 2px solid var(--color-border); 
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 0.5px;
}
.ham-logbook-table td { 
    padding: 12px 10px; 
    border-bottom: 1px solid var(--color-border); 
}
.ham-logbook-table tr:last-child td {
    border-bottom: none;
}
.ham-logbook-table tr:hover { 
    background-color: #f1f3f5; 
}

/* Styles des cellules spécifiques */
.ham-datetime { display: flex; flex-direction: column; }
.ham-date { font-weight: 400; font-size: 0.9em; }

.ham-time { color: var(--color-text-secondary); font-size: 0.9em; }
.ham-callsign { font-weight: normal; color: #65b1e3; var(--color-blue); font-size: 1.0em; }
.ham-freq-band { display: flex; flex-direction: column; }
.ham-freq { font-size: 0.9em; }
.ham-mode { font-weight: normal; text-align: center; }
.ham-rst { text-align: center; font-family: var(--font-monospace); }
.ham-rst-sent, .ham-rst-rcvd { color: var(--color-text-primary); }
.ham-qsl-status { text-align: center; font-size: 0.9em; font-weight: normal; }

/* NOUVEAU BLOC DE COULEURS POUR LES QSL */
.ham-qsl-o { color: var(--color-green); } /* Oui */
.ham-qsl-n { color: var(--color-red); }   /* Non */
.ham-qsl-d { color: var(--color-blue); }  /* Demandée */
.ham-qsl-a { color: #f39c12; }           /* En attente (Orange) */

/* Styles personnalisés pour la couleur du texte */
.ham-logbook-table .ham-band,
.ham-logbook-table .ham-operator normal,
.ham-logbook-table .ham-name,
.ham-logbook-table .ham-qth {
    color: var(--color-text-primary);
}
.ham-logbook-table .ham-locator {
    color: var(--color-text-secondary);
    font-family: var(--font-monospace);
    font-weight: normal;
}
#ham-qso-modal input[name="locator"] {
    text-transform: uppercase;
}

/* Actions et boutons */
.ham-actions { text-align: center; }
.ham-btn-small { 
    background: transparent; 
    border: 1px solid #ced4da; 
    color: var(--color-text-secondary); 
    padding: 4px 8px; 
    border-radius: 4px; 
    cursor: pointer; 
    margin: 0 2px; 
    font-size: 0.8em; 
    transition: all 0.2s ease; 
}
.ham-btn-small:hover { 
    border-color: var(--color-blue); 
    color: var(--color-blue); 
    background: rgba(52, 152, 219, 0.1); 
}

/* Résumé et pied de page */
.ham-logbook-summary { 
    display: flex; 
    justify-content: space-around; 
    background-color: #f8f9fa;
    border: 1px solid var(--color-border);
    border-radius: 10px; 
    padding: 15px; 
    margin-top: 20px; 
    flex-wrap: wrap; 
    gap: 10px; 
}
.ham-summary-item { text-align: center; }
.ham-summary-label { color: var(--color-text-secondary); font-size: 0.9em; display: block; }
.ham-summary-value { color: var(--color-text-primary); font-size: 1.4em; font-weight: 400; }
.ham-logbook-footer { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-top: 25px; 
    padding-top: 15px; 
    border-top: 1px solid var(--color-border); 
}
.ham-copyright { font-size: x-small; color: var(--color-text-secondary); }

/* Styles pour le formulaire modal */
#ham-qso-modal.ham-modal { 
    display: none; 
    position: fixed; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    background: rgba(0, 0, 0, 0.5); 
    z-index: 10000; 
    align-items: center; 
    justify-content: center; 
}
#ham-qso-modal.ham-modal.is-visible { display: flex !important; }
.ham-modal-content { 
    background-color: var(--color-surface); 
    border: 1px solid var(--color-border); 
    border-radius: 15px; 
    padding: 25px; 
    max-width: 800px; 
    width: 90%; 
    max-height: 90vh; 
    overflow-y: auto; 
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); 
}
.ham-modal-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 20px; 
    padding-bottom: 15px; 
    border-bottom: 1px solid var(--color-border); 
}
.ham-modal-header h4 { color: var(--color-text-primary); font-size: 1.5em; }
.ham-modal-close { color: var(--color-text-secondary); font-size: 24px; cursor: pointer; padding: 5px; }
.ham-modal-close:hover { color: var(--color-red); }
.ham-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 20px; }
.ham-form-group { display: flex; flex-direction: column; }
.ham-form-group-full { grid-column: 1 / -1; }
.ham-form-group label { color: var(--color-text-primary); margin-bottom: 5px; font-weight: 400; }
.ham-modal-footer { 
    display: flex; 
    justify-content: flex-end; 
    gap: 10px; 
    margin-top: 20px; 
    padding-top: 15px; 
    border-top: 1px solid var(--color-border); 
}

/* Horloge et Pagination */
#ham-utc-clock-container { 
    background-color: #fff;
    color: var(--color-text-primary);
    padding: 8px 15px; 
    border-radius: 8px; 
    font-family: var(--font-monospace);
    font-weight: normal; 
    border: 1px solid var(--color-border);
}
.ham-pagination { text-align: center; margin: 20px 0; }
.ham-pagination .page-numbers { 
    background-color: #fff;
    color: var(--color-blue);
    border: 1px solid var(--color-border);
    padding: 8px 12px; 
    border-radius: 5px; 
    cursor: pointer; 
    margin: 0 3px; 
    transition: all 0.2s; 
}
.ham-pagination .page-numbers:hover { background-color: #f1f3f5; }
.ham-pagination .page-numbers.current { 
    background-color: var(--color-blue);
    border-color: var(--color-blue);
    color: #fff;
    font-weight: normal; 
    cursor: default; 
}
.ham-pagination .page-numbers:disabled { opacity: 0.5; cursor: not-allowed; }

/* Responsive */
@media (max-width: 768px) {
    body { padding: 10px; }
    .ham-logbook-container { padding: 15px; }
    .ham-logbook-header { flex-direction: column; gap: 15px; }
    .ham-search-box { flex-direction: column; }
    .ham-search-box input, .ham-search-box select { width: 100%; }
    .ham-logbook-table { font-size: 0.8em; }
    .ham-logbook-table th, .ham-logbook-table td { padding: 8px 4px; }
    .ham-form-grid { grid-template-columns: 1fr; }
    .ham-modal-content { width: 95%; margin: 10px; }
}

/* Correction pour l'auto-complétion du navigateur */
.ham-logbook-container input:-webkit-autofill,
.ham-logbook-container input:-webkit-autofill:hover,
.ham-logbook-container input:-webkit-autofill:focus,
.ham-logbook-container input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--color-text-primary) !important;
    -webkit-box-shadow: 0 0 0 30px #fff inset !important;
    caret-color: var(--color-text-primary) !important;
}