/* ============================================================
   WMC Frontend Portal — Unified BahyGroup design (v2.0.8)
   Adopts the contract from mu-plugins/bg-portal-design-spec.md:
     - CSS variables from --bg-* contract (no hard-coded hex)
     - Class names from the .bg-portal-* / .bg-nav-* / .bg-tab-*
       / .bg-form-* / .bg-stat-* / .bg-table / .bg-status family
     - RTL/LTR auto-flips via [dir] attribute on the wrapper
     - Mobile-first responsive (tablet 1024 / phone 768 / small 480)

   WMC-specific overrides kept slim (QR modal, network card,
   antiban toggle) — anything reusable has been promoted into
   the mu-plugin shared CSS in bg-shared-styles.php.

   Loaded AFTER bg-shared-styles + bg-portal-spec so plugin-only
   rules override the shared cascade last.
   ============================================================ */

:root {
    /* WMC-specific tokens — only things NOT in --bg-* contract */
    --wmc-muted-text: var(--bg-muted, #646970);
    --wmc-soft-bg: var(--bg-bg-alt, #f6f7f7);
    --wmc-soft-border: var(--bg-border, #dcdcde);
    /* status colors (semantic, not themed) per bg-portal-spec §2 */
    --wmc-success: #4a6b3a;
    --wmc-success-bg: #e8f0e0;
    --wmc-warn: #dba617;
    --wmc-warn-bg: #fff4d6;
    --wmc-danger: #c0504e;
    --wmc-danger-bg: #f8e0e0;
    --wmc-info: #3a5a8a;
    --wmc-info-bg: #e0e8f0;
}

/* --- 1. Page wrapper ------------------------------------------------ */
.bg-portal-wrap {
    font-family: var(--bg-body-font, -apple-system, BlinkMacSystemFont, "Segoe UI", "Tahoma", "Arial", "Cairo", "Tajawal", sans-serif);
    color: var(--bg-text, #1d2327);
    background: var(--bg-bg, #fff);
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 20px;
    min-height: 80vh;
    display: flex;
    flex-direction: row-reverse; /* RTL: sidebar on the right */
    text-align: right;
}
[dir="ltr"] .bg-portal-wrap { flex-direction: row; text-align: left; }
.bg-portal-wrap *, .bg-portal-wrap *::before, .bg-portal-wrap *::after { box-sizing: border-box; }

/* --- 2. Sidebar (dark, 220px) -------------------------------------- */
.bg-portal-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: var(--bg-sidebar-bg, #2d2520);
    color: var(--bg-sidebar-text, #d4c8b8);
    border-radius: var(--bg-radius, 12px);
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.bg-portal-user {
    padding: 14px 16px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: 12px;
}
.bg-portal-user__email { color: #fff; font-weight: 600; word-break: break-all; line-height: 1.3; }
.bg-portal-user__role {
    color: var(--bg-primary, #c8a882);
    font-size: 11px;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.bg-portal-user__logout {
    display: block;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(255,255,255,0.12);
    color: var(--bg-sidebar-text, #d4c8b8);
    text-decoration: none;
    font-size: 12px;
    cursor: pointer;
    background: transparent;
    border-top-style: dashed;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    width: 100%;
    text-align: inherit;
    font-family: inherit;
}
.bg-portal-user__logout:hover { color: var(--bg-primary, #c8a882); }

.bg-portal-nav {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    flex: 1;
    overflow-y: auto;
}

/* --- 3. Nav item ----------------------------------------------------- */
.bg-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: none;
    color: var(--bg-sidebar-text, #d4c8b8);
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    text-decoration: none;
    text-align: inherit;
    transition: background .15s, color .15s;
    border-inline-start: 3px solid transparent; /* logical property: right in RTL, left in LTR */
}
.bg-nav-item:hover { background: rgba(255,255,255,0.05); color: #fff; }
.bg-nav-item--active,
.bg-nav-item.bg-nav-item--active {
    background: rgba(255,255,255,0.08);
    color: var(--bg-primary, #c8a882);
    border-inline-start-color: var(--bg-primary, #c8a882);
}
.bg-nav-item__icon { font-size: 16px; flex-shrink: 0; width: 20px; text-align: center; }
.bg-nav-item__label { flex: 1; }

/* --- 4. Main content panel ------------------------------------------- */
.bg-portal-main {
    flex: 1;
    min-width: 0;
    background: var(--bg-card, #fff);
    border: 1px solid var(--bg-border, #e8e2d8);
    border-radius: var(--bg-radius, 12px);
    padding: 24px;
    margin-inline-end: 16px; /* gap between sidebar (right in RTL) and main (left) */
}
[dir="ltr"] .bg-portal-main { margin-inline-end: 0; margin-inline-start: 16px; }

/* --- 5. Tab section + title + hint ---------------------------------- */
.bg-tab-section { display: none; padding: 4px 0; }
.bg-tab-section--active { display: block; }
.bg-tab-section__title {
    font-family: var(--bg-head-font, inherit);
    font-size: 22px;
    font-weight: 700;
    color: var(--bg-text, #1d2327);
    margin: 0 0 6px;
}
.bg-tab-section__hint {
    color: var(--bg-muted, #646970);
    font-size: 13px;
    margin: 0 0 20px;
}
.bg-tab-section__sub {
    font-size: 16px;
    margin: 18px 0 8px;
    color: var(--bg-text, #1d2327);
    font-weight: 600;
}
.bg-tab-section hr {
    border: none;
    border-top: 1px solid var(--bg-border, #e8e2d8);
    margin: 32px 0;
}

/* --- 6. Stats grid + cards ------------------------------------------ */
.bg-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.bg-stat-card {
    background: var(--bg-card, #fff);
    border: 1px solid var(--bg-border, #e8e2d8);
    border-radius: var(--bg-radius, 8px);
    padding: 18px 16px;
    text-align: center;
    border-top: 3px solid var(--bg-border, #e8e2d8);
}
.bg-stat-card--primary { border-top-color: var(--bg-primary, #c8a882); }
.bg-stat-card--success { border-top-color: var(--wmc-success); }
.bg-stat-card--warn    { border-top-color: var(--wmc-warn); }
.bg-stat-card--danger  { border-top-color: var(--wmc-danger); }
.bg-stat-card--info    { border-top-color: var(--wmc-info); }
.bg-stat-card__num {
    font-size: 28px;
    font-weight: 700;
    color: var(--bg-text, #1d2327);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.bg-stat-card__label {
    font-size: 12px;
    color: var(--bg-muted, #646970);
    margin-top: 4px;
}

/* --- 7. Forms -------------------------------------------------------- */
.bg-form {
    background: var(--bg-card, #fff);
    border: 1px solid var(--bg-border, #e8e2d8);
    border-radius: var(--bg-radius, 8px);
    padding: 18px 20px;
    margin-bottom: 20px;
}
.bg-form__title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--bg-text, #1d2327);
}
.bg-form__desc {
    color: var(--bg-muted, #646970);
    font-size: 12px;
    margin: 4px 0 0;
}
.bg-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
.bg-form-field { display: flex; flex-direction: column; gap: 4px; }
.bg-form-field--full { grid-column: 1 / -1; }
.bg-form-field > span,
.bg-form-field > label {
    font-size: 12px;
    font-weight: 600;
    color: var(--bg-muted, #646970);
}
.bg-form-field input,
.bg-form-field select,
.bg-form-field textarea {
    padding: 9px 12px;
    border: 1px solid var(--bg-border, #e8e2d8);
    border-radius: var(--bg-radius-sm, 6px);
    font-size: 14px;
    font-family: inherit;
    background: var(--bg-bg, #fff);
    color: var(--bg-text, #1d2327);
    transition: border-color .15s, box-shadow .15s;
}
.bg-form-field input:focus,
.bg-form-field select:focus,
.bg-form-field textarea:focus {
    outline: none;
    border-color: var(--bg-primary, #c8a882);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bg-primary, #c8a882) 20%, transparent);
}
.bg-form-field textarea { min-height: 60px; resize: vertical; }
.bg-form-field input[type="checkbox"],
.bg-form-field input[type="radio"] {
    width: auto;
    padding: 0;
}
.bg-form__actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

/* --- 8. Buttons (extends .bg-btn from bg-shared-styles) -------------- */
.bg-btn--primary,
.bg-btn--secondary,
.bg-btn--danger,
.bg-btn--sm {
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: var(--bg-radius-sm, 6px);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: opacity .15s, transform .15s;
}
.bg-btn--primary   { background: var(--bg-primary, #c8a882); color: var(--bg-on-primary, #2d2520); }
.bg-btn--secondary { background: transparent; color: var(--bg-text, #1d2327); border-color: var(--bg-border, #e8e2d8); }
.bg-btn--danger    { background: var(--wmc-danger); color: #fff; }
.bg-btn--sm        { padding: 5px 10px; font-size: 12px; }
.bg-btn:hover      { opacity: .9; transform: translateY(-1px); }
.bg-btn:disabled   { opacity: .5; cursor: not-allowed; transform: none; }

/* WMC legacy buttons (the templates still use .button / .button-primary
   in many places — keep them readable but make them inherit bg tokens). */
.bg-portal-wrap .button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--bg-border, #dcdcde);
    background: var(--bg-bg-alt, #f6f7f7);
    color: var(--bg-text, #1d2327);
    border-radius: var(--bg-radius-sm, 6px);
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
    text-decoration: none;
    transition: background .15s, transform .05s;
}
.bg-portal-wrap .button:hover  { background: color-mix(in srgb, var(--bg-border, #dcdcde) 60%, #fff); }
.bg-portal-wrap .button:active { transform: translateY(1px); }
.bg-portal-wrap .button-primary,
.bg-portal-wrap .button.button-primary {
    background: var(--bg-primary, #00a32a);
    color: var(--bg-on-primary, #fff);
    border-color: var(--bg-primary, #00a32a);
    font-weight: 600;
}
.bg-portal-wrap .button-primary:hover { opacity: .92; }
.bg-portal-wrap .button-large { padding: 12px 24px; font-size: 16px; }

/* --- 9. Tables ------------------------------------------------------- */
.bg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.bg-table thead th {
    background: var(--bg-primary, #c8a882);
    color: var(--bg-on-primary, #2d2520);
    padding: 10px 12px;
    text-align: inherit;
    font-size: 12px;
    font-weight: 700;
    border: none;
    white-space: nowrap;
}
.bg-table tbody tr { border-bottom: 1px solid var(--bg-border, #e8e2d8); transition: background .15s; }
.bg-table tbody tr:nth-child(even) { background: var(--bg-bg-alt, #faf6ef); }
.bg-table tbody tr:hover { background: var(--bg-bg-alt, #faf6ef); }
.bg-table td { padding: 10px 12px; text-align: inherit; color: var(--bg-text, #1d2327); }
.bg-table code { background: rgba(0,0,0,0.05); padding: 1px 6px; border-radius: 3px; font-size: 12px; }

/* Keep legacy .widefat styling readable — older tabs still ship with it. */
.bg-portal-wrap .widefat {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    background: var(--bg-bg, #fff);
    font-size: 13px;
}
.bg-portal-wrap .widefat th,
.bg-portal-wrap .widefat td {
    padding: 10px 12px;
    text-align: inherit;
    border-bottom: 1px solid var(--bg-border, #dcdcde);
}
.bg-portal-wrap .widefat th {
    background: var(--bg-bg-alt, #f6f7f7);
    font-weight: 700;
    color: var(--bg-text, #1d2327);
    font-size: 12px;
}
.bg-portal-wrap .widefat tbody tr:hover { background: var(--bg-bg-alt, #f6f7f7); }

/* --- 10. Status badges (semantic) ----------------------------------- */
.bg-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.bg-status--ok    { background: var(--wmc-success-bg); color: var(--wmc-success); }
.bg-status--warn  { background: var(--wmc-warn-bg);    color: #8a6a1a; }
.bg-status--err   { background: var(--wmc-danger-bg);  color: #8a3a3a; }
.bg-status--info  { background: var(--wmc-info-bg);    color: var(--wmc-info); }
.bg-status--muted { background: #efe9dc;                color: #6a5a4a; }
.bg-status--running { background: var(--wmc-success-bg); color: var(--wmc-success); }
.bg-status--paused  { background: var(--wmc-warn-bg);    color: #8a6a1a; }
.bg-status--draft   { background: #efe9dc;                color: #6a5a4a; }
.bg-status--done    { background: var(--wmc-info-bg);    color: var(--wmc-info); }

/* --- 11. Notices / alerts ------------------------------------------- */
.bg-notice {
    padding: 12px 16px;
    border-radius: var(--bg-radius-sm, 6px);
    margin: 12px 0;
    border-inline-start: 4px solid;
    background: var(--bg-bg, #fff);
    color: var(--bg-text, #1d2327);
}
.bg-notice p { margin: 0; }
.bg-notice--success { border-color: var(--wmc-success); background: #f0fdf4; color: #14532d; }
.bg-notice--error,
.bg-notice--warning { border-color: var(--wmc-warn);    background: #fefce8; color: #713f12; }
.bg-notice--info    { border-color: var(--bg-secondary, #2271b1); background: #eff6ff; color: #1e3a8a; }

/* --- 12. Empty / loading states ------------------------------------- */
.bg-empty,
.bg-loading {
    text-align: center;
    padding: 40px 20px;
    color: var(--bg-muted, #646970);
}

/* --- 13. WMC-specific widgets (kept slim — not promoted to shared) --- */

/* QR modal */
#wmc-qr-modal,
#wmc-peer-send-modal {
    animation: wmc-fade-in .2s ease;
}
@keyframes wmc-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.wmc-qr-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9999;
    display: none; align-items: center; justify-content: center;
}
.wmc-qr-modal[style*="display: flex"] { display: flex !important; }
.wmc-qr-modal__panel {
    background: var(--bg-card, #fff);
    border-radius: var(--bg-radius, 8px);
    padding: 24px;
    max-width: 380px;
    width: 92%;
    text-align: center;
}
.wmc-qr-modal__content { min-height: 300px; display: flex; align-items: center; justify-content: center; }

/* Network / antiban / client-scope cards */
.wmc-network-card,
.wmc-license-card,
.wmc-client-scope {
    background: var(--bg-card, #fff);
    border: 1px solid var(--bg-border, #e8e2d8);
    border-radius: var(--bg-radius, 12px);
    padding: 22px;
    margin: 14px 0;
    max-width: 520px;
}
.wmc-client-scope { border-inline-start: 4px solid var(--bg-primary, #25d366); max-width: none; }

/* Status banners */
.wmc-banner {
    padding: 12px;
    border-radius: var(--bg-radius-sm, 6px);
    margin: 16px 0;
    border-inline-start: 4px solid;
}
.wmc-banner--info  { background: var(--wmc-info-bg);   border-color: var(--wmc-info, #1da1f2); }
.wmc-banner--warn  { background: var(--wmc-warn-bg);   border-color: var(--wmc-warn, #ff9800); }
.wmc-banner--ok    { background: var(--wmc-success-bg); border-color: var(--wmc-success, #2e9e5b); }
.wmc-banner--err   { background: var(--wmc-danger-bg);  border-color: var(--wmc-danger, #c0504e); }

/* Anti-Ban toggle switch */
.wmc-toggle { position: relative; display: inline-block; width: 44px; height: 24px; }
.wmc-toggle input { opacity: 0; width: 0; height: 0; }
.wmc-toggle-slider {
    position: absolute; cursor: pointer; top: 0; inset-inline: 0; bottom: 0;
    background: var(--bg-muted, #ccc); border-radius: 24px; transition: .3s;
}
.wmc-toggle-slider::before {
    position: absolute; content: ""; height: 18px; width: 18px;
    inset-inline-start: 3px; bottom: 3px; background: #fff;
    border-radius: 50%; transition: .3s;
}
.wmc-toggle input:checked + .wmc-toggle-slider { background: var(--wmc-success, #25d366); }
.wmc-toggle input:checked + .wmc-toggle-slider::before { transform: translateX(20px); }

/* Anti-Ban group fieldset */
.wmc-group-fs {
    border: 1px solid var(--bg-border, #dcdcde);
    border-radius: var(--bg-radius-sm, 6px);
    padding: 16px;
    margin: 20px 0;
    background: var(--bg-card, #fff);
}
.wmc-group-fs legend {
    font-size: 18px; font-weight: 700; padding: 0 12px;
    color: var(--bg-text, #1d2327);
}

/* Status ON/OFF pill */
.wmc-state-pill {
    padding: 4px 10px; border-radius: 3px; font-size: 13px;
    background: var(--wmc-success, #2e9e5b); color: #fff;
}

/* Template card grid + voice card grid */
.wmc-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    margin: 16px 0;
}
.wmc-card {
    background: var(--bg-card, #fff);
    border: 1px solid var(--bg-border, #dcdcde);
    border-radius: var(--bg-radius-sm, 6px);
    padding: 16px;
}
.wmc-card__title { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--bg-text, #1d2327); }
.wmc-card__body  { color: var(--bg-muted, #646970); font-size: 13px; margin: 0 0 12px; }

/* Voice card */
.wmc-voice-card audio { width: 100%; margin-bottom: 8px; }

/* Status / profile media card grid */
.wmc-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin: 16px 0; }
.wmc-media-card {
    background: var(--bg-card, #fff); border: 1px solid var(--bg-border, #dcdcde);
    border-radius: var(--bg-radius-sm, 6px); padding: 12px; text-align: center;
}
.wmc-media-card img,
.wmc-media-card video { width: 100%; height: 160px; object-fit: cover; border-radius: 4px; margin-bottom: 8px; }
.wmc-media-card video { background: #000; }
.wmc-media-card__meta { color: var(--bg-muted, #646970); font-size: 12px; margin: 0 0 4px; }
.wmc-media-card__caption { font-size: 13px; margin: 0 0 8px; color: var(--bg-text, #1d2327); }

/* Login / locked card */
.wmc-portal-locked {
    max-width: 500px; margin: 40px auto; text-align: center;
    background: var(--bg-card, #fff); border: 1px solid var(--bg-border, #dcdcde);
    border-radius: var(--bg-radius, 8px); padding: 40px 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.wmc-portal-locked h2 { margin: 0 0 12px; }
.wmc-portal-locked p { color: var(--bg-muted, #646970); margin: 8px 0; }
.wmc-portal-locked form { margin-top: 24px; text-align: right; }
.wmc-portal-locked input[type="text"],
.wmc-portal-locked input[type="password"] { margin-bottom: 12px; }
.wmc-portal-locked code { background: rgba(0,0,0,0.07); padding: 2px 6px; border-radius: 3px; }

/* Inline check-list (campaigns wizard templates/groups) */
.wmc-checklist {
    max-height: 200px;
    overflow: auto;
    background: var(--bg-bg-alt, #f6f7f7);
    padding: 12px;
    border-radius: var(--bg-radius-sm, 6px);
}
.wmc-checklist label { display: block; margin: 4px 0; color: var(--bg-text, #1d2327); }
.wmc-checklist small { color: var(--bg-muted, #646970); }

/* Progress bar (reports) */
.wmc-progress {
    background: var(--bg-bg-alt, #f6f7f7);
    border-radius: 3px; height: 20px; width: 100px; position: relative; overflow: hidden;
}
.wmc-progress__bar {
    height: 100%; border-radius: 3px;
    background: var(--bg-primary, #00a32a);
    transition: width .3s ease;
}
.wmc-progress--ok     .wmc-progress__bar { background: var(--wmc-success, #00a32a); }
.wmc-progress--warn   .wmc-progress__bar { background: var(--wmc-warn,    #dba617); }
.wmc-progress--err    .wmc-progress__bar { background: var(--wmc-danger,  #c0504e); }
.wmc-progress__label {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    font-size: 11px; line-height: 20px; color: var(--bg-text, #1d2327);
    font-weight: 700;
}

/* Activation layout */
.wmc-activation-form { max-width: 460px; }
.wmc-activation-form input[type="text"] { font-family: ui-monospace, "SF Mono", Consolas, monospace; }
.wmc-activation-form input[name="code"] {
    width: 140px; font-size: 20px; text-align: center; letter-spacing: 8px;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
}
.wmc-activation-form input[name="code"]::placeholder { letter-spacing: 8px; }

/* Whatsapp support pill (license card) */
.wmc-support-pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: #25d366; color: #fff; text-decoration: none;
    padding: 9px 18px; border-radius: 24px; font-weight: 600;
}
.wmc-support-pill:hover { opacity: .9; transform: translateY(-1px); }

/* Template button editor row */
.wmc-template-button {
    background: var(--bg-bg-alt, #f6f7f7);
    padding: 12px; margin: 8px 0; border-radius: var(--bg-radius-sm, 6px);
}
.wmc-template-button select,
.wmc-template-button input[type="text"] {
    padding: 6px 8px; border: 1px solid var(--bg-border, #dcdcde);
    border-radius: 3px; font-family: inherit; font-size: 13px;
}

/* Compact stats row (profile / statuses) */
.wmc-stats-mini {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px; margin: 16px 0;
}
.wmc-stats-mini .bg-stat-card { padding: 12px; }
.wmc-stats-mini .bg-stat-card__num { font-size: 24px; }

/* Media library grid (profile pics + status library) */
.wmc-profile-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px; margin: 16px 0;
}

/* Misc helpers used inside templates */
.wmc-help-block {
    background: var(--wmc-info-bg); border-inline-start: 4px solid var(--wmc-info, #1da1f2);
    padding: 12px; border-radius: var(--bg-radius-sm, 6px); margin: 16px 0;
}
.wmc-code {
    background: rgba(0,0,0,0.05); padding: 1px 6px; border-radius: 3px; font-size: 12px;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
}
.wmc-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--bg-muted, #646970);
    font-size: 15px;
}

/* --- 14. RESPONSIVE -------------------------------------------------- */
@media (max-width: 1024px) {
    .bg-portal-sidebar { width: 180px; }
    .bg-nav-item { font-size: 12px; padding: 8px 12px; }
    .bg-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .bg-form-grid { grid-template-columns: repeat(2, 1fr); }
    .bg-tab-section__title { font-size: 20px; }
}
@media (max-width: 768px) {
    .bg-portal-wrap {
        flex-direction: column !important;
        padding: 16px 12px;
    }
    .bg-portal-sidebar {
        width: 100% !important;
        border-radius: var(--bg-radius, 12px);
    }
    .bg-portal-user { padding: 12px 16px; }
    .bg-portal-nav {
        flex-direction: row;
        overflow-x: auto;
        padding: 4px 8px;
        gap: 4px;
        -webkit-overflow-scrolling: touch;
    }
    .bg-nav-item {
        width: auto; min-width: 110px; flex-shrink: 0;
        justify-content: center; text-align: center;
        flex-direction: column; gap: 4px;
        padding: 8px 10px;
        border-inline-start: none !important;
        border-bottom: 3px solid transparent;
        font-size: 11px;
    }
    .bg-nav-item--active {
        border-bottom-color: var(--bg-primary, #c8a882) !important;
        background: rgba(255,255,255,0.06);
    }
    .bg-portal-main {
        margin-inline-start: 0 !important;
        margin-inline-end: 0 !important;
        margin-top: 12px;
        padding: 16px;
    }
    .bg-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .bg-form-grid { grid-template-columns: 1fr; }
    .bg-table { font-size: 12px; }
    .bg-table thead th, .bg-table td { padding: 6px 8px; }
    .bg-tab-section__title { font-size: 18px; }
    .wmc-card-grid,
    .wmc-media-grid,
    .wmc-profile-grid,
    .wmc-stats-mini { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
    .bg-stat-grid { grid-template-columns: 1fr; }
    .bg-nav-item { min-width: 90px; font-size: 11px; padding: 6px 8px; }
    .bg-form-field input[type="text"],
    .bg-form-field input[type="email"],
    .bg-form-field input[type="tel"],
    .bg-form-field input[type="password"],
    .bg-form-field input[type="number"],
    .bg-form-field select,
    .bg-form-field textarea { font-size: 16px; }
}

/* --- 15. Reduced motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .bg-portal-wrap *,
    .bg-portal-wrap *::before,
    .bg-portal-wrap *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* --- 16. Admin-embed fallback (advanced / alerts / tls) ------------- */
/* Some tabs include WP admin views directly; constrain them so they
   don't blow the layout within the 1400px wrap. */
.wmc-portal-admin-embed .wrap { max-width: none; margin: 0; }
.wmc-portal-admin-embed h1 { font-size: 22px; }
.wmc-portal-admin-embed .form-table th { width: 200px; }