/* =========================================================================
   Medical Switch Table UI — Variation Selector
   Enterprise variation selector for WooCommerce + Woodmart.

   v3.4 — bulletproof brand colours
   - Brand colours are HARDCODED (no dependency on theme --wd-* variables,
     which may be undefined or set to other values on a given install).
   - No color-mix(): tints are pre-computed solid hexes (works everywhere).
   - Colour-critical rules are scoped under .mstui-wrapper AND use !important
     so the Woodmart theme cannot override them.

   Brand:  Primary/Accent #1246AB · Text #666666 · Muted #69727D
           Background #FFFFFF · Font Mulish · Radius 2px · Spacing base 4px
   ========================================================================= */

.mstui-wrapper{
    /* ---- Brand tokens (hardcoded for reliability) ---- */
    --mstui-accent:    #1246AB;
    --mstui-surface:   #ffffff;
    --mstui-text:      #666666;
    --mstui-title:     #2b2f36;
    --mstui-muted:     #69727d;
    --mstui-border:    #e4e6ea;
    --mstui-strip:     #f6f7f9;   /* column-head strip */
    --mstui-hover:     #f4f5f7;   /* row hover */
    --mstui-active-bg: #eef2fb;   /* selected row tint (brand blue @ ~6%) */
    --mstui-accent-dk: #0e3a8c;   /* darker brand blue — filled button hover */
    --mstui-radius:    2px;
    --mstui-sku-col:   120px;

    box-sizing:border-box;
    margin:24px 0 !important;
    background:var(--mstui-surface) !important;
    border:1px solid var(--mstui-border) !important;
    border-radius:var(--mstui-radius) !important;
    overflow:hidden;
    color:var(--mstui-text) !important;
    font-family:"Mulish", var(--wd-text-font, -apple-system), BlinkMacSystemFont,
                "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    box-shadow:0 1px 2px rgba(18,70,171,.05), 0 1px 3px rgba(16,24,40,.03);
    -webkit-font-smoothing:antialiased;
}

.mstui-wrapper *{ box-sizing:border-box; }

/* ---------------------------------------------------------------- Header -- */
.mstui-wrapper .mstui-header{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    padding:13px 16px;
    background:var(--mstui-surface) !important;
    border-bottom:1px solid var(--mstui-border) !important;
}

.mstui-wrapper .mstui-heading{
    font-size:.9375rem !important;   /* 15px — compact, professional */
    font-weight:700 !important;
    line-height:1.3 !important;
    letter-spacing:0 !important;
    color:var(--mstui-title) !important;
    margin:0 !important;
    min-width:0;
    text-transform:none !important;
}

.mstui-wrapper .mstui-count{
    margin-left:auto;
    font-size:.6875rem !important;   /* 11px */
    font-weight:600 !important;
    line-height:1 !important;
    color:var(--mstui-muted) !important;
    background:transparent !important;
    padding:4px 8px;
    border:1px solid var(--mstui-border) !important;
    border-radius:var(--mstui-radius) !important;
    white-space:nowrap;
}

.mstui-wrapper .mstui-back{
    margin-left:auto;
    display:none;
    align-items:center;
    gap:5px;
    font-family:inherit;
    font-size:.75rem !important;     /* 12px */
    font-weight:600 !important;
    line-height:1 !important;
    text-transform:none !important;
    color:#ffffff !important;
    background:var(--mstui-accent) !important;
    border:1px solid var(--mstui-accent) !important;
    border-radius:var(--mstui-radius) !important;
    padding:6px 10px !important;
    margin-bottom:0 !important;
    cursor:pointer;
    transition:background-color .16s ease, border-color .16s ease;
}
.mstui-wrapper .mstui-back svg{ display:block; width:12px; height:12px; flex:none; }
.mstui-wrapper .mstui-back:hover{
    color:#ffffff !important;
    background:var(--mstui-accent-dk) !important;
    border-color:var(--mstui-accent-dk) !important;
}
.mstui-wrapper .mstui-back:focus-visible{
    outline:none;
    box-shadow:0 0 0 2px #ffffff, 0 0 0 4px rgba(18,70,171,.45);
}

