/* dokan-promote.css */

/* General styling for the sub-tabs container */
.dokan-promote-sub-tabs {
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #ffffff;
    border: 1px solid #111827;
    border-radius: 8px;
    padding: 10px;
    overflow-x: auto;
    white-space: nowrap;
    box-shadow: none;
   
}

.dokan-promote-sub-tabs::-webkit-scrollbar {
    height: 6px;
}

.dokan-promote-sub-tabs::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 4px;
}

.dokan-promote-sub-tabs::-webkit-scrollbar-thumb {
    background: #111827;
    border-radius: 4px;
}

/* added 17-08-2026*/
.dokan-promote-sub-tabs::-webkit-scrollbar-button {
    display: none;
}

.dokan-promote-nav-tabs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 8px;
}

.dokan-promote-nav-tabs li {
    margin: 0;
    padding: 0;
    display: inline-block;
}

.dokan-promote-nav-tabs li a {
    text-decoration: none;
    padding: 8px 18px;
    display: block;
    color: #111827;
    font-weight: 700;
    background-color: transparent;
    border: none;
    border-radius: 20px;
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
}

.dokan-promote-nav-tabs li a:hover {
    background-color: #d6c016;
    border-color: #d6c016;
    color: #ffffff;
}

/* Styling for the active tab */
.dokan-promote-nav-tabs li.active a {
    background-color: #111827;
    border-color: #111827;
    color: #ffffff;
    box-shadow: none;
}

/* Ensure the main heading is not part of the tab styling */
.woocommerce-column__title {
    margin-bottom: 25px;
    font-size: 28px;
    color: #111827;
    text-transform: uppercase;
}

/* Original dashboard layout from image_f1a846.png remains relevant for content */
.dokan-promo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.dokan-promo-card {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    text-align: center;
}

.dokan-promo-card h3 {
    margin-top: 0;
    font-size: 16px;
    color: #777;
}

.dokan-promo-metric {
    font-size: 30px;
    font-weight: bold;
    color: #333;
    margin: 10px 0;
}

.dokan-promo-card small {
    color: #999;
    font-size: 12px;
}

