/**
 * Formulaires — Styles des formulaires et champs de saisie
 *
 * Labels, inputs, selects, textareas et mises en page
 * de formulaires utilisés dans l'interface d'administration.
 *
 * @file        cc-forms.css
 * @package     CaisseConnect
 * @subpackage  CSS\Components
 * @since       0.9
 * @version     1.2.1
 * @author      Microlibre <contact@microlibre.net>
 * @copyright   2026 Microlibre
 * @license     GPL-2.0+ https://www.gnu.org/licenses/gpl-2.0.html
 * @link        https://microlibre.net/caisse-connect
 */

/* ========================================
   LABELS
   ======================================== */

/* Label en bloc avec espacement */
.cc-label-block {
    display: block;
    margin-bottom: 10px;
}

/* Label en ligne (inline-block) */
.cc-label-inline {
    display: block;
}

/* Label avec espacement horizontal (pour radios/checkboxes groupes) */
.cc-label-spaced {
    margin-right: 20px;
}

/* ========================================
   INPUTS - LARGEURS PREDEFINIES
   ======================================== */

/* Extra small - pour ports, petits nombres */
.cc-input-xs {
    width: 80px;
}

/* Small - pour ports, codes courts */
.cc-input-sm {
    width: 100px;
}

/* Medium - pour selects standards */
.cc-input-md {
    width: 200px;
}

/* Large - pour selects larges */
.cc-input-lg {
    width: 250px;
}

/* Extra large - pour selects tres larges */
.cc-input-xl {
    width: 300px;
}

/* Full width */
.cc-input-full {
    width: 100%;
}

/* Min-width variants */
.cc-input-min-lg {
    min-width: 250px;
}

.cc-input-min-md {
    min-width: 200px;
}

/* Max-width variants */
.cc-input-max-xs {
    max-width: 80px;
}

.cc-input-max-sm {
    max-width: 120px;
}

/* ========================================
   SELECTS SPECIFIQUES
   ======================================== */

/* Select pour completude */
.cc-select-completude {
    width: 200px;
}

/* Select pour expedition */
.cc-select-expedition {
    min-width: 200px;
}

/* Select pour slug caisse */
.cc-select-caisse {
    width: 300px;
}

/* ========================================
   GROUPES DE FORMULAIRE
   ======================================== */

/* Groupe inline (label + input + bouton) */
.cc-form-group-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Formulaire inline (sans margin) */
.cc-form-inline {
    display: inline;
    margin: 0;
}

/* ========================================
   CHAMPS DE FORMULAIRE KWISATZ
   ======================================== */

/* Label protocole avec espacement */
.cc-kwisatz-label-protocol {
    margin-left: 20px;
}

/* ========================================
   BOUTONS SPECIAUX
   ======================================== */

/* Bouton danger (suppression, etc.) */
/* Erreur de validation de champ */
.cc-field-error {
    color: var(--cc-error, #dc3545);
    display: block;
    margin-top: 5px;
    font-size: 12px;
}

.cc-input-error {
    border-color: var(--cc-error, #dc3545) !important;
}

/* Bouton danger (suppression, etc.) */
.cc-btn-danger {
    background-color: var(--cc-error, #dc3545) !important;
    border-color: var(--cc-error, #dc3545) !important;
    color: #fff !important;
}

.cc-btn-danger:hover,
.cc-btn-danger:focus {
    background-color: var(--cc-error-dark, #c82333) !important;
    border-color: var(--cc-error-dark, #c82333) !important;
    color: #fff !important;
}


/* ========================================
   TOGGLE SWITCH
   ======================================== */

.cc-toggle-switch {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.cc-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cc-toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #ccc;
    border-radius: 20px;
    transition: 0.3s;
}

.cc-toggle-slider::before {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: #fff;
    border-radius: 50%;
    transition: 0.3s;
}

.cc-toggle-switch input:checked + .cc-toggle-slider {
    background-color: #787c82;
}

.cc-toggle-switch--danger input:checked + .cc-toggle-slider {
    background-color: var(--cc-error, #dc3545);
}

.cc-toggle-switch--success input:checked + .cc-toggle-slider {
    background-color: var(--cc-success, #28a745);
}

.cc-toggle-switch input:checked + .cc-toggle-slider::before {
    transform: translateX(18px);
}

.cc-toggle-switch input:disabled + .cc-toggle-slider {
    opacity: 0.5;
    cursor: not-allowed;
}


/* ========================================
   CONTROLES DU SITE (toggles)
   ======================================== */

.cc-controles-site-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 12px;
}

.cc-controle-toggle {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.cc-controle-label p.description {
    margin: 4px 0 0;
}

.cc-warning-inline {
    color: var(--cc-warning-dark, #ff8c00);
    font-size: 12px;
    margin: 4px 0 0;
}

/* Feedback transitoire « ✓ enregistré » des selects à sauvegarde immédiate */
.cc-reglage-feedback {
    margin-left: 10px;
    color: var(--cc-success, #28a745);
    font-size: 13px;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.cc-reglage-feedback.visible {
    opacity: 1;
}