/* =========================================================
   SEGMENTED CONTROL — chip-style radio group.

   Markup:
     <div class="dmu-seg" style="--dmu-seg-cols: 3;">
       <label class="dmu-seg-item">
         <input type="radio" name="..." value="..." checked>
         <span>Default</span>
       </label>
       <label class="dmu-seg-item is-warning">
         <input type="radio" name="..." value="...">
         <span>Warning-tinted when checked</span>
       </label>
       <label class="dmu-seg-item is-danger">
         <input type="radio" name="..." value="...">
         <span>Danger-tinted when checked</span>
       </label>
     </div>

   Color modifiers on .dmu-seg-item set the checked-state tint:
     (none)         -> primary
     .is-secondary  -> secondary
     .is-tertiary   -> tertiary
     .is-quaternary -> quaternary
     .is-info       -> info
     .is-success    -> success
     .is-warning    -> warning
     .is-danger     -> danger
     .is-dark       -> dark (neutral gray)

   Sizing is column-driven via --dmu-seg-cols (default 4).
   ========================================================= */

.dmu-seg {
    display: grid;
    grid-template-columns: repeat(var(--dmu-seg-cols, 4), 1fr);
    gap: 6px;
}

.dmu-seg-item {
    position: relative;
    margin: 0;
}

.dmu-seg-item input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.dmu-seg-item span {
    display: block;
    padding: 10px 8px;
    text-align: center;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    color: #4e4e4e;
    cursor: pointer;
    background: #fff;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
}

.dmu-seg-item:hover span {
    border-color: #d1d5db;
}

/* Default (primary) checked tint */
.dmu-seg-item input:checked + span {
    border-color: var(--primary, #9062AF);
    background: rgba(var(--primary-rgb, 144, 98, 175), 0.10);
    color: var(--primary, #9062AF);
}

/* Color modifier checked tints */
.dmu-seg-item.is-secondary input:checked + span {
    border-color: var(--secondary);
    background: rgba(var(--secondary-rgb), 0.12);
    color: var(--secondary);
}

.dmu-seg-item.is-tertiary input:checked + span {
    border-color: var(--tertiary);
    background: rgba(var(--tertiary-rgb), 0.12);
    color: var(--tertiary);
}

.dmu-seg-item.is-quaternary input:checked + span {
    border-color: var(--quaternary);
    background: rgba(var(--quaternary-rgb), 0.12);
    color: var(--quaternary);
}

.dmu-seg-item.is-info input:checked + span {
    border-color: var(--info);
    background: rgba(var(--info-rgb), 0.12);
    color: var(--info);
}

.dmu-seg-item.is-success input:checked + span {
    border-color: var(--success);
    background: rgba(var(--success-rgb), 0.12);
    color: var(--success);
}

.dmu-seg-item.is-warning input:checked + span {
    border-color: var(--warning, #ebb71a);
    background: rgba(var(--warning-rgb, 235, 183, 26), 0.12);
    color: var(--warning, #ebb71a);
}

.dmu-seg-item.is-danger input:checked + span {
    border-color: var(--danger, #b62836);
    background: rgba(var(--danger-rgb, 182, 40, 54), 0.10);
    color: var(--danger, #b62836);
}

.dmu-seg-item.is-dark input:checked + span {
    border-color: var(--dark, #4e4e4e);
    background: rgba(var(--dark-rgb, 78, 78, 78), 0.10);
    color: var(--dark, #4e4e4e);
}

/* Disabled */
.dmu-seg-item input:disabled + span,
.dmu-seg-item.is-disabled span {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ─── Dark mode ─────────── */
html[data-color^="dark-"] .dmu-seg-item span {
    background: var(--background-theme);
    border-color: var(--separator);
    color: var(--body);
}

html[data-color^="dark-"] .dmu-seg-item:hover span {
    border-color: var(--separator-darker);
}

html[data-color^="dark-"] .dmu-seg-item input:checked + span {
    background: rgba(var(--primary-rgb), 0.18);
    border-color: rgba(var(--primary-rgb), 0.6);
    color: var(--primary);
}

html[data-color^="dark-"] .dmu-seg-item.is-secondary input:checked + span {
    background: rgba(var(--secondary-rgb), 0.20);
    border-color: rgba(var(--secondary-rgb), 0.6);
    color: var(--secondary);
}

html[data-color^="dark-"] .dmu-seg-item.is-tertiary input:checked + span {
    background: rgba(var(--tertiary-rgb), 0.20);
    border-color: rgba(var(--tertiary-rgb), 0.6);
    color: var(--tertiary);
}

html[data-color^="dark-"] .dmu-seg-item.is-quaternary input:checked + span {
    background: rgba(var(--quaternary-rgb), 0.20);
    border-color: rgba(var(--quaternary-rgb), 0.6);
    color: var(--quaternary);
}

html[data-color^="dark-"] .dmu-seg-item.is-info input:checked + span {
    background: rgba(var(--info-rgb), 0.20);
    border-color: rgba(var(--info-rgb), 0.6);
    color: var(--info);
}

html[data-color^="dark-"] .dmu-seg-item.is-success input:checked + span {
    background: rgba(var(--success-rgb), 0.20);
    border-color: rgba(var(--success-rgb), 0.6);
    color: var(--success);
}

html[data-color^="dark-"] .dmu-seg-item.is-warning input:checked + span {
    background: rgba(var(--warning-rgb), 0.20);
    border-color: rgba(var(--warning-rgb), 0.6);
    color: var(--warning);
}

html[data-color^="dark-"] .dmu-seg-item.is-danger input:checked + span {
    background: rgba(var(--danger-rgb), 0.20);
    border-color: rgba(var(--danger-rgb), 0.6);
    color: var(--danger);
}

html[data-color^="dark-"] .dmu-seg-item.is-dark input:checked + span {
    background: rgba(var(--dark-rgb), 0.30);
    border-color: rgba(var(--dark-rgb), 0.7);
    color: var(--body);
}