/* Inquiries Section Styling */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.table-container {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    overflow-x: auto;
    border: 1px solid #e2e8f0;
}

.styled-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.styled-table electoral-thead {
    background-color: #f8fafc;
}

.styled-table th {
    padding: 15px;
    text-align: left;
    color: #64748b;
    font-weight: 600;
    border-bottom: 2px solid #edf2f7;
}

.styled-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #edf2f7;
    color: #1e293b;
}

.btn-refresh {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: 0.3s;
}

.btn-refresh:hover { background: #2563eb; }

/* Action Icons */
.action-icons a, .action-icons i {
    margin-right: 15px;
    font-size: 18px;
    cursor: pointer;
}


/* --- Estimate Table Styling --- */



.estimate-entry-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    margin: 15px 0;
}

.estimate-entry-table th {
    background-color: #2563eb;
    color: white;
    padding: 12px;
    font-size: 0.9rem;
    text-transform: uppercase;
}

.estimate-entry-table td {
    padding: 10px;
    border-bottom: 1px solid #e2e8f0;
}

/* Inputs inside Table */
.estimate-entry-table input {
    width: 90%;
    padding: 8px;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    outline: none;
    transition: 0.2s;
}

.estimate-entry-table input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

/* Row Amount Cell */
.row-amt {
    font-weight: 600;
    color: #1e293b;
}

/* Summary Box Styling */
.summary-container {
    background: #f8fafc;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    width: 320px;
    float: right; /* Dashboard par side mein rahega */
}

.summary-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 0.95rem;
    color: #475569;
}

.summary-item.grand-total {
    border-top: 2px solid #cbd5e1;
    margin-top: 10px;
    padding-top: 15px;
    font-size: 1.25rem;
    color: #2563eb;
    font-weight: 800;
}

/* Responsive Trash Button */
.delete-row-btn {
    color: #ef4444;
    font-size: 1.1rem;
    cursor: pointer;
    background: none;
    border: none;
    transition: transform 0.2s;
}

.delete-row-btn:hover {
    transform: scale(1.2);
}

/* Clearfix for summary float */
#estimate-section::after {
    content: "";
    display: table;
    clear: both;
}



.list-card {
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    width: 100%;
    margin-top: 0; /* Upar se chipka rahega */
}


/* Modal (Edit Box) ko default mein chhupane ke liye */
.modal.hidden {
    display: none;
}

.modal {
    display: flex; /* Jab hidden hatega tab ye dikhega */
    /* Baaki modal ki CSS wahi rakhein jo pehle di thi */
}

/* Table Styles */
.table-wrapper { overflow-x: auto; margin-top: 20px; }
table { width: 100%; border-collapse: collapse; background: white; border-radius: 8px; }
th, td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #eee; }
th { background: #f8fafc; color: #64748b; font-size: 0.85rem; text-transform: uppercase; }

/* Edit Button */
.btn-edit { background: #f59e0b; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; }

/* Modal Styles */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 2000; display: flex; align-items: center; justify-content: center; }
.modal-content { background: white; padding: 25px; border-radius: 12px; width: 90%; max-width: 400px; }
.modal-content input { width: 100%; margin-bottom: 10px; padding: 10px; border: 1px solid #ddd; border-radius: 5px; }
.modal-buttons { display: flex; gap: 10px; }

/* Address box aur Button ko sundar banane ke liye */
.form-group textarea, 
.form-group input {
    width: 100%;
    padding: 12px 15px;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    font-size: 1rem;
    outline: none;
    transition: all 0.3s ease;
    box-sizing: border-box; /* Width fix karne ke liye */
}

/* Address box ki height set karne ke liye */
.form-group textarea {
    height: 100px; /* Thoda bada box */
    font-family: inherit;
    resize: vertical; /* User chota-bada kar sake */
}

/* Save to Cloud Button */
#save-lead-btn {
    grid-column: span 2; /* Pure niche ki line cover karega */
    background-color: #2563eb;
    color: white;
    padding: 15px;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

#save-lead-btn:hover {
    background-color: #1d4ed8;
}

@media (max-width: 600px) {
    #save-lead-btn {
        grid-column: span 1;
    }
}


