/**
 * Options WordPress — Styles du viewer d'options WordPress
 *
 * Affichage des valeurs d'options, toggle court/complet
 * et mise en forme du tableau de visualisation des options WP.
 *
 * @file        cc-options-wp.css
 * @package     CaisseConnect
 * @subpackage  CSS\Pages
 * @since       0.9
 * @version     0.9
 * @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
 */

/* ========================================
   WRAPPER POUR LES VALEURS D'OPTIONS
   ======================================== */

.cc-option-value-wrapper {
    position: relative;
}

/* Valeur courte (tronquee) */
.cc-option-value-short {
    display: inline;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Valeur complete (masquee par defaut) */
.cc-option-value-full {
    display: none;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Etat expanse : inverse l'affichage */
.cc-option-value-wrapper.expanded .cc-option-value-short {
    display: none;
}

.cc-option-value-wrapper.expanded .cc-option-value-full {
    display: block;
}

/* ========================================
   BOUTON TOGGLE EXPAND/COLLAPSE
   ======================================== */

.cc-expand-toggle {
    display: inline-block;
    margin-left: var(--cc-spacing-xs, 5px);
    padding: 0 6px;
    background: var(--cc-secondary, #0073aa);
    color: var(--cc-white, #fff);
    border-radius: var(--cc-border-radius-sm, 3px);
    cursor: pointer;
    font-family: var(--cc-font-mono, monospace);
    font-weight: bold;
    font-size: var(--cc-font-size-sm, 12px);
    line-height: 18px;
    user-select: none;
}

.cc-expand-toggle:hover {
    background: var(--cc-secondary-dark, #005a87);
}

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

.cc-option-input {
    width: 100%;
    max-width: 400px;
}

.cc-option-textarea {
    width: 100%;
    max-width: 400px;
    min-height: 80px;
    font-family: var(--cc-font-mono, monospace);
    font-size: var(--cc-font-size-sm, 12px);
}

/* ========================================
   COLONNE D'ACTIONS
   ======================================== */

.cc-actions-column {
    width: 120px;
    text-align: center;
}