/* --- High-End Dashboard CSS --- */
:root {
    --tru-sidebar-dark: #0f1412; /* Richer Dark Green */
    --tru-sidebar-hover: #1a2421;
    --tru-gold: #e8b923;         
    --tru-gold-glow: rgba(232, 185, 35, 0.3);
    --tru-bg-light: #f4f7f6;     
    --tru-white: #ffffff;
    --tru-sidebar-width: 280px;
    --tru-sidebar-mini: 85px;
    --tru-card-radius: 24px;
}

body { 
     font-family: "Montserrat", sans-serif !important; 
    background-color: var(--tru-bg-light); 
    color: #1a1d1f; 
    margin: 0;
}

/* --- SIDEBAR: Luxury Dark --- */
#tru-sidebar {
    position: fixed; top: 0; left: 0;
    width: var(--tru-sidebar-width); height: 100vh;
    background: var(--tru-sidebar-dark); z-index: 1050;
    display: flex; flex-direction: column;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 10px 0 40px rgba(0,0,0,0.1);
}

.tru-brand-box {
    height: 90px;
    padding: 0 30px;
    display: flex;
    align-items: center;
}

.tru-logo-box {
    width: 42px; height: 42px;
    background: var(--tru-gold);
    color: var(--tru-sidebar-dark);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    box-shadow: 0 0 20px var(--tru-gold-glow);
}

.tru-logo-text {
    font-weight: 800; color: #fff;
    letter-spacing: -0.5px; font-size: 1.4rem;
}