/* 1. Global Reset & Variables */
:root {
    --sidebar-width: 260px;
    --topbar-height: 60px;
    --primary-color: #2563eb;
    --bg-light: #f3f4f6;
    --text-dark: #1f2937;
    --white: #ffffff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: var(--bg-light);
    display: flex; /* Sidebar aur Main-wrapper ko side-by-side rakhne ke liye */
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-width);
    background-color: var(--text-dark);
    color: var(--white);
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    /* Niche wali 2 lines add karein */
    overflow-y: auto; /* Buttons zyada hone par scroll bar aa jayega */
    scrollbar-width: thin; /* Firefox ke liye patla scrollbar */
}

/* Scrollbar ko sundar banane ke liye (Chrome/Edge/Safari) */
.sidebar::-webkit-scrollbar {
    width: 5px;
}
.sidebar::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 10px;
}

.brand-name {
    padding: 20px;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid #374151;
    color: var(--primary-color);
}

.menu {
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.menu-item {
    background: transparent;
    color: #9ca3af;
    border: none;
    padding: 12px 15px;
    text-align: left;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    transition: 0.3s;
}

.menu-item i { margin-right: 10px; }

.menu-item:hover {
    background: var(--primary-color);
    color: var(--white);
}

/* Layout ko fix karne ke liye */
.main-wrapper {
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    min-height: 100vh; /* Ye screen ki poori height lega */
    display: flex;
    flex-direction: column;
}

.topbar {
    height: var(--topbar-height);
    background: var(--white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 25px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 10;
}

.search-container input {
    padding: 8px 15px;
    border: 1px solid #d1d5db;
    border-radius: 20px;
    width: 300px;
    outline: none;
}

.user-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

#logout-btn {
    background: #ef4444;
    color: white;
    border: none;
    padding: 5px 12px;
    border-radius: 5px;
    cursor: pointer;
}

.content-area {
    padding: 25px;
    flex: 1; /* Bachi hui poori jagah cover karega */
    background-color: #f3f4f6;
}

.placeholder-text {
    color: #6b7280;
    border: 2px dashed #d1d5db;
    padding: 50px;
    text-align: center;
    border-radius: 10px;
}





/* Laptop par Hamburger chhupa rahega */
.hamburger {
    display: none;
    font-size: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-dark);
}



/* Laptop par button nahi dikhega */
.close-btn {
    display: none;
}





.motivation-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 40px;
    border-radius: 15px;
    text-align: center;
    margin-bottom: 20px;
}

#motivation-text {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 15px;
}

#motivation-media {
    max-width: 100%;
    max-height: 300px;
    border-radius: 10px;
    margin-top: 15px;
}

.settings-card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}



.motivation-container {
    text-align: center;
    background: #f8fafc;
    padding: 40px;
    border-radius: 15px;
    border: 2px dashed #cbd5e1;
    margin-top: 20px;
}

#display-motivation-text {
    font-size: 1.8rem;
    color: #1e293b;
    margin-bottom: 20px;
}

#display-motivation-media {
    max-width: 100%;
    height: 300px;
    border-radius: 12px;
    object-fit: cover;
}

.setting-card {
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

/* Setting Container ka main look */
.setting-card {
    background: #ffffff;
    max-width: 600px; /* Mobile aur Laptop dono par sahi dikhega */
    margin: 20px auto;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
}

/* Heading style */
.setting-card h3 {
    color: #1e293b;
    margin-bottom: 25px;
    font-size: 1.5rem;
    border-bottom: 2px solid #f1f5f9;
    padding-bottom: 10px;
}

/* Har label aur input ka group */
.form-group {
    margin-bottom: 20px;
    text-align: left;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #475569;
    font-size: 0.9rem;
}

/* Input Boxes ka sundar look */
.form-group input {
    width: 100%;
    padding: 12px 15px;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    outline: none;
    box-sizing: border-box; /* Width sahi rakhne ke liye */
}

.form-group input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

/* Save Button ka professional style */
#update-dashboard-btn {
    width: 100%;
    background-color: #2563eb;
    color: white;
    padding: 14px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
    margin-top: 10px;
}

#update-dashboard-btn:hover {
    background-color: #1d4ed8;
}

#update-dashboard-btn:active {
    transform: scale(0.98);
}


.form-container {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Laptop par 2 columns */
    gap: 20px;
}

@media (max-width: 600px) {
    .form-grid {
        grid-template-columns: 1fr; /* Mobile par 1 column */
    }
}

textarea {
    grid-column: span 1;
    height: 45px;
    resize: none;
}



