/* ==============================================
   modal.css — Stili unificati per tutte le finestre modali
   Locus360
   ============================================== */

/* ============================================
   OVERLAY (sfondo oscurato)
   ============================================ */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* z-index: gestito a runtime da locus-modal.js via Locus360.ZStack.
       Il fallback CSS qui era 9999 (numero magico): inutile, lo
       sovrascrivono i style.zIndex = slot.z. Tolto per coerenza. */
    justify-content: center;
    align-items: center;
}
.modal-overlay.active {
    display: flex;
}

/* Variante: modale allineata in alto, sotto il titolo della pagina madre.
   Usata es. in progetti.php (modali visualizza/modifica) per non coprire l'H1
   della finestra Tabulator sottostante. */
.modal-overlay.modal-top-aligned {
    align-items: flex-start;
    padding-top: 70px;
    box-sizing: border-box;
}

/* ============================================
   BOX CONTENITORE
   ============================================ */
.modal-box {
    background: white;
    border-radius: 16px;
    width: 90%;
    max-width: 640px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    border-left: 4px solid #066fd1;
    animation: modalFadeIn 0.2s ease;
}

/* ============================================
   OVERLAY ADMIN con header sticky
   Lo scroll va sul box INTERNO, non sull'overlay.
   Se overflow-y è sull'overlay (flex container),
   position:sticky sui nipoti non si ancora correttamente.
   ============================================ */
.amm-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9200;
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
    /* Nessun overflow-y qui */
}
.amm-modal-scroll-box {
    background: white;
    border-radius: 16px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, .35);
    margin: auto;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}
.modal-box-sm {
    max-width: 600px;
}

/* Auto-sizing della modale standard di progetto: cresce con il contenuto
   tra un minimo leggibile (320px) e un massimo del 90% del viewport,
   capped a 720px. Usata da LocusModal.confirm / LocusModal.modal /
   LocusModal.error. Il consumer puo' override-are passando opts.maxWidth
   alla chiamata JS. */
.modal-box-auto {
    width: auto;
    min-width: 320px;
    max-width: min(720px, 90vw);
}

/* Modale ridimensionabile (opt-in via opts.resizable=true su LocusModal.*).
   Sblocco max-* + position:relative per ospitare gli 8 handle JS-driven
   (montati da Locus360.installEdgeResize, vedi locus-window.js). */
.modal-box.is-resizable {
    position: relative;
    max-width: 98vw;
    max-height: 96vh;
    min-width: 360px;
    min-height: 220px;
}

/* ============================================
   STILE WINBOX per la modale standard di progetto.
   La classe .modal-box-winbox-style si combina con .modal-box per
   uniformare la modale al look delle finestre desktop di progetto
   (vedi .winbox.locus-light in locus-window.css):
    - bordo arrotondato 12px (vs 16px del modal legacy)
    - header bianco con titolo dark + striscia rainbow ::after
    - close button dark su sfondo light (non bianco-su-dark)
    - body con border-top sottile, no border-left blu legacy
   Applicata SOLO da LocusModal.confirm/modal: le altre pagine che
   usano .modal-box restano con il look legacy (background dark header).
   ============================================ */