.dokan-promo-sections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.dokan-promo-section {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.dokan-promo-section h3 {
    margin-top: 0;
    font-size: 18px;
    color: #333;
}

.dokan-promo-section .section-description {
    color: #777;
    font-size: 14px;
    margin-bottom: 15px;
}

.dokan-promo-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dokan-promo-section ul li {
    padding: 8px 0;
    border-bottom: 1px dotted #eee;
    display: flex;
    align-items: center;
}

.dokan-promo-section ul li:last-child {
    border-bottom: none;
}

.activity-bullet {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 10px;
}

.activity-bullet.green { background-color: #4CAF50; }
.activity-bullet.orange { background-color: #FF9800; }
.activity-bullet.purple { background-color: #9C27B0; }

.dokan-promo-criteria ul li span {
    float: right;
    font-weight: bold;
    color: #0073aa;
}


/* Recruit Statistics Styling */
/* Wrapper: export button above, container below */
.recruit-stats-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 15px 0 20px 0;
}

.recruit-stats-export {
    display: flex;
    justify-content: flex-end;
}

.recruit-stats-container {
    background: #ffffff;
    border: none;
    padding: 12px 0;
    margin: 0;
}

.recruit-stats-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.stat-item strong {
    color: #111827;
    font-size: 12px;
    letter-spacing: 0;
    white-space: nowrap;
    font-weight: 400;
}

.stat-item span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 2px 6px;
    border-radius: 50%;
    margin-left: 2px;
    font-weight: 700;
    font-size: 12px;
}

.stat-item span.personal {
    background: #dbeafe;
    color: #1e3a5f;
    border: 1px solid #93c5fd;
}

.stat-item span.downline {
    background: #fed7aa;
    color: #111827;
    border: none;
}

.stat-item span.total {
    background: #111827;
    color: #ffffff;
    border: none;
}

/* Stats group (left side of stats row) */
.dmw-stats-group {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;
}

/* Action buttons group (right side of stats row) */
.dmw-stats-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Show Team Members toggle button — same style as export button */
.dokan-show-team-btn {
    background: #111827 !important;
    color: #ffffff !important;
    border: 1px solid #111827 !important;
    padding: 2px 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.2s ease !important;
    line-height: 1.4;
    white-space: nowrap;
    width: auto;
    text-transform: none !important;
    min-height: 0 !important;
    height: auto !important;
}
.dokan-show-team-btn:hover {
    background: #d6c016 !important;
    border-color: #d6c016 !important;
    color: #ffffff !important;
}

/* Export Button Styling */
.dokan-export-team-btn {
    background: #111827 !important;
    color: #ffffff !important;
    border: 1px solid #111827 !important;
    padding: 2px 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.2s ease !important;
    transform: none;
    box-shadow: none;
    line-height: 1.4;
    white-space: nowrap;
    width: auto;
    text-transform: none !important;
    min-height: 0 !important;
    height: auto !important;
}

.dokan-export-team-btn:hover {
    background: #d6c016 !important;
    border-color: #d6c016 !important;
    color: #ffffff !important;
    transform: none;
}

.dokan-export-team-btn:disabled {
    background: #6c757d;
    cursor: not-allowed;
    opacity: 0.6;
}

.dokan-export-team-btn .export-icon {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* Export loading spinner */
@keyframes dmw-spin {
    to { transform: rotate(360deg); }
}

.dmw-export-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: dmw-spin 0.7s linear infinite;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Show Team button — spacing + yellow hover */
button[name="show_downline_submit"] {
    margin-top: 28px;
    display: block;
}

button[name="show_downline_submit"]:hover {
    background: #d6c016 !important;
    border-color: #d6c016 !important;
    color: #111827 !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .recruit-stats-row {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }
    
    .recruit-stats-left {
        flex-direction: column;
        gap: 10px;
    }
    
    .stat-item {
        width: 100%;
        justify-content: space-between;
    }
    
    .dokan-export-team-btn {
        width: 100%;
        justify-content: center;
    }
}


/* =====================================================
   DMW: Demotion Management Wizard Styles (Phase 1A)
   Added: 15-04-2026
   ===================================================== */

/* --- Step Indicator --- */
.dmw-steps {
    display: flex;
    align-items: flex-start;
    margin: 0 0 24px 0;
    padding: 16px 20px;
    background: #ffffff;
    border: 1px solid #374151;
    border-radius: 8px;
    overflow-x: auto;
}

.dmw-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    text-align: center;
    min-width: 60px;
}

.dmw-step + .dmw-step::before {
    content: '';
    position: absolute;
    left: -50%;
    top: 14px;
    width: 100%;
    height: 2px;
    background: #cbd5e1;
    z-index: 0;
}

.dmw-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    position: relative;
    z-index: 1;
    transition: all 0.25s ease;
}

.dmw-step-label {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 500;
    white-space: nowrap;
}

.dmw-step--active .dmw-step-num {
    background: #d6c016;
    color: #111827;
    box-shadow: 0 0 0 3px rgba(214, 192, 22, 0.25);
}

.dmw-step--active .dmw-step-label {
    color: #111827;
    font-weight: 700;
}

.dmw-step--done .dmw-step-num {
    background: #111827;
    color: #ffffff;
}

.dmw-step--done .dmw-step-label {
    color: #374151;
}

/* Promoting pill — switches colour with tab */
.dmw-promoting-pill {
    padding: 2px 10px;
    border-radius: 4px;
    font-weight: 400;
    margin-left: 6px;
    display: inline-block;
    transition: background 0.2s, color 0.2s;
}
.dmw-promoting-pill--promote {
    background: #dcfce7;
    color: #111827;
}
.dmw-promoting-pill--demote {
    background: #fef2f2;
    color: #7f1d1d;
}

/* --- Action Tabs --- */
.dmw-action-tabs {
    display: flex;
    gap: 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
}

.dmw-tab-btn {
    flex: 1;
    padding: 12px 20px;
    border: none;
    background: #f8f9fa;
    color: #111827;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dmw-tab-btn:hover {
    background: #e2e8f0;
}

.dmw-tab-btn--promote.dmw-tab-btn--active {
    background: #dcfce7;
    color: #111827;
    border-bottom: 3px solid #16a34a;
}

.dmw-tab-btn--demote.dmw-tab-btn--active {
    background: #fee2e2;
    color: #b91c1c;
    border-bottom: 3px solid #ef4444;
}

/* --- Info Boxes --- */
.dmw-info-box {
    padding: 14px 18px;
    border-radius: 8px;
    margin-bottom: 18px;
    border-left: 4px solid;
    font-size: 14px;
    line-height: 1.5;
}

.dmw-info-box p:last-child {
    margin-bottom: 0;
}

.dmw-info-box--blue {
    background: #dcfce7;
    border-color: #16a34a;
    color: #111827;
}

.dmw-info-box--red {
    background: #fef2f2;
    border-color: #ef4444;
    color: #7f1d1d;
}

.dmw-info-box--yellow {
    background: #fffbeb;
    border-color: #f59e0b;
    color: #78350f;
}

/* --- Promote Role Wrap (step 3 promote tab) — modern card style --- */
.dmw-promote-role-wrap {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-left: 3px solid #16a34a;
    border-radius: 6px;
    padding: 16px 20px;
    margin-bottom: 18px;
}

.dmw-promote-role-wrap h3 {
    margin: 0 0 12px 0;
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dmw-promote-role-wrap p {
    margin: 0;
}

/* --- Transfer Block (step 3 demote tab) --- */
.dmw-transfer-block h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 0;
    font-size: 18px;
    font-weight: 700;
}

.dmw-hint {
    font-size: 13px;
    color: #111827;
    margin-bottom: 14px;
}

.dmw-transfer-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.dmw-transfer-row-check {
    flex-shrink: 0;
}

.dmw-transfer-row-name {
    font-weight: 600;
    font-size: 14px;
    color: #111827;
    flex: 1;
    min-width: 120px;
}

.dmw-transfer-row-code {
    font-size: 12px;
    color: #6b7280;
    font-family: monospace;
    background: #f3f4f6;
    padding: 2px 8px;
    border-radius: 4px;
}

.dmw-transfer-row-role {
    font-size: 12px;
    color: #9ca3af;
}

.dmw-transfer-row-mgr-select {
    min-width: 200px;
    flex: 2;
    font-size: 13px;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #ffffff;
}

/* --- Badges --- */
.dmw-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    border-radius: 12px;
    padding: 2px 8px;
}