/* Ye Media Query mobile devices (768px se niche) par kaam karegi */
@media (max-width: 768px) {
    /* 1. Reset Global Reset for Mobile */
    body {
        display: block; /* Sidebar aur Wrapper side-by-side nahi, ek ke niche ek honge */
    }

    /* 2. Professional Topbar (Sabse IMPORTANT Fix) */
    .topbar {
        height: var(--topbar-height);
        padding: 0 15px; /* Thodi si space side se */
        display: flex;
        justify-content: space-between; /* Hamburger left, Admin right */
        align-items: center;
        width: 100%;
        margin-left: 0; /* Sidebar ke peeche nahi chhupna */
        background-color: var(--white);
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    /* Hamburger & Title Line */
    .topbar-left {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .hamburger {
        display: block !important; /* Mobile par must dikhna chahiye */
        font-size: 1.4rem;
        color: var(--text-dark);
        background: none;
        border: none;
        cursor: pointer;
    }

    /* Professional Touch: Topbar mein Brand ka naam chhupa rahega Dashboard ka title aayega */
    .topbar .mobile-title {
        display: block !important;
        font-weight: bold;
        color: var(--primary-color);
        font-size: 1.1rem;
    }

    /* Search Bar on Mobile - Isko Sidebar click par dikhana behtar hai, ya pure layout ko break kar raha hai */
    .search-container {
        display: none !important; /* Shuruat mein hidden, ise sidebar click par handle karenge agar zaroori hua */
    }

    /* User Profile Icon/Name on Mobile */
    .user-actions {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .user-name {
        display: none !important; /* Mobile par pura "Welcome Admin" chhupa do */
    }

    /* Chhota User Icon dikhana standard hota hai mobile par */
    .user-actions::after {
        content: "\f007"; /* FontAwesome User Icon */
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 1.2rem;
        color: #6b7280;
        cursor: pointer;
    }

    /* 3. Main Content Area Fix */
    .main-wrapper {
        margin-left: 0 !important; /* Sidebar ke liye jagah zero karein */
        width: 100% !important;
        margin-top: 0px; /* Topbar sticky nahi banaya humne abhi file mein, use waise hi rehne dein */
    }

    .content-area {
        padding: 15px; /* Mobile par space kam */
        min-height: calc(100vh - var(--topbar-height));
    }

    /* 4. Customer Database Table (Table Card Fix) */
    .list-card {
        padding: 15px;
        margin-top: 0px; /* Card Topbar ke close rahega */
    }

    .list-header {
        flex-direction: column; /* Heading aur Refresh button ek ke niche ek */
        align-items: flex-start;
        gap: 10px;
        border-bottom: 2px solid #f1f5f9;
        padding-bottom: 10px;
    }

    .list-header h3 {
        font-size: 1.2rem;
    }

    .btn-refresh {
        width: 100%; /* Refresh button poori width */
        justify-content: center;
    }

    /* Sundar Mobile Table (Vertical Look) */
    .table-wrapper {
        margin-top: 15px;
    }

    table {
        display: block; /* Table layout block takat se */
    }

    table thead {
        display: none; /* Mobile par columns label (heading) chhupa do */
    }

    table tbody tr {
        display: block; /* Har row ek vertical card ban jayegi */
        margin-bottom: 20px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        background: white;
        box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    }

    table tbody tr td {
        display: flex; /* Har element side-by-side level: value */
        justify-content: space-between;
        align-items: center;
        padding: 12px 15px;
        border: none !important;
        border-bottom: 1px solid #f1f5f9;
        text-align: right;
    }

    table tbody tr td:last-child {
        border-bottom: none; /* Akhiri element mein border nahi */
        justify-content: center;
        background-color: #f8fafc; /* Action area ka chhota background */
    }

    /* Mobile standard approach: Labels generate karna 'data-label' se agar hamare pass variable nahi hai */
    /* Abhi ke liye hum table data labels use karenge jinka code JavaScript mein fetch function update karega */

    /* 5. Mobile Sidebar - Ye pehle code mein tha hum ise standard karenge */
    .sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        width: 270px;
        height: 100%; 
        max-height: 100vh;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        background-color: var(--text-dark);
        z-index: 9999;
        display: flex !important; /* Sidebar click par open hone ke liye standard vertical look standard karega standard vertical look standard karega standard vertical look standard */
        transition: 0.3s ease-out;
    }

    .sidebar.show {
        left: 0;
    }
}




/* =============================================
   PREMIUM BUTTON STYLING (btn-primary)
   ============================================= */
.btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff !important;
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border-bottom: 3px solid #1e40af;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    outline: none;
}

/* Mouse le jaane par (Hover) */
.btn-primary:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.4);
    transform: translateY(-2px); /* Halksa upar uthega */
}

