/* =================================================================
   WC MLA Admin Portal  —  admin-portal.css  v2.4.3
   Dark SaaS layout • WCAG AA contrast • Fully responsive
   ================================================================= */

/* ── Isolation reset — prevents theme CSS bleeding into portal ── */
#wc-mla-ap-root,#wc-mla-ap-root *,
.wc-mla-ap-login-wrap,.wc-mla-ap-login-wrap *{
    box-sizing:border-box;
}
/* Force portal root to be visible regardless of theme */
#wc-mla-ap-root{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
}
/* Scoped resets — only for portal nav and control buttons (NOT all:unset) */
#wc-mla-ap-root .wc-mla-ap-nav-item,
#wc-mla-ap-root .wc-mla-ap-hamburger,
#wc-mla-ap-root .wc-mla-ap-sidebar-close,
#wc-mla-ap-root .wc-mla-ap-dash-card,
#wc-mla-ap-root .wc-mla-ap-quick-btn,
#wc-mla-ap-root .wc-mla-ap-widget-more{
    -webkit-appearance:none!important;
    appearance:none!important;
    background-image:none!important;
    border-radius:0!important;
    text-shadow:none!important;
    box-shadow:none!important;
}

/* ── CSS Variables ──────────────────────────────────────────── */
:root{
    --ap-bg:        #0f0f1e;
    --ap-surface:   #12122a;
    --ap-surface2:  #1a1a36;
    --ap-surface3:  #21213f;
    --ap-border:    #2d2d52;
    --ap-text:      #e8eaf0;        /* body text — AAA on ap-surface */
    --ap-text-muted:#9ca3c0;        /* secondary — AA on ap-surface  */
    --ap-text-dim:  #6b7399;        /* tertiary — AA on ap-bg only    */
    --ap-accent:    #60a5fa;
    --ap-accent-h:  #93c5fd;
    --ap-green:     #4ade80;
    --ap-yellow:    #fbbf24;
    --ap-red:       #f87171;
    --ap-purple:    #a78bfa;
    --ap-orange:    #fb923c;
    --ap-sidebar-w: 230px;
    --ap-topbar-h:  48px;
    --ap-radius:    10px;
    --ap-shadow:    0 4px 24px rgba(0,0,0,.4);
}

/* ── Root layout ─────────────────────────────────────────────── */
.wc-mla-ap{
    display:flex;
    min-height:100vh;
    background:var(--ap-bg);
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
    font-size:14px;
    line-height:1.5;
    color:var(--ap-text);
    -webkit-font-smoothing:antialiased;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
/* ── Sidebar shell: fixed height flex column, header+footer pinned ── */
.wc-mla-ap-sidebar{
    width:var(--ap-sidebar-w)!important;
    flex-shrink:0!important;
    background:var(--ap-surface)!important;
    border-right:1px solid var(--ap-border)!important;
    display:flex!important;
    flex-direction:column!important;
    height:100vh!important;
    position:sticky!important;
    top:0!important;
    overflow:hidden!important;          /* shell never scrolls — only .wc-mla-ap-nav does */
    z-index:200!important;
    transition:transform .25s cubic-bezier(.4,0,.2,1);
    visibility:visible!important;
    opacity:1!important;
}

/* Nav: the ONLY scrollable part — fills remaining height between header and footer */
.wc-mla-ap-nav{
    flex:1!important;
    min-height:0!important;             /* crucial: allows flex child to shrink below content height */
    padding:8px 0!important;
    overflow-y:auto!important;          /* scroll when items exceed available height */
    overflow-x:hidden!important;
    display:block!important;
    visibility:visible!important;
    /* Firefox themed scrollbar — matches sidebar bg #12122a */
    scrollbar-width:thin!important;
    scrollbar-color:var(--ap-nav-thumb,#3a3a6e) var(--ap-surface)!important;
}

/* WebKit (Chrome, Safari, Edge) — themed scrollbar, matches sidebar */
.wc-mla-ap-nav::-webkit-scrollbar{
    width:4px!important;
}
.wc-mla-ap-nav::-webkit-scrollbar-track{
    background:var(--ap-surface)!important;     /* same as sidebar bg */
    border-radius:0!important;
}
.wc-mla-ap-nav::-webkit-scrollbar-thumb{
    background:#3a3a6e!important;               /* slightly lighter than sidebar */
    border-radius:4px!important;
    min-height:40px!important;
}
.wc-mla-ap-nav::-webkit-scrollbar-thumb:hover{
    background:#5a5aae!important;               /* accent on hover */
}
.wc-mla-ap-nav::-webkit-scrollbar-corner{
    background:var(--ap-surface)!important;
}
.wc-mla-ap-nav-logo{
    height:36px;width:auto;max-width:160px;
    object-fit:contain;object-position:left center;
    flex-shrink:0;display:block;
    background:#000;border-radius:4px;padding:2px 6px;
    visibility:visible!important;opacity:1!important;
}
.wc-mla-ap-sidebar-title{
    font-size:12px;font-weight:700;color:var(--ap-text);
    letter-spacing:.05em;text-transform:uppercase;
    flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wc-mla-ap-sidebar-close{
    display:none;background:none;border:none;
    color:var(--ap-text-muted);cursor:pointer;font-size:16px;
    padding:6px;line-height:1;border-radius:4px;
    transition:color .15s,background .15s;
}
.wc-mla-ap-sidebar-close:hover{color:var(--ap-text);background:var(--ap-surface2)}

/* Nav items and groups */
#wc-mla-ap-sidebar .wc-mla-ap-nav-item{
    display:flex!important;align-items:center!important;gap:10px!important;
    width:100%!important;padding:10px 16px!important;
    background:transparent!important;
    border:none!important;border-left:3px solid transparent!important;
    color:var(--ap-text-muted)!important;
    font-size:13px!important;font-weight:500!important;font-family:inherit!important;
    text-align:left!important;cursor:pointer!important;
    transition:all .15s;white-space:nowrap!important;
    visibility:visible!important;opacity:1!important;
    height:auto!important;max-height:none!important;
    overflow:visible!important;
    line-height:1.4!important;
    box-shadow:none!important;
    margin:0!important;
    text-decoration:none!important;
    letter-spacing:normal!important;
    text-transform:none!important;
}
#wc-mla-ap-sidebar .wc-mla-ap-nav-item:hover{background:var(--ap-surface2)!important;color:var(--ap-text)!important}
#wc-mla-ap-sidebar .wc-mla-ap-nav-item.active{
    background:var(--ap-surface2);
    color:var(--ap-accent-h);
    border-left-color:var(--ap-accent);
    font-weight:600;
}
#wc-mla-ap-sidebar .wc-mla-ap-nav-item:focus-visible{
    outline:2px solid var(--ap-accent);
    outline-offset:-2px;
    background:var(--ap-surface2);
}
#wc-mla-ap-sidebar .wc-mla-ap-nav-icon{font-size:15px!important;width:20px!important;text-align:center!important;flex-shrink:0!important;display:inline-block!important;visibility:visible!important;}
#wc-mla-ap-sidebar .wc-mla-ap-nav-label{flex:1!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;display:inline!important;visibility:visible!important;color:inherit!important;}