.dmw-badge--count {
    background: #111827;
    color: #ffffff;
    min-width: 24px;
}

.dmw-badge--personal-count {
    background: #dbeafe;
    color: #1e3a5f;
    border: 1px solid #93c5fd;
    min-width: 24px;
}

.dmw-badge--downline-count {
    background: #fed7aa;
    color: #111827;
    border: 1px solid #fdba74;
    min-width: 24px;
}

.dmw-recruit-badge--personal {
    background: #dbeafe;
    color: #1e3a5f;
    border: 1px solid #93c5fd;
}

.dmw-recruit-badge--downline {
    background: #fed7aa;
    color: #111827;
    border: 1px solid #fdba74;
}

/* --- Step Footer (button row) --- */
.dmw-step-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}

/* --- Wizard Buttons --- */
.dmw-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    border: 1px solid #111827;
    border-radius: 6px;
    background: #111827;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.dmw-btn:hover {
    background: #d6c016;
    border-color: #d6c016;
    color: #111827;
}

.dmw-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.dmw-btn--primary {
    background: #111827;
    border-color: #111827;
    color: #ffffff;
}

.dmw-btn--primary:hover {
    background: #d6c016;
    border-color: #d6c016;
    color: #111827;
}

.dmw-btn--danger {
    background: #ef4444;
    border-color: #dc2626;
    color: #ffffff;
}

.dmw-btn--danger:hover {
    background: #dc2626;
    border-color: #b91c1c;
    color: #ffffff;
}

.dmw-btn--success {
    background: #111827;
    border-color: #111827;
    color: #ffffff;
}

.dmw-btn--success:hover {
    background: #d6c016;
    border-color: #d6c016;
    color: #ffffff;
}

