/* =====================================================
   MODULE TARIFS - BLOC GAUCHE
   ===================================================== */

.tarifs-container{
    width:100%;
}

/* HEADER ORANGE */
.tarifs-header {
    background:#de7d32;
    color:white;
    padding:14px 18px;
    font-weight:bold;
    text-transform:uppercase;
    border-radius:6px 6px 0 0;
}

/* ZONE INTERNE */
.tarifs-config {
    background:#f4f4f4;
    padding:20px;
    border-radius:0 0 6px 6px;
    border:1px solid #e5e5e5;
    border-top:none;
}

/* =====================================================
   LIGNE SELECT
   ===================================================== */

.tarifs-row {
    display:flex;
    gap:30px;
    align-items:flex-end;
    flex-wrap:wrap;
    margin-bottom:20px;
}

.field label {
    display:block;
    font-size:12px;
    font-weight:bold;
    color:#2b6e7f;
    margin-bottom:6px;
    text-transform:uppercase;
}

.field select {
    padding:8px 10px;
    min-width:220px;
    border-radius:4px;
    border:1px solid #ccc;
    background:white;
}

.field-mini label{
    font-size:10px;       /* plus petit */
    font-weight:600;      /* un peu plus léger */
    text-transform:none;  /* enlève les majuscules si présentes */
    letter-spacing:0;     /* enlève l'espacement */
}

/* CHECKBOX */
.checkbox-field {
    display:flex;
    gap:20px;
    font-weight:bold;
    color:#de7d32;
    padding-bottom:5px;
}

/* =====================================================
   VARIATIONS
   ===================================================== */

.variation-header {
    font-size:12px;
    color:#6c7a89;
    margin:15px 0 8px;
    text-transform:uppercase;
}

.variation-row {
    display:flex;
    gap:15px;
    margin-bottom:10px;
}

.variation-row input {
    padding:8px;
    border:1px solid #ccc;
    border-radius:4px;
    width:180px;
    background:white;
}

.btn-delete {
    background:#666;
    color:white;
    border:none;
    padding:8px 12px;
    border-radius:4px;
    cursor:pointer;
}

.btn-add {
    background:#5cb85c;
    color:white;
    border:none;
    padding:10px 16px;
    border-radius:4px;
    margin:12px 0 20px;
    cursor:pointer;
    font-weight:bold;
}

/* =====================================================
   TABLEAU RECAP
   ===================================================== */

.recap-title {
    color:#2b6e7f;
    font-weight:bold;
    margin:20px 0 10px;
    text-transform:uppercase;
}

.tarifs-table {
    width:100%;
    border-collapse:collapse;
    background:white;
    border-radius:4px;
    overflow:hidden;
}

.tarifs-table thead {
    background:#4f8c95;
    color:white;
}

.tarifs-table th,
.tarifs-table td {
    padding:11px;
    text-align:center;
    border-bottom:1px solid #eee;
    font-size:14px;
}

.empty td {
    color:#999;
    padding:20px;
}

/* =====================================================
   BOUTONS ACTIONS
   ===================================================== */

.tarifs-actions {
    display:flex;
    gap:15px;
    margin-top:20px;
}

.btn-create {
    background:#4f8c95;
    color:white;
    border:none;
    padding:12px 18px;
    border-radius:4px;
    cursor:pointer;
}

.btn-save {
    background:#de7d32;
    color:white;
    border:none;
    padding:12px 18px;
    border-radius:4px;
    flex:1;
    cursor:pointer;
    font-weight:bold;
}

.btn-cancel {
    background:#666;
    color:white;
    border:none;
    padding:12px 18px;
    border-radius:4px;
    cursor:pointer;
}

/* =====================================================
   COLONNE DROITE (BLOCS)
   ===================================================== */

.info-card {
    background:white;
    border-radius:6px;
    overflow:hidden;
    border:1px solid #ddd;
    margin-bottom:20px;
}

.info-header {
    background:#4f8c95;
    color:white;
    padding:11px;
    font-weight:bold;
    text-align:center;
    text-transform:uppercase;
}

.info-header.dark { background:#555; }

.categories-list {
    padding:12px 14px;
    display:flex;
    flex-direction:column;
    gap:10px;
    font-size:14px;
}

.categories-list label{
    display:flex;
    align-items:center;
    gap:8px;
    border-bottom:1px solid #eee;
    padding:8px 0;
}

.badge{
    margin-left:auto;
    font-size:14px;
}
.badge.red{ color:#d9534f; }

.status{
    width:110px;
    font-size:12px;
    color:#333;
}

/* LÉGENDE */
.legend {
    padding:12px 14px;
    font-size:14px;
}

.dot {
    display:inline-block;
    width:10px;
    height:10px;
    border-radius:50%;
    margin-right:8px;
}

.dot.red { background:#d9534f; }
.dot.orange { background:#f0ad4e; }
.dot.green { background:#5cb85c; }

/* Correction largeur champs tarifs */
.variation-row input[type="number"]{
    width:85px !important;
    max-width:85px !important;
    text-align:center;
}

.var_special_nom{
    width:140px !important;
    max-width:140px !important;
}

.cat-block{
    border-bottom:1px solid #eee;
    padding:10px 0;
}

.cat-title{
    font-weight:bold;
    color:#2b6e7f;
    margin-bottom:6px;
}

.type-line{
    display:flex;
    align-items:center;
    gap:8px;
    margin:4px 0;
}

.type-name{
    flex:1;
    font-size:13px;
}

/* voyants */
.status-dot{
    width:14px;
    height:14px;
    border-radius:50%;
    display:inline-block;
}

.status-dot.red{ background:#e74c3c; }
.status-dot.orange{ background:#f39c12; }
.status-dot.green{ background:#2ecc71; }

/* bouton sync */
.btn-sync-woo{
    margin-top:10px;
    width:100%;
    padding:8px;
    background:#2b6e7f;
    color:#fff;
    border:none;
    border-radius:4px;
    cursor:pointer;
}
.cat-title{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-weight:bold;
    color:#2b6e7f;
    padding:6px 0;
}

.status-dot{
    width:14px;
    height:14px;
    border-radius:50%;
    display:inline-block;
}

.status-dot.red{ background:#e74c3c; }
.status-dot.yellow{ background:#f1c40f; }
.status-dot.green{ background:#2ecc71; }