.mstui-wrapper.is-selected .mstui-count{ display:none; }
.mstui-wrapper.is-selected .mstui-back{ display:inline-flex; }

/* ----------------------------------------------------- Column head row -- */
.mstui-wrapper .mstui-head{
    display:grid;
    grid-template-columns:var(--mstui-sku-col) minmax(0,1fr);
    align-items:center;
    column-gap:16px;
    padding:8px 16px;
    background:var(--mstui-strip) !important;
    border-bottom:1px solid var(--mstui-border) !important;
}
.mstui-wrapper .mstui-head span{
    font-size:.6875rem;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--mstui-muted) !important;
}

/* ------------------------------------------------------------------ Rows -- */
.mstui-wrapper .mstui-list{ display:block; }

.mstui-wrapper .mstui-row{
    position:relative;
    display:grid;
    grid-template-columns:var(--mstui-sku-col) minmax(0,1fr);
    grid-template-areas:"sku product";
    align-items:center;
    column-gap:16px;
    padding:11px 16px;
    border-bottom:1px solid var(--mstui-border) !important;
    cursor:pointer;
    background:var(--mstui-surface) !important;
    color:var(--mstui-text) !important;
    transition:background-color .16s ease, color .16s ease;
    outline:none;
}
.mstui-wrapper .mstui-row:last-child{ border-bottom:0 !important; }
.mstui-wrapper .mstui-row:hover{ background:var(--mstui-hover) !important; }
.mstui-wrapper .mstui-row:focus-visible{
    box-shadow:inset 0 0 0 2px rgba(18,70,171,.45);
}

/* ---- SKU cell ---- */
.mstui-wrapper .mstui-sku{
    grid-area:sku;
    min-width:0;
    font-size:.75rem !important;     /* 12px */
    font-weight:600 !important;
    letter-spacing:.01em;
    color:var(--mstui-muted) !important;
    font-variant-numeric:tabular-nums;
    overflow-wrap:anywhere;
    line-height:1.35 !important;
}

/* ---- Product name cell ---- */
.mstui-wrapper .mstui-product{
    grid-area:product;
    min-width:0;
    font-size:.875rem !important;    /* 14px — readable, not oversized */
    font-weight:500 !important;
    line-height:1.45 !important;
    color:var(--mstui-text) !important;
    overflow-wrap:anywhere;
    word-break:break-word;
}

/* ---------------------------------------------------------- Active state -- */
.mstui-wrapper .mstui-row.active{ background:var(--mstui-active-bg) !important; }

.mstui-wrapper .mstui-row.active::before{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:3px;
    background:var(--mstui-accent) !important;
}
.mstui-wrapper .mstui-row.active .mstui-product{
    color:var(--mstui-title) !important;
    font-weight:700;
}
.mstui-wrapper .mstui-row.active .mstui-sku{
    color:var(--mstui-accent) !important;
}

/* ------------------------------------------------------- Hide native UI -- */
.variations{ display:none !important; }

/* ---------------------------------------------------------- Responsive -- */
@media (max-width:782px){
    .mstui-wrapper{ --mstui-sku-col:100px; }
}
@media (max-width:480px){
    .mstui-wrapper{ margin:16px 0 !important; }
    .mstui-wrapper .mstui-head{ display:none; }
    .mstui-wrapper .mstui-row{
        grid-template-columns:minmax(0,1fr);
        grid-template-areas:"sku" "product";
        row-gap:2px;
        padding:11px 14px;
    }
    .mstui-wrapper .mstui-sku{ font-size:.6875rem !important; }       /* 11px */
    .mstui-wrapper .mstui-product{ font-size:.875rem !important; line-height:1.4 !important; }  /* 14px */
    .mstui-wrapper .mstui-header{ padding:11px 14px; }
    .mstui-wrapper .mstui-heading{ font-size:.875rem !important; }    /* 14px */
    .mstui-wrapper .mstui-back{ font-size:.6875rem !important; padding:5px 9px !important; }
}
@media (prefers-reduced-motion:reduce){
    .mstui-wrapper .mstui-row,
    .mstui-wrapper .mstui-back{ transition:none; }
}