/* --- Review Screen (step 4) --- */
.dmw-review-manager-card {
    background: transparent;
    border: 1.5px solid #111827;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 20px;
}

.dmw-review-manager-card h4 {
    margin: 0 0 8px 0;
    color: #dc2626;
    font-size: 15px;
}

.dmw-code-change {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    flex-wrap: wrap;
}

.dmw-code-old {
    background: #fee2e2;
    color: #b91c1c;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: monospace;
    text-decoration: line-through;
}

.dmw-code-arrow {
    color: #6b7280;
    font-weight: bold;
}

.dmw-code-new {
    background: #dcfce7;
    color: #15803d;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: monospace;
}

.dmw-review-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 16px;
    border: 1px solid #111827;
}

.dmw-review-table th {
    background: #111827;
    padding: 8px 12px;
    text-align: left;
    font-weight: 700;
    color: #ffffff;
    border-bottom: 2px solid #111827;
}

.dmw-review-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #111827;
    vertical-align: middle;
}

.dmw-review-table tr:last-child td {
    border-bottom: none;
}

/* Section divider for team member heading */
.dmw-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #111827;
    padding-bottom: 8px;
    margin-bottom: 12px;
}

.dmw-section-header h3 {
    margin: 0;
}

/* --- DMW Mobile Responsive --- */
@media (max-width: 768px) {
    .dmw-steps {
        gap: 4px;
        padding: 12px;
    }

    .dmw-step-label {
        font-size: 9px;
    }

    .dmw-transfer-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .dmw-transfer-row-mgr-select {
        width: 100%;
        min-width: 0;
        flex: none;
    }

    .dmw-step-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .dmw-btn {
        justify-content: center;
    }

    .dmw-tab-btn {
        padding: 10px;
        font-size: 13px;
    }

    .dmw-review-table {
        font-size: 12px;
    }
}

/* =====================================================
   DMW: Promote Confirmation Modal
   Added: 17-04-2026
   ===================================================== */

#dmw-promote-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

#dmw-promote-confirm-modal {
    background: #ffffff;
    border-radius: 10px;
    padding: 32px 28px 24px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    text-align: center;
}

.dmw-confirm-modal-text {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 24px;
    line-height: 1.5;
}

.dmw-confirm-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.dmw-modal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 28px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid #111827;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.dmw-modal-btn--confirm {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}

.dmw-modal-btn--confirm:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}

.dmw-modal-btn--cancel {
    background: #111827;
    border-color: #111827;
    color: #ffffff;
}

.dmw-modal-btn--cancel:hover {
    background: #d6c016;
    border-color: #d6c016;
    color: #ffffff;
}

/* =====================================================
   DMW: Demote Confirmation Modal
   Added: 17-04-2026
   ===================================================== */

#dmw-demote-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

#dmw-demote-confirm-modal {
    background: #ffffff;
    border-radius: 10px;
    padding: 32px 28px 24px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    text-align: center;
}

.dmw-modal-btn--demote-confirm {
    background: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
}

.dmw-modal-btn--demote-confirm:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #ffffff;
}

/* =====================================================
   DMW: Deactivate Confirmation Modal
   Added: 20-04-2026
   ===================================================== */

#dmw-deactivate-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

#dmw-deactivate-confirm-modal {
    background: #ffffff;
    border-radius: 10px;
    padding: 32px 28px 24px;
    max-width: 440px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    text-align: center;
}

.dmw-deactivate-confirm-subtext {
    font-size: 13px;
    color: #6b7280;
    margin: -12px 0 20px;
    line-height: 1.5;
}

.dmw-modal-btn--deactivate-confirm {
    background: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
}

.dmw-modal-btn--deactivate-confirm:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #ffffff;
}

/* Compact Export button inside Deactivated Members panel header */
#dmw-export-deactivated-btn {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
}

/* "Review Inactive Members" button */
.dmw-inactive-btn {
    background: #111827;
    color: #ffffff;
    border: 1px solid #111827;
    font-size: 13px;
    padding: 6px 14px;
}
.dmw-inactive-btn:hover {
    background: #d6c016;
    border-color: #d6c016;
    color: #ffffff;
}