.modal-box.modal-box-winbox-style {
    border-radius: 12px;
    border-left: none;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    /* Colonna flex: header/footer fissi, body che scrolla. overflow:hidden (per i
       bordi arrotondati) annullava lo scroll del .modal-box base; con questo schema
       il body scrolla da solo quando il contenuto supera max-height (80vh del box),
       senza numeri vh magici e a prescindere dall'altezza di header/footer. */
    display: flex;
    flex-direction: column;
}
.modal-box.modal-box-winbox-style .modal-header {
    background: #ffffff;
    color: #1d1d1f;
    padding: 12px 16px;
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid #e5e5ea;
    flex: 0 0 auto;
}
.modal-box.modal-box-winbox-style .modal-title {
    color: #1d1d1f;
    font-size: 15px;
    font-weight: 600;
}
.modal-box.modal-box-winbox-style .modal-close {
    background: transparent;
    color: #6e6e73;
    width: 28px;
    height: 28px;
    border-radius: 6px;
}
.modal-box.modal-box-winbox-style .modal-close:hover {
    background: rgba(0, 0, 0, 0.08);
    color: #1d1d1f;
}
.modal-box.modal-box-winbox-style .modal-body {
    background: #ffffff;
    color: #1d1d1f;
    padding: 18px 20px;
    /* prende lo spazio residuo e scrolla; min-height:0 è ciò che, in un flex
       column, permette all'item di rimpicciolirsi sotto il contenuto e attivare
       lo scroll invece di sfondare il box. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
.modal-box.modal-box-winbox-style .modal-footer {
    background: #fafafa;
    border-top: 1px solid #e5e5ea;
    padding: 10px 16px;
    flex: 0 0 auto;
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================
   HEADER
   ============================================ */
.modal-header {
    background: #182433;
    color: white;
    padding: 16px 20px;
    border-radius: 16px 16px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
}
.modal-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.modal-close:hover {
    background: rgba(255, 255, 255, 0.35);
}

/* ============================================
   BODY
   ============================================ */
.modal-body {
    padding: 25px;
}

/* ============================================
   FOOTER
   ============================================ */
.modal-footer {
    padding: 16px 20px;
    border-top: 1px solid #e6e7e9;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* ============================================
   PULSANTI — allineati allo standard di progetto .lt-btn (pulsante
   toolbar). Stesso look del pulsante "Annulla" dei footer
   createDockWindow* / createDockedModal2 / openDockedModal: bianco,
   bordo sottile, hover blu accent. Tutta la famiglia LocusModal.*
   (confirm/modal/error) e openModal eredita questo look.
   ============================================ */
.modal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #e5e5ea;
    border-radius: 6px;
    padding: 5px 12px;
    font-weight: 500;
    cursor: pointer;
    font-size: 12px;
    color: #1d1d1f;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.modal-btn:hover {
    background: #f4f4f6;
    border-color: #066fd1;
    color: #066fd1;
}

.modal-btn-primary             { background: #066fd1; border-color: #066fd1; color: #fff; }
.modal-btn-primary:hover       { background: #054ea0; border-color: #054ea0; color: #fff; }
.modal-btn-success             { background: #10b981; border-color: #10b981; color: #fff; }
.modal-btn-success:hover       { background: #0e9a6c; border-color: #0e9a6c; color: #fff; }
.modal-btn-danger              { background: #c0392b; border-color: #c0392b; color: #fff; }
.modal-btn-danger:hover        { background: #a93222; border-color: #a93222; color: #fff; }
/* secondary = alias del bottone neutro (default .modal-btn) per
   chiamate esistenti che esplicitano la classe */
.modal-btn-secondary           { background: #fff; border-color: #e5e5ea; color: #1d1d1f; }
.modal-btn-secondary:hover     { background: #f4f4f6; border-color: #066fd1; color: #066fd1; }

/* ============================================
   STATO CARICAMENTO
   ============================================ */
.modal-loading {
    text-align: center;
    padding: 30px;
    color: #626976;
}
.modal-loading-icon {
    font-size: 40px;
    display: block;
    margin-bottom: 10px;
}

/* ============================================
   TABELLA CF NEL MODALE
   ============================================ */
.cf-table-modal {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-top: 6px;
}
.cf-table-modal th {
    background: #f4f6fb;
    padding: 6px 8px;
    text-align: left;
    color: #626976;
    font-weight: 600;
    border-bottom: 1px solid #e6e7e9;
}
.cf-table-modal td {
    padding: 6px 8px;
    border-bottom: 1px solid #f0f1f3;
    color: #333;
}

/* ============================================
   CONFIRM DIALOG
   ============================================ */
.modal-confirm-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.55);
    z-index: 10000;
    justify-content: center;
    align-items: center;
}
.modal-confirm-overlay.active {
    display: flex;
}
.modal-confirm-box {
    background: white;
    border-radius: 14px;
    width: 90%;
    max-width: 420px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
    border-top: 4px solid #066fd1;
    animation: modalFadeIn 0.18s ease;
    overflow: hidden;
}
.modal-confirm-body {
    padding: 24px 24px 16px 24px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.modal-confirm-icon {
    font-size: 28px;
    flex-shrink: 0;
}
.modal-confirm-text {
    color: #1a1d23;
    font-size: 15px;
    line-height: 1.5;
    padding-top: 4px;
}
.modal-confirm-footer {
    padding: 12px 20px;
    border-top: 1px solid #e6e7e9;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: #f4f6fb;
}

/* ============================================
   TOAST NOTIFICATIONS (sostituisce alert())
   ============================================ */
.modal-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    /* z-index: gestito a runtime da locus-modal.js (LocusToast) via
       Locus360.ZStack.acquireTop + bringToFront ad ogni nuovo toast. */
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
/* Toast standard di progetto: stesso linguaggio visivo delle finestre
   WinBox (border-radius 12px, ombra sottile, striscia rainbow gradient
   in alto come .wb-header::after). La variante per type modula solo
   l'opacita' e una piccola sottolineatura colorata in alto, NON il
   border-left blu legacy. */
.modal-toast {
    background: #ffffff;
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #1d1d1f;
    max-width: 380px;
    pointer-events: all;
    animation: toastIn 0.25s ease;
    overflow: hidden;
    position: relative;
}
.modal-toast::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: #1d6ed8;
    opacity: 0.85;
    pointer-events: none;
}
/* Varianti type: la striscia ::before in tinta unita coerente col tipo
   (default = blu info; success/error/warning sotto). Nessun gradiente. */
.modal-toast.toast-success::before { background: #10b981; opacity: 1; }
.modal-toast.toast-error::before   { background: #d63939; opacity: 1; }
.modal-toast.toast-warning::before { background: #f5b800; opacity: 1; }

.modal-toast.toast-hide {
    animation: toastOut 0.25s ease forwards;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes toastOut {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(20px); }
}

/* ============================================
   MAPPA PROGETTO — Modal scelta e lista progetti
   ============================================ */

/* Override max-width per i modal progetto */
.lp-modal-box {
    max-width: 480px;
}

/* Modal lista progetti (più larga) */
.lp-modal-lista {
    max-width: 680px;
    width: 95vw;
}

/* Riga selezione tenant */
.lp-tenant-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.lp-tenant-label {
    font-size: 12px;
    font-weight: 600;
    color: #626976;
    white-space: nowrap;
}

.lp-tenant-select {
    flex: 1;
    padding: 7px 10px;
    border: 1px solid #e0dbd0;
    border-radius: 8px;
    font-size: 13px;
    background: #fff;
}

/* Filtro testo */
.lp-filter-row {
    margin-bottom: 10px;
}

.lp-filter-input {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    border: 1px solid #e0dbd0;
    border-radius: 8px;
    font-size: 13px;
}

/* Contenitore tabella scrollabile */
.lp-table-wrap {
    max-height: 340px;
    overflow-y: auto;
    border: 1px solid #e0dbd0;
    border-radius: 8px;
    margin-bottom: 4px;
}

/* Tabella progetti */
.lp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.lp-table thead th {
    background: #f7f5f0;
    padding: 8px 10px;
    font-weight: 600;
    color: #4a4640;
    border-bottom: 1px solid #e0dbd0;
    position: sticky;
    top: 0;
    z-index: 1;
}

.lp-tbl-row td {
    padding: 9px 10px;
    border-bottom: 1px solid #f0ece6;
    vertical-align: top;
    cursor: pointer;
}

.lp-tbl-row:last-child td {
    border-bottom: none;
}

.lp-tbl-row:hover td {
    background: #f4f6fb;
}

.lp-tbl-row-sel td {
    background: #e8f3fd !important;
}

.lp-tbl-row-sel td:first-child {
    border-left: 3px solid #066fd1;
    padding-left: 7px;
}

.lp-td-nome {
    font-weight: 600;
    color: #1c1a16;
}

.lp-td-desc {
    font-size: 11px;
    color: #626976;
    margin-top: 2px;
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 300px;
}

.lp-td-cat {
    color: #4a4640;
    white-space: nowrap;
}

.lp-td-num {
    text-align: center;
    color: #626976;
    font-size: 12px;
}

/* Body modale scelta */
.lp-scelta-body {
    padding: 24px 20px 20px 20px;
}

.lp-subtitle {
    color: #626976;
    font-size: 14px;
    margin: 0 0 20px 0;
}

.lp-choice-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Pulsante grande scelta */
.lp-choice-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 16px 18px;
    background: #f4f6fb;
    border: 2px solid #e6e7e9;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
    font-family: inherit;
}

.lp-choice-btn:hover:not(:disabled) {
    border-color: #066fd1;
    background: #e8f3fd;
}

.lp-choice-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.lp-choice-btn-alt {
    border-color: #c8e0d0;
    background: #f4fbf6;
}

.lp-choice-btn-alt:hover:not(:disabled) {
    border-color: #2a6e3b;
    background: #e8f5ee;
}

.lp-choice-icon {
    font-size: 26px;
    flex-shrink: 0;
    line-height: 1;
}

.lp-choice-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.lp-choice-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1d23;
}

.lp-choice-hint {
    font-size: 12px;
    color: #9ba3af;
}

/* Lista progetti (scrollabile) */
.lp-lista {
    max-height: 340px;
    overflow-y: auto;
    padding: 8px 0;
}

/* Singola riga progetto (label) */
.lp-progetto-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    cursor: pointer;
    border-bottom: 1px solid #f0f1f3;
    transition: background 0.1s;
}

.lp-progetto-item:last-child {
    border-bottom: none;
}

.lp-progetto-item:hover {
    background: #f4f6fb;
}

.lp-progetto-item-sel {
    background: #e8f3fd !important;
    border-left: 3px solid #066fd1;
    padding-left: 17px;
}

.lp-radio {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: #066fd1;
    cursor: pointer;
}

.lp-progetto-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.lp-progetto-nome {
    font-size: 14px;
    font-weight: 600;
    color: #1a1d23;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lp-progetto-desc {
    font-size: 12px;
    color: #626976;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 340px;
}

.lp-progetto-meta {
    font-size: 11px;
    color: #9ba3af;
    margin-top: 1px;
}

/* ── Autocomplete dropdown (initComuneAC / initPersonaAC) ── */
.ac-dropdown {
    position: fixed;
    z-index: 99999;
    background: white;
    border: 1px solid #d0cbc0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.14);
    list-style: none;
    padding: 4px 0;
    margin: 0;
    max-height: 220px;
    overflow-y: auto;
    font-size: 13px;
    font-family: inherit;
}
.ac-dropdown li {
    padding: 7px 12px;
    cursor: pointer;
    color: #182433;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ac-dropdown li:hover,
.ac-dropdown li.ac-hi {
    background: #e8f3fd;
    color: #066fd1;
}
.ac-dropdown li.ac-nores {
    color: #999;
    font-style: italic;
    cursor: default;
    border-bottom: 1px solid #f0eeea;
}
.ac-dropdown li.ac-nores:hover { background: white; color: #999; }
.ac-dropdown li.ac-create {
    color: #066fd1;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ac-dropdown li.ac-create:hover,
.ac-dropdown li.ac-create.ac-hi {
    background: #e8f3fd;
}
/* Wrapper input + pulsante "+" per i campi persona */
.persona-input-row {
    display: flex;
    gap: 4px;
    align-items: stretch;
}
.persona-input-row input { flex: 1; min-width: 0; }
.btn-add-persona {
    flex: 0 0 auto;
    width: 30px;
    background: #066fd1;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    padding: 0;
}
.btn-add-persona:hover { background: #0558a8; }

/* ============================================
   TABELLA RELAZIONI (modale conferma eliminazione)
   ============================================ */
/* Il corpo della confirm cresce fino a max-height e poi scrolla */
#mcBody {
    max-height: 70vh;
    overflow-y: auto;
}
.rel-intro {
    margin: 0 0 10px 0;
    font-size: 13px;
}
.rel-warning {
    margin: 10px 0 0 0;
    color: #b83030;
    font-size: 13px;
    font-weight: 600;
}
.rel-groups {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rel-group {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
}
.rel-group-title {
    background: #f4f5f7;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #444;
    border-bottom: 1px solid #e0e0e0;
}
.rel-table-wrap {
    max-height: 180px;
    overflow-y: auto;
}
.rel-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.rel-table thead th {
    background: #fafafa;
    padding: 4px 8px;
    text-align: left;
    font-weight: 600;
    color: #555;
    border-bottom: 1px solid #e8e8e8;
    white-space: nowrap;
    position: sticky;
    top: 0;
}
.rel-table tbody tr:nth-child(even) { background: #fafafa; }
.rel-table tbody tr:hover           { background: #f0f4ff; }
.rel-table td {
    padding: 4px 8px;
    vertical-align: top;
    border-bottom: 1px solid #f0f0f0;
}
.rel-table td.rel-cod {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #666;
    white-space: nowrap;
}
.rel-table td.rel-nome  { font-weight: 500; }
.rel-table td.rel-prop,
.rel-table td.rel-ten   { color: #555; white-space: nowrap; }
.rel-troncato {
    margin: 0;
    padding: 4px 8px;
    font-size: 11px;
    color: #888;
    font-style: italic;
    background: #fafafa;
    border-top: 1px solid #eee;
}

/* ============================================
   COLOR PICKER MODALE
   ============================================ */
.cpk-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.45);
    z-index: 10100;
    justify-content: center;
    align-items: center;
}
.cpk-overlay.active { display: flex; }
.cpk-box {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    border-left: 4px solid #066fd1;
    width: 300px;
    max-width: 92vw;
    animation: modalFadeIn 0.2s ease;
    overflow: hidden;
}
.cpk-header {
    background: #182433;
    color: white;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cpk-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: white;
}
.cpk-close {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.cpk-close:hover { background: rgba(255,255,255,0.35); }
.cpk-body {
    padding: 16px;
}
.cpk-presets {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
    margin-bottom: 12px;
}
.cpk-preset {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 5px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color .12s, transform .12s;
}
.cpk-preset:hover {
    border-color: #066fd1;
    transform: scale(1.15);
}
.cpk-gradient {
    position: relative;
    width: 100%;
    height: 180px;
    border-radius: 8px;
    cursor: crosshair;
    touch-action: none;
}
.cpk-gradient-cursor {
    position: absolute;
    width: 14px; height: 14px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
    pointer-events: none;
    transform: translate(-50%, -50%);
}
.cpk-hue {
    width: 100%;
    height: 16px;
    border-radius: 8px;
    margin-top: 12px;
    cursor: pointer;
    background: linear-gradient(to right,
        #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
    position: relative;
    touch-action: none;
}
.cpk-hue-cursor {
    position: absolute;
    top: -2px;
    width: 8px; height: 20px;
    background: #fff;
    border: 1px solid #888;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    pointer-events: none;
    transform: translateX(-50%);
}
.cpk-bottom {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}
.cpk-preview {
    width: 38px; height: 38px;
    border-radius: 8px;
    border: 2px solid #e0dbd0;
    flex-shrink: 0;
}
.cpk-hex {
    flex: 1;
    padding: 8px 10px;
    border: 2px solid #e0dbd0;
    border-radius: 8px;
    font-family: monospace;
    font-size: 15px;
    text-align: center;
    text-transform: uppercase;
}
.cpk-hex:focus { outline: none; border-color: #066fd1; }
.cpk-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}
.cpk-btn {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.cpk-btn-ok {
    background: #066fd1;
    color: #fff;
}
.cpk-btn-ok:hover { background: #0557a8; }
.cpk-btn-cancel {
    background: #f0ede8;
    color: #626976;
}
.cpk-btn-cancel:hover { background: #e0dbd0; }