/* Exemple : réduire la taille de la police pour l'ensemble de l'interface */
body,
input,
select,
textarea,
th,
td,
h1, h2, h3, h4, h5, h6 {
    font-size: 10px !important;
}

/* Vous pouvez également cibler des sélecteurs plus précis propres au thème unfold */
.navbar,
.sidebar,
.footer {
    font-size: 10px !important;
}

/* Change la couleur des boutons dans l'admin Unfold */
button.bg-primary {
    background-color: #4A90E2 !important; /* Remplace par ta couleur */
}

button.bg-danger {
    background-color: #E74C3C !important; /* Rouge pour les actions dangereuses */
}

/* Rendre les filtres toujours visibles */
#changelist-filter .filter {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
}

#changelist-filter .filter h3 {
    cursor: default !important;
}

#changelist-filter .filter ul {
    display: block !important;
    margin-top: 0 !important;
}

/* Navigation et table */
.week-navigation {
    margin-bottom: 15px;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

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

.table td {
    vertical-align: top;
}

/* Assignments */
.assignment {
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}

.assignment-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ddd;
}

.assignment-row span {
    margin-right: 10px;
}

/* Boutons */
.button-danger {
    background-color: #d9534f;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}

.button-danger:hover {
    background-color: #c9302c;
}

/* Formulaires */
.form-row {
    display: flex;
    justify-content: flex-end;
}

.form-row .button {
    margin-left: 10px;
}

.form-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

.form-inline div {
    flex: 1;
    min-width: 150px;
}

.form-inline button {
    flex: none;
    padding: 10px 20px;
    background-color: #0A246A;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 4px;
}

.form-inline button:hover {
    background-color: #073a7b;
}

/* Applique une largeur spécifique à la colonne "name" */
th.column-full_name, td.field-full_name {
    width: 300px !important;  /* 🔥 Ajuste la largeur (modifie selon ton besoin) */
    max-width: 400px;
    white-space: normal;  /* Permet d'afficher du texte sur plusieurs lignes */
}

/* 🔹 Forcer le conteneur principal à occuper toute la largeur */
.container, .unfold-container {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 🔹 Ajuster la table pour utiliser toute la largeur */
table {
    width: 100% !important;
}

/* 🔹 Optionnel : améliorer l'alignement et lisibilité */
th, td {
    padding: 10px 15px;
    text-align: left;
}

/* Enhanced Tables Styles */
.table-summary {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
    gap: 15px;
}

.summary-box {
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    flex: 1;
    min-width: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.summary-label {
    font-size: 12px;
    color: #666;
    margin-bottom: 5px;
}

.summary-value {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.table-responsive {
    overflow-x: auto;
    margin-bottom: 20px;
}

/* Sortable headers styles */
th.sortable {
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s;
}

th.sortable a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
}

th.sortable:hover {
    background-color: #f5f5f5;
}

th.sortable.sorted {
    background-color: #e6f0ff; /* Light blue for ascending sort */
}

th.sortable.sorted.desc {
    background-color: #ffe6e6; /* Light red for descending sort */
}

.sort-icon {
    margin-left: 5px;
    display: inline-block;
    width: 10px;
    height: 10px;
    font-weight: bold;
}

/* Add sort indicators to field headers */
th.column-display_name .text::after {
    content: " ↕ (by number)";
    font-size: 12px;
    color: #999;
}

/* Format numeric values */
td.numeric {
    text-align: right;
    font-family: monospace;
    font-weight: 600;
}

/* Highlight rows */
tr.highlight-row {
    background-color: #f0fff0;
}

/* Tags styling */
.tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 12px;
}

.tag-success {
    background-color: #d4edda;
    color: #155724;
}

.tag-default {
    background-color: #e9ecef;
    color: #495057;
}

/* Price field styling - Improve readability */
.field-price .readonly,
input[name="price"],
input.price-input {
    font-family: monospace;
    font-weight: 600;
    font-size: 1.2em;
    background-color: #f8fff8;
    padding: 6px 10px;
    border-radius: 4px;
    border: 2px solid #4CAF50;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05), 0 0 0 1px rgba(76,175,80,0.2);
    text-align: right;
    color: #155724;
    min-width: 120px;
    width: auto;
    position: relative;
}

/* Add a subtle euro symbol overlay within the field */
input.price-input {
    padding-left: 25px;  /* Make room for the symbol */
}

.field-price {
    position: relative;
}

.field-price::before {
    content: "€";
    position: absolute;
    left: 10px;
    top: 10px;
    color: #777;
    z-index: 1;
    pointer-events: none;
}

/* Price field in the admin list view */
td.field-price {
    font-family: monospace;
    font-weight: 600;
    text-align: right;
    padding-right: 20px !important;
    background-color: #f8fff8;
    color: #155724;
    border-right: 3px solid #e7f5e7;
}

/* Euro symbol */
.field-price .readonly::before,
td.field-price::before {
    content: "€";
    margin-right: 4px;
    color: #777;
}

/* Column header for price */
th.column-price {
    text-align: right;
    padding-right: 20px !important;
}

/* Highlight price field when the offer is final */
tr.is_final-yes td.field-price {
    background-color: #e7f5e7;
    font-weight: 700;
}

/* Price field focus state */
input[name="price"]:focus,
input.price-input:focus {
    outline: none;
    border-color: #2E7D32;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.3);
}

/* No data message */
.no-data {
    text-align: center;
    padding: 20px;
    color: #999;
    font-style: italic;
}

/* Pagination styling */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}

.pagination-link {
    display: inline-block;
    padding: 5px 10px;
    margin: 0 5px;
    border: 1px solid #ddd;
    border-radius: 3px;
    color: #4A90E2;
    text-decoration: none;
    transition: background-color 0.2s;
}

.pagination-link:hover {
    background-color: #f5f5f5;
}

.pagination-info {
    margin: 0 10px;
}

/* Add button styling */
.add-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 15px;
    background-color: #4A90E2;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
    font-size: 14px;
    transition: background-color 0.2s;
}