/* Inactive panel container */
.dmw-inactive-panel {
    border: 1.5px solid #111827;
    background: #ffffff;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 20px;
}

/* Panel header row */
.dmw-inactive-panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.dmw-inactive-panel-title {
    font-weight: 700;
    font-size: 14px;
    color: #111827;
}
.dmw-inactive-threshold-wrap {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #111827;
}



/* Warning badge — red background, white bold text */
.dmw-badge--warning {
    background: #dc2626;
    color: #ffffff;
    border: 1px solid #b91c1c;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 700;
}

/* Criteria hint text */
.dmw-inactive-criteria {
    font-size: 13px;
    color: #111827;
    margin: 0 0 12px;
}

/* Member rows */
.dmw-inactive-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #fde68a;
    flex-wrap: wrap;
}
.dmw-inactive-row:last-child {
    border-bottom: none;
}
.dmw-inactive-row-check {
    cursor: pointer;
}
.dmw-inactive-row-name {
    font-weight: 600;
    font-size: 13px;
    flex: 1;
    min-width: 130px;
}
.dmw-inactive-row-code {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 12px;
    color: #374151;
}
.dmw-inactive-col {
    font-size: 12px;
    color: #6b7280;
}

/* Footer buttons — above member list, right-aligned, compact */
.dmw-inactive-footer {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}

/* Smaller height for Export + Deactivate inside inactive panel */
.dmw-inactive-footer .woocommerce-button,
.dmw-inactive-footer .button {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
}

/* Deactivate button — red, disabled grey */
.dmw-btn-deactivate {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
    border-radius: 6px !important;
}
.dmw-btn-deactivate:not(:disabled):hover {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
}
.dmw-btn-deactivate:disabled {
    background: #9ca3af !important;
    border-color: #9ca3af !important;
    cursor: not-allowed;
    opacity: 0.7;
}

/* "Never" badge override — light red bg, black bold text */
.dmw-badge--never {
    background: #fee2e2 !important;
    color: #111827 !important;
    border-color: #fca5a5 !important;
    font-weight: 700 !important;
}

/* Small badge modifier — used on inactive/deactivated rows to prevent overlap */
.dmw-badge--sm {
    font-size: 11px !important;
    padding: 1px 7px !important;
    white-space: nowrap;
}

/* Compact name in inactive/deactivated rows */
.dmw-row-name--sm {
    font-size: 13px;
}

/* Inactive member row — allow wrap on small screens but keep tight on normal */
.dmw-inactive-member-row {
    flex-wrap: wrap;
    gap: 6px;
    row-gap: 4px;
}

/* Last sale badge — orange */
/* 28-08-2026 */
.dmw-badge--sale {
    background: #dcfce7;
    color: #111827;
    border: 1px solid #16a34a;
}

/* Deactivated date badge — light red, black bold */
.dmw-badge--deactivated-date {
    background: #fee2e2;
    color: #111827;
    border: 1px solid #fca5a5;
    font-weight: 700;
}

#dmw-deactivated-section {
    margin-top: 14px;
    border-top: 1px solid #e5e7eb;
    padding-top: 12px;
}

.dmw-deactivated-empty {
    color: #9ca3af;
    font-style: italic;
    font-size: 13px;
}


/* =====================================================
   FIX: Override theme's centered/max-width form <p> rule
   for Promote/Demote tabs — theme's WooCommerce template
   applies max-width:600px + margin:0 auto !important to
   ALL <p> tags inside .woocommerce forms, which incorrectly
   centers our manager/demonstrator select dropdowns.
   Added: [today's date]
   ===================================================== */
.woocommerce-account #main-content .woocommerce .dokan-promote-managers-content form p,
.woocommerce-account #main-content .woocommerce .dokan-promote-demonstrator-content form p {
    max-width: none !important;
    margin: 0 0 20px 0 !important;
    text-align: left !important;
    padding: 0 !important;
}


/* DMW: Searchable manager-select row (Select Manager step) */
.dmw-select-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
}