.tru-menu-container { flex-grow: 1; overflow-y: auto; padding: 1.5rem 0; }
.tru-label { color: #4b5563; font-size: 10px; text-transform: uppercase; font-weight: 800; padding: 20px 30px 10px; letter-spacing: 2px; opacity: 0.6; }

.tru-menu-item {
    color: #94a3b8; text-decoration: none !important;
    padding: 14px 30px; display: flex; align-items: center;
    gap: 15px; font-size: 15px; font-weight: 500; transition: 0.3s;
}

.tru-menu-item:hover { color: #fff; background: var(--tru-sidebar-hover); }
.tru-menu-item.active {
    color: var(--tru-gold) !important;
    background: rgba(232, 185, 35, 0.05);
    border-right: 4px solid var(--tru-gold);
}

/* --- CONTENT AREA: Apple Style Cleanliness --- */
#tru-content {
    margin-left: var(--tru-sidebar-width);
    width: calc(100% - var(--tru-sidebar-width));
    min-height: 100vh;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.tru-header {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    height: 80px; display: flex; align-items: center;
    padding: 0 40px; position: sticky; top: 0; z-index: 1000;
}

.tru-page-title { font-weight: 800; color: #1a1d1f; font-size: 2rem; letter-spacing: -1px; }

/* Luxury Cards */
.tru-stat-card {
    background: var(--tru-white);
    border: none;
    border-radius: var(--tru-card-radius);
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
    transition: 0.4s;
    height: 100%;
}

.tru-stat-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}

.tru-icon-wrap {
    width: 60px; height: 60px;
    border-radius: 18px;
    background: var(--tru-bg-light);
    color: var(--tru-sidebar-dark);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; transition: 0.3s;
}

.tru-stat-card:hover .tru-icon-wrap {
    background: var(--tru-gold);
    box-shadow: 0 10px 20px var(--tru-gold-glow);
}

.tru-btn-primary {
    background: var(--tru-sidebar-dark);
    color: var(--tru-gold);
    font-weight: 700; border: none;
    padding: 14px 30px; border-radius: 16px;
    transition: 0.3s; box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.tru-btn-primary:hover {
 background: #1a2421; color: #fff;
}

/* Desktop Collapse Mini */
body.toggled #tru-sidebar { width: var(--tru-sidebar-mini); }
body.toggled #tru-content { margin-left: var(--tru-sidebar-mini); width: calc(100% - var(--tru-sidebar-mini)); }
body.toggled .tru-text, body.toggled .tru-label, body.toggled .tru-arrow { opacity: 0; display: none !important; }


/* sidebar */
:root {
        --ts-deep: #033500;
        --ts-gold: #c69320;
        --ts-sidebar-w: 280px;
    }

    #sidebar-wrapper {
        position: fixed; top: 0; bottom: 0; left: 0;
        width: var(--ts-sidebar-w); background: var(--ts-deep);
        z-index: 4000; transition: all 0.4s ease;
        display: flex; flex-direction: column;
        border-right: 1px solid rgba(255,255,255,0.05);
        
    }
    .sidebar_img{
        background-color: white;
    padding: 0px;
    width: 150px;
    display: block;
    margin: auto;
    }
    .brand-section{
        background-color: white;
    }

    body.toggled #sidebar-wrapper { left: calc(var(--ts-sidebar-w) * -1) !important; }
    @media (max-width: 991px) {
        #sidebar-wrapper { left: calc(var(--ts-sidebar-w) * -1); }
        body.toggled #sidebar-wrapper { left: 0 !important; }
    }

    .nav-label { color: #5c6c67; font-size: 10px; text-transform: uppercase; font-weight: 800; padding: 22px 25px 8px; letter-spacing: 1.5px; }
    
    .menu-link {
        color: #a4b1ad; text-decoration: none !important; padding: 12px 20px;
        display: flex; align-items: center; gap: 12px; font-size: 14px; transition: 0.3s;
        margin: 2px 10px; border-radius: 12px;
    }
    .menu-link:hover, .menu-link.active { color: #fff; background: #1e2623; }
    .menu-link.active { color: var(--ts-gold) !important; background: rgba(198, 147, 32, 0.08); font-weight: 600; }

    .submenu-box { background: rgba(0,0,0,0.15); margin: 5px 15px; border-radius: 12px; overflow: hidden; }
    .sub-item { display: block; padding: 10px 15px 10px 48px; color: #788884; font-size: 13px; text-decoration: none !important; transition: 0.2s; }
    .sub-item:hover { color: var(--ts-gold); }

    .tru-arrow { transition: transform 0.3s ease; color: var(--ts-gold); opacity: 0.6; }
    .menu-link:not(.collapsed) .tru-arrow { transform: rotate(180deg); opacity: 1; }

    /* singup */

    :root { --ts-green: #0a2216; --ts-gold: #c69320; }
        body { background: #f8fafc; }
        #hub-wrapper { margin-left: 280px; transition: 0.4s; min-height: 100vh; }
        body.toggled #hub-wrapper { margin-left: 0; }
        @media (max-width: 991px) { #hub-wrapper { margin-left: 0 !important; } }

        /* Profile Header Card */
        .client-header-card { background: var(--ts-green); border-radius: 24px; padding: 40px; color: #fff; position: relative; overflow: hidden; }
        .client-header-card::after { content: ''; position: absolute; right: -50px; top: -50px; width: 200px; height: 200px; background: rgba(198, 147, 32, 0.1); border-radius: 50%; }
        
        .stat-widget { background: #fff; border-radius: 20px; border: 1px solid #eef2f1; padding: 25px; height: 100%; transition: 0.3s; }
        .stat-widget:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
        
        .tab-btn { border: none; background: transparent; padding: 7px 7px; font-weight: 700; color: #94a3b8; border-bottom: 3px solid transparent; transition: 0.3s; }
        .tab-btn.active { color: var(--ts-green); border-bottom-color: var(--ts-gold); }
        
        .job-row { background: #fff; border-radius: 15px; border: 1px solid #eef2f1; margin-bottom: 12px; padding: 15px 20px; transition: 0.2s; }
        .job-row:hover { border-color: var(--ts-gold); background: #fcfdfe; }
        /* index */

            :root {
            --ts-green: #0a2216; 
            --ts-gold: #c69320;
            --ts-sidebar-w: 280px;
        }

        body { background: #f8fafc; margin: 0; overflow-x: hidden; }
        
        #hub-wrapper {
            margin-left: var(--ts-sidebar-w);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            min-height: 100vh;
        }
.btn_new {
    /* Premium Gradient */
    background: #1f5c3a;
    color: var(--ts-gold);

    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px !important;
    border-radius: 14px;

    /* Border */
    border: 1px solid rgba(212, 175, 55, 0.4);

    /* Typography */
    font-weight: 600;
    font-size: 15px;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    white-space: nowrap;

    /* Premium Effects */
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);

    /* Glass + Depth */
    backdrop-filter: blur(6px);
    box-shadow: 
        0 6px 18px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.deleteBtn{
    background: #ef4444 !important; border-radius: 12px !important;
}
.canceBtn{
    background: #f1f5f9 !important; color: #64748b; border-radius: 12px;
}
.delAlert{
    width: 80px !important; height: 80px !important; background: #fff5f5 !important; border-radius: 50%; color: #ef4444 !important; 
}
.delAlert .bx-trash-alt{
   font-size: 3rem !important;
}
.viewH1{
    color:var(--ts-green); letter-spacing:-1px;
}
.view_btn1{
    padding: 10px 20px !important;
    display: inline-block ;
    border-radius: 10px;
    text-decoration: none;
    color:var(--ts-gold);
   background:var(--ts-green);
       border: 1px solid #06160e !important;
}
.view_btn2{
    padding: 10px 20px !important;
    display: inline-block ;
    border-radius: 10px;
    text-decoration: none;
     color:var(--ts-gold) !important;
    background-color: white !important;
    border: 1px solid #06160e !important;
    margin-right: 10px;
}

        .h1s{
            color:var(--ts-green); letter-spacing:-1.5px
        }
        .h2s{
            font-size: 2.8rem;
        }
        .btn2{
            border: 2px dashed #ddd; color: #999; border-radius: 15px;
        }

        body.toggled #hub-wrapper { margin-left: 0; }

        @media (max-width: 991px) {
            #hub-wrapper { margin-left: 0 !important; width: 100%; }
        }

        /* --- New UI Elements --- */
        .stat-card { background: #fff; border-radius: 25px; padding: 30px; transition: 0.3s; height: 100%; border: 1px solid #eef2f1; }
        .stat-card:hover { transform: translateY(-8px); border-color: var(--ts-gold); box-shadow: 0 15px 35px rgba(0,0,0,0.05); }

        .table-card { background: #fff; border-radius: 25px; border: 1px solid #eef2f1; padding: 25px; }
        .tru-table thead { background: #f8fafc; color: var(--ts-green); font-weight: 700; }
        .tru-table th { border: none; padding: 15px; font-size: 13px; text-transform: uppercase; }
        .tru-table td { padding: 15px; vertical-align: middle; border-bottom: 1px solid #f1f5f9; font-size: 14px; }

        .badge-status { padding: 6px 12px; border-radius: 10px; font-size: 11px; font-weight: 700; }
        .bg-success-soft { background: #e6f9ed; color: #1ea944; }
        .bg-warning-soft { background: #fff9e6; color: #c69320; }

        .activity-item { border-left: 2px solid #eef2f1; padding-left: 20px; position: relative; padding-bottom: 20px; }
        .activity-item::before { 
            content: ''; position: absolute; left: -7px; top: 0; 
            width: 12px; height: 12px; background: var(--ts-gold); border-radius: 50%;
        }

        #hub-overlay {
            position: fixed; inset: none; background: rgba(0,0,0,0.5);
            display: none; z-index: 3500; backdrop-filter: blur(4px);
        }
        @media (max-width: 991px) { body.toggled #hub-overlay { display: block; } }

        /* all user */

           :root {
            --ts-green: #0a2216; 
            --ts-gold: #c69320;
            --ts-sidebar-w: 280px;
        }
        body {  background: #f8fafc; margin: 0; overflow-x: hidden; }
        
        #hub-wrapper { margin-left: var(--ts-sidebar-w); transition: 0.4s ease; min-height: 100vh; }
        body.toggled #hub-wrapper { margin-left: 0; }
        @media (max-width: 991px) { #hub-wrapper { margin-left: 0 !important; width: 100%; } }

        /* Table Card */
        .table-card { background: #fff; border-radius: 20px; border: 1px solid #eef2f1; box-shadow: 0 5px 20px rgba(0,0,0,0.03); overflow: hidden; }
        .tru-table thead th { background: #f8fafc; color: var(--ts-gold); padding: 18px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
        .tru-table td { padding: 18px; font-size: 14px; vertical-align: middle; border-bottom: 1px solid #f8fafc; }
        
        /* Action Buttons */
        .btn-action { width: 35px; height: 35px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; transition: 0.3s; }
        .btn-view { color: #6366f1; background: #eef2ff; border: none; }
        .btn-edit { color: #10b981; background: #ecfdf5; border: none; }
        .btn-delete { color: #ef4444; background: #fef2f2; border: none; }
        .btn-action:hover { transform: translateY(-2px); filter: brightness(0.9); }

        /* #hub-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: none; z-index: 3500; backdrop-filter: blur(4px); } */
        body.toggled #hub-overlay { display: block; }

        /* add user */

        /* view user */
         :root { --ts-green: #0a2216; --ts-gold: #c69320; }
        body { background: #f8fafc; }
        #hub-wrapper { margin-left: 280px; transition: 0.4s; }
        body.toggled #hub-wrapper { margin-left: 0; }
        
        .profile-card { background: #fff; border-radius: 20px; border: 1px solid #eef2f1; padding: 30px; text-align: center; }
        .user-avatar-large { width: 100px; height: 100px; background: var(--ts-green); color: var(--ts-gold); border-radius: 25px; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; margin: 0 auto 20px; font-weight: bold; }
        
        .info-label { font-size: 11px; text-transform: uppercase; font-weight: 800; color: #94a3b8; letter-spacing: 1px; }
        .info-value { font-weight: 600; color: var(--ts-green); margin-bottom: 15px; }
        
        .activity-card { background: #fff; border-radius: 20px; border: 1px solid #eef2f1; padding: 25px; }
        .job-status-pill { padding: 4px 12px; border-radius: 8px; font-size: 11px; font-weight: 700; }

        /* all customer */
             :root { --ts-green: #0a2216; --ts-gold: #c69320; --ts-sidebar-w: 280px; }
        body {  background: #f8fafc; margin: 0; overflow-x: hidden; }
        #hub-wrapper { margin-left: var(--ts-sidebar-w); transition: 0.4s ease; min-height: 100vh; }
        body.toggled #hub-wrapper { margin-left: 0; }
        @media (max-width: 991px) { #hub-wrapper { margin-left: 0 !important; width: 100%; } }

        .table-card { background: #fff; border-radius: 20px; border: 1px solid #eef2f1; box-shadow: 0 5px 20px rgba(0,0,0,0.03); overflow: hidden; }
        .tru-table thead th { background: #f8fafc; color: var(--ts-gold); padding: 18px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
        .tru-table td { padding: 18px; font-size: 14px; vertical-align: middle; border-bottom: 1px solid #f8fafc; }
        
        .btn-action { width: 35px; height: 35px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; transition: 0.3s; border: none; text-decoration: none; }
        .btn-view { color: #6366f1; background: #eef2ff; }
        .btn-edit { color: #10b981; background: #ecfdf5; }
        .btn-delete { color: #ef4444; background: #fef2f2; }
        .btn-action:hover { transform: translateY(-2px); filter: brightness(0.9); }

        /* add customer */
         :root { --ts-green: #0a2216; --ts-gold: #c69320; --ts-sidebar-w: 280px; }
        

        
        #hub-wrapper { margin-left: var(--ts-sidebar-w); transition: 0.4s; min-height: 100vh; padding-bottom: 0px !important; }
        body.toggled #hub-wrapper { margin-left: 0; }
        @media (max-width: 991px) { #hub-wrapper { margin-left: 0 !important; } }

        /* Premium Form Card */
        .client-form-card { 
            background: #fff; 
            padding: 2rem; 
            border-radius: 24px; 
            box-shadow: 0 10px 40px rgba(0,0,0,0.02); 
            max-width: 850px; 
            margin: 40px auto; 
            border: 1px solid #edf2f7; 
        }

              .client-form-card  .form-header h2 { font-weight: 800; color: var(--ts-green); letter-spacing: -1.5px; }
        
               .client-form-card  .section-divider { 
            color: var(--ts-gold); 
            font-weight: 800; 
            font-size: 0.75rem; 
            text-transform: uppercase; 
            letter-spacing: 1px;
            display: block;
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 2px solid #f8fafc;
            /* border-left: 5px solid #198754; */
        }

               .client-form-card .form-label { font-weight: 700; font-size: 0.8rem; color: var(--ts-green); margin-bottom: 10px; }
        
              .client-form-card  .form-control,     .client-form-card  .form-select { 
            padding: 0.9rem 1.2rem; 
            border: 1.5px solid #e2e8f0; 
            border-radius: 14px; 
            font-size: 0.95rem;
            background: #fcfdfe;
            transition: 0.3s;
        }

           .form-control:focus { 
            border-color: var(--ts-gold); 
            background: #fff; 
            box-shadow: 0 0 0 4px rgba(198, 147, 32, 0.1); 
        }

        /* Button Styling */
           .client-form-card   .btn-save-client { 
            background: var(--ts-green); 
            color: var(--ts-gold); 
            padding: 1rem; 
            border-radius: 16px; 
            font-weight: 600; 
            border: none; 
         width: auto;
            transition: 0.3s;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .btn-save-client:hover { 
            background: #000; 
            transform: translateY(-3px); 
            box-shadow: 0 12px 24px rgba(0,0,0,0.15); 
        }

        .btn-cancel-action { 
            background: #f1f5f9; 
            color: #64748b; 
            padding: 1rem; 
            border-radius: 16px; 

            border: none; 
            width: 100%; 
font-weight: 600;
        }
.btndiv{
    display: flex;
   justify-content: space-between;
    align-items: center;
}
.btndiv button{
    margin-top: 20px;
}

        /* add customer */
        :root { --ts-green: #0a2216; --ts-gold: #c69320; --ts-sidebar-w: 280px; }
        
        body { background: #f8fafc; overflow-x: hidden; }
        
        #hub-wrapper { margin-left: var(--ts-sidebar-w); transition: 0.4s; min-height: 100vh; padding-bottom: 0px !important; }
        body.toggled #hub-wrapper { margin-left: 0; }
        @media (max-width: 991px) { #hub-wrapper { margin-left: 0 !important; } }

        /* Premium Form Card */
        .client-form-card { 
            background: #fff; 
            padding: 3.5rem; 
            border-radius: 24px; 
            box-shadow: 0 10px 40px rgba(0,0,0,0.02); 
            max-width: 850px; 
            margin: 40px auto; 
            border: 1px solid #edf2f7; 
        }

        .form-header h2 { font-weight: 800; color: var(--ts-green); letter-spacing: -1.5px; }
        
        .section-divider { 
            color: var(--ts-gold); 
            font-weight: 800; 
            font-size: 0.75rem; 
            text-transform: uppercase; 
            letter-spacing: 1px;
            display: block;
            margin-bottom: 25px;
            padding-bottom: 10px;
         
        }/* --- Section Divider Premium Dark --- */

[data-theme="dark"] .section-divider {
    color: var(--ts-gold) !important;
    background: linear-gradient(90deg, rgba(198, 147, 32, 0.15) 0%, transparent 100%) !important;
    padding: 12px 15px !important;
    border-left: 4px solid var(--ts-gold) !important;
    border-radius: 4px;
    font-weight: 800;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: block;
    margin-top: 35px;
    margin-bottom: 25px;
    /* Ek halki si glow effect divider par */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
[data-theme="dark"] .client-form-card .section-divider {
    border-bottom: none !important;
}

/* Jab section divider ke upar hover ho (Optional but cool) */
[data-theme="dark"] .section-divider:hover {
    background: linear-gradient(90deg, rgba(198, 147, 32, 0.25) 0%, transparent 100%) !important;
    transition: 0.3s ease;
}

        .form-label { font-weight: 700; font-size: 0.8rem; color: var(--ts-green); margin-bottom: 10px; }
        
        .form-control, .form-select { 
            padding: 0.9rem 1.2rem; 
            border: 1.5px solid #e2e8f0; 
            border-radius: 14px; 
            font-size: 0.95rem;
            background: #fcfdfe;
            transition: 0.3s;
        }

        .form-control:focus { 
            border-color: var(--ts-gold); 
            background: #fff; 
            box-shadow: 0 0 0 4px rgba(198, 147, 32, 0.1); 
        }

        /* Button Styling */
        .btn-save-client { 
            background: var(--ts-green); 
            color: var(--ts-gold); 
            padding: 1rem; 
            border-radius: 16px; 
            font-weight: 800; 
            border: none; 
            width: 100%; 
            transition: 0.3s;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .btn-save-client:hover { 
            background: #000; 
            transform: translateY(-3px); 
            box-shadow: 0 12px 24px rgba(0,0,0,0.15); 
        }

        .btn-cancel-action { 
            background: #f1f5f9; 
            color: #64748b; 
            padding: 1rem; 
            border-radius: 16px; 
            font-weight: 700; 
            border: none; 
            width: 100%; 
        }

       
        
  /* Parent Container to hold the custom arrow */
    .ts-dropdown-container {
        position: relative;
        max-width: 100%; /* Aap apne hisab se width set kar sakte hain */
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    /* Main Select Style */
    .ts-select-field {
        width: 100%;
        padding: 12px 18px;
        padding-right: 45px; /* Arrow ke liye jagah */
        border: 2px solid #f1f5f9;
        border-radius: 14px;
        background: #f8fafc;
        font-size: 0.95rem;
        color: #475569;
        cursor: pointer;
        appearance: none; /* Default arrow hide karne ke liye */
        -webkit-appearance: none;
        -moz-appearance: none;
        transition: all 0.3s ease;
    }

    /* Focus State */
    .ts-select-field:focus {
        background: #fff;
        border-color: #c69320; /* TrueState Gold */
        box-shadow: 0 0 0 4px rgba(198, 147, 32, 0.1);
        outline: none;
    }

    /* Custom Arrow Icon using Boxicons */
    .ts-dropdown-container::after {
        content: '\ea4a'; /* Boxicons 'chevron-down' ka code */
        font-family: 'boxicons';
        position: absolute;
        right: 18px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.3rem;
        color: #0a2216; /* TrueState Green */
        pointer-events: none; /* Click select box pe hi jaye */
        transition: 0.3s ease;
    }

    /* Arrow Rotate on Focus (Optional but looks cool) */
    .ts-dropdown-container:focus-within::after {
        transform: translateY(-50%) rotate(180deg);
        color: #c69320;
    }

 
      :root {
    --ts-green: #0a2216;
    --ts-gold: #c69320;
    --ts-sidebar-w: 280px;
}
.error-message {
    color: #f06548;
    font-size: 12px;
    margin-top: 5px;
    display: none; /* By default hidden */
}
.is-invalid {
    border-color: #f06548 !important;
}
#ts-page-content {
    margin-left: var(--ts-sidebar-w);
    transition: 0.4s;
    min-height: 100vh;
}

/* Card */
.user-card {
    background: #fff;
    padding: 2.8rem;
    border-radius: 22px;
    box-shadow: 0 15px 40px rgba(10, 34, 22, 0.05);
    max-width: 520px;
    margin: 60px auto;
    border: 1px solid #edf2f7;
    transition: 0.3s;
}

.user-card:hover {
    transform: translateY(-4px);
}

/* Labels */
.form-label {
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--ts-green);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

/* Inputs & Select */
.form-control,
.form-select {
    padding: 0.85rem 1.2rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    font-size: 0.95rem;
    background-color: #f9fbfd;
    transition: all 0.3s ease;
}

/* Placeholder */
.form-control::placeholder {
    color: #94a3b8;
    font-size: 0.9rem;
}

/* Hover */
.form-control:hover,
.form-select:hover {
    border-color: var(--ts-gold);
}

/* Focus Effect */
.form-control:focus,
.form-select:focus {
    border-color: var(--ts-gold);
    box-shadow: 0 0 0 3px rgba(198, 147, 32, 0.15);
    background-color: #fff;
}

/* Custom Select Arrow */
.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg fill='%230a2216' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px;
    cursor: pointer;
}

/* Password Icon */
.password-wrapper {
    position: relative;
}

.toggle-password {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #64748b;
    font-size: 1.2rem;
    transition: 0.3s;
}

.toggle-password:hover {
    color: var(--ts-gold);
}

/* Main Button */
.btn-main {
    background: linear-gradient(135deg, var(--ts-green), #0f3d2e);
    color: var(--ts-gold);
    padding: 0.9rem;
    border-radius: 14px;
    font-weight: 700;
    border: none;
    width: 100%;
    cursor: pointer;
    letter-spacing: 0.5px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.btn-main:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25);
    background: linear-gradient(135deg, #0f3d2e, var(--ts-green));
}

.btn-main:active {
    transform: scale(0.97);
}


/* Cancel Button */
.btn-cancel {
    background: #f8fafc;
    color: #475569;
    padding: 0.9rem;
    border-radius: 14px;
    font-weight: 600;
    border: 1px solid #e2e8f0;
    width: 100%;
    cursor: pointer;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
}

.btn-cancel:hover {
    background: #e2e8f0;
    transform: translateY(-2px);
}

.btn-cancel:active {
    transform: scale(0.97);
}

/* apprasel view */

   :root { --ts-green: #0a2e2a; --ts-gold: #c5a059; --ts-light-bg: #f4f7f6; }
    
        
        .client-header-card { background: linear-gradient(135deg, var(--ts-green) 0%, #16423c 100%); color: white; border-radius: 20px; padding: 40px; }
        
        /* Stats Styling */
        .stat-widget { background: white; border-radius: 15px; padding: 20px; border: 1px solid #eee; }
        
        /* Detailed Job Card */
        .job-card { background: white; border-radius: 20px; border: 1px solid #eef0f2; margin-bottom: 25px; overflow: hidden; }
        .card-side-status { width: 8px; background: var(--ts-gold); }
        
        /* Section Styling */
        .details-container { padding: 25px; }
        .info-group { margin-bottom: 20px; }
        .info-label { font-size: 0.7rem; color: #888; text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px; margin-bottom: 3px; }
        .info-value { font-size: 0.88rem; color: #2d3436; font-weight: 600; line-height: 1.4; }
        
        .divider-v { border-right: 1px dashed #dfe6e9; }
        .bg-detail { background-color: var(--ts-light-bg); border-radius: 12px; padding: 15px; }
        
        /* Fee Tags */
        .fee-item { font-size: 0.85rem; display: flex; justify-content: space-between; margin-bottom: 5px; }
        .total-fee-box { border-top: 2px solid var(--ts-gold); margin-top: 10px; padding-top: 10px; font-weight: 800; font-size: 1.1rem; color: var(--ts-green); }
        
        .badge-custom { padding: 6px 12px; border-radius: 8px; font-size: 0.75rem; font-weight: 700; }
  :root {
        --ts-green: #0a2e2a;
        --ts-gold: #c5a059;
        --ts-input-bg: #f8fafc;
        --ts-border: #e2e8f0;
    }

    /* Filter Card Styling */
    .premium-filter-card {
        background: #fff;
        border: 1px solid var(--ts-border);
        border-radius: 24px;
        padding: 30px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.02);
    }
/* --- User Directory Premium Dark Theme --- */

/* Page Background */
[data-theme="dark"] #hub-wrapper {
    background-color: #0b0f19;
}

/* Page Header & Texts */
[data-theme="dark"] h2 {
    color: #ffffff !important;
}

[data-theme="dark"] .text-muted {
    color: #94a3b8 !important;
}

/* Premium Filter Card */
[data-theme="dark"] .premium-filter-card {
    background: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 25px;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .premium-label {
    color: #cbd5e1 !important;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 8px;
    display: block;
}

/* Filter Inputs */
[data-theme="dark"] .premium-group {
    position: relative;
    background: #1e293b;
    border-radius: 12px;
    border: 1px solid #334155;
    display: flex;
    align-items: center;
}

[data-theme="dark"] .premium-group i {
    padding: 0 12px;
    color: var(--ts-gold);
}

[data-theme="dark"] .premium-control {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    padding: 10px 5px;
    width: 100%;
}

[data-theme="dark"] .premium-control::placeholder {
    color: #64748b;
}

/* Filter Buttons */
[data-theme="dark"] .btn-apply {
    background: var(--ts-gold) !important;
    color: #000 !important;
    border: none;
    border-radius: 12px;
    padding: 10px 20px;
    font-weight: 700;
}

[data-theme="dark"] .btn-reset {
    background: #1e293b !important;
    color: #ffffff !important;
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 10px 15px;
}

/* Table Enhancements in Dark Mode */
[data-theme="dark"] .table-card {
    background: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    overflow: hidden;
}

[data-theme="dark"] .tru-table thead th {
    background: #1f2937;
    color: var(--ts-gold) !important;
    border-bottom: 2px solid #334155;
}

[data-theme="dark"] .tru-table tbody td {
    background: transparent !important;
    border-bottom: 1px solid #1e293b;
    color: #ffffff !important;
}

[data-theme="dark"] .tru-table .text-dark {
    color: #ffffff !important;
}

/* Status Badges */
[data-theme="dark"] .bg-success-subtle {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

[data-theme="dark"] .bg-warning-subtle {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

/* Action Buttons (View, Edit, Delete) */
[data-theme="dark"] .btn-action {
    background: #1e293b;
    color: #cbd5e1;
    border-radius: 8px;
    width: 35px;
    height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

[data-theme="dark"] .btn-view:hover { background: #3b82f6; color: white; }
[data-theme="dark"] .btn-edit:hover { background: #10b981; color: white; }
[data-theme="dark"] .btn-delete:hover { background: #ef4444; color: white; }

/* Pagination */
[data-theme="dark"] .page-link {
    background-color: #1e293b !important;
    color: #ffffff !important;
    border: 1px solid #334155 !important;
}

/* Delete Modal Dark Mode */
[data-theme="dark"] .modal-content {
    background: #111827 !important;
    color: #ffffff;
    border: 1px solid #334155;
}
    .premium-label {
        font-size: 0.7rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.05rem;
        color: #94a3b8;
        margin-bottom: 8px;
        display: block;
    }

    .premium-group {
        background: var(--ts-input-bg);
        border: 1px solid var(--ts-border);
        border-radius: 5px;
        padding: 0px 10px;
        display: flex;
        align-items: center;
        transition: 0.3s;
    }

    .premium-group:focus-within {
        background: #fff;
        border-color: var(--ts-gold);
        box-shadow: 0 0 0 4px rgba(197, 160, 89, 0.1);
    }

    .premium-group i { color: #94a3b8; font-size: 1.1rem; margin-right: 10px; }

    .premium-control {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: 0.9rem;
        font-weight: 500;
        padding: 8px 5px;
        width: 100%;
        color: var(--ts-green);
    }

    /* Custom Dropdown Arrow */
    select.premium-control {
        cursor: pointer;
        appearance: none;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right center;
    }

  
    .btn-reset {
        background: #f1f5f9;
        color: #64748b;
        height: 50px;
        width: 55px;
        border-radius: 12px;
        border: 1px solid var(--ts-border);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.3s;
    }
    :root {
    /* Light Mode Colors */
    --ts-green: #0a2216; 
    --ts-gold: #c69320;
    --ts-bg: #ffffff;
    --ts-light-bg: #f8fafc;
    --ts-text-main: #0f172a;
    --ts-text-muted: #64748b;
    --ts-border: #edf2f7;
    --ts-card-bg: #ffffff;
}

[data-theme="dark"] {
    /* Dark Mode Colors */
    --ts-green: #1a1a1a; 
    --ts-gold: #f1c40f;
    --ts-bg: #0f172a;
    --ts-light-bg: #1e293b;
    --ts-text-main: #f1f5f9;
    --ts-text-muted: #94a3b8;
    --ts-border: #334155;
    --ts-card-bg: #1e293b;
}

/* Base Body Style for Dark Mode transition */
body {
    background-color: var(--ts-bg);
    color: var(--ts-text-main);
    transition: background 0.3s ease;
}

.main-header {
    background: var(--ts-card-bg) !important;
   
}

.header-search input {
    background: var(--ts-light-bg);
    border: 1px solid var(--ts-border);
    color: var(--ts-text-main);
}

.text-dark { color: var(--ts-text-main) !important; }
.text-muted { color: var(--ts-text-muted) !important; }

.compact-premium-card, .tru-profile-menu {
    background: var(--ts-card-bg) !important;
    color: var(--ts-text-main);
    border: 1px solid var(--ts-border) !important;
}

.dropdown-item { color: var(--ts-text-muted); }
.dropdown-item:hover { background: var(--ts-light-bg); color: var(--ts-gold); }

/* Theme Toggle Button Style */
#theme-toggle {
    background: var(--ts-light-bg);
    border: none;
    color: var(--ts-gold);
    width: 40px;
    height: 40px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
/* --- Dashboard Premium Dark Theme --- */

[data-theme="dark"] #hub-wrapper {
    background-color: #0b0f19; /* Ultra Dark Background */
}

/* Titles and Main Text */
[data-theme="dark"] .h1s, 
[data-theme="dark"] h1, 
[data-theme="dark"] h2, 
[data-theme="dark"] h5 {
    color: #ffffff !important;
}

[data-theme="dark"] .text-muted {
    color: #94a3b8 !important; /* Soft grey for secondary text */
}

/* Stat Cards & Table Cards */
[data-theme="dark"] .stat-card, 
[data-theme="dark"] .table-card {
    background-color: #161e2d !important; /* Dark Grey-Blue Card */
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

/* Special Case: Green Card (Revenue) in Dark Mode */
[data-theme="dark"] .stat-card[style*="var(--ts-green)"] {
    background: linear-gradient(135deg, #0a2216 0%, #05110b 100%) !important;
    border: 1px solid rgba(198, 147, 32, 0.3) !important; /* Gold subtle border */
}

/* Table Enhancements */
[data-theme="dark"] .tru-table {
    color: #ffffff !important;
}

[data-theme="dark"] .tru-table thead th {
    background-color: #1e293b;
    color: var(--ts-gold) !important;
    border-bottom: 2px solid #334155;
}

[data-theme="dark"] .tru-table tbody td {
    border-bottom: 1px solid #2d3748;
    color: #ffffff !important;
}

[data-theme="dark"] .text-dark {
    color: #ffffff !important; /* Forced white for important labels */
}

/* Status Badges in Dark Mode */
[data-theme="dark"] .bg-success-soft {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

[data-theme="dark"] .bg-warning-soft {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

/* Activity Feed Items */
[data-theme="dark"] .activity-item {
    border-left: 2px solid #334155;
}

[data-theme="dark"] .activity-item .fw-bold {
    color: #ffffff !important;
}

/* Action Buttons */
[data-theme="dark"] .btn2 {
    background: #1e293b;
    border-color: #334155;
    color: #ffffff !important;
}

[data-theme="dark"] .btn2:hover {
    background: var(--ts-gold);
    color: #000 !important;
}/* --- Global Table Styling --- */
.tru-table {
    border-collapse: separate;
    border-spacing: 0 8px; /* Rows ke beech mein gap */
    width: 100%;
    margin-top: -10px;
}

.tru-table thead th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    padding: 15px 20px;
    border: none;
    color: var(--ts-text-muted);
}

.tru-table tbody tr {
    transition: all 0.3s ease;
    border-radius: 12px;
}

.tru-table tbody td {
    padding: 18px 20px;
    vertical-align: middle;
    background: var(--ts-card-bg); /* Default background */
    border-top: 1px solid var(--ts-border);
    border-bottom: 1px solid var(--ts-border);
}

/* First and Last Column Border Radius */
.tru-table tbody td:first-child {
    border-left: 1px solid var(--ts-border);
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}
.tru-table tbody td:last-child {
    border-right: 1px solid var(--ts-border);
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* --- Dark Mode Table Specifics --- */
[data-theme="dark"] .tru-table tbody td {
    background: #1e293b !important; /* Thoda sa light black card ke andar */
    border-color: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .tru-table thead th {
    color: var(--ts-gold) !important;
}

/* Hover Effect: Dark mode mein row glow karegi */
[data-theme="dark"] .tru-table tbody tr:hover td {
    background: #27354d !important;
    
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    border-color: var(--ts-gold) !important; /* Row border gold ho jayegi hover par */
    cursor: pointer;
}

/* Status Badge Styling */
.badge-status {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    display: inline-block;
}

[data-theme="dark"] .bg-success-soft {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #34d399 !important;
}

[data-theme="dark"] .bg-warning-soft {
    background: rgba(245, 158, 11, 0.1) !important;
    color: #fbbf24 !important;
}
    .btn-reset:hover { background: #e2e8f0; transform: rotate(-180deg); color: #0f172a; }
        @media screen and (min-width:300px) and (max-width:768px) {
            .btndiv{
           
                display: unset;
            }
            .btndiv a{
                 margin-top: 10px !important;
                 margin-bottom: 10px !important;
                 display: inline-block;
            }
            #ts-page-content{
                margin-left: 0px !important;
            }
            .modal-dialog-end {
                top: 82px !important; 
            }
            
        }
        /*  */  :root {
            --primary-color: #405189; /* Dashboard Theme Color */
            --bg-light: #f3f3f9;
        }

        .login_section {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-light);
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
        }

        /* Login Card Styling */
        .login-card {
            background: #fff;
            border: none;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            width: 100%;
            max-width: 450px;
            padding: 40px;
        }

              .login-card   .brand-logo {
            text-align: center;
            margin-bottom: 0px;
        }

              .login-card   .brand-logo h2 {
            color: var(--primary-color);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

               .login-card  .login-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: #495057;
            text-align: center;
        }

                .login-card .login-subtitle {
            color: #878a99;
            font-size: 0.9rem;
            text-align: center;
            margin-bottom: 13px;
        }

        /* Form Controls */
              .login-card   .form-label {
            font-size: 0.85rem;
            font-weight: 600;
            color: #495057;
        }

               .login-card  .input-group-text {
            background: #f3f3f9;
            border: 1px solid #ced4da;
            border-right: none;
            color: #878a99;
        }

              .login-card   .form-control {
            border: 1px solid #ced4da;
            height: 45px;
            font-size: 0.9rem;
        }

               .login-card  .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: none;
        }

              .login-card   .btn-login {
            background-color: #033500; 
            border: none;
            color: white;
            font-weight: 600;
            height: 45px;
            transition: 0.3s;
        }

               .login-card  .btn-login:hover {
            background-color: #089b87;
            color: white;
            box-shadow: 0 4px 10px rgba(10, 179, 156, 0.3);
        }

              .login-card   .forgot-link {
            font-size: 0.85rem;
            color: #878a99;
            text-decoration: none;
        }

              .login-card   .forgot-link:hover {
            color: var(--primary-color);
        }

        /* Password Toggle */
               .login-card  .password-toggle {
            cursor: pointer;
            padding: 10px;
        }

        .error-message {
    color: #f06548;
    font-size: 12px;
    margin-top: 5px;
    display: none; /* By default hidden */
}
.is-invalid {
    border-color: #f06548 !important;
}

  :root { --primary-color: #405189; --error-color: #f06548; }
        .forget_section {  background-color: #f3f3f9; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
         .forget_section .login-card { background: #fff; padding: 40px; border-radius: 8px; box-shadow: 0 4px 24px rgba(0,0,0,0.1); width: 100%; max-width: 450px; }
         .forget_section .brand-logo { text-align: center; margin-bottom: 5px; }
         .forget_section .login-title { font-size: 18px; font-weight: 700; color: var(--primary-color); text-align: center; }
         .forget_section .login-subtitle { color: #878a99; text-align: center; margin-bottom: 30px; }
         .forget_section .error-message { color: var(--error-color); font-size: 12px; margin-top: 5px; display: none; }
         .forget_section .is-invalid { border-color: var(--error-color) !important; }
         .forget_section .btn-login { background-color: var(--primary-color); color: white; border: none; padding: 10px; font-weight: 600; }
         .forget_section .btn-login:hover { background-color: #364574; color: white; }
         .forget_section .icon-box { height: 80px; width: 80px; background: #f3f3f9; color: #033500; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 40px; margin: 0 auto 20px; }
   
         .adduserdiv button{
padding: 10px 20px;
border: none;
outline: none;
border-radius: 10px;
color: white;
background-color: #0a2216;
         }

         .add_user_btn1{
            padding: 10px 20px;
border: none;
outline: none;
border-radius: 10px;
color: white;
background-color: #0a2216;
width: auto;
display: inline-block;
         }
         .add_user_btn2{
            padding: 10px 20px;
border: none;
outline: none;
border-radius: 10px;
color: white;
background-color: #afb1b1;
         }

             
.mobile-footer-nav {
    position: fixed;
    bottom: 20px; /* Floating look */
    left: 15px;
    right: 15px;
    height: 70px;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 20px; /* Rounded corners for modern feel */
    box-shadow: 0 10px 30px rgba(64, 81, 137, 0.15);
    z-index: 2000;
    backdrop-filter: blur(10px); /* Frosted glass effect */
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0 10px;
}

.nav-item {
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #878a99;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    z-index: 2;
    flex: 1;
}

.nav-item i {
    font-size: 24px;
    transition: all 0.4s;
}

.nav-item span {
    font-size: 10px;
    font-weight: 600;
    opacity: 0; /* Hidden by default for a clean look */
    transform: translateY(10px);
    transition: all 0.4s;
}

/* Active State Styles */
.nav-item.active {
    color: #405189;
    transform: translateY(-5px); /* Bounces up */
}

.nav-item.active i {
    font-size: 26px;
}

.nav-item.active span {
    opacity: 1;
    transform: translateY(2px);
}

/* Logout Special Color */
.logout-accent.active {
    color: #f06548 !important;
}
/* Common button styles */
.btndiv button {
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 140px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    letter-spacing: 0.5px;
}

/* Go Back Button */
.btn-go-back {
    background-color: #f0f0f0;
    color: #333;
}

.btn-go-back:hover {
    background-color: #e0e0e0;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* Save Appraisal Button */
.btn-save {
    background: linear-gradient(135deg, #28a745, #198754);
    color: white;
}

.btn-save:hover {
    background: linear-gradient(135deg, #198754, #28a745);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}
/* Stunning Click Pulse Animation */
@keyframes nav-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(0.85); }
    100% { transform: scale(1); }
}

.nav-item:active i {
    animation: nav-pulse 0.3s ease-in-out;
}
/* --- Add Appraisal Form Premium Dark --- */

[data-theme="dark"] .client-form-card {
    background: #111827 !important; /* Deep Dark Card */
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
}

/* Form Header */
[data-theme="dark"] .form-header h2 {
    color: #ffffff !important;
}

/* Section Dividers - Isko sexy banate hain */
[data-theme="dark"] .section-divider {
    background: rgba(198, 147, 32, 0.1) !important; /* Gold tint background */
    color: var(--ts-gold) !important;
    border-left: 4px solid var(--ts-gold);
    border-radius: 4px;
    font-size: 13px;
    letter-spacing: 1px;
    margin-bottom: 25px;
}

/* Input Fields Design */
[data-theme="dark"] .form-control, 
[data-theme="dark"] .form-select {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #ffffff !important;
    padding: 12px 15px;
    border-radius: 10px;
}

[data-theme="dark"] .form-control:focus, 
[data-theme="dark"] .form-select:focus {
    background-color: #1e293b !important;
    border-color: var(--ts-gold) !important;
    box-shadow: 0 0 0 3px rgba(198, 147, 32, 0.15) !important;
    outline: none;
}

/* Readonly Input (Total Fee) */
[data-theme="dark"] .bg-light {
    background-color: #0f172a !important; /* Thoda aur dark taaki lock dikhe */
    border-style: dashed !important;
    color: var(--ts-gold) !important;
    font-weight: bold;
}

/* Labels */
[data-theme="dark"] .form-label {
    color: #e2e8f0 !important;
    font-weight: 500;
    font-size: 14px;
}

/* Placeholder Color */
[data-theme="dark"] .form-control::placeholder {
    color: #64748b !important;
}

/* Action Buttons */
[data-theme="dark"] .btn-save {
    background-color: var(--ts-gold) !important;
    color: #000 !important;
    font-weight: 700;
    padding: 12px 35px;
    border-radius: 10px;
    border: none;
    transition: 0.3s;
}

[data-theme="dark"] .btn-save:hover {
    background-color: #dcb04b !important;
    transform: translateY(-2px);
}

[data-theme="dark"] .btn-go-back {
    background: transparent !important;
    color: #94a3b8 !important;
    border: 1px solid #334155 !important;
    padding: 12px 35px;
    border-radius: 10px;
    transition: 0.3s;
}

[data-theme="dark"] .btn-go-back:hover {
    color: #ffffff !important;
    background: #1e293b !important;
}

/* Validation Error Style */
[data-theme="dark"] .is-invalid {
    border-color: #ef4444 !important;
    background-image: none !important;
}
/* --- Focus par Premium Dark Background --- */

[data-theme="dark"] .form-control:focus, 
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .premium-control:focus {
    /* Focus hote hi background thoda gehra ho jayega */
    background-color: #05080f !important; 
    
    /* Gold border aur halki si glow */
    border-color: var(--ts-gold) !important;
    color: #ffffff !important;
    
    /* 0px spread ke saath gold glow jo kaafi clean lagti hai */
    box-shadow: 0 0 0 3px rgba(198, 147, 32, 0.15) !important; 
    outline: none;
    transition: all 0.2s ease-in-out;
}

/* Default state (bina focus ke) */
[data-theme="dark"] .form-control, 
[data-theme="dark"] .form-select,
[data-theme="dark"] .premium-control {
    background-color: #161e2d !important; /* Card background se milta julta */
    border: none;
    color: #ffffff !important;
}

/* Chrome/Safari ke auto-fill background ko bhi fix karne ke liye */
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover, 
[data-theme="dark"] input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0px 1000px #1e293b inset !important;
    transition: background-color 5000s ease-in-out 0s;
}
/* --- Client View Premium Dark Theme --- */

[data-theme="dark"] #hub-wrapper {
    background-color: #0b0f19;
}

/* Info Cards (Main Sections) */
[data-theme="dark"] .info-card {
    background-color: #111827 !important; /* Deep Blackish Blue */
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

/* Banner Polish */
[data-theme="dark"] .premium-banner {
    background: linear-gradient(135deg, #06160e 0%, #0d3b2e 100%) !important;
    border: 1px solid rgba(197, 160, 89, 0.2);
}

[data-theme="dark"] .badge-profile {
    background: var(--ts-gold);
    color: #000;
}

/* Typography Colors */
[data-theme="dark"] .section-title {
    color: var(--ts-gold) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .data-label {
    color: #64748b !important; /* Muted slate for labels */
}

[data-theme="dark"] .data-value {
    color: #ffffff !important; /* Pure white for data */
}

/* Billing Highlights */
[data-theme="dark"] h2[style*="var(--ts-green)"] {
    color: #34d399 !important; /* Neon green for money */
    text-shadow: 0 0 15px rgba(52, 211, 153, 0.2);
}

/* Vertical Separator */
[data-theme="dark"] .v-line {
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Status Badges */
[data-theme="dark"] .status-pill {
    background: rgba(52, 211, 153, 0.1) !important;
    color: #34d399 !important;
    border: 1px solid rgba(52, 211, 153, 0.2);
}

[data-theme="dark"] .rush-pill {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Action Buttons (Footer) */
[data-theme="dark"] .btn-edit-dark {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    color: white !important;
}

[data-theme="dark"] .btn-back-outline {
    background: transparent !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}

[data-theme="dark"] .btn-back-outline:hover {
    background: #1e293b !important;
    color: white !important;
}

[data-theme="dark"] .border-top {
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}
[data-theme="dark"] .bx-bell {
    color: white;
}
  :root {
            --ts-green: #0d3b2e; /* Screenshot wala dark green */
            --ts-gold: #c5a059;
            --ts-bg: #f4f7f6;
            --ts-text-gold: #b38e4d;
        }


        /* Banner Style */
        .premium-banner {
            background-color: var(--ts-green);
            color: white;
            border-radius: 15px;
            padding: 40px;
            position: relative;
            overflow: hidden;
            margin-bottom: 30px;
            margin:20px;
        }

        .premium-banner::after {
            content: "";
            position: absolute;
            right: -20px;
            top: -20px;
            width: 150px;
            height: 150px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 50%;
        }

        .client-id-circle {
            position: absolute;
            right: 40px;
            top: 50%;
            transform: translateY(-50%);
            text-align: center;
            opacity: 0.8;
        }

        .badge-profile {
            background: white;
            color: black;
            padding: 5px 15px;
            border-radius: 50px;
            font-size: 12px;
            font-weight: bold;
            display: inline-block;
            margin-bottom: 15px;
        }

        /* Card Sections */
        .info-card {
            background: white;
            border-radius: 15px;
            padding: 30px;
            margin-bottom: 25px;
            border: 1px solid #eef0f2;
             margin:20px;
        }

        .section-title {
            color: var(--ts-text-gold);
            font-size: 13px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 25px;
            border-bottom: 1px solid #f0f0f0;
            padding-bottom: 10px;
        }

        .data-label {
            font-size: 11px;
            color: #999;
            text-transform: uppercase;
            font-weight: 600;
            margin-bottom: 5px;
        }

        .data-value {
            font-size: 15px;
            color: #333;
            font-weight: 600;
            margin-bottom: 20px;
                     margin:20px;
        }

        /* Status Badges */
        .status-pill {
            background: #e8f5e9;
            color: #2e7d32;
            padding: 4px 12px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: bold;
        }

        .rush-pill {
            background: #ffebee;
            color: #c62828;
            padding: 4px 12px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: bold;
        }

        /* Action Buttons */
        .btn-action {
            padding: 10px 25px;
            border-radius: 10px;
            font-weight: 600;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            transition: 0.2s;
        }
        .footer-actions-container{
    margin:20px;

}
/* --- User Profile & Table Premium Dark Polish --- */

[data-theme="dark"] #hub-wrapper {
    background-color: #0b0f19; /* Ultra Dark Main BG */
}

/* Titles */
[data-theme="dark"] h3, 
[data-theme="dark"] h4, 
[data-theme="dark"] h5 {
    color: #ffffff !important;
}

/* Profile Sidebar Card */
[data-theme="dark"] .profile-card {
    background-color: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
    text-align: center;
}

/* Stats Activity Cards */
[data-theme="dark"] .activity-card {
    background-color: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 20px;
    border-radius: 15px;
}

/* User Avatar Dark Mode */
[data-theme="dark"] .user-avatar-large {
    background: linear-gradient(135deg, #0d3b2e 0%, #06160e 100%) !important;
    color: var(--ts-gold) !important;
    border: 3px solid #1e293b !important;
    box-shadow: 0 0 20px rgba(197, 160, 89, 0.15);
}

/* Labels & Values */
[data-theme="dark"] .info-label {
    color: #64748b !important; /* Muted slate for labels */
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

[data-theme="dark"] .info-value {
    color: #f1f5f9 !important; /* Clean white for values */
    font-weight: 600;
}

/* --- Table Dark Mode Styling --- */
[data-theme="dark"] .table {
    color: #ffffff !important;
}

[data-theme="dark"] .table thead th {
    background: #1e293b !important;
    color: var(--ts-gold) !important;
    border-bottom: 2px solid #334155 !important;
    font-size: 11px;
    padding: 15px;
}

[data-theme="dark"] .table tbody td {
  
    color: #f1f5f9 !important;
    padding: 15px;
    background: #1e293b;
}

[data-theme="dark"] .table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

/* Status Pills */
[data-theme="dark"] .bg-success-subtle {
    background: rgba(52, 211, 153, 0.1) !important;
    color: #34d399 !important;
    border: 1px solid rgba(52, 211, 153, 0.2) !important;
}

[data-theme="dark"] .bg-primary-subtle {
    background: rgba(59, 130, 246, 0.1) !important;
    color: #60a5fa !important;
    border: 1px solid rgba(59, 130, 246, 0.2) !important;
}

[data-theme="dark"] .bg-warning-subtle {
    background: rgba(245, 158, 11, 0.1) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.2) !important;
}

/* Buttons */
[data-theme="dark"] .btn-light {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-light:hover {
    background-color: var(--ts-gold) !important;
    color: #000 !important;
}
        .btn-edit { background: #1a1a1a; color: white; border: none; }
        .btn-delete { border: 1px solid #ff4d4d; color: #ff4d4d; background: transparent; margin-left: 10px; }
        .btn-back { background: transparent; border: 1px solid #ccc; color: #666; float: right; }

        .v-line { border-right: 1px solid #eee; }

/* Content padding adjustment */
@media (max-width: 991px) {

}
 .client-form-card {
            background: #fff;
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            margin-top: 10px;
            margin-bottom: 20px;
        }
        .section-divider {
            display: block;
            font-weight: 700;
            text-transform: uppercase;
            font-size: 13px;
            color: #6c757d;
      
            margin-bottom: 25px;
            padding-bottom: 5px;
        }
        
        .add_user_btn1:hover { background: #333; }
        
        /* Error Styling */
        .form-control.is-invalid {
            border-color: #dc3545 !important;
            background-image: none !important;
        }
        .error-feedback {
            color: #dc3545;
            font-size: 12px;
            margin-top: 4px;
            display: none;
        }
        .is-invalid + .error-feedback {
            display: block;
        }
        .all_clientbtn1,.all_clientbtn2,.all_clientbtn3,.all_clientbtn4{
          
            padding: 8px 15px;
            text-decoration: none;
            font-size: 14px;
            margin: 5px;
            border-radius: 5px;

        }
        .all_clientbtn1{
  background-color: #033500;
            color: white;
        }
     
.all_clientbtn3 {
    background: #405189; 
    color: white;
    border: 1px solid var(--ts-border); 
    border-radius: 5px; 
    padding: 8px 13px; 
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
 
    font-weight: 500;
    transition: 0.3s;
    cursor: pointer;
    white-space: nowrap;
    margin: 0px !important;
}

.all_clientbtn3:hover {
    background: #000;
    border-color: var(--ts-green);
    color: white;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.all_clientbtn4{
    
    background: #e4e2e2; 
    color: rgb(0, 0, 0);
    border: 1px solid var(--ts-border); 
    border-radius: 5px; 
    padding: 8px 13px; 
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
 
    font-weight: 500;
    transition: 0.3s;
    cursor: pointer;
    white-space: nowrap;
    margin: 0px !important;
}


        
        .all_clientbtn2{
            background-color: #299cdb;
            color: rgb(255, 255, 255);
           

        }
        
        :root { --ts-green: #0a2e2a; --ts-gold: #c5a059; }
        body { background-color: #f8f9fa; font-family: 'Inter', sans-serif; }
        .client-header-card { background: linear-gradient(135deg, var(--ts-green) 0%, #16423c 100%); color: white; border-radius: 20px; padding: 40px; }
        .stat-widget { background: white; border-radius: 15px; padding: 20px; border: 1px solid #eee; transition: 0.3s; }
        .info-panel { background: white; border-radius: 18px; border: 1px solid #eef0f2; padding: 25px; margin-bottom: 30px; }
        .section-label { font-size: 0.75rem; color: var(--ts-gold); text-transform: uppercase; font-weight: 700; letter-spacing: 1px; margin-bottom: 15px; display: block; border-bottom: 1px solid #f0f0f0; padding-bottom: 5px; }
        .data-label { font-size: 0.75rem; color: #888; font-weight: 600; text-transform: uppercase; }
        .data-value { font-size: 0.95rem; color: #333; font-weight: 600; margin-bottom: 12px; }
        .tab-btn { background: none; border: none; padding: 10px 0; color: #666; font-weight: 600; position: relative; }
        .tab-btn.active { color: var(--ts-green); border-bottom: 3px solid var(--ts-gold); }
      



            
/* header */
   :root {
            --ts-deep: #033500;
            --ts-green: #0a2216; 
            --ts-gold: #c69320;
            --ts-light-bg: #f8fafc;
            --glass-bg: rgba(255, 255, 255, 0.8);
            --header-height: 75px;
            --ts-sidebar-w: 280px;
        }

        [data-theme="dark"] {
            --ts-light-bg: #0f172a;
            --glass-bg: rgba(15, 23, 42, 0.85);
            --text-main: #f1f5f9;
        }



        /* Sidebar Styles */
        #sidebar-wrapper {
            position: fixed; top: 0; bottom: 0; left: 0;
            width: var(--ts-sidebar-w); background: var(--ts-deep);
            z-index: 4000; transition: all 0.4s ease;
            display: flex; flex-direction: column;
        }

        @media (max-width: 991px) {
            #sidebar-wrapper { left: -280px; }
            body.toggled #sidebar-wrapper { left: 0; }
        }

        /* Header Styles */
        .main-header {
            height: var(--header-height); 
            background: var(--glass-bg); 
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            display: flex; align-items: center; padding: 0 25px;
            position: sticky; top: 0; z-index: 3000;
            border-bottom: 1px solid rgba(0,0,0,0.05);
        }

        .header-left { display: flex; align-items: center; gap: 20px; }

        .toggle-hub {
            width: 42px; height: 42px; border-radius: 10px;
            background: var(--ts-green); color: var(--ts-gold);
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; border: none; font-size: 22px;
            transition: 0.4s;
        }

        /* System Pulse & Animations */
        .system-pulse {
            display: flex; align-items: center; gap: 12px;
            padding: 6px 15px; background: rgba(198, 147, 32, 0.08);
            border-radius: 100px; border: 1px solid rgba(198, 147, 32, 0.2);
        }

        .pulse-dot {
            width: 8px; height: 8px; background: #10b981;
            border-radius: 50%; position: relative;
            animation: pulse-ring 2s infinite;
        }

        @keyframes pulse-ring {
            0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
            70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
            100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
        }

        .pulse-text { font-size: 12px; font-weight: 600; color: var(--ts-green); }
        [data-theme="dark"] .pulse-text { color: var(--ts-gold); }

        /* Actions & Profile */
        .header-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

        .icon-btn {
            width: 40px; height: 40px; border-radius: 10px; border: none;
            background: transparent; color: #64748b;
            display: flex; align-items: center; justify-content: center;
            font-size: 20px; transition: 0.3s; position: relative;
        }

        .profile-pill {
            display: flex; align-items: center; gap: 10px;
            padding: 5px 15px; background: var(--ts-light-bg);
            border-radius: 12px; cursor: pointer; border: 1px solid transparent;
        }

        .user-name { font-size: 13px; font-weight: 700; color: #1e293b; }
        .online-status { font-size: 9px; color: #10b981; font-weight: 800; text-transform: uppercase; }
.pulse-text { font-size: 12px; font-weight: 600; color: var(--ts-green); letter-spacing: 0.5px; }
        [data-theme="dark"] .pulse-text { color: var(--ts-gold); }

        /* Top-Right Custom Modals */
        .modal.custom-right-modal .modal-dialog {
            position: absolute; top: 75px; right: 25px;
            margin: 0; width: 320px;
            transform: translateY(-20px) scale(0.95);
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .modal.show.custom-right-modal .modal-dialog { transform: translateY(0) scale(1); }

        .custom-right-modal .modal-content {
            border: 1px solid rgba(0,0,0,0.05);
            border-radius: 20px; box-shadow: 0 15px 40px rgba(0,0,0,0.12);
        }
        /* Dark Mode Modal Tweak */
        [data-theme="dark"] .modal-content { background: #1e293b; color: white; }
        [data-theme="dark"] .bg-light { background: #334155 !important; color: #fff !important; }


        /* all_user */
            /* Account Actions Container */
.action-bundle {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* Base Button Style */
.btn-modern {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: none;
    transition: all 0.3s ease;
    text-decoration: none;
    position: relative;
}

/* Tooltip text behavior (optional) */
.btn-modern:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* View Button - Deep Blue */
.btn-view-modern {
    background: #e0e7ff;
    color: #4338ca;
}
.btn-view-modern:hover {
    background: #4338ca;
    color: #fff;
}

/* Edit Button - Amber/Gold */
.btn-edit-modern {
    background: #fef3c7;
    color: #b45309;
}
.btn-edit-modern:hover {
    background: #b45309;
    color: #fff;
}

/* Block/Delete Button - Rose/Red */
.btn-delete-modern {
    background: #fee2e2;
    color: #dc2626;
}
.btn-delete-modern:hover {
    background: #dc2626;
    color: #fff;
}

/* Unblock/Success Button - Emerald */
.btn-success-modern {
    background: #d1fae5;
    color: #059669;
}
.btn-success-modern:hover {
    background: #059669;
    color: #fff;
}.page-title-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-bottom: 20px;
        margin-left: -10px;
    margin-right: -10px;

}

.page-title-box h4 {
    margin: 0;
    font-weight: 600;
    font-size: 18px;
    color: #495057;
    text-transform: uppercase;
}

/* .breadcrumb-custom {
    display: flex;
    align-items: center;
    font-size: 14px;
    margin: 0;
}

.breadcrumb-custom a {
    text-decoration: none;
    color: #6c757d;
    transition: 0.3s;
}

.breadcrumb-custom a:hover {
    color: #405189;
}

.breadcrumb-custom .separator {
    margin: 0 8px;
    color: #adb5bd;
}

.breadcrumb-custom .active {
    color: #495057;
    font-weight: 500;
} */

   /* Page Header Card */
.page-header-card {
    background: #ffffff;
    padding: 22px 28px;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
    margin-bottom: 25px;
}

/* Title */
.page-title {
    font-weight: 700;
    font-size: 22px;
    color: var(--ts-green);
    letter-spacing: -0.5px;
}

/* Subtitle */
.page-subtitle {
    font-size: 13px;
    color: #6c757d;
}

/* Breadcrumb */
.breadcrumb-modern {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.breadcrumb-modern a {
    text-decoration: none;
    color: #6c757d;
    font-weight: 500;
    transition: 0.2s ease;
}

.breadcrumb-modern a:hover {
    color: var(--ts-green);
}

.breadcrumb-modern .active {
    color: var(--ts-green);
    font-weight: 600;
}

.breadcrumb-modern span {
    color: #adb5bd;
}

.modern-card {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.03);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
    height: 100%;
}

.modern-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.card-body-top {
    padding: 20px;
    display: flex;
    align-items: flex-start;
}

/* Icon Glass Effect */
.icon-glass {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

/* Typography */
.card-label-new {
    font-size: 0.85rem;
    font-weight: 700;
    color: #abb2b9;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin: 0;
}

.card-number {
    font-size: 1.8rem;
    font-weight: 800;
    color: #2c3e50;
    margin: 5px 0 0 0;
}

/* Decorative Elements */
.card-divider {
    height: 1px;
    background: #f1f3f4;
    margin: 0 20px 15px 20px;
}

.card-bottom {
    padding: 0 20px 20px 20px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Special Highlights */
.highlight-blue { background: linear-gradient(135deg, #405189, #5a6eb1); }
.highlight-green { background: linear-gradient(135deg, #033500, #1abc9c); }
.bg-white-20 { background: rgba(255, 255, 255, 0.2); }

/* Status Indicators */
.pulse-dot {
    height: 8px; width: 8px;
    background-color: #29b6f6;
    border-radius: 50%;
    display: inline-block;
    animation: pulse-animation 2s infinite;
}

.status-indicator-live {
    position: absolute;
    left: 20px; bottom: 25px;
    width: 10px; height: 10px;
    background: #033500;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(10, 179, 156, 0.2);
}

@keyframes pulse-animation {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(41, 182, 246, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(41, 182, 246, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(41, 182, 246, 0); }
}/* Card & Header */

/* Modern Card Dark Mode Updates */
[data-theme="dark"] .modern-card {
    background: #212529; /* Dark surface */
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .modern-card:hover {
    background: #262a2f; /* Slightly lighter on hover */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* Typography Dark Mode */
[data-theme="dark"] .card-label-new {
    color: #94a3b8; /* Muted blue-grey */
}

[data-theme="dark"] .card-number {
    color: #f8f9fa; /* High contrast white */
}

/* Divider & Bottom Dark Mode */
[data-theme="dark"] .card-divider {
    background: rgba(255, 255, 255, 0.05); /* Very subtle divider */
}

[data-theme="dark"] .card-bottom {
    color: #94a3b8;
}

/* Icon Glass Effects for Dark Mode */
[data-theme="dark"] .bg-primary-soft { background: rgba(64, 81, 137, 0.25); }
[data-theme="dark"] .bg-success-soft { background: rgba(10, 179, 156, 0.25); }
[data-theme="dark"] .bg-warning-soft { background: rgba(247, 184, 75, 0.25); }
[data-theme="dark"] .bg-info-soft    { background: rgba(41, 156, 219, 0.25); }
[data-theme="dark"] .bg-danger-soft  { background: rgba(240, 101, 72, 0.25); }

/* Pulse dot adjustment for Dark Mode */
[data-theme="dark"] .pulse-dot {
    background-color: #38bdf8; /* Brighter blue for visibility */
}

/* Status Indicator Dark Mode */
[data-theme="dark"] .status-indicator-live {
    border: 2px solid #212529; /* Matches card background */
}

/* Special Highlight Cards in Dark Mode */
/* Inhe hum thoda "Muted" gradient dete hain taaki ye aankhon ko na chubhein */
[data-theme="dark"] .highlight-blue {
    background: linear-gradient(135deg, #2b3964, #405189);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .highlight-green {
    background: linear-gradient(135deg, #066b5d, #033500);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.elite-card {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.05);
}

.card-header-elite {
    padding: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f1f4f8;
}

/* Glass Search Bar */
.search-glass {
    background: #f8fafc;
    border-radius: 12px;
    padding: 8px 15px;
    display: flex;
    align-items: center;
    border: 1px solid #e2e8f0;
}
.search-glass input {
    border: none;
    background: transparent;
    outline: none;
    margin-left: 10px;
    font-size: 14px;
}

/* Buttons */
.btn-add-elite {
    background: #405189;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    transition: 0.3s;
}/* Select Glass Styling */
.form-select-glass {
    border: none !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: 14px;
    color: #495057;
    padding-left: 10px;
    cursor: pointer;
    width: 180px; /* Aap adjust kar sakte hain */
    appearance: none; /* Default arrow hatane ke liye agar icon use kar rahe hain */
}

/* Dark Theme support (Agar dark mode use kar rahe hain) */
[data-theme="dark"] .form-select-glass {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .form-select-glass option {
    background-color: #212529; /* Dark background for options */
    color: #fff;
}

/* Header Action alignment fix */
.header-actions .search-glass {
    height: 42px; /* Dono ki height same rahegi */
    display: flex;
    align-items: center;
}
.btn-add-elite:hover { transform: scale(1.05); box-shadow: 0 10px 20px rgba(64,81,137,0.3); }

/* Avatars & Indicators */
.elite-avatar-wrapper { position: relative; width: 45px; height: 45px; }
.elite-avatar-initials {
    width: 100%; height: 100%; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    color: #000000; font-weight: 800;
}
.online-indicator {
    position: absolute; bottom: -2px; right: -2px;
    width: 12px; height: 12px; background: #033500;
    border: 2px solid #fff; border-radius: 50%;
}

/* Gradients */
.bg-primary-gradient { background: linear-gradient(135deg, #405189, #6a7ec1); }
.bg-info-gradient { background: linear-gradient(135deg, #033500, #1abc9c); }

/* Table Styling */
.elite-table thead th {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    color: #94a3b8; padding: 20px 10px; letter-spacing: 1px;
}
.elite-table tbody td { padding: 20px 10px; border-bottom: 1px solid #f8fafc; }

/* Status Glow Badges */
.status-glow {
    padding: 6px 14px; border-radius: 10px; font-size: 12px;
    font-weight: 700; display: inline-flex; align-items: center; gap: 8px;
}
.bg-success-glow { background: #e6f7f4; color: #033500; }
.bg-warning-glow { background: #fff8ec; color: #f7b84b; }

.glow-dot { width: 6px; height: 6px; border-radius: 50%; }
.glow-dot.success { background: #033500; box-shadow: 0 0 8px #033500; }
.glow-dot.warning { background: #f7b84b; box-shadow: 0 0 8px #f7b84b; }

/* Action Buttons */
.elite-action-btns .e-btn {
    width: 38px; height: 38px; border: none; border-radius: 10px;
    background: #f1f5f9; color: #64748b; transition: 0.3s;
}
.e-btn:hover { background: #405189; color: #fff; transform: translateY(-3px); }

/* Utils */
.fw-800 { font-weight: 800; }
.fw-600 { font-weight: 600; }
.extra-small { font-size: 10px; }/* Dark Theme Variables & Global Fixes */
[data-theme="dark"] {
    --elite-bg: #1a1d21;
    --elite-card-bg: #212529;
    --elite-border: #2e3439;
    --elite-text-main: #f8f9fa;
    --elite-text-muted: #94a3b8;
    --elite-header-light: #2a2f34;
}

/* Card & Table Backgrounds */
[data-theme="dark"] .elite-card {
    background: var(--elite-card-bg);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--elite-border);
}

[data-theme="dark"] .card-header-elite {
    border-bottom: 1px solid var(--elite-border);
}

[data-theme="dark"] .text-dark {
    color: var(--elite-text-main) !important;
}

/* Glass Search Bar (Dark) */
[data-theme="dark"] .search-glass {
    background: #2a2f34;
    border: 1px solid #363c44;
}

[data-theme="dark"] .search-glass input {
    color: #fff;
}

[data-theme="dark"] .search-glass i {
    color: var(--elite-text-muted);
}

/* Table Styling (Dark) */
[data-theme="dark"] .elite-table thead th {
    background-color: #2a2f34;
    color: #cbd5e1; /* Lighter grey for headers */
    border-bottom: 1px solid var(--elite-border);
}

[data-theme="dark"] .elite-table tbody td {
    border-bottom: 1px solid var(--elite-border);
    color: #e2e8f0;
}

[data-theme="dark"] .elite-table tr:hover td {
    background-color: rgba(255, 255, 255, 0.02);
}

/* Status Glow Badges (Dark Mode Optimization) */
[data-theme="dark"] .bg-success-glow {
    background: rgba(10, 179, 156, 0.15);
    color: #26e6c8;
}

[data-theme="dark"] .bg-warning-glow {
    background: rgba(247, 184, 75, 0.15);
    color: #fbd38d;
}

[data-theme="dark"] .bg-danger-glow {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

[data-theme="dark"] .bg-light {
    background: #2e3439 !important;
    color: #cbd5e1 !important;
}

/* Action Buttons (Dark) */
[data-theme="dark"] .elite-action-btns .e-btn {
    background: #2e3439;
    color: #94a3b8;
}

[data-theme="dark"] .e-btn:hover {
    background: #405189; /* Keep the brand color */
    color: #fff;
    box-shadow: 0 4px 12px rgba(64, 81, 137, 0.4);
}

/* Avatars (Dark Mode Border) */
[data-theme="dark"] .online-indicator {
    border-color: var(--elite-card-bg); /* Match card background */
}

/* Scrollbar styling for dark mode */
[data-theme="dark"] .table-responsive::-webkit-scrollbar {
    height: 8px;
}
[data-theme="dark"] .table-responsive::-webkit-scrollbar-thumb {
    background: #363c44;
    border-radius: 10px;
}

 .btn-outline-primary{
                padding: 14px 32px;
    background: #033500;
    color: #fff;
    border: none;
        }

        .preview-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px;
    background: #f8fafc;
    position: relative;
    text-align: center;
}

.preview-card img {
    max-width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
}

.preview-name {
    font-size: 13px;
    margin-top: 8px;
    word-break: break-all;
}

.file-icon {
    font-size: 40px;
    color: #4e73df;
}
.preview-card {
    border: 1px solid #ddd;
    padding: 5px;
    border-radius: 4px;
    text-align: center;
    margin-bottom: 10px;
    position: relative;
}

.preview-name {
    font-size: 12px;
    word-break: break-word;
}
.remove-btn {
    position: absolute;
    top: -5px;
    right: -5px;
    background: red;
    color: white;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 18px;
}
.file-icon {
    font-size: 40px;
    margin-bottom: 5px;
}


 /* Table Styles */
        .tru-table thead { background: #fdfdfd; border-bottom: 2px solid #eee; }
        .comment-row td { vertical-align: middle; padding: 10px 15px; font-size: 13px; border-bottom: 1px solid #f4f4f4; }
        
        .table-img-thumb {
            width: 35px; height: 35px; object-fit: cover; border-radius: 4px;
            border: 1px solid #ddd; margin-right: 3px; cursor: pointer;
        }

        /* Action Buttons */
        .action-bundle { display: flex; gap: 5px; justify-content: flex-end; }
        .btn-action {
            width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
            border-radius: 6px; border: none; transition: 0.2s; background: #f4f4f4; color: #444;
            text-decoration: none;
        }
        .btn-view:hover { background: #e3f2fd; color: #0d6efd; }
        .btn-reply:hover { background: #e8f5e9; color: #2e7d32; }

        /* --- SUPER COMPACT REPLY SECTION (450px) --- */
        .yt-reply-container {
            background: #ffffff; border-radius: 10px; padding: 12px 15px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.08); border: 1px solid #e0e0e0;
            max-width: 450px; margin: 5px 0 10px 20px; position: relative;
        }
        .yt-avatar-sm { 
            width: 28px; height: 28px; border-radius: 50%; display: flex; 
            align-items: center; justify-content: center; font-size: 11px; font-weight: 600;
            background: #5c6bc0; color: white; flex-shrink: 0;
        }
        .yt-textarea {
            border: none !important; border-bottom: 1px solid #eee !important; border-radius: 0 !important;
            padding: 5px 0 !important; font-size: 13px; background: transparent !important;
            box-shadow: none !important; resize: none; min-height: 28px; width: 100%;
        }
        .yt-textarea:focus { border-bottom: 1px solid #065fd4 !important; }

        /* Attachment Grid */
        .attachment-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
        .yt-preview-card {
            width: 60px; height: 60px; position: relative; border-radius: 6px;
            border: 1px solid #eee; background: #fafafa;
        }
        .img-preview { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }
        
        /* Red Close Icon */
        .yt-close-btn {
            position: absolute; top: -7px; right: -7px; background: #ff4d4d; color: white;
            width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center;
            justify-content: center; border: 1.5px solid #fff; cursor: pointer; font-size: 11px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2); z-index: 10; font-weight: bold;
        }
        .yt-close-btn:hover { background: #d32f2f; }

        .btn-post { background: #065fd4; color: white; border-radius: 15px; padding: 4px 15px; font-size: 12px; border: none; cursor: pointer; }
        .btn-post:hover { background: #054da7; }
        .cursor-pointer { cursor: pointer; }