.add-button:hover {
    background-color: #3a7bc8;
}

.add-button .material-symbols-outlined {
    margin-right: 5px;
    font-size: 16px;
}

/* Download link styling */
.download-link {
    display: inline-flex;
    align-items: center;
    color: #4A90E2;
    text-decoration: none;
}

.download-link:hover {
    text-decoration: underline;
}

/* Favorite star styling */
.favorite-star {
    font-size: 1.4em;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
}

.favorite-star:hover {
    transform: scale(1.2);
}

.favorite-star.active {
    color: #FFD700; /* Golden color for favorites */
}

.favorite-star.inactive {
    color: #CCCCCC; /* Light gray for non-favorites */
}

.favorite-star:hover.inactive {
    color: #FFD700; /* Show golden on hover */
    opacity: 0.7;
}

/* Column styling for favorites */
.field-favorite_toggle {
    width: 30px !important;
    text-align: center;
}

/* Edit button styling */
.edit-button {
    font-size: 1.2em;
    text-decoration: none;
    display: inline-block;
    transition: transform 0.2s;
}

.edit-button:hover {
    transform: scale(1.2);
}

.field-edit_button {
    width: 30px !important;
    text-align: center;
}

/* Edit link styling */
.edit-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #2271b1;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  transition: background-color 0.2s;
}

.edit-link:hover {
  background-color: rgba(34, 113, 177, 0.1);
  text-decoration: none;
}

.edit-link .material-symbols-outlined {
  font-size: 16px;
}

/* Define width for action column */
th:first-child, td:first-child {
  width: 40px !important;
  max-width: 40px !important;
  min-width: 40px !important;
  padding: 4px !important;
  text-align: center;
}

/* Responsive styles */
@media (max-width: 768px) {
    .table-summary {
        flex-direction: column;
    }
    
    .summary-box {
        width: 100%;
    }
    
    th, td {
        padding: 8px 10px;
    }
    
    .unfold-table th:nth-child(5), 
    .unfold-table td:nth-child(5) {
        display: none;
    }
}