/* 31-08-2026  Make m2 bold*/
.dmw-select-row label {
    font-weight: 700 !important;
    color: #111827;
    margin: 0;
}
/*END 31-08-2026  Make m2 bold*/

/* Pill-style Select2 rendering, scoped to .dmw-searchable-select only */
.dmw-searchable-select + .select2-container .select2-selection--single {
    height: 44px !important;
    border-radius: 999px !important;
    border: 1.5px solid #d1d5db !important;
    background: #f8fafc !important;
    display: flex;
    align-items: center;
    padding: 0 16px;
}
.dmw-searchable-select + .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 44px !important;
    color: #111827;
    padding-left: 0;
}
.dmw-searchable-select + .select2-container .select2-selection--single .select2-selection__arrow {
    height: 44px !important;
    right: 12px;
}
.dmw-searchable-select + .select2-container--open .select2-selection--single {
    border-color: #d6c016 !important;
    box-shadow: 0 0 0 3px rgba(214,192,22,0.2);
}
.dmw-searchable-select ~ .select2-container .select2-dropdown {
    border-radius: 12px !important;
    border: 1.5px solid #d1d5db !important;
    overflow: hidden;
    margin-top: 4px;
}
.dmw-searchable-select ~ .select2-container .select2-search--dropdown .select2-search__field {
    border-radius: 8px !important;
    border: 1.5px solid #d1d5db !important;
    padding: 8px 12px;
}
.dmw-searchable-select ~ .select2-container .select2-results__option--highlighted {
    background-color: #111827 !important;
    color: #fff !important;
}

/* DMW: Round the Select2 search-by-name-or-code input inside the dropdown */
.select2-container .select2-search--dropdown .select2-search__field {
    border-radius: 20px !important;
    border: 1px solid #d1d5db !important;
    padding: 10px 16px !important;
    height: 42px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
}

/* DMW: Select2 dropdown results scrollbar — black bar, white arrows */
.select2-container .select2-results__options {
    scrollbar-color: #111827 #f0f0f0;
    scrollbar-width: thin;
}
.select2-container .select2-results__options::-webkit-scrollbar {
    width: 10px;
}
.select2-container .select2-results__options::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 4px;
}
.select2-container .select2-results__options::-webkit-scrollbar-thumb {
    background: #111827;
    border-radius: 4px;
}
.select2-container .select2-results__options::-webkit-scrollbar-button {
    background: #111827;
    display: block;
}

/* DMW: Select2 dropdown hover/highlighted option — black instead of default blue */
.select2-container .select2-results__option--highlighted {
    background-color: #111827 !important;
    color: #ffffff !important;
}



/* 02-09-2026 deleted block ---.dmw-searchable-select + .select2-container .select2-selection__clear { -- */

/* 02-09-2026 — corrected fix: the × is nested INSIDE .select2-selection__rendered
   (not a flex sibling), so flexbox `order` has no effect on it. Using absolute
   positioning instead, anchored to the pill itself, to reliably place it
   next to the dropdown arrow regardless of where it sits in the DOM. */
.dmw-searchable-select + .select2-container .select2-selection--single {
    position: relative;
}
.dmw-searchable-select + .select2-container .select2-selection__rendered {
    padding-right: 50px !important; /* reserve space so text never runs under the × */
}
.dmw-searchable-select + .select2-container .select2-selection__clear {
    position: absolute !important;
    top: 50% !important;
    right: 34px !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    font-size: 18px !important;
    color: #6b7280 !important;
    line-height: 1 !important;
    height: auto !important;
    display: block !important;
    order: unset !important;
}