/* Sidebar footer */
.wc-mla-ap-sidebar-footer{
    padding:12px 14px;border-top:1px solid var(--ap-border);flex-shrink:0;
}
.wc-mla-ap-user-row{
    display:flex;align-items:center;gap:10px;margin-bottom:10px;
}
.wc-mla-ap-avatar{
    width:32px!important;height:32px!important;border-radius:50%!important;flex-shrink:0;
}
.wc-mla-ap-user-name{
    font-size:13px;font-weight:600;color:var(--ap-text);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wc-mla-ap-user-role{font-size:11px;color:var(--ap-text-dim)}
.wc-mla-ap-sidebar-links{display:flex;justify-content:space-between;gap:6px}
.wc-mla-ap-link-dim{
    font-size:12px;color:var(--ap-text-muted);text-decoration:none;
    padding:4px 8px;border-radius:4px;border:1px solid var(--ap-border);
    transition:all .15s;
}
.wc-mla-ap-link-dim:hover{color:var(--ap-text);background:var(--ap-surface2)}
.wc-mla-ap-link-danger{
    font-size:12px;color:var(--ap-red);text-decoration:none;
    padding:4px 8px;border-radius:4px;border:1px solid rgba(248,113,113,.25);
    transition:all .15s;
}
.wc-mla-ap-link-danger:hover{background:rgba(248,113,113,.1);color:#fca5a5}

/* ── Main ────────────────────────────────────────────────────── */
.wc-mla-ap-main{flex:1;min-width:0;display:flex;flex-direction:column}

/* Topbar */
.wc-mla-ap-topbar{
    display:flex!important;align-items:center!important;gap:12px!important;
    padding:0 20px!important;height:48px!important;min-height:48px!important;
    background:var(--ap-surface)!important;
    border-bottom:2px solid var(--ap-border)!important;
    box-shadow:0 2px 10px rgba(0,0,0,.2)!important;
    flex-shrink:0!important;position:sticky!important;top:0!important;z-index:100!important;
    box-sizing:border-box!important;
}
.wc-mla-ap-hamburger{
    display:none;flex-direction:column;gap:4px;
    background:none;border:none;cursor:pointer;padding:6px;flex-shrink:0;border-radius:4px;
    transition:background .15s;
}
.wc-mla-ap-hamburger:hover{background:var(--ap-surface2)}
.wc-mla-ap-hamburger span{
    display:block;width:18px;height:2px;
    background:var(--ap-text-muted);border-radius:1px;transition:all .2s;
}
.wc-mla-ap-topbar-title{
    font-size:15px!important;font-weight:700!important;color:var(--ap-text)!important;
    margin:0!important;padding:0!important;
    flex:1!important;min-width:0!important;
    overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
    line-height:48px!important;border:none!important;background:none!important;
}
.wc-mla-ap-topbar-right{display:flex!important;align-items:center!important;gap:10px!important;flex-shrink:0!important;margin-left:auto!important;}
.wc-mla-ap-topbar-link{
    font-size:12px;color:var(--ap-text-muted);text-decoration:none;
    padding:4px 10px;border:1px solid var(--ap-border);border-radius:5px;
    transition:all .15s;white-space:nowrap;
}
.wc-mla-ap-topbar-link:hover{color:var(--ap-text);background:var(--ap-surface2)}
.wc-mla-ap-topbar-user{
    font-size:12px;font-weight:600;color:var(--ap-text-muted);
    max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ── Content ─────────────────────────────────────────────────── */
.wc-mla-ap-content{flex:1;padding:20px;overflow-x:visible;position:relative;min-width:0}

.wc-mla-ap-view{
    background:var(--ap-surface);border:1px solid var(--ap-border);
    border-radius:var(--ap-radius);padding:20px;
    min-height:calc(100vh - var(--ap-topbar-h) - 40px);
    overflow-x:visible;
    min-width:0;
}

/* ── Spinner ─────────────────────────────────────────────────── */
.wc-mla-ap-spinner-overlay{
    position:absolute;inset:0;
    background:rgba(15,15,30,.75);
    display:flex;align-items:center;justify-content:center;
    z-index:50;border-radius:var(--ap-radius);
}
.wc-mla-ap-spinner{
    width:36px;height:36px;
    border:3px solid var(--ap-border);
    border-top-color:var(--ap-accent);
    border-radius:50%;
    animation:wc-mla-ap-spin .7s linear infinite;
}
@keyframes wc-mla-ap-spin{to{transform:rotate(360deg)}}

/* Mobile overlay */
.wc-mla-ap-overlay{
    display:none;position:fixed;inset:0;
    background:rgba(0,0,0,.65);z-index:150;
}

/* ================================================================
   ADMIN VIEW OVERRIDES — existing admin/views/*.php reused here
   All overrides scoped to .wc-mla-ap-view for safety
   ================================================================ */

/* Strip WP admin UI chrome */
.wc-mla-ap-view .wrap{background:transparent!important;color:var(--ap-text)!important;padding:0!important;margin:0!important;max-width:100%!important}
.wc-mla-ap-view .wrap > h1:first-child{
    font-size:18px!important;font-weight:700!important;
    color:var(--ap-text)!important;
    margin:0 0 18px!important;padding-bottom:14px!important;
    border-bottom:1px solid var(--ap-border)!important;
}
.wc-mla-ap-view h2,.wc-mla-ap-view h3{color:var(--ap-text)!important}
.wc-mla-ap-view h2{font-size:15px!important;font-weight:600!important;margin-top:20px!important}
.wc-mla-ap-view h3{font-size:13px!important;font-weight:600!important;color:var(--ap-text-muted)!important;text-transform:uppercase!important;letter-spacing:.05em!important}
.wc-mla-ap-view p{color:var(--ap-text)!important}
.wc-mla-ap-view p.description,.wc-mla-ap-view small{color:var(--ap-text-muted)!important}
.wc-mla-ap-view code{background:var(--ap-bg)!important;color:#a5b4fc!important;padding:2px 6px;border-radius:3px;font-size:12px}
.wc-mla-ap-view a{color:var(--ap-accent)!important;text-decoration:none}
.wc-mla-ap-view a:hover{color:var(--ap-accent-h)!important;text-decoration:underline}
.wc-mla-ap-view label{color:var(--ap-text-muted)!important}
.wc-mla-ap-view th{color:var(--ap-text-muted)!important}  /* form-table th */

/* Tables */
.wc-mla-ap-view table.widefat{
    border-color:var(--ap-border)!important;
    background:var(--ap-surface)!important;
    border-collapse:collapse!important;
    width:100%!important;
    font-size:13px!important;
    color:var(--ap-text)!important;
}
.wc-mla-ap-view table.widefat thead th{
    background:var(--ap-bg)!important;
    color:var(--ap-text-muted)!important;
    border-bottom:2px solid var(--ap-border)!important;
    padding:9px 12px!important;
    font-size:11px!important;font-weight:600!important;
    text-transform:uppercase!important;letter-spacing:.05em!important;
    white-space:nowrap!important;
}
.wc-mla-ap-view table.widefat td{
    border-bottom:1px solid var(--ap-surface3)!important;
    padding:10px 12px!important;
    vertical-align:middle!important;
    color:var(--ap-text)!important;
    background:var(--ap-surface)!important;
}
.wc-mla-ap-view table.widefat tbody tr:hover td{background:var(--ap-surface2)!important}
.wc-mla-ap-view table.widefat.striped tbody tr:nth-child(odd) td{background:var(--ap-surface2)!important}
.wc-mla-ap-view table.widefat.striped tbody tr:nth-child(odd):hover td{background:var(--ap-surface3)!important}

/* Buttons */
.wc-mla-ap-view .button,.wc-mla-ap-view .button-secondary{
    background:var(--ap-surface2)!important;
    border:1px solid var(--ap-border)!important;
    color:var(--ap-text)!important;
    box-shadow:none!important;text-shadow:none!important;
    border-radius:6px!important;padding:6px 14px!important;
    font-size:12px!important;font-weight:500!important;
    cursor:pointer!important;transition:all .15s!important;
}
.wc-mla-ap-view .button:hover,.wc-mla-ap-view .button-secondary:hover{
    background:var(--ap-surface3)!important;border-color:#4a4a7e!important;
    color:var(--ap-text)!important;
}
.wc-mla-ap-view .button-primary{
    background:var(--ap-accent)!important;
    border-color:var(--ap-accent)!important;
    color:#fff!important;font-weight:600!important;
}
.wc-mla-ap-view .button-primary:hover{background:#2563eb!important;border-color:#2563eb!important}
.wc-mla-ap-view .button-small,.wc-mla-ap-view .button.button-small{
    padding:4px 10px!important;font-size:11px!important;
}
/* Active filter pill: button-primary overrides correctly even with button-small */
.wc-mla-ap-view .button.button-small.button-primary,
.wc-mla-ap-view a.button.button-small.button-primary{
    background:var(--ap-accent)!important;
    border-color:var(--ap-accent)!important;
    color:#fff!important;
    font-weight:600!important;
}
.wc-mla-ap-view .button.button-small.button-primary:hover,
.wc-mla-ap-view a.button.button-small.button-primary:hover{
    background:var(--ap-accent-h)!important;
    border-color:var(--ap-accent-h)!important;
    color:#fff!important;
}
/* Inactive filter pill */
.wc-mla-ap-view a.button.button-small:not(.button-primary){
    background:var(--ap-surface2)!important;
    border-color:var(--ap-border)!important;
    color:var(--ap-text)!important;
}
.wc-mla-ap-view a.button.button-small:not(.button-primary):hover{
    background:var(--ap-surface3)!important;
    border-color:#4a4a7e!important;
    color:var(--ap-text)!important;
}
/* Filter bar label text — visible on dark portal bg */
.wc-mla-ap-view strong,
.wc-mla-ap-view label{
    color:var(--ap-text)!important;
}
.wc-mla-ap-view button[style*="color:#c00"],.wc-mla-ap-view button[style*="color: #c00"]{
    color:var(--ap-red)!important;border-color:rgba(248,113,113,.3)!important;
}

/* Form inputs */
.wc-mla-ap-view input[type="text"],
.wc-mla-ap-view input[type="number"],
.wc-mla-ap-view input[type="email"],
.wc-mla-ap-view input[type="url"],
.wc-mla-ap-view input[type="password"],
.wc-mla-ap-view select,
.wc-mla-ap-view textarea{
    background:var(--ap-surface2)!important;
    border:1.5px solid var(--ap-border)!important;
    color:var(--ap-text)!important;
    border-radius:6px!important;
    padding:8px 12px!important;
    font-size:13px!important;
    font-family:inherit!important;
    box-shadow:none!important;
    transition:border-color .15s,box-shadow .15s!important;
    -webkit-appearance:none!important;
}
.wc-mla-ap-view input:focus,.wc-mla-ap-view select:focus,.wc-mla-ap-view textarea:focus{
    outline:none!important;
    border-color:var(--ap-accent)!important;
    box-shadow:0 0 0 3px rgba(96,165,250,.15)!important;
}
.wc-mla-ap-view input::placeholder{color:var(--ap-text-dim)!important}
.wc-mla-ap-view select option{background:var(--ap-surface2);color:var(--ap-text)}

/* Checkboxes — keep visible */
.wc-mla-ap-view input[type="checkbox"]{accent-color:var(--ap-accent);width:15px!important;height:15px!important}

/* Postbox */
.wc-mla-ap-view .postbox{
    background:var(--ap-surface2)!important;
    border:1px solid var(--ap-border)!important;
    border-radius:var(--ap-radius)!important;
    box-shadow:none!important;
}
.wc-mla-ap-view .postbox .hndle{
    border-bottom:1px solid var(--ap-border)!important;
    color:var(--ap-text)!important;font-weight:600!important;
    background:var(--ap-surface3)!important;
    padding:12px 16px!important;border-radius:calc(var(--ap-radius) - 1px) calc(var(--ap-radius) - 1px) 0 0!important;
}
.wc-mla-ap-view .inside{color:var(--ap-text)!important}

/* Form table */
.wc-mla-ap-view .form-table th{
    color:var(--ap-text-muted)!important;
    padding:12px 16px 12px 0!important;
    vertical-align:top!important;
    width:180px!important;
    font-size:13px!important;font-weight:500!important;
}
.wc-mla-ap-view .form-table td{color:var(--ap-text)!important;padding:10px 0!important}

/* Notices */
.wc-mla-ap-view .notice{
    background:var(--ap-surface2)!important;border-left:4px solid var(--ap-accent)!important;
    color:var(--ap-text)!important;padding:10px 14px!important;margin-bottom:14px!important;
    border-radius:0 6px 6px 0!important;
}
.wc-mla-ap-view .notice-success{border-left-color:var(--ap-green)!important}
.wc-mla-ap-view .notice-error{border-left-color:var(--ap-red)!important;color:var(--ap-red)!important}
.wc-mla-ap-view .notice-warning{border-left-color:var(--ap-yellow)!important}
.wc-mla-ap-view .notice p{color:inherit!important;margin:0!important}
.wc-mla-ap-view .notice .notice-dismiss{color:var(--ap-text-muted)!important}

/* Tablenav */
.wc-mla-ap-view .tablenav,.wc-mla-ap-view .tablenav .tablenav-pages{color:var(--ap-text-muted)!important}
.wc-mla-ap-view .tablenav-pages a,.wc-mla-ap-view .page-numbers{
    background:var(--ap-surface2)!important;border-color:var(--ap-border)!important;
    color:var(--ap-text-muted)!important;
}
.wc-mla-ap-view .tablenav-pages span.current{background:var(--ap-accent)!important;color:#fff!important;border-color:var(--ap-accent)!important}

/* Pills / badges in views */
.wc-mla-ap-view .wc-mla-pill{border-radius:20px!important;font-size:11px!important;font-weight:600!important;padding:2px 8px!important}
.wc-mla-ap-view .wc-mla-pill-active,.wc-mla-ap-view .wc-mla-pill-approved{background:rgba(74,222,128,.15)!important;color:var(--ap-green)!important;border-color:rgba(74,222,128,.3)!important}
.wc-mla-ap-view .wc-mla-pill-pending{background:rgba(251,191,36,.15)!important;color:var(--ap-yellow)!important;border-color:rgba(251,191,36,.3)!important}
.wc-mla-ap-view .wc-mla-pill-inactive,.wc-mla-ap-view .wc-mla-pill-cancelled{background:rgba(248,113,113,.1)!important;color:var(--ap-red)!important;border-color:rgba(248,113,113,.25)!important}
.wc-mla-ap-view .wc-mla-pill-paid,.wc-mla-ap-view .wc-mla-pill-direct,.wc-mla-ap-view .wc-mla-pill-override{background:rgba(96,165,250,.15)!important;color:var(--ap-accent-h)!important;border-color:rgba(96,165,250,.3)!important}

/* Filter bars */
.wc-mla-ap-view form[method="get"]{
    display:flex!important;flex-wrap:wrap!important;gap:8px!important;
    align-items:flex-end!important;margin-bottom:16px!important;
    padding:12px 14px!important;background:var(--ap-surface2)!important;
    border:1px solid var(--ap-border)!important;border-radius:6px!important;
}
.wc-mla-ap-view form[method="get"] label{color:var(--ap-text-muted)!important;font-size:11px!important;font-weight:600!important}
.wc-mla-ap-view form[method="get"] select,.wc-mla-ap-view form[method="get"] input[type="text"],
.wc-mla-ap-view form[method="get"] input[type="number"]{min-width:0!important}

/* Two-column layout used in some views */


/* Strong/em in tables */
.wc-mla-ap-view td strong{color:var(--ap-text)!important}
.wc-mla-ap-view td small{color:var(--ap-text-muted)!important}

/* Status icons */
.wc-mla-ap-view td:has(> span[style*="color:green"]) span,
.wc-mla-ap-view span[style*="color:green"]{color:var(--ap-green)!important}
.wc-mla-ap-view span[style*="color:#999"],.wc-mla-ap-view span[style*="color: #999"]{color:var(--ap-text-dim)!important}
.wc-mla-ap-view span[style*="color:#aaa"],.wc-mla-ap-view span[style*="color: #aaa"]{color:var(--ap-text-dim)!important}

/* MG card styles from matrix-groups.php */
.wc-mla-ap-view .mg-card{background:var(--ap-surface2)!important;border-color:var(--ap-border)!important;box-shadow:none!important}
.wc-mla-ap-view .mg-card-head{background:var(--ap-surface3)!important;border-bottom-color:var(--ap-border)!important}
.wc-mla-ap-view .mg-card-head h3{color:var(--ap-text)!important}
.wc-mla-ap-view .mg-field input[type="text"],.wc-mla-ap-view .mg-field input[type="number"],.wc-mla-ap-view .mg-field textarea{background:var(--ap-surface2)!important;border-color:var(--ap-border)!important;color:var(--ap-text)!important}
.wc-mla-ap-view .mg-field label{color:var(--ap-text-muted)!important}
.wc-mla-ap-view .mg-check-ok{color:var(--ap-green)!important}
.wc-mla-ap-view .mg-check-err{color:var(--ap-red)!important}
.wc-mla-ap-view .mg-level-block{border-color:var(--ap-border)!important}
.wc-mla-ap-view .mg-level-head{background:var(--ap-surface3)!important;border-color:var(--ap-border)!important}
.wc-mla-ap-view .mg-level-head .mg-level-num{color:var(--ap-accent)!important}
.wc-mla-ap-view .mg-level-fields{background:var(--ap-surface2)!important;border-color:var(--ap-border)!important}
.wc-mla-ap-view .mg-level-fields label{color:var(--ap-text-muted)!important}
.wc-mla-ap-view .mg-level-fields input{background:var(--ap-surface3)!important;border-color:var(--ap-border)!important;color:var(--ap-text)!important}
.wc-mla-ap-view .mg-legs-grid th{background:var(--ap-surface3)!important;color:var(--ap-text-muted)!important;border-color:var(--ap-border)!important}
.wc-mla-ap-view .mg-legs-grid td{border-color:var(--ap-surface3)!important}
.wc-mla-ap-view .mg-legs-grid input{background:var(--ap-surface2)!important;border-color:var(--ap-border)!important;color:var(--ap-text)!important}
.wc-mla-ap-view .mg-sum-row td{background:var(--ap-surface3)!important;color:var(--ap-text-muted)!important;border-color:var(--ap-border)!important}
.wc-mla-ap-view .mg-add-btn{background:var(--ap-surface3)!important;border-color:var(--ap-border)!important;color:var(--ap-text-muted)!important}
.wc-mla-ap-view .mg-add-btn:hover{border-color:var(--ap-accent)!important;color:var(--ap-accent)!important;background:rgba(96,165,250,.08)!important}
.wc-mla-ap-view .mg-gen-btn{background:rgba(96,165,250,.12)!important;border-color:rgba(96,165,250,.3)!important;color:var(--ap-accent)!important}
.wc-mla-ap-view .mg-preview{color:var(--ap-text-dim)!important}
.wc-mla-ap-view .mg-total-check,.wc-mla-ap-view .mg-level-check{font-weight:600!important}

/* ================================================================
   DASHBOARD
   ================================================================ */
.wc-mla-ap-dashboard{padding:4px 0}

.wc-mla-ap-dash-cards{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
    gap:14px;
    margin-bottom:24px;
}
.wc-mla-ap-dash-card{
    display:flex;align-items:center;gap:14px;
    background:var(--ap-surface);
    border:1px solid var(--ap-border);
    border-left:3px solid var(--c, var(--ap-accent));
    border-radius:var(--ap-radius);
    padding:16px;cursor:pointer;
    transition:all .18s;width:100%;text-align:left;font-family:inherit;
    position:relative;overflow:hidden;
}
.wc-mla-ap-dash-card::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(135deg,rgba(255,255,255,.025) 0%,transparent 60%);
    pointer-events:none;
}
.wc-mla-ap-dash-card:hover{background:var(--ap-surface2);transform:translateY(-2px);box-shadow:var(--ap-shadow)}
.wc-mla-ap-dash-card:focus-visible{outline:2px solid var(--c, var(--ap-accent));outline-offset:2px}
.wc-mla-ap-dash-card-icon{font-size:26px;flex-shrink:0;line-height:1}
.wc-mla-ap-dash-card-body{flex:1;min-width:0}
.wc-mla-ap-dash-card-value{
    font-size:22px;font-weight:700;color:var(--ap-text);
    line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wc-mla-ap-dash-card-label{
    font-size:11px;color:var(--ap-text-muted);
    font-weight:500;text-transform:uppercase;letter-spacing:.05em;margin-top:3px;
}
.wc-mla-ap-dash-card-chevron{color:var(--ap-border);font-size:14px;flex-shrink:0}

/* Dashboard grid */
.wc-mla-ap-dash-grid{
    display:grid;
    grid-template-columns:220px 1fr;
    gap:16px;
    margin-bottom:20px;
    align-items:start;
}
.wc-mla-ap-dash-widget{
    background:var(--ap-surface);
    border:1px solid var(--ap-border);
    border-radius:var(--ap-radius);
    overflow:hidden;
}
.wc-mla-ap-dash-widget-wide{grid-column:2}
.wc-mla-ap-widget-head{
    padding:12px 16px;
    background:var(--ap-surface2);
    border-bottom:1px solid var(--ap-border);
    font-size:12px;font-weight:700;color:var(--ap-text-muted);
    text-transform:uppercase;letter-spacing:.06em;
    display:flex;align-items:center;justify-content:space-between;
}
.wc-mla-ap-widget-more{
    background:none;border:1px solid var(--ap-border);
    color:var(--ap-accent);font-size:11px;font-weight:600;
    padding:3px 8px;border-radius:4px;cursor:pointer;font-family:inherit;
    transition:all .15s;
}
.wc-mla-ap-widget-more:hover{background:rgba(96,165,250,.1)}
.wc-mla-ap-widget-body{padding:12px 16px;display:flex;flex-direction:column;gap:10px}
.wc-mla-ap-widget-stat{
    display:flex;justify-content:space-between;align-items:center;
    font-size:13px;color:var(--ap-text-muted);
    padding-bottom:10px;border-bottom:1px solid var(--ap-surface2);
}
.wc-mla-ap-widget-stat:last-child{border-bottom:none;padding-bottom:0}
.wc-mla-ap-widget-stat strong{font-size:15px;font-weight:700}

.wc-mla-ap-table-scroll{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    width:100%;
}
.wc-mla-ap-table-scroll .wc-mla-ap-table{
    min-width:560px;
    table-layout:fixed;
}
.wc-mla-ap-table td,.wc-mla-ap-table th{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.wc-mla-ap-table td:nth-child(2){
    max-width:140px;
}
.wc-mla-ap-table{width:100%;border-collapse:collapse;font-size:13px}
.wc-mla-ap-table th{
    padding:9px 12px;text-align:left;
    font-size:10px;font-weight:600;color:var(--ap-text-muted);
    border-bottom:2px solid var(--ap-border);
    background:var(--ap-bg);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;
}
.wc-mla-ap-table td{
    padding:9px 12px;border-bottom:1px solid var(--ap-surface2);
    color:var(--ap-text);vertical-align:middle;
}
.wc-mla-ap-table tr:last-child td{border-bottom:none}
.wc-mla-ap-table tr:hover td{background:var(--ap-surface2)}
.wc-mla-ap-badge{
    display:inline-block;
    padding:2px 8px;border-radius:20px;
    font-size:11px;font-weight:600;
    white-space:nowrap;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    vertical-align:middle;
}
.wc-mla-ap-badge-pending{background:rgba(251,191,36,.15);color:var(--ap-yellow)}
.wc-mla-ap-badge-approved,.wc-mla-ap-badge-met,.wc-mla-ap-badge-active{background:rgba(74,222,128,.15);color:var(--ap-green)}
.wc-mla-ap-badge-rejected,.wc-mla-ap-badge-failed{background:rgba(248,113,113,.12);color:var(--ap-red)}
.wc-mla-ap-empty-note{color:var(--ap-text-dim);font-size:13px;padding:20px;text-align:center;margin:0}

.wc-mla-ap-quick-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.wc-mla-ap-quick-btn{
    background:var(--ap-surface2);border:1px solid var(--ap-border);
    color:var(--ap-text);border-radius:6px;
    padding:8px 14px;font-size:13px;font-family:inherit;cursor:pointer;
    transition:all .15s;white-space:nowrap;
}
.wc-mla-ap-quick-btn:hover{background:var(--ap-surface3);border-color:var(--ap-accent);color:var(--ap-accent)}
.wc-mla-ap-empty{padding:60px 20px;text-align:center;color:var(--ap-text-dim)}

/* ================================================================
   LOGIN PAGE
   ================================================================ */
.wc-mla-ap-login-wrap{
    min-height:100vh;display:flex;align-items:center;justify-content:center;
    background:var(--ap-bg);padding:24px 16px;
}
.wc-mla-ap-login-card{
    width:100%;max-width:420px;
    background:var(--ap-surface);border:1px solid var(--ap-border);
    border-radius:16px;padding:36px 32px;box-shadow:var(--ap-shadow);
}
.wc-mla-ap-login-logo{text-align:center;margin-bottom:28px}
.wc-mla-ap-logo-img{
    max-height:80px;max-width:260px;width:auto;display:block;margin:0 auto 12px;
    object-fit:contain;border-radius:8px;
    background:#000;padding:6px 12px;
}
.wc-mla-ap-login-subtitle{
    font-size:12px;color:var(--ap-text-muted);margin:0;
    font-weight:700;text-transform:uppercase;letter-spacing:.1em;
}
.wc-mla-ap-alert{padding:11px 14px;border-radius:8px;font-size:13px;margin-bottom:18px}
.wc-mla-ap-alert-error{background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.3);color:var(--ap-red)}

.wc-mla-ap-field{margin-bottom:18px}
.wc-mla-ap-field label{
    display:flex;justify-content:space-between;align-items:center;
    font-size:12px;font-weight:600;color:var(--ap-text-muted);margin-bottom:6px;
}
.wc-mla-ap-field input{
    display:block;width:100%;
    padding:12px 14px;
    background:var(--ap-surface2);border:1.5px solid var(--ap-border);
    border-radius:8px;font-size:15px;color:var(--ap-text);
    outline:none;font-family:inherit;
    transition:border-color .15s,box-shadow .15s;
    -webkit-appearance:none;
}
.wc-mla-ap-field input:focus{border-color:var(--ap-accent);box-shadow:0 0 0 3px rgba(96,165,250,.15)}
.wc-mla-ap-field input::placeholder{color:var(--ap-text-dim);font-size:13px}
.wc-mla-ap-pw-wrap{position:relative}
.wc-mla-ap-pw-wrap input{padding-right:46px}
.wc-mla-ap-eye{
    position:absolute;right:12px;top:50%;transform:translateY(-50%);
    background:none;border:none;color:var(--ap-text-dim);cursor:pointer;
    display:flex;align-items:center;min-width:32px;min-height:32px;
    padding:4px;transition:color .15s;
}
.wc-mla-ap-eye:hover{color:var(--ap-text-muted)}
.wc-mla-ap-eye svg{width:18px;height:18px}
.wc-mla-ap-link-sm{font-size:12px;color:var(--ap-accent);text-decoration:none}
.wc-mla-ap-link-sm:hover{text-decoration:underline}
.wc-mla-ap-check-row{
    display:flex;align-items:center;gap:8px;cursor:pointer;
    font-size:13px;color:var(--ap-text-muted);margin-bottom:20px;
}
.wc-mla-ap-check-row input{accent-color:var(--ap-accent);width:15px!important;height:15px!important;flex-shrink:0}
.wc-mla-ap-btn-primary{
    display:block;width:100%;padding:14px;
    background:var(--ap-accent);color:#fff;
    border:none;border-radius:10px;
    font-size:15px;font-weight:700;font-family:inherit;cursor:pointer;
    transition:background .15s,box-shadow .15s;
    box-shadow:0 4px 14px rgba(96,165,250,.3);
    -webkit-appearance:none;
}
.wc-mla-ap-btn-primary:hover{background:#2563eb}
.wc-mla-ap-btn-full{width:100%!important}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media(max-width:1100px){
    .wc-mla-ap-view .wc-mla-two-col{grid-template-columns:1fr!important}
    .wc-mla-ap-dash-grid{grid-template-columns:1fr!important}
    .wc-mla-ap-dash-widget-wide{grid-column:1!important}
}
@media(max-width:860px){
    .wc-mla-ap-dash-grid{grid-template-columns:1fr!important}
    .wc-mla-ap-chart-grid{grid-template-columns:1fr!important}
}

@media(max-width:860px){
    .wc-mla-ap-hamburger{display:flex}
    .wc-mla-ap-sidebar{
        position:fixed;left:0;top:0;height:100%;
        transform:translateX(-100%);width:260px;z-index:300;
        overflow:hidden!important;      /* shell still hidden; nav scrolls inside */
    }
    .wc-mla-ap-sidebar.open{transform:translateX(0);box-shadow:8px 0 32px rgba(0,0,0,.5)}
    .wc-mla-ap-sidebar-close{display:flex!important;align-items:center;justify-content:center}
    .wc-mla-ap-overlay.visible{display:block!important}
    .wc-mla-ap-content{padding:14px}
    .wc-mla-ap-view{padding:14px}
    .wc-mla-ap-topbar-user{display:none}
}

@media(max-width:600px){
    .wc-mla-ap-dash-cards{grid-template-columns:1fr 1fr}
    .wc-mla-ap-topbar{padding:0 12px}
    .wc-mla-ap-content{padding:10px}
    .wc-mla-ap-view{padding:12px}
    .wc-mla-ap-login-card{padding:24px 18px}
    .wc-mla-ap-topbar-link{display:none}
}

@media(max-width:400px){
    .wc-mla-ap-dash-cards{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
    .wc-mla-ap-dash-card,.wc-mla-ap-sidebar,.wc-mla-ap-spinner{transition:none!important;animation:none!important}
}

/* ================================================================
   PORTAL THEME SETTINGS
   ================================================================ */
.wc-mla-theme-settings{padding:4px 0}
.wc-mla-theme-section{
    background:var(--ap-surface2);border:1px solid var(--ap-border);
    border-radius:8px;margin-bottom:18px;overflow:hidden;
}
.wc-mla-theme-section-head{
    padding:11px 16px;background:var(--ap-surface3);
    border-bottom:1px solid var(--ap-border);
    font-size:12px;font-weight:700;color:var(--ap-text-muted);
    text-transform:uppercase;letter-spacing:.06em;
}
.wc-mla-theme-section-body{padding:16px;display:flex;flex-wrap:wrap;gap:16px}
.wc-mla-theme-field{display:flex;flex-direction:column;gap:5px;min-width:160px}
.wc-mla-theme-field label{font-size:12px;font-weight:600;color:var(--ap-text-muted)}
.wc-mla-theme-field input[type=text],.wc-mla-theme-field select,.wc-mla-theme-field input[type=color]{
    background:var(--ap-surface);border:1.5px solid var(--ap-border);
    border-radius:6px;padding:7px 10px;font-size:13px;color:var(--ap-text);
    font-family:inherit;outline:none;transition:border-color .15s;
}
.wc-mla-theme-field input[type=color]{height:38px;padding:4px 8px;cursor:pointer}
.wc-mla-theme-field input:focus,.wc-mla-theme-field select:focus{border-color:var(--ap-accent)}
.wc-mla-theme-save-row{
    display:flex;align-items:center;gap:12px;
    padding:14px 16px;border-top:1px solid var(--ap-border);
    background:var(--ap-surface3);
}
.wc-mla-theme-preview{
    margin-top:16px;padding:14px;
    background:var(--ap-surface3);border:1px solid var(--ap-border);
    border-radius:8px;font-size:12px;color:var(--ap-text-muted);
}

/* ================================================================
   DASHBOARD CHARTS
   ================================================================ */
.wc-mla-chart-widget{
    background:var(--ap-surface);border:1px solid var(--ap-border);
    border-radius:var(--ap-radius);overflow:hidden;margin-bottom:20px;
}
.wc-mla-chart-head{
    padding:12px 16px;background:var(--ap-surface2);
    border-bottom:1px solid var(--ap-border);
    display:flex;align-items:center;flex-wrap:wrap;gap:10px;
}
.wc-mla-chart-title{
    font-size:13px;font-weight:700;color:var(--ap-text);flex:1;
}
.wc-mla-chart-controls{
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.wc-mla-chart-controls label{font-size:11px;color:var(--ap-text-muted);font-weight:600}
.wc-mla-chart-controls select{
    background:var(--ap-surface);border:1px solid var(--ap-border);
    color:var(--ap-text);border-radius:4px;padding:4px 8px;font-size:12px;
    font-family:inherit;cursor:pointer;
}
.wc-mla-chart-type-btns{display:flex;gap:4px}
.wc-mla-chart-type-btn{
    background:var(--ap-surface);border:1px solid var(--ap-border);
    color:var(--ap-text-muted);border-radius:4px;padding:4px 10px;
    font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;
    transition:all .15s;
}
.wc-mla-chart-type-btn.active,.wc-mla-chart-type-btn:hover{
    background:var(--ap-accent);border-color:var(--ap-accent);color:#fff;
}
.wc-mla-chart-body{padding:16px;min-height:250px;position:relative}
.wc-mla-chart-canvas-wrap{position:relative;height:240px}
.wc-mla-chart-loading{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    background:rgba(15,15,30,.7);border-radius:4px;
}
.wc-mla-chart-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;
}
@media(max-width:700px){.wc-mla-chart-grid{grid-template-columns:1fr}}

/* Export buttons */
.wc-mla-chart-export-btn{
    background:var(--ap-surface2)!important;
    border:1px solid var(--ap-border)!important;
    color:var(--ap-text-muted)!important;
    border-radius:4px!important;
    padding:3px 8px!important;
    font-size:10px!important;
    font-weight:600!important;
    font-family:inherit!important;
    cursor:pointer!important;
    letter-spacing:.03em!important;
    transition:all .15s!important;
    white-space:nowrap!important;
}
.wc-mla-chart-export-btn:hover{
    border-color:var(--ap-accent)!important;
    color:var(--ap-accent)!important;
    background:rgba(96,165,250,.08)!important;
}

/* Month picker in chart controls */
.wc-mla-chart-month-sel{
    background:var(--ap-surface)!important;
    border:1px solid var(--ap-border)!important;
    color:var(--ap-text)!important;
    border-radius:4px!important;
    padding:4px 8px!important;
    font-size:12px!important;
    font-family:inherit!important;
    cursor:pointer!important;
    max-width:130px!important;
}

/* ================================================================
   CHART METRIC BUTTONS + HEAD LAYOUT
   ================================================================ */
.wc-mla-chart-head{
    padding:10px 14px;
    background:var(--ap-surface2);
    border-bottom:1px solid var(--ap-border);
    display:flex;align-items:center;flex-wrap:wrap;gap:8px;
}
.wc-mla-chart-title{font-size:13px;font-weight:700;color:var(--ap-text);flex:1;min-width:120px}
.wc-mla-chart-controls{display:flex;align-items:center;flex-wrap:wrap;gap:6px}

.wc-mla-chart-metrics{
    display:flex;gap:4px;flex-wrap:wrap;
    padding:8px 14px;
    border-bottom:1px solid var(--ap-border);
    background:var(--ap-surface3);
}
.wc-mla-chart-metric-btn{
    background:transparent!important;
    border:1px solid var(--ap-border)!important;
    color:var(--ap-text-muted)!important;
    border-radius:20px!important;
    padding:4px 14px!important;
    font-size:12px!important;font-weight:500!important;
    font-family:inherit!important;
    cursor:pointer!important;
    transition:all .15s!important;
    white-space:nowrap!important;
    -webkit-appearance:none!important;appearance:none!important;
}
.wc-mla-chart-metric-btn:hover{
    border-color:var(--ap-accent)!important;
    color:var(--ap-accent)!important;
    background:rgba(96,165,250,.08)!important;
}
.wc-mla-chart-metric-btn.active{
    background:var(--ap-accent)!important;
    border-color:var(--ap-accent)!important;
    color:#fff!important;
    font-weight:600!important;
}
.wc-mla-chart-body{padding:14px}
.wc-mla-chart-canvas-wrap{position:relative;height:220px}

/* ================================================================
   FORM LAYOUT FIXES — add/edit forms below list on small screens
   Consistent label + input alignment for ALL add/edit forms
   ================================================================ */

/* Override inline grid on business-groups to use our responsive class */
.wc-mla-ap-view [style*="grid-template-columns:1fr 340px"],
.wc-mla-ap-view [style*="grid-template-columns: 1fr 340px"]{
    display:grid!important;
    grid-template-columns:1fr 360px!important;
    gap:24px!important;
    align-items:start!important;
}

/* Form table — consistent label width and alignment */
.wc-mla-ap-view .form-table{width:100%!important;border-collapse:collapse!important}
.wc-mla-ap-view .form-table th{
    width:160px!important;
    min-width:130px!important;
    padding:10px 14px 10px 0!important;
    vertical-align:middle!important;
    color:var(--ap-text-muted)!important;
    font-size:13px!important;
    font-weight:500!important;
    white-space:nowrap!important;
    text-align:left!important;
}
.wc-mla-ap-view .form-table td{
    padding:8px 0!important;
    vertical-align:middle!important;
    color:var(--ap-text)!important;
}
.wc-mla-ap-view .form-table td input[type="text"],
.wc-mla-ap-view .form-table td input[type="number"],
.wc-mla-ap-view .form-table td input[type="email"],
.wc-mla-ap-view .form-table td select,
.wc-mla-ap-view .form-table td textarea{
    width:100%!important;
    max-width:380px!important;
}
.wc-mla-ap-view .form-table td .small-text,
.wc-mla-ap-view .form-table td input[style*="width:80px"],
.wc-mla-ap-view .form-table td input[style*="width: 80px"],
.wc-mla-ap-view .form-table td input[style*="width:90px"],
.wc-mla-ap-view .form-table td input[style*="width:100px"]{
    width:auto!important;max-width:120px!important;
}
.wc-mla-ap-view .form-table td .regular-text{
    width:100%!important;max-width:340px!important;
}
.wc-mla-ap-view .form-table td p.description{
    margin:4px 0 0!important;
    font-size:12px!important;
    color:var(--ap-text-dim)!important;
    max-width:380px!important;
}

/* Postbox inside col-side — full width, no overflow */


/* Two-col: collapse to single column at 1000px */

@media(max-width:1000px){
    .wc-mla-ap-view .wc-mla-two-col,
    .wc-mla-ap-view [style*="grid-template-columns:1fr 340px"],
    .wc-mla-ap-view [style*="grid-template-columns: 1fr 340px"]{
        grid-template-columns:1fr!important;
    }
    .wc-mla-ap-view .form-table td input[type="text"],
    .wc-mla-ap-view .form-table td select,
    .wc-mla-ap-view .form-table td textarea{
        max-width:100%!important;
    }
}




/* ── View container: never scroll horizontally ── */
.wc-mla-ap-view,
.wc-mla-ap-view .wrap {
    overflow-x: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ── Two-col grid inside portal ── */
.wc-mla-ap-view .wc-mla-two-col {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 300px !important;
    gap: 20px !important;
    align-items: start !important;
    max-width: 100% !important;
}
.wc-mla-ap-view .wc-mla-col-main {
    min-width: 0 !important;
    overflow: hidden !important;
}
.wc-mla-ap-view .wc-mla-col-side {
    width: 300px !important;
    max-width: 300px !important;
    min-width: 0 !important;
}

/* ── Affiliates list+form ── */
.wc-mla-ap-view .wc-mla-list-layout {
    display: block !important;
    max-width: 100% !important;
}
.wc-mla-ap-view .wc-mla-list-with-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 300px !important;
    gap: 20px !important;
    align-items: start !important;
}
.wc-mla-ap-view .wc-mla-list-main {
    min-width: 0 !important;
    overflow: hidden !important;
}
.wc-mla-ap-view .wc-mla-list-side {
    width: 300px !important;
    max-width: 300px !important;
    min-width: 0 !important;
}

/* ── Tables: fit 100%, fixed layout, no overflow ── */
.wc-mla-ap-view table.widefat,
.wc-mla-ap-view .wc-mla-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    box-sizing: border-box !important;
}

/* ── Table scroll wrap: NO horizontal scroll ── */
.wc-mla-ap-view .wc-mla-table-scroll-wrap {
    overflow-x: auto !important;
    overflow-y: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    -webkit-overflow-scrolling: touch;
}

/* ── Table cells: clip overflow, wrap text ── */
.wc-mla-ap-view table.widefat th,
.wc-mla-ap-view table.widefat td {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 200px !important;
}
/* Allow wrapping in description/name cells */
.wc-mla-ap-view table.widefat td:nth-child(2),
.wc-mla-ap-view table.widefat td.wrap-ok {
    white-space: normal !important;
    word-break: break-word !important;
}

/* ── Action buttons: stack vertically in last column ── */
.wc-mla-ap-view table.widefat td:last-child {
    white-space: normal !important;
    overflow: visible !important;
    max-width: none !important;
}
.wc-mla-ap-view table.widefat td:last-child .button,
.wc-mla-ap-view table.widefat td:last-child button {
    display: inline-block !important;
    padding: 2px 7px !important;
    font-size: 11px !important;
    margin: 1px 1px 1px 0 !important;
}

/* ── Postbox in side panels ── */
.wc-mla-ap-view .wc-mla-col-side .postbox,
.wc-mla-ap-view .wc-mla-list-side .postbox {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
.wc-mla-ap-view .wc-mla-col-side .inside,
.wc-mla-ap-view .wc-mla-list-side .inside {
    padding: 12px !important;
    overflow: hidden !important;
}

/* ── Form table in side panels ── */
.wc-mla-ap-view .wc-mla-col-side .form-table,
.wc-mla-ap-view .wc-mla-list-side .form-table {
    width: 100% !important;
    table-layout: fixed !important;
    max-width: 100% !important;
}
.wc-mla-ap-view .wc-mla-col-side .form-table th,
.wc-mla-ap-view .wc-mla-list-side .form-table th {
    width: 100px !important;
    min-width: 0 !important;
    white-space: normal !important;
    word-break: break-word !important;
    padding: 8px 8px 8px 0 !important;
    vertical-align: middle !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--ap-text-muted) !important;
}
.wc-mla-ap-view .wc-mla-col-side .form-table td,
.wc-mla-ap-view .wc-mla-list-side .form-table td {
    overflow: hidden !important;
    padding: 6px 0 !important;
    vertical-align: middle !important;
}
.wc-mla-ap-view .wc-mla-col-side .form-table input,
.wc-mla-ap-view .wc-mla-col-side .form-table select,
.wc-mla-ap-view .wc-mla-col-side .form-table textarea,
.wc-mla-ap-view .wc-mla-list-side .form-table input,
.wc-mla-ap-view .wc-mla-list-side .form-table select,
.wc-mla-ap-view .wc-mla-list-side .form-table textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}
/* Narrow number inputs */
.wc-mla-ap-view .wc-mla-col-side .form-table input[type="number"],
.wc-mla-ap-view .wc-mla-list-side .form-table input[type="number"] {
    width: 90px !important;
    max-width: 90px !important;
}
.wc-mla-ap-view .wc-mla-col-side .form-table .small-text,
.wc-mla-ap-view .wc-mla-list-side .form-table .small-text {
    width: 70px !important;
    max-width: 70px !important;
}

/* ── Inline style grids (business-groups uses style="display:grid") ── */
.wc-mla-ap-view .wrap > div[style*="grid"] {
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* ── Filter bar ── */
.wc-mla-ap-view .wc-mla-filter-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    gap: 12px !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding: 10px 14px !important;
    background: var(--ap-surface2) !important;
    border: 1px solid var(--ap-border) !important;
    border-radius: 8px !important;
    margin-bottom: 16px !important;
}
.wc-mla-ap-view .wc-mla-filter-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 200px !important;
}
.wc-mla-ap-view .wc-mla-filter-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--ap-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    white-space: nowrap !important;
}
.wc-mla-ap-view .wc-mla-filter-input {
    width: 100% !important;
    min-width: 0 !important;
}
.wc-mla-ap-view .wc-mla-filter-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    padding-bottom: 1px !important;
}

/* ── Tablet (768-1024px) ── */
@media (min-width: 768px) and (max-width: 1024px) {
    :root { --ap-sidebar-w: 200px; }
    .wc-mla-ap-view .wc-mla-two-col,
    .wc-mla-ap-view .wc-mla-list-with-form {
        grid-template-columns: minmax(0, 1fr) 260px !important;
    }
    .wc-mla-ap-view .wc-mla-col-side,
    .wc-mla-ap-view .wc-mla-list-side {
        width: 260px !important;
        max-width: 260px !important;
    }
}
/* ================================================================
   PORTAL LAYOUT v2.5.3 — ONE COLUMN STACKED
   Table = Row 1 (100% width)
   Form  = Row 2 (100% width, max 580px)
   No side-by-side. No horizontal overflow. No scrollbar.
   ================================================================ */

/* Ensure the portal content area never overflows */
.wc-mla-ap-content,
.wc-mla-ap-view {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* The view wrapper */
.wc-mla-ap-view .wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* ── STACKED LAYOUT: two-col becomes two rows ── */
.wc-mla-ap-view .wc-mla-two-col {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

.wc-mla-ap-view .wc-mla-col-main {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
}

/* Form panel below the table */
.wc-mla-ap-view .wc-mla-col-side {
    display: block !important;
    width: 100% !important;
    max-width: 580px !important;  /* readable form width */
}

/* ── STACKED LAYOUT: list+form also stacked ── */
.wc-mla-ap-view .wc-mla-list-layout,
.wc-mla-ap-view .wc-mla-list-with-form {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

.wc-mla-ap-view .wc-mla-list-main {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
}

.wc-mla-ap-view .wc-mla-list-side {
    display: block !important;
    width: 100% !important;
    max-width: 580px !important;
}

/* ── TABLES: always 100% of their container ── */
.wc-mla-ap-view .wc-mla-table-scroll-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    border: none !important;
    border-radius: 0 !important;
    -webkit-overflow-scrolling: touch;
}

.wc-mla-ap-view table.widefat,
.wc-mla-ap-view .wc-mla-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    box-sizing: border-box !important;
}

/* Table cells: clip long content */
.wc-mla-ap-view table.widefat th,
.wc-mla-ap-view table.widefat td {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    padding: 8px 10px !important;
}

/* Allow wrapping in name/description cells */
.wc-mla-ap-view table.widefat td:nth-child(2),
.wc-mla-ap-view table.widefat td.wrap {
    white-space: normal !important;
    word-break: break-word !important;
}

/* Actions column: stack buttons vertically, never clip */
.wc-mla-ap-view table.widefat td:last-child,
.wc-mla-ap-view table.widefat th:last-child {
    overflow: visible !important;
    white-space: normal !important;
    max-width: none !important;
    width: 90px !important;
}
.wc-mla-ap-view table.widefat td:last-child .button,
.wc-mla-ap-view table.widefat td:last-child button {
    display: inline-block !important;
    margin: 1px 1px 1px 0 !important;
    padding: 2px 7px !important;
    font-size: 11px !important;
}

/* ── POSTBOX/FORM in bottom panel ── */
.wc-mla-ap-view .wc-mla-col-side .postbox,
.wc-mla-ap-view .wc-mla-list-side .postbox {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.wc-mla-ap-view .wc-mla-col-side .inside,
.wc-mla-ap-view .wc-mla-list-side .inside {
    padding: 16px !important;
}

/* Form table in bottom panel */
.wc-mla-ap-view .wc-mla-col-side .form-table,
.wc-mla-ap-view .wc-mla-list-side .form-table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
}

.wc-mla-ap-view .wc-mla-col-side .form-table th,
.wc-mla-ap-view .wc-mla-list-side .form-table th {
    width: 160px !important;
    padding: 10px 12px 10px 0 !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    color: var(--ap-text-muted) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.wc-mla-ap-view .wc-mla-col-side .form-table td,
.wc-mla-ap-view .wc-mla-list-side .form-table td {
    padding: 8px 0 !important;
    vertical-align: middle !important;
}

.wc-mla-ap-view .wc-mla-col-side .form-table input[type="text"],
.wc-mla-ap-view .wc-mla-col-side .form-table input[type="number"],
.wc-mla-ap-view .wc-mla-col-side .form-table input[type="email"],
.wc-mla-ap-view .wc-mla-col-side .form-table select,
.wc-mla-ap-view .wc-mla-col-side .form-table textarea,
.wc-mla-ap-view .wc-mla-list-side .form-table input[type="text"],
.wc-mla-ap-view .wc-mla-list-side .form-table input[type="number"],
.wc-mla-ap-view .wc-mla-list-side .form-table select,
.wc-mla-ap-view .wc-mla-list-side .form-table textarea {
    max-width: 360px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ── Kill any inline styles that force width/overflow ── */
.wc-mla-ap-view [style*="overflow-x:auto"],
.wc-mla-ap-view [style*="overflow-x: auto"] {
    overflow-x: hidden !important;
}


/* ── Month tabs: Jan | Feb | Mar … ── */
.wc-mla-chart-month-tabs{
    display:flex;
    flex-wrap:nowrap;
    gap:3px;
    padding:6px 12px;
    background:var(--ap-bg);
    border-bottom:1px solid var(--ap-border);
    overflow-x:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
}
.wc-mla-chart-month-tabs::-webkit-scrollbar{display:none}
.wc-mla-chart-month-tab{
    flex-shrink:0;
    background:#1e1e3d!important;          /* dark — never white */
    border:1px solid #3d3d6b!important;
    color:#9ca3c0!important;               /* visible muted text */
    border-radius:4px!important;
    padding:3px 8px!important;
    font-size:11px!important;
    font-weight:500!important;
    font-family:inherit!important;
    cursor:pointer!important;
    transition:all .15s!important;
    white-space:nowrap!important;
    min-width:32px!important;
    text-align:center!important;
    -webkit-appearance:none!important;
    appearance:none!important;
}
.wc-mla-chart-month-tab:hover{
    border-color:#60a5fa!important;
    color:#93c5fd!important;
    background:#2a2a4e!important;
}
.wc-mla-chart-month-tab.active{
    background:#2563eb!important;
    border-color:#2563eb!important;
    color:#ffffff!important;
    font-weight:700!important;
}





/* ── Business groups: fix any white text on white bg ── */
.wc-mla-ap-view .wc-mla-wrap *,
.wc-mla-ap-view .wrap *{
    /* catch any hardcoded white backgrounds */
}
.wc-mla-ap-view [style*="background:#fff"],
.wc-mla-ap-view [style*="background: #fff"],
.wc-mla-ap-view [style*="background:white"],
.wc-mla-ap-view [style*="background: white"],
.wc-mla-ap-view [style*="background-color:#fff"],
.wc-mla-ap-view [style*="background-color: #fff"],
.wc-mla-ap-view [style*="background-color:white"]{
    background:#1e1e3d!important;
    color:#e8eaf0!important;
}
/* catch light text that becomes invisible on dark bg */
.wc-mla-ap-view [style*="color:#000"],
.wc-mla-ap-view [style*="color: #000"],
.wc-mla-ap-view [style*="color:black"],
.wc-mla-ap-view [style*="color:#333"],
.wc-mla-ap-view [style*="color:#444"],
.wc-mla-ap-view [style*="color:#555"]{
    color:#e8eaf0!important;
}
/* Business groups hierarchy text */
.wc-mla-ap-view .wc-mla-hierarchy,
.wc-mla-ap-view p.description{
    color:#9ca3c0!important;
    background:transparent!important;
}

/* ================================================================
   SIDEBAR — DEFINITIVE v2.6.0
   Sidebar shell fixed. Only nav scrolls. Scrollbar visible + themed.
   ================================================================ */

/* Sidebar shell: fixed flex column — header and footer never move */
.wc-mla-ap-sidebar{
    display:flex!important;
    flex-direction:column!important;
    height:100vh!important;
    overflow:hidden!important;           /* shell never scrolls */
    /* No scrollbar-width:none here — the SHELL doesn't scroll anyway */
}

/* Sidebar outer element: no scrollbar needed (it doesn't scroll) */
.wc-mla-ap-sidebar::-webkit-scrollbar{
    display:none!important;
}

/* Nav area: takes remaining height, scrolls when items overflow */
.wc-mla-ap-nav{
    flex:1!important;
    min-height:0!important;              /* CRITICAL: allows flex child to shrink */
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:4px 0!important;
    /* Firefox: thin themed scrollbar */
    scrollbar-width:thin!important;
    scrollbar-color:#3a3a6e var(--ap-surface,#12122a)!important;
}

/* WebKit: thin themed scrollbar matching sidebar bg */
.wc-mla-ap-nav::-webkit-scrollbar{
    width:4px!important;
    background:var(--ap-surface,#12122a)!important;
}
.wc-mla-ap-nav::-webkit-scrollbar-track{
    background:var(--ap-surface,#12122a)!important;
}
.wc-mla-ap-nav::-webkit-scrollbar-thumb{
    background:#3a3a6e!important;
    border-radius:4px!important;
    min-height:40px!important;
}
.wc-mla-ap-nav::-webkit-scrollbar-thumb:hover{
    background:#5a5aae!important;
}

/* Sidebar header — fixed height, never shrinks */
.wc-mla-ap-sidebar-header{
    flex-shrink:0!important;
    height:52px!important;min-height:52px!important;
    padding:0 12px!important;
    gap:10px!important;
    display:flex!important;
    align-items:center!important;
    border-bottom:1px solid var(--ap-border)!important;
}

/* Sidebar footer — fixed, never shrinks */
.wc-mla-ap-sidebar-footer{
    flex-shrink:0!important;
    padding:10px 14px!important;
    border-top:1px solid var(--ap-border)!important;
}

/* ── Group header labels — bigger, bold, coloured, no link ── */
.wc-mla-ap-nav-group-header{
    /* Display only — never clickable */
    pointer-events:none!important;
    user-select:none!important;
    cursor:default!important;
    /* Spacing */
    display:block!important;
    padding:16px 16px 5px 14px!important;
    margin-top:6px!important;
    /* Typography — visually distinct from nav items */
    font-size:10.5px!important;          /* ~15% bigger than 9px items */
    font-weight:800!important;
    letter-spacing:.14em!important;
    text-transform:uppercase!important;
    line-height:1.3!important;
    white-space:nowrap!important;
    /* Color — clearly different from nav items (#9ca3c0) */
    color:#7dd3fc!important;             /* sky blue — bright, readable */
    background:transparent!important;
    /* Separator line above each group */
    border-top:1px solid rgba(255,255,255,.06)!important;
    /* No hover, no active, no focus ring */
}
.wc-mla-ap-nav-group-header:first-child{
    border-top:none!important;
    margin-top:0!important;
    padding-top:10px!important;
}
/* Ensure no theme or inherited styles add pointer/hover to headers */
.wc-mla-ap-nav-group-header:hover{
    background:transparent!important;
    color:#7dd3fc!important;
    cursor:default!important;
}
.wc-mla-ap-nav-group-header:focus{
    outline:none!important;
}

/* ── Nav items — compact to fit more items without scroll ── */
#wc-mla-ap-sidebar .wc-mla-ap-nav-item{
    padding:7px 14px!important;          /* reduced from 10px to 7px */
    font-size:12px!important;
}

/* ── Sign Out button ── */
.wc-mla-ap-btn-signout{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    width:auto!important;
    max-width:none!important;
    text-align:center!important;
    padding:6px 14px!important;
    background:rgba(248,113,113,.12)!important;
    border:1px solid rgba(248,113,113,.4)!important;
    color:#f87171!important;
    border-radius:6px!important;
    font-size:12px!important;
    font-weight:600!important;
    text-decoration:none!important;
    white-space:nowrap!important;
    cursor:pointer!important;
    transition:background .15s,color .15s!important;
    box-sizing:border-box!important;
    visibility:visible!important;
    opacity:1!important;
}
.wc-mla-ap-btn-signout:hover{
    background:rgba(248,113,113,.2)!important;
    color:#fca5a5!important;
    text-decoration:none!important;
}
/* Sidebar footer sign-out: full-width block */
.wc-mla-ap-sidebar-links .wc-mla-ap-btn-signout{
    display:block!important;
    width:100%!important;
}

/* User row — compact */
.wc-mla-ap-user-row{
    margin-bottom:8px!important;
}
.wc-mla-ap-user-name{font-size:12px!important}
.wc-mla-ap-user-role{font-size:10px!important}

/* Inline critical sidebar scrollbar override */

/* ================================================================
   WHITE BACKGROUND ELIMINATION — v2.5.9
   Catches all hardcoded light backgrounds in admin views
   that render as white-on-white in the dark portal.
   ================================================================ */

/* Any inline style with light background → dark */
.wc-mla-ap-view [style*="background:#fff"]{background:#1e1e3d!important;color:#e8eaf0!important}
.wc-mla-ap-view [style*="background: #fff"]{background:#1e1e3d!important;color:#e8eaf0!important}
.wc-mla-ap-view [style*="background:#FFF"]{background:#1e1e3d!important;color:#e8eaf0!important}
.wc-mla-ap-view [style*="background:white"]{background:#1e1e3d!important;color:#e8eaf0!important}
.wc-mla-ap-view [style*="background: white"]{background:#1e1e3d!important;color:#e8eaf0!important}
.wc-mla-ap-view [style*="background:#fafafa"]{background:#16162e!important;color:#e8eaf0!important}
.wc-mla-ap-view [style*="background: #fafafa"]{background:#16162e!important;color:#e8eaf0!important}
.wc-mla-ap-view [style*="background:#f9f9f9"]{background:#16162e!important;color:#e8eaf0!important}
.wc-mla-ap-view [style*="background: #f9f9f9"]{background:#16162e!important;color:#e8eaf0!important}
.wc-mla-ap-view [style*="background:#f0f6fc"]{background:rgba(96,165,250,.1)!important;color:#93c5fd!important}
.wc-mla-ap-view [style*="background:#e8f0fa"]{background:rgba(96,165,250,.1)!important;color:#93c5fd!important}
.wc-mla-ap-view [style*="background:#d4edda"]{background:rgba(74,222,128,.1)!important;color:#4ade80!important}
.wc-mla-ap-view [style*="background:#fff3cd"]{background:rgba(251,191,36,.1)!important;color:#fbbf24!important}
.wc-mla-ap-view [style*="background:#f8d7da"]{background:rgba(248,113,113,.1)!important;color:#f87171!important}
.wc-mla-ap-view [style*="background-color:#fff"]{background:#1e1e3d!important;color:#e8eaf0!important}
.wc-mla-ap-view [style*="background-color: #fff"]{background:#1e1e3d!important;color:#e8eaf0!important}
.wc-mla-ap-view [style*="background-color:white"]{background:#1e1e3d!important;color:#e8eaf0!important}

/* Dark text on dark background fix */
.wc-mla-ap-view [style*="color:#000"]{color:#e8eaf0!important}
.wc-mla-ap-view [style*="color: #000"]{color:#e8eaf0!important}
.wc-mla-ap-view [style*="color:#111"]{color:#e8eaf0!important}
.wc-mla-ap-view [style*="color:#222"]{color:#e8eaf0!important}
.wc-mla-ap-view [style*="color:#333"]{color:#e8eaf0!important}
.wc-mla-ap-view [style*="color:#444"]{color:#e8eaf0!important}
.wc-mla-ap-view [style*="color:#555"]{color:#e8eaf0!important}
.wc-mla-ap-view [style*="color:black"]{color:#e8eaf0!important}

/* WP admin notice backgrounds */
.wc-mla-ap-view .notice{
    background:#1e1e3d!important;
    color:#e8eaf0!important;
}
.wc-mla-ap-view .notice-success{border-left-color:#4ade80!important}
.wc-mla-ap-view .notice-error{border-left-color:#f87171!important;color:#f87171!important}
.wc-mla-ap-view .notice-warning{border-left-color:#fbbf24!important}
.wc-mla-ap-view .notice p{color:inherit!important;margin:0!important}

/* WP form inputs that get white bg from wp-admin styles */
.wc-mla-ap-view input[type="text"]:not([style*="background"]),
.wc-mla-ap-view input[type="number"]:not([style*="background"]),
.wc-mla-ap-view input[type="email"]:not([style*="background"]),
.wc-mla-ap-view input[type="url"]:not([style*="background"]),
.wc-mla-ap-view input[type="password"]:not([style*="background"]),
.wc-mla-ap-view select:not([style*="background"]),
.wc-mla-ap-view textarea:not([style*="background"]){
    background:#1e1e3d!important;
    color:#e8eaf0!important;
    border-color:#3d3d6b!important;
}
.wc-mla-ap-view input::placeholder,
.wc-mla-ap-view textarea::placeholder{
    color:#6b7399!important;
}

/* Business groups hierarchy paragraph */
.wc-mla-ap-view .wc-mla-hierarchy,
.wc-mla-ap-view .wc-mla-info-box,
.wc-mla-ap-view blockquote{
    background:#1e1e3d!important;
    color:#9ca3c0!important;
    border-left:3px solid #3d3d6b!important;
}

/* ================================================================
   GLOBAL WHITE-ON-WHITE ELIMINATION  v2.5.9
   Catches any remaining hardcoded light colours from admin views
   ================================================================ */

/* Any element with a white/near-white background */
.wc-mla-ap-view [style*="background:#fff"],
.wc-mla-ap-view [style*="background: #fff"],
.wc-mla-ap-view [style*="background-color:#fff"],
.wc-mla-ap-view [style*="background-color: #fff"],
.wc-mla-ap-view [style*="background:white"],
.wc-mla-ap-view [style*="background: white"],
.wc-mla-ap-view [style*="background:#fafafa"],
.wc-mla-ap-view [style*="background:#f9f9f9"],
.wc-mla-ap-view [style*="background:#f8f8f8"],
.wc-mla-ap-view [style*="background:#f0f0f0"],
.wc-mla-ap-view [style*="background:#efefef"],
.wc-mla-ap-view [style*="background:#e8f0fa"] {
    background:#1e1e3d!important;
}

/* Any element with dark/black text (invisible on dark bg) */
.wc-mla-ap-view [style*="color:#000"],
.wc-mla-ap-view [style*="color: #000"],
.wc-mla-ap-view [style*="color:black"],
.wc-mla-ap-view [style*="color:#111"],
.wc-mla-ap-view [style*="color:#222"],
.wc-mla-ap-view [style*="color:#333"],
.wc-mla-ap-view [style*="color: #333"],
.wc-mla-ap-view [style*="color:#444"],
.wc-mla-ap-view [style*="color:#555"],
.wc-mla-ap-view [style*="color: #555"],
.wc-mla-ap-view [style*="color:#666"],
.wc-mla-ap-view [style*="color: #666"],
.wc-mla-ap-view [style*="color:#777"] {
    color:#e8eaf0!important;
}

/* Light borders to dark */
.wc-mla-ap-view [style*="border-color:#e0e0e0"],
.wc-mla-ap-view [style*="border-color:#ddd"],
.wc-mla-ap-view [style*="border-color:#ccc"],
.wc-mla-ap-view [style*="border:1px solid #ccc"],
.wc-mla-ap-view [style*="border:1px solid #ddd"],
.wc-mla-ap-view [style*="border:1px solid #e0e0e0"] {
    border-color:#2d2d52!important;
}

/* WP default blue #2271b1 → portal accent */
.wc-mla-ap-view [style*="background:#2271b1"] {
    background:#2563eb!important;
}
.wc-mla-ap-view [style*="color:#2271b1"],
.wc-mla-ap-view [style*="color: #2271b1"] {
    color:#60a5fa!important;
}

/* Catch inline bg on <tr> elements */
.wc-mla-ap-view tr[style*="background:#e8f0fa"],
.wc-mla-ap-view tr[style*="background: #e8f0fa"] {
    background:rgba(96,165,250,.1)!important;
}

/* Matrix-groups specific embedded CSS overrides */
.wc-mla-ap-view .mg-legs-grid th {
    color:#9ca3c0!important;
    background:#1a1a36!important;
    border-bottom:2px solid #2d2d52!important;
}
.wc-mla-ap-view .mg-level-fields label,
.wc-mla-ap-view .mg-field label {
    color:#9ca3c0!important;
}
.wc-mla-ap-view .mg-card {
    background:#1a1a36!important;
    border-color:#2d2d52!important;
}
.wc-mla-ap-view .mg-card-head {
    background:#21213f!important;
    border-color:#2d2d52!important;
    color:#e8eaf0!important;
}
.wc-mla-ap-view .mg-level-block {
    border-color:#2d2d52!important;
}
.wc-mla-ap-view .mg-level-head {
    background:#21213f!important;
    border-color:#2d2d52!important;
    color:#e8eaf0!important;
}

/* Nav group headers — final definitive styles */
.wc-mla-ap-nav .wc-mla-ap-nav-group-header,
#wc-mla-ap-sidebar .wc-mla-ap-nav-group-header {
    display:block!important;
    padding:14px 14px 4px!important;
    margin-top:4px!important;
    font-size:11px!important;            /* 15% bigger than 9.5px items */
    font-weight:800!important;
    letter-spacing:.12em!important;
    text-transform:uppercase!important;
    color:#7dd3fc!important;             /* sky blue, clearly different from #9ca3c0 items */
    background:transparent!important;
    border-top:1px solid rgba(255,255,255,.05)!important;
    pointer-events:none!important;
    cursor:default!important;
    user-select:none!important;
    line-height:1.3!important;
    /* Never looks like a button */
    border-left:none!important;
    border-right:none!important;
    border-bottom:none!important;
    outline:none!important;
}
.wc-mla-ap-nav .wc-mla-ap-nav-group-header:first-child,
#wc-mla-ap-sidebar .wc-mla-ap-nav-group-header:first-child {
    border-top:none!important;
    padding-top:8px!important;
    margin-top:0!important;
}

/* ══════════════════════════════════════════════════════════════════
   PAYOUTS — Approved Balance Table
   Responsive, fixed-layout, single-row-per-record, sticky header
   ══════════════════════════════════════════════════════════════════ */

/* Outer scroll wrapper */
.wc-mla-payout-table-wrap {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--ap-border, #2d2d52);
    border-radius: 6px;
    margin-top: 8px;
}

/* Table itself — fixed layout so columns respect col widths */
.wc-mla-payout-bal-table {
    table-layout: fixed !important;
    width: 100% !important;
    min-width: 820px; /* scroll kicks in below 820px */
    border-collapse: collapse !important;
    white-space: nowrap;
}

/* Column widths via colgroup */
.wc-mla-payout-bal-table col.col-id     { width: 44px; }
.wc-mla-payout-bal-table col.col-aff    { width: auto; min-width: 150px; }
.wc-mla-payout-bal-table col.col-code   { width: 88px; }
.wc-mla-payout-bal-table col.col-bal    { width: 88px; }
.wc-mla-payout-bal-table col.col-detail { width: 200px; }
.wc-mla-payout-bal-table col.col-method { width: 130px; }
.wc-mla-payout-bal-table col.col-ref    { width: 148px; }
.wc-mla-payout-bal-table col.col-action { width: 86px; }

/* Sticky header */
.wc-mla-payout-bal-table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    background: var(--ap-surface2, #181830) !important;
    border-bottom: 2px solid var(--ap-border, #2d2d52) !important;
    padding: 7px 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    white-space: nowrap !important;
    color: var(--ap-text-muted, #9ca3c0) !important;
}

/* All cells — compact, single-line */
.wc-mla-payout-bal-table td {
    padding: 6px 10px !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 12px !important;
    border-bottom: 1px solid var(--ap-border, #2d2d52) !important;
}

/* ── Cell helpers ── */
.wc-mla-cell-muted  { color: var(--ap-text-muted, #9ca3c0); font-size: 11px; }
.wc-mla-cell-small  { font-size: 11px; }
.wc-mla-cell-name   { font-weight: 600; font-size: 13px; margin-right: 5px; }
.wc-mla-cell-sub    { font-size: 11px; color: var(--ap-text-muted, #9ca3c0); }
.wc-mla-cell-strong { font-weight: 700; font-size: 13px; }
.wc-mla-warn-text   { color: #d97706; font-size: 11px; }
.wc-mla-code        { font-size: 11px; background: var(--ap-surface2,#181830); padding: 1px 5px; border-radius: 3px; }

/* Payment Details — truncated with tooltip via title= */
.wc-mla-detail-cell {
    display: block;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: help;
    font-size: 12px;
}

/* ── Pay form — each row has its own form; inputs flush to cell ── */
.wc-mla-pay-form {
    display: contents; /* form is invisible box; inputs remain as td children */
}
.wc-mla-pay-select {
    width: 100% !important;
    font-size: 11px !important;
    padding: 3px 4px !important;
    background: var(--ap-surface, #1e1e3f) !important;
    color: var(--ap-text, #e8eaf0) !important;
    border: 1px solid var(--ap-border, #2d2d52) !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
}
.wc-mla-pay-ref {
    width: 100% !important;
    font-size: 11px !important;
    padding: 3px 6px !important;
    background: var(--ap-surface, #1e1e3f) !important;
    color: var(--ap-text, #e8eaf0) !important;
    border: 1px solid var(--ap-border, #2d2d52) !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
}
.wc-mla-pay-btn {
    font-size: 11px !important;
    padding: 4px 8px !important;
    white-space: nowrap !important;
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* ── Responsive: tablet/mobile — wrapper scrolls horizontally ── */
@media (max-width: 1024px) {
    .wc-mla-payout-table-wrap {
        overflow-x: auto !important;
    }
    .wc-mla-payout-bal-table {
        min-width: 820px !important;
    }
}