/* ==========================================================================
   1. MASTER LAYOUT & RESET
   ========================================================================== */
.tbf-dashboard-wrapper {
    display: flex;
    background-color: #faf9f5; /* Main warm beige background */
    font-family: inherit;
    color: #3e2a1e; /* Deep text color */
    min-height: 100vh;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03);
    margin: 20px auto;
    border: 1px solid #eee5d8;
}

.tbf-dashboard-wrapper * {
    box-sizing: border-box;
}

/* ==========================================================================
   2. SIDEBAR
   ========================================================================== */
.tbf-sidebar {
    width: 280px;
    background-color: #f6efec; /* Creamy peach background */
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    border-right: 1px solid #ebdcd0;
}

.tbf-logo {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 40px;
    color: #6d5145; /* Brand dark brown */
    font-family: Georgia, serif;
    letter-spacing: 2px;
    line-height: 1.1;
}
.tbf-logo-small { font-size: 12px; letter-spacing: 4px; display: block; opacity: 0.8; }

/* Profile Box */
.tbf-profile-card { text-align: center; margin-bottom: 30px; }
.tbf-avatar {
    width: 75px; height: 75px; border-radius: 50%;
    margin: 0 auto 15px auto; overflow: hidden;
    border: 3px solid #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    background: #e5bc81; display: flex; align-items: center; justify-content: center;
}
.tbf-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tbf-avatar-initial { font-size: 30px; color: #fff; font-weight: bold; }
.tbf-profile-card h3 { font-size: 16px; margin: 0 0 5px 0; color: #3e2a1e; font-weight: 700; }
.tbf-badge { font-size: 12px; color: #6d5145; display: flex; align-items: center; justify-content: center; gap: 5px; margin-bottom: 12px; font-weight: 500; }
.tbf-badge svg { width: 14px; height: 14px; color: #e5bc81; }
.tbf-tag { display: inline-block; background: #6d5145; color: #fff; padding: 5px 15px; border-radius: 20px; font-size: 11px; font-weight: 600; }

/* Navigation Menu */
.tbf-nav { display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
.tbf-nav a { 
    padding: 12px 16px; text-decoration: none; color: #6d5145; 
    font-weight: 500; font-size: 14px; border-radius: 12px; 
    transition: all 0.3s ease; display: flex; align-items: center; gap: 12px;
}
.tbf-nav a:hover { background: #ebdcd0; }
.tbf-nav a.active { background: #fff; color: #6d5145; font-weight: 600; box-shadow: 0 2px 10px rgba(0,0,0,0.02); }
.tbf-nav-icon { font-size: 16px; opacity: 0.7; }
.tbf-logout { margin-top: auto; color: #d97706 !important; }

/* Promo Box */
.tbf-promo-card {
    background: linear-gradient(135deg, #6d5145, #4a362d);
    color: #fff; padding: 25px 20px; border-radius: 16px; text-align: center; margin-top: 30px;
}
.tbf-promo-icon { font-size: 24px; margin-bottom: 10px; }
.tbf-promo-card h4 { font-size: 15px; margin: 0 0 8px 0; color: #fff; }
.tbf-promo-card p { font-size: 12px; opacity: 0.85; margin-bottom: 15px; line-height: 1.4; }
.tbf-btn-promo {
    background: #e5bc81; color: #3e2a1e; border: none; padding: 10px 15px; 
    border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; width: 100%; transition: 0.3s;
}
.tbf-btn-promo:hover { background: #dfab67; }

/* ==========================================================================
   3. MAIN CONTENT AREA
   ========================================================================== */
.tbf-content { flex: 1; padding: 45px; overflow-y: auto; max-width: 1300px; }

/* Header Bar */
.tbf-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; }
.tbf-header h1 { font-size: 26px; margin: 0 0 8px 0; color: #3e2a1e; font-weight: 700; }
.tbf-header p { font-size: 15px; color: #6d5145; margin: 0; }
.tbf-balance-box { text-align: right; background: #fff; padding: 15px 25px; border-radius: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.02); border: 1px solid #eee5d8; }
.tbf-balance-box span { font-size: 12px; color: #888; display: block; margin-bottom: 5px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; }
.tbf-balance-box strong { font-size: 28px; color: #6d5145; line-height: 1; }

/* ==========================================================================
   4. STATS GRID
   ========================================================================== */
.tbf-grid-overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; }
.tbf-card { 
    background: #fff; border-radius: 20px; padding: 25px; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.03); border: 1px solid #eee5d8; 
    position: relative;
}
.tbf-card-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 15px; }
.tbf-icon-yellow { background: #fff8e1; color: #f59e0b; }
.tbf-icon-orange { background: #fff3e0; color: #f97316; }
.tbf-icon-purple { background: #f3e8ff; color: #a855f7; }
.tbf-icon-green  { background: #dcfce7; color: #22c55e; }
.tbf-icon-red    { background: #ffe4e6; color: #f43f5e; }

.tbf-card-label { font-size: 14px; color: #888; margin-bottom: 5px; font-weight: 500; }
.tbf-card-value { font-size: 30px; font-weight: 700; color: #3e2a1e; line-height: 1.2; }
.tbf-card-status { font-size: 12px; color: #d97706; margin-top: 8px; font-weight: 500; background: #fffbeb; display: inline-block; padding: 3px 10px; border-radius: 12px; }

/* Colors for specific text */
.tbf-text-orange { color: #d97706; }
.tbf-text-green { color: #10b981; }

/* ==========================================================================
   5. SPLIT LAYOUT (Chart + Links)
   ========================================================================== */
.tbf-grid-split { display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px; margin-bottom: 40px; }
.tbf-card-header-flex { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
.tbf-card-header-flex h2 { font-size: 18px; margin: 0; color: #3e2a1e; }
.tbf-toggle-pills { display: flex; background: #f6efec; border-radius: 20px; padding: 4px; }
.tbf-toggle-pills span { padding: 6px 15px; font-size: 12px; font-weight: 600; cursor: pointer; color: #6d5145; border-radius: 16px; }
.tbf-toggle-pills span.active { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }

/* Referral Link Input */
.tbf-card h2 span { font-size: 13px; color: #888; font-weight: normal; }
.tbf-input-group { display: flex; background: #faf9f5; border: 1px solid #ebdcd0; border-radius: 12px; overflow: hidden; padding: 6px; margin: 20px 0; }
.tbf-input-group input { flex: 1; border: none; background: transparent; padding: 10px 15px; color: #6d5145; font-weight: 500; outline: none; }
.tbf-btn-copy { background: #e5bc81; color: #3e2a1e; border: none; border-radius: 8px; padding: 0 25px; cursor: pointer; font-weight: 600; transition: 0.3s; }
.tbf-btn-copy:hover { background: #dfab67; }

/* Buttons */
.tbf-button-group { display: flex; gap: 10px; }
.tbf-btn { text-decoration: none; text-align: center; font-weight: 600; font-size: 14px; padding: 12px 20px; border-radius: 10px; cursor: pointer; border: none; transition: 0.3s; width: 100%; display: block; }
.tbf-btn-whatsapp { background: #25D366; color: #fff; }
.tbf-btn-whatsapp:hover { background: #20bd5a; color: #fff;}
.tbf-btn-primary { background: #6d5145; color: #fff; }
.tbf-btn-primary:hover { background: #4a362d; color: #fff; }
.tbf-btn-disabled { background: #eee; color: #aaa; cursor: not-allowed; }

/* Payout Card */
.tbf-split-right { display: flex; flex-direction: column; gap: 20px; }
.tbf-payout-card { background: #fff; }
.tbf-payout-header { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.tbf-payout-icon { background: #fff1f2; color: #e11d48; width: 50px; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.tbf-payout-footer { border-top: 1px solid #eee5d8; padding-top: 20px; }
.tbf-min-text { display: block; font-size: 12px; color: #888; margin-bottom: 15px; text-align: center; }

/* ==========================================================================
   6. PRODUCT CAROUSEL
   ========================================================================== */
.tbf-section-block h2 { font-size: 18px; color: #3e2a1e; margin-bottom: 20px; }
.tbf-product-carousel { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 20px; scroll-snap-type: x mandatory; }
.tbf-product-carousel::-webkit-scrollbar { height: 6px; }
.tbf-product-carousel::-webkit-scrollbar-thumb { background: #ebdcd0; border-radius: 10px; }
.tbf-product-card { min-width: 220px; background: #fff; border: 1px solid #eee5d8; border-radius: 16px; padding: 15px; text-align: center; scroll-snap-align: start; }
.tbf-prod-img { background: #faf9f5; border-radius: 10px; padding: 10px; margin-bottom: 15px; }
.tbf-prod-img img { width: 100%; height: 130px; object-fit: contain; }
.tbf-product-card h4 { font-size: 14px; margin: 0 0 10px 0; color: #3e2a1e; }
.tbf-comm-badge { background: #f6efec; color: #6d5145; font-size: 11px; padding: 4px 12px; border-radius: 20px; display: inline-block; font-weight: 600; margin-bottom: 15px; }
.tbf-input-group-small { display: flex; background: #faf9f5; border-radius: 8px; border: 1px solid #ebdcd0; overflow: hidden; }
.tbf-input-group-small input { flex: 1; border: none; background: transparent; padding: 8px 10px; font-size: 11px; color: #888; outline: none; }
.tbf-input-group-small button { background: #f6efec; border: none; padding: 0 10px; cursor: pointer; border-left: 1px solid #ebdcd0; transition: 0.3s; }
.tbf-input-group-small button:hover { background: #e5bc81; }

/* ==========================================================================
   7. TABLE
   ========================================================================== */
.tbf-btn-light { background: #f6efec; color: #6d5145; border: none; padding: 6px 15px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; }
.tbf-table-responsive { overflow-x: auto; }
.tbf-table { width: 100%; border-collapse: collapse; text-align: left; }
.tbf-table th { color: #888; font-size: 12px; font-weight: 500; padding: 15px 10px; border-bottom: 1px solid #eee5d8; }
.tbf-table td { padding: 16px 10px; font-size: 14px; border-bottom: 1px solid #faf9f5; color: #444; }
.tbf-status { font-size: 11px; padding: 5px 12px; border-radius: 20px; font-weight: 600; display: inline-block; }
.tbf-status-pending { background: #fffbeb; color: #d97706; }
.tbf-status-approved { background: #f0fdf4; color: #16a34a; }
.tbf-status-paid { background: #f5f3ff; color: #7c3aed; }

/* ==========================================================================
   8. MOBILE RESPONSIVENESS
   ========================================================================== */
.tbf-mobile-nav-toggle { display: none; }

@media (max-width: 1024px) {
    .tbf-grid-overview { grid-template-columns: repeat(2, 1fr); }
    .tbf-grid-split { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .tbf-dashboard-wrapper { flex-direction: column; border-radius: 0; margin: 0; border: none; }
    
    .tbf-mobile-nav-toggle { 
        display: flex; align-items: center; gap: 10px; padding: 20px; 
        background: #fff; color: #6d5145; font-weight: 600; 
        cursor: pointer; border-bottom: 1px solid #eee5d8; 
    }
    
    .tbf-sidebar { 
        position: fixed; left: -100%; top: 0; height: 100vh; 
        z-index: 1000; transition: 0.3s; box-shadow: 10px 0 30px rgba(0,0,0,0.1); 
        width: 280px; overflow-y: auto;
    }
    .tbf-sidebar.open { left: 0; }
    
    .tbf-content { padding: 20px; }
    .tbf-header { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 30px; }
    .tbf-header h1 { font-size: 22px; }
    
    .tbf-balance-box { text-align: left; width: 100%; }
    
    .tbf-grid-overview { grid-template-columns: 1fr; gap: 15px; margin-bottom: 30px; }
    .tbf-card { padding: 20px; margin-bottom: 15px; }
    
    .tbf-input-group { flex-direction: column; background: transparent; border: none; padding: 0; gap: 10px; }
    .tbf-input-group input { border: 1px solid #eee5d8; border-radius: 12px; padding: 12px 15px; }
    .tbf-btn-copy { padding: 12px; border-radius: 12px; }
}

/* ==========================================================================
   9. LOGIN & REGISTRATION FORMS
   ========================================================================== */
.tbf-form-container {
    max-width: 500px; /* Perfect width for login */
    margin: 40px auto;
    background: #ffffff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.04);
    border: 1px solid #eee5d8;
    font-family: 'Inter', 'Poppins', sans-serif;
    color: #3e2a1e;
}

/* Make the registration form wider since it has two columns */
form#tbf_affiliate_register_form {
    max-width: 800px;
}

.tbf-form-title {
    font-size: 20px;
    color: #6d5145;
    margin: 30px 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee5d8;
    font-family: Georgia, serif;
}
.tbf-form-title:first-child { margin-top: 0; }

.tbf-form-row {
    display: flex;
    gap: 20px;
}
.tbf-col-half {
    flex: 1;
}

.tbf-form-group {
    margin-bottom: 20px;
}

.tbf-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #3e2a1e;
}
.tbf-form-group label .required {
    color: #e11d48;
}

.tbf-form-group input[type="text"],
.tbf-form-group input[type="email"],
.tbf-form-group input[type="password"],
.tbf-form-group input[type="tel"],
.tbf-form-group input[type="url"] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ebdcd0;
    border-radius: 10px;
    background-color: #faf9f5;
    font-size: 14px;
    color: #3e2a1e;
    transition: all 0.3s ease;
    outline: none;
}

.tbf-form-group input:focus {
    border-color: #e5bc81;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(229, 188, 129, 0.2);
}

.tbf-remember-group {
    display: flex;
    align-items: center;
    font-size: 13px;
}
.tbf-remember-group input {
    margin-right: 8px;
}

.tbf-btn-full {
    width: 100%;
    padding: 14px !important;
    font-size: 15px !important;
}

/* Alerts (Success & Error Messages) */
.tbf-alert {
    padding: 15px 20px;
    border-radius: 10px;
    margin-bottom: 25px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}
.tbf-alert-success {
    background-color: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}
.tbf-alert-danger {
    background-color: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}
.tbf-alert-warning {
    background-color: #fffbeb;
    color: #d97706;
    border: 1px solid #fde68a;
}
.tbf-alert a { color: inherit; text-decoration: underline; font-weight: bold; }

/* Mobile Adjustments for Forms */
@media (max-width: 768px) {
    .tbf-form-row { flex-direction: column; gap: 0; }
    .tbf-form-container { padding: 25px; margin: 20px; }
}

/* TBF Tab System & Utilities */
.tbf-tab-section { display: none; animation: fadeIn 0.4s ease; }
.tbf-tab-section.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Logo Adjustments to allow Woodmart custom logo to fit perfectly */
.tbf-logo-wrapper { text-align: center; margin-bottom: 40px; }
.tbf-logo-wrapper img { max-width: 150px; height: auto; }

/* Settings Form Adjustments */
#sec-settings h3 { color: #6d5145; font-size: 16px; margin: 30px 0 15px 0; border-bottom: 1px solid #eee5d8; padding-bottom: 5px; }