/* 28-08-2026*/
/* DMW: Inactivity Threshold dropdown — rectangular border (not pill), matches row style */
#dmw-inactive-threshold + .select2-container {
    width: 160px !important;
}
#dmw-inactive-threshold + .select2-container .select2-selection--single {
    height: 32px !important;
    border-radius: 6px !important;
    border: 1.5px solid #d1d5db !important;
    background: #ffffff !important;
    display: flex;
    align-items: center;
    padding: 0 12px;
}
#dmw-inactive-threshold + .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 32px !important;
    color: #111827;
    padding-left: 0;
}
#dmw-inactive-threshold + .select2-container .select2-selection--single .select2-selection__arrow {
    height: 32px !important;
    right: 8px;
}
#dmw-inactive-threshold + .select2-container--open .select2-selection--single {
    border-color: #d6c016 !important;
    box-shadow: 0 0 0 3px rgba(214,192,22,0.2);
}
#dmw-inactive-threshold ~ .select2-container .select2-dropdown {
    border-radius: 6px !important;
    border: 1.5px solid #d1d5db !important;
    overflow: hidden;
    margin-top: 4px;
}
#dmw-inactive-threshold ~ .select2-container .select2-results__option--highlighted {
    background-color: #111827 !important;
    color: #fff !important;
}
/* END 28-08-2026*/

/* 28-08-2026 — reinforced: strip inner rendered-span styling that's bleeding through */
#dmw-inactive-threshold + .select2-container .select2-selection__rendered {
    height: 32px !important;
    line-height: 32px !important;
    border-radius: 0 !important;
    border-width: 0 !important;
    border-style: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 28-08-2026 — Inactive Members checkboxes: black instead of default blue */
.dmw-inactive-member-row .dmw-inactive-checkbox {
    accent-color: #111827;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* 28-08-2026 — Deactivate button: match Export button's rounded shape exactly */
.dmw-btn-deactivate {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
    border-radius: 999px !important;
}
.dmw-inactive-footer #dmw-export-inactive-btn {
    border-radius: 999px !important;
}

/* 28-08-2026 — dedicated class for "Last recruit" date badge, separate from Downline Recruit type badge */
.dmw-badge--recruit-date {
    background: #dcfce7;
    color: #111827;
    border: 1px solid #16a34a;
}


/* 28-08-2026 — Team Members list checkboxes (Select Team Members to Move): black instead of default blue.
   Updated 31-08-2026: changed from hardcoded #dmw-team-list-lv1 to attribute wildcard so this
   automatically covers dmw-team-list-lv2, lv3, lv4, lv5 without needing a new rule per level. */
[id^="dmw-team-list-"] .dmw-transfer-row input[type="checkbox"] {
    accent-color: #111827;
    width: 18px;
    height: 18px;
    cursor: pointer;
}
/*31-08-2026*/


/* 28-08-2026 — Reassign Team Members checkboxes: black instead of blue */
.dmw-transfer-checkbox {
    accent-color: #111827;
    width: 18px;
    height: 18px;
    cursor: pointer;
}


/* 28-08-2026 — Demote reassignment dropdown: sizing + strip native inner-span bleed */
.dmw-transfer-row-mgr-select + .select2-container {
    flex: 2;
    min-width: 200px;
}
.dmw-transfer-row-mgr-select + .select2-container .select2-selection--single {
    height: 36px !important;
    border-radius: 6px !important;
    border: 1px solid #d1d5db !important;
    background: #ffffff !important;
    display: flex;
    align-items: center;
    padding: 0 12px;
}
.dmw-transfer-row-mgr-select + .select2-container .select2-selection--single .select2-selection__rendered {
    height: 36px !important;
    line-height: 36px !important;
    color: #111827;
    padding-left: 0;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
}
.dmw-transfer-row-mgr-select + .select2-container .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
    right: 8px;
}
.dmw-transfer-row-mgr-select + .select2-container--open .select2-selection--single {
    border-color: #d6c016 !important;
    box-shadow: 0 0 0 3px rgba(214,192,22,0.2);
}

/* 28-08-2026 — override the earlier theme-<p> fix specifically for this warning box's paragraph */
.woocommerce-account #main-content .woocommerce .dokan-promote-managers-content form .dmw-info-box--red p {
    margin: 0 !important;
}

/* 03-09-2026 — Level Five "highest manager level" message: centered text.
   Box now uses .dmw-info-box--red (swapped in PHP) for correct red styling
   matching the Warning box; this rule only handles centering, since the
   theme's form p { text-align:left !important } would otherwise override it. */
.woocommerce-account #main-content .woocommerce .dokan-promote-managers-content form #dmw-promote-content .dmw-info-box--red p {
    text-align: left !important;
}