/* Dabane par (Active/Click) */
.btn-primary:active {
    transform: translateY(1px); /* Niche dabega */
    border-bottom-width: 1px; /* Shadow kam hogi */
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2);
}

/* Disabled state (Jab data save ho raha ho) */
.btn-primary:disabled {
    background: #94a3b8;
    border-bottom-color: #64748b;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Icon rotation jab spinner chale */
.btn-primary i.fa-spin {
    margin-right: 5px;
}
/* =============================================
   PREMIUM BUTTON STYLING (btn-primary)
   ============================================= */



   /* =============================================
   Purchase section ke liye CSS styling
   ============================================= */





   /* =============================================
   purchase section ke liye CSS styling
   ============================================= */



   /* ========================================================================= */
/* GST & TDS LEDGER SECTION EXTRA STYLING                                    */
/* ========================================================================= */
.gst-table-input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
    color: #1e293b;
    font-weight: 500;
    transition: all 0.2s ease;
    background-color: #f8fafc;
}

.gst-table-input:focus {
    border-color: #3b82f6;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    outline: none;
}

.btn-table-save {
    background: #10b981;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s ease;
}

.btn-table-save:hover {
    background: #059669;
    transform: scale(1.05);
}

.btn-table-save:disabled {
    background: #94a3b8;
    cursor: not-allowed;
}

/* Status Badges Dynamic colors */
.status-badge {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}
.status-badge.paid { background-color: #dcfce7; color: #15803d; }
.status-badge.due { background-color: #fee2e2; color: #b91c1c; }


/* ========================================================================= */
/* EXTENDED GST & TDS TRANSACTION INPUTS                                     */
/* ========================================================================= */
.gst-table-input.date-input {
    font-size: 12px;
    padding: 5px;
    font-family: inherit;
    color: #334155;
}

.gst-table-input.text-input {
    font-size: 13px;
    padding: 6px;
    border: 1px solid #cbd5e1;
}

/* Table container styling to allow smooth horizontal scrolling if columns overflow */
.table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* GST AND TDS CODE END */

/* =========================================================================
   🔄 PURNIMA CRM: FIXED CORE SECTION SWITCHING SYSTEM 
   ========================================================================= */

/* Default state: Saare content sections hide rahenge */
.content-section {
    display: none !important;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

/* Active state: Jab motion.js .show class lagaye tabhi dikhega */
.content-section.show {
    display: block !important;
    opacity: 1 !important;
}


/* =========================================================================
   PURNIMA CRM: ACTIVE SIDEBAR HIGHLIGHT (Jo section khula hai vo chamkega)
   ========================================================================= */

/* 1. Jab koi sidebar button active ho toh uska main design */
.menu-item.active {
    background: #6366f1 !important; /* Shandar Indigo/Blue rang background mein */
    color: white !important;        /* Text ka rang ekdum white */
    font-weight: 700 !important;    /* Text thoda bold ho jayega */
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35) !important; /* Halka sa shadow effect */
    border-radius: 8px;             /* Corners soft round karne ke liye */
    transform: scale(1.02);         /* Button thoda sa bahar nikal kar dikhega */
    transition: all 0.3s ease;
}

/* 2. Active button ke andar jo icon (i tag) hai, uska rang bhi white ho jaye */
.menu-item.active i {
    color: white !important;
}

/* 3. Safe fallback: Agar button ke peeche koi default border lag rahi ho */
.menu-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 15%;
    height: 70%;
    width: 4px;
    background: #ffffff; /* Left side mein ek white vertical line dikhegi */
    border-radius: 0 4px 4px 0;
}

/* =========================================================================
   PURNIMA CRM: INTELLIGENT SIDEBAR HIGHLIGHT ENGINE
   ========================================================================= */

/* Default State: Jab button active NA HO (Soft Pastel Look) */
.menu-item[data-color="orange"] { background-color: #ffedd5 !important; color: #ea580c !important; margin: 4px 10px; border-radius: 8px; font-weight: 600; }
.menu-item[data-color="orange"] i { color: #ea580c !important; }

.menu-item[data-color="green"] { background-color: #dcfce7 !important; color: #16a34a !important; margin: 4px 10px; border-radius: 8px; font-weight: 600; }
.menu-item[data-color="green"] i { color: #16a34a !important; }

.menu-item[data-color="red"] { background-color: #fee2e2 !important; color: #dc2626 !important; margin: 4px 10px; border-radius: 8px; font-weight: 600; }
.menu-item[data-color="red"] i { color: #dc2626 !important; }

.menu-item[data-color="teal"] { background-color: #ccfbf1 !important; color: #0f766e !important; margin: 4px 10px; border-radius: 8px; font-weight: 600; }
.menu-item[data-color="teal"] i { color: #0f766e !important; }

.menu-item[data-color="purple"] { background-color: #f3e8ff !important; color: #6b21a8 !important; margin: 4px 10px; border-radius: 8px; font-weight: 600; }
.menu-item[data-color="purple"] i { color: #6b21a8 !important; }

.menu-item[data-color="slate"] { background-color: #f1f5f9 !important; color: #475569 !important; margin: 4px 10px; border-radius: 8px; font-weight: 600; }
.menu-item[data-color="slate"] i { color: #475569 !important; }


/* Active State: JAISE HI CLICK HOGA, ye rule sabko override karke DARK SOLID HIGHLIGHT dega */
.menu-item.active {
    transform: scale(1.03) !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.2s ease-in-out;
}

/* Category wise solid colors for Active state */
.menu-item[data-color="orange"].active { background-color: #ea580c !important; color: white !important; }
.menu-item[data-color="orange"].active i { color: white !important; }

.menu-item[data-color="green"].active { background-color: #16a34a !important; color: white !important; }
.menu-item[data-color="green"].active i { color: white !important; }

.menu-item[data-color="red"].active { background-color: #dc2626 !important; color: white !important; }
.menu-item[data-color="red"].active i { color: white !important; }

.menu-item[data-color="teal"].active { background-color: #0f766e !important; color: white !important; }
.menu-item[data-color="teal"].active i { color: white !important; }

.menu-item[data-color="purple"].active { background-color: #6b21a8 !important; color: white !important; }
.menu-item[data-color="purple"].active i { color: white !important; }

.menu-item[data-color="slate"].active { background-color: #475569 !important; color: white !important; }
.menu-item[data-color="slate"].active i { color: white !important; }
/* =========================================================================
   PURNIMA CRM: ACTIVE SIDEBAR HIGHLIGHT (Jo section khula hai vo chamkega)
   ========================================================================= */


   /* purchase section ki edit line ki css */
#purchase-ledger-table-body input, 
#purchase-ledger-table-body select {
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
    padding: 6px !important;
    font-size: 13px !important;
    width: 100% !important;
    box-sizing: border-box; /* Zaroori hai taaki border bahar na nikle */
    transition: border-color 0.2s;
}

#purchase-ledger-table-body input:focus {
    border-color: #0ea5e9 !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.2);
}

/* Edit mode wali row ke liye thoda background */
.purchase-edit-mode {
    background-color: #f0f9ff !important;
}


.action-btn-group {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

.action-btn-group button {
    padding: 5px 8px !important;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 12px;
}
/* purchase section ki edit line ki css */

/* ===== Sidebar groups (Groups / Full List) ===== */
.menu-mode-bar { display:flex; gap:6px; margin:0 10px 6px 10px; background:rgba(255,255,255,0.07); padding:4px; border-radius:10px; }
.menu-mode-btn { flex:1; background:transparent; color:#94a3b8; border:none; padding:7px 4px; border-radius:7px; font-size:12px; font-weight:700; cursor:pointer; }
.menu-mode-btn.on { background:rgba(255,255,255,0.16); color:#fff; }
.menu-group { display:flex; flex-direction:column; }
.menu-group-head { display:flex; justify-content:space-between; align-items:center; background:transparent; color:#cbd5e1; border:none; border-top:1px solid rgba(255,255,255,0.08); padding:10px 14px 6px 14px; margin-top:6px; font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:0.6px; cursor:pointer; text-align:left; }
.menu-group-head i { margin-right:6px; }
.menu-group-arrow { transition:transform .2s; margin:0 !important; font-size:10px; }
.menu-group.collapsed .menu-group-arrow { transform:rotate(-90deg); }
.menu-group.collapsed .menu-group-body { display:none; }
.menu-group-body { display:flex; flex-direction:column; gap:10px; }

/* Sidebar: Work Stage sabse upar aur sabse numaya */
.menu-group-label { display:flex; align-items:center; color:#fbbf24; border-top:1px solid rgba(255,255,255,0.08); padding:10px 14px 4px 14px; margin-top:6px; font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:0.6px; }
.menu-group-label i { margin-right:6px; }
html #workStage-link.menu-item:not(.active) { background:linear-gradient(135deg,#7c3aed,#5b21b6) !important; color:#fff !important; font-weight:800; padding-top:13px; padding-bottom:13px; box-shadow:0 4px 12px rgba(91,33,182,.35); }
html #workStage-link.menu-item:not(.active) i { color:#fff !important; }

/* Customer Directory: tile + card */
.cust-tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; margin:6px 0 14px; }
.cust-tile { background:var(--tb); border:1px solid #e2e8f0; border-left:4px solid var(--tc); border-radius:10px; padding:10px 13px; cursor:pointer; user-select:none; }
.cust-tile.on { border-color:var(--tc); box-shadow:0 0 0 2px var(--tc) inset; }
.cust-tile-t { font-size:12px; font-weight:800; color:var(--tc); text-transform:uppercase; letter-spacing:.3px; }
.cust-tile-n { font-size:26px; font-weight:800; color:#1e293b; margin-top:2px; }
.cust-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; }
.cust-empty { grid-column:1 / -1; text-align:center; padding:30px; color:#94a3b8; }
.cust-card { background:white; border:1px solid #e2e8f0; border-radius:12px; padding:14px 15px; display:flex; flex-direction:column; gap:5px; }
.cust-name { font-weight:800; font-size:15.5px; color:#0f172a; text-transform:uppercase; }
.cust-mob { font-weight:600; color:#334155; }
.cust-comp { color:#334155; text-transform:uppercase; font-size:13.5px; }
.cust-addr { color:#64748b; font-size:12.5px; text-transform:uppercase; line-height:1.35; }
.cust-bal { margin-top:4px; font-size:15px; }
.cust-actions { display:flex; justify-content:center; gap:8px; margin-top:8px; padding-top:9px; border-top:1px solid #f1f5f9; }
.cust-b { border:none; width:36px; height:36px; border-radius:50%; cursor:pointer; color:white; font-size:14px; }
.cust-b-blue { background:#2563eb; } .cust-b-amber { background:#f59e0b; } .cust-b-red { background:#dc2626; }
.cust-b[data-denied] { display:none; }
@media (max-width:600px) { .cust-grid { grid-template-columns:1fr; } }
#search-customer { flex:1; min-width:180px; }

/* Dashboard: rangeen group-card (Purnima jaisa) */
.dg-group { margin-bottom:22px; }
.dg-title { font-size:17px; font-weight:800; color:#1e293b; margin:6px 0 12px; }
.dg-title i { margin-right:6px; }
.dg-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:16px; }
.dg-card { border-radius:16px; padding:20px; color:#fff; }
.dg-card[role=button] { cursor:pointer; }
.dg-top { display:flex; justify-content:space-between; align-items:center; font-size:12.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; opacity:.95; }
.dg-top i { font-size:22px; opacity:.75; }
.dg-big { font-size:30px; font-weight:800; margin:14px 0 2px; word-break:break-word; }
.dg-sub { font-size:12px; opacity:.85; margin-bottom:14px; }
.dg-tiles { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.dg-tile { background:rgba(255,255,255,.18); border-radius:11px; padding:10px 11px; min-width:0; }
.dg-tl { font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.3px; opacity:.95; }
.dg-tv { font-size:17px; font-weight:800; margin:4px 0 1px; word-break:break-word; }
.dg-ts { font-size:10.5px; opacity:.8; line-height:1.3; }
@media (max-width:600px) { .dg-grid { grid-template-columns:1fr; } .dg-big { font-size:27px; } }

/* Customer list: desktop par purani jaisi line (row) wali list, mobile par card */
.cust-head { display:none; }
@media (min-width:769px) {
  .cust-grid { display:block; background:#fff; border:1px solid #e2e8f0; border-radius:12px; overflow:hidden; }
  .cust-head, .cust-card { display:grid; grid-template-columns:1.3fr 1fr 1.2fr 2fr 1.1fr 130px; gap:14px; align-items:center; }
  .cust-head { background:#f8fafc; border-bottom:1px solid #e2e8f0; padding:12px 16px; font-size:12px; font-weight:800; color:#475569; text-transform:uppercase; letter-spacing:.4px; }
  .cust-card { border:none; border-bottom:1px solid #f1f5f9; border-radius:0; padding:10px 16px; flex-direction:row; }
  .cust-card:hover { background:#f8fafc; }
  .cust-name, .cust-comp, .cust-addr { text-transform:none; }
  .cust-name { font-size:14.5px; }
  .cust-addr { font-size:13px; }
  .cust-bal { margin:0; font-size:14px; }
  .cust-actions { border:none; margin:0; padding:0; justify-content:flex-start; }
  .cust-b { width:32px; height:32px; font-size:13px; }
  .cust-empty { padding:30px; }
}

.cust-b-green { background:#16a34a; }
/* ===== DIGITAL BOARD (whiteboard) ===== */
html #digitalBoard-link.menu-item:not(.active) { background:linear-gradient(135deg,#7c3aed,#5b21b6) !important; color:#fff !important; font-weight:800; padding-top:13px; padding-bottom:13px; box-shadow:0 4px 12px rgba(91,33,182,.35); }
html #digitalBoard-link.menu-item:not(.active) i { color:#fff !important; }
.wb { display:flex; flex-direction:column; height:calc(100vh - 8px); background:#f4f6fb; font-family:'Inter',system-ui,sans-serif; color:#1e293b; user-select:none; }
.wb.present { position:fixed; inset:0; z-index:9700; height:auto; }
.wb-top { display:flex; align-items:center; gap:10px; padding:8px 12px; background:#fff; border-bottom:1px solid #e2e8f0; flex-wrap:wrap; }
.wb.present .wb-top, .wb.present .wb-tools, .wb.present .wb-prop, .wb.present .wb-tip { display:none; }
.wb-plus { width:42px; height:42px; border-radius:12px; border:none; background:linear-gradient(135deg,#C9972A,#a87a14); color:#fff; font-size:28px; line-height:1; font-weight:700; cursor:pointer; box-shadow:0 3px 10px rgba(201,151,42,.4); flex:none; }
.wb-tabs { display:flex; gap:6px; overflow-x:auto; flex:1; min-width:120px; } .wb-tabs button { border:1px solid #cbd5e1; background:#fff; color:#334155; border-radius:99px; padding:7px 15px; font-weight:700; font-size:13px; cursor:pointer; white-space:nowrap; } .wb-tabs button.on { background:#1B2A4A; color:#fff; border-color:#1B2A4A; }
.wb-hint { color:#94a3b8; font-size:13px; padding:8px; }
.wb-acts { display:flex; gap:5px; align-items:center; flex-wrap:wrap; } .wb-acts button { border:1px solid #cbd5e1; background:#fff; color:#334155; border-radius:9px; height:36px; min-width:36px; padding:0 10px; cursor:pointer; font-weight:700; font-size:13px; } .wb-acts button.gold { background:#1B2A4A; color:#fff; border-color:#1B2A4A; }
.wb-st { font-size:12px; color:#64748b; margin-right:4px; }
.wb-body { flex:1; display:flex; min-height:0; }
.wb-tools { display:flex; flex-direction:column; gap:5px; padding:8px; background:#fff; border-right:1px solid #e2e8f0; overflow-y:auto; } .wb-tools button { width:44px; height:44px; border:1px solid #e2e8f0; background:#fff; border-radius:11px; cursor:pointer; font-size:16px; color:#475569; flex:none; } .wb-tools button.on { background:#1B2A4A; color:#fff; border-color:#1B2A4A; }
.wb-canvas { position:relative; flex:1; overflow:hidden; touch-action:none; background-color:#fbfcfe; background-image:radial-gradient(#cfd6e4 1.3px, transparent 1.3px); background-size:24px 24px; }
.wb-world { position:absolute; left:0; top:0; transform-origin:0 0; width:0; height:0; } .wb-svg { position:absolute; left:0; top:0; pointer-events:none; } .wb-svg .wb-hit { pointer-events:stroke; cursor:pointer; }
.wb-el { position:absolute; box-sizing:border-box; display:flex; align-items:center; justify-content:center; text-align:center; cursor:move; }
.wb.present .wb-el { cursor:default; }
.wb-el > svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.wb-txt { position:relative; padding:4px 10px; line-height:1.25; word-break:break-word; max-width:100%; outline:none; white-space:pre-wrap; user-select:text; } .wb-txt.editing { background:rgba(255,255,255,.7); border-radius:4px; box-shadow:0 0 0 2px #7c3aed; color:#111 !important; }
.wb-el.t-sticky .wb-txt { text-align:left; align-self:flex-start; } .wb-el.t-text { border:1px dashed transparent; } .wb-el.t-text.sel { border-color:#a78bfa; }
.wb-el.sel { outline:2.5px solid #7c3aed; outline-offset:3px; border-radius:6px; }
.wb-rz { position:absolute; right:-9px; bottom:-9px; width:16px; height:16px; background:#7c3aed; border:2px solid #fff; border-radius:4px; cursor:nwse-resize; }
.wb-prop { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); max-width:calc(100% - 20px); display:none; flex-wrap:wrap; gap:6px; align-items:center; background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:8px 10px; box-shadow:0 8px 24px rgba(15,23,42,.18); z-index:5; justify-content:center; }
.wb-prop button { border:1px solid #cbd5e1; background:#fff; border-radius:8px; padding:6px 10px; font-size:12.5px; font-weight:700; cursor:pointer; color:#334155; } .wb-prop button.on { background:#1B2A4A; color:#fff; } .wb-prop button.red { color:#b91c1c; border-color:#fecaca; }
.wb-pl { font-size:11px; color:#64748b; font-weight:700; } .wb-sw { width:20px; height:20px; border-radius:50%; border:2px solid #cbd5e1; cursor:pointer; display:inline-block; flex:none; }
.wb-tip { position:absolute; top:10px; left:50%; transform:translateX(-50%); background:#1B2A4A; color:#fff; font-size:12.5px; padding:6px 14px; border-radius:99px; pointer-events:none; } .wb-tip:empty { display:none; }
.wb-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:#64748b; text-align:center; padding:20px; }
.wb-big { border:none; background:linear-gradient(135deg,#C9972A,#a87a14); color:#fff; font-weight:800; font-size:17px; padding:14px 26px; border-radius:14px; cursor:pointer; } .wb-big.sm { font-size:14px; padding:10px 14px; border-radius:10px; }
.wb-mini { border:1px solid #cbd5e1; background:#fff; border-radius:10px; padding:10px 14px; font-weight:700; cursor:pointer; font-size:14px; }
.wb-modal { position:fixed; inset:0; background:rgba(15,23,42,.55); z-index:9900; display:flex; align-items:center; justify-content:center; padding:16px; } .wb-modal-in { background:#fff; border-radius:14px; padding:18px; width:100%; max-width:420px; } .wb-modal-in h3 { margin:0 0 8px; color:#1B2A4A; } .wb-modal-in label { display:block; font-size:12.5px; font-weight:700; color:#475569; margin:8px 0 4px; } .wb-modal-in input { width:100%; padding:10px; border:1px solid #cbd5e1; border-radius:8px; font-size:15px; box-sizing:border-box; }
.wb-modal-b { display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; justify-content:flex-end; }
.wb-icons { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; } .wb-icons button { height:44px; border:1px solid #e2e8f0; background:#fff; border-radius:10px; font-size:18px; color:#1B2A4A; cursor:pointer; }
.wb-x { position:fixed; top:12px; right:12px; z-index:9800; border:none; background:rgba(15,23,42,.75); color:#fff; border-radius:10px; padding:9px 14px; font-weight:700; cursor:pointer; opacity:.55; } .wb-x:hover { opacity:1; }
@media (max-width:700px) { .wb-body { flex-direction:column-reverse; } .wb-tools { flex-direction:row; border-right:none; border-top:1px solid #e2e8f0; } .wb-tools button { width:40px; height:40px; } .wb-prop { bottom:10px; } }
.wb-marq { position:absolute; border:2px dashed #7c3aed; background:rgba(124,58,237,.08); pointer-events:none; display:none; }
.wb-exp-b { display:flex; flex-direction:column; gap:8px; } .wb-exp-b button { text-align:left; padding:12px 14px; border:1px solid #cbd5e1; background:#fff; border-radius:10px; font-size:15px; font-weight:700; cursor:pointer; color:#1B2A4A; } .wb-exp-b button i { width:24px; color:#C9972A; }