/* منتقي الألوان العام — راجع public/js/ops-color-picker.js */

.opc { display: block; position: relative; }
.opc-source { display: none !important; }

.opc-trigger {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px;
    padding: 6px 12px; background: #fff; color: #1f2937; font: inherit; font-size: 14px; line-height: 1.4;
    border: 1px solid #d1d5db; border-radius: 8px; cursor: pointer; text-align: start;
    transition-property: border-color, box-shadow, background-color; transition-duration: .14s;
}
.opc-trigger:hover { border-color: #94a3b8; }
.opc-trigger:focus-visible, .opc-trigger[aria-expanded="true"] {
    outline: none; border-color: var(--brand-600, #0f766e); box-shadow: 0 0 0 3px rgba(15, 118, 110, .16);
}
.opc-disabled .opc-trigger { opacity: .5; cursor: not-allowed; background: #f8fafc; }

.opc-sw {
    flex: 0 0 auto; width: 24px; height: 24px; border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .2);
}
.opc-sw-sm { width: 18px; height: 18px; border-radius: 5px; }
.opc-sw-none {
    background: repeating-linear-gradient(45deg, #e2e8f0 0 4px, #fff 4px 8px) !important;
}
.opc-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.opc-hex { flex: 0 0 auto; font-size: 11.5px; color: #64748b; font-variant-numeric: tabular-nums; }
.opc-caret {
    flex: 0 0 auto; width: 8px; height: 8px; margin-inline-start: 2px;
    border-right: 2px solid #64748b; border-bottom: 2px solid #64748b; transform: rotate(45deg) translateY(-2px);
}

.opc-pop {
    position: fixed; z-index: 100000; display: flex; flex-direction: column; box-sizing: border-box;
    background: #fff; color: #1f2937; direction: rtl; font-size: 13px; line-height: 1.5;
    border: 1px solid #e2e8f0; border-radius: 14px; overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .12), 0 24px 56px rgba(15, 23, 42, .1);
}
.opc-search {
    margin: 10px 10px 4px; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 9px; font: inherit; font-size: 13px;
    background: #f8fafc; color: #1f2937; outline: none;
}
.opc-search:focus { border-color: var(--brand-600, #0f766e); background: #fff; box-shadow: 0 0 0 3px rgba(15, 118, 110, .14); }

.opc-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 12px 8px; overscroll-behavior: contain; max-height: 52vh; }
.opc-group { margin-top: 10px; }
.opc-gt { font-size: 11.5px; font-weight: 700; color: #475569; margin-bottom: 6px; }
.opc-row { display: flex; flex-wrap: wrap; gap: 6px; }

.opc-chip {
    position: relative; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; cursor: pointer;
    font: inherit; font-size: 13px; font-weight: 800; line-height: 28px; text-align: center;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .18);
    transition-property: transform; transition-duration: .12s;
}
.opc-chip:hover, .opc-chip:focus-visible { transform: scale(1.14); z-index: 1; outline: none; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .3), 0 0 0 2px #fff, 0 0 0 4px #0f172a; }
.opc-chip:active { transform: scale(.96); }
.opc-on { box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .3), 0 0 0 2px #fff, 0 0 0 4px #0f172a; }
@media (pointer: coarse) { .opc-chip { width: 36px; height: 36px; line-height: 36px; } }

.opc-empty { padding: 18px 4px; color: #64748b; text-align: center; }

.opc-status {
    display: flex; align-items: center; gap: 8px; padding: 9px 14px; min-height: 40px; box-sizing: border-box;
    background: #f8fafc; border-top: 1px solid #e2e8f0; font-weight: 700; color: #0f172a;
}
.opc-status-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.opc-adv { border-top: 1px solid #e2e8f0; padding: 8px 14px; }
.opc-adv summary { cursor: pointer; font-size: 12px; color: #475569; font-weight: 600; padding: 2px 0; }
.opc-adv-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.opc-native { flex: 0 0 auto; width: 40px; height: 36px; padding: 2px; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; cursor: pointer; }
.opc-hexin { flex: 1 1 auto; min-width: 0; padding: 7px 10px; border: 1px solid #d1d5db; border-radius: 8px; font: inherit; font-size: 13px; text-align: left; color: #1f2937; }
.opc-apply { flex: 0 0 auto; padding: 7px 14px; border: 0; border-radius: 8px; background: #0f172a; color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.opc-apply:hover { background: #1e293b; }

@media (prefers-reduced-motion: reduce) {
    .opc-trigger, .opc-chip { transition: none; }
}