:root { --primary-color: #2a7f62; --light-gray-color: #f7f9fc; --border-color: #dfe6ee; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.wrap .mdp11-form .row { display: flex; align-items: center; gap: 15px; margin-bottom: 18px; }
.wrap .mdp11-form .row label { flex: 0 0 100px; font-weight: 600; text-align: right; color: #2c3338; }
.wrap .mdp11-form .row input, .wrap .mdp11-form .row select, .wrap .mdp11-form .row textarea { flex-grow: 1; padding: 10px 12px; border-radius: 4px; border: 1px solid #8c8f94; box-sizing: border-box; min-width: 150px; }
.wrap .mdp11-form .actions { padding-left: 115px; margin-top: 20px; }

/* General Table Styles */
.widefat { border-collapse: collapse; width: 100%; font-size: 13px; }
.widefat th { font-weight: bold; background-color: #f9f9fa; }
.widefat td, .widefat th { padding: 8px 10px; border: 1px solid #e0e0e0; text-align: left; }
.widefat .amount-cell { text-align: right; font-family: monospace, sans-serif; }
.widefat tbody tr:nth-child(even) { background-color: #f8f9fa; }
.wrap table.widefat { display: block !important; overflow-x: auto !important; white-space: nowrap !important; }

/* --- UNIFIED PROFESSIONAL RECEIPT STYLES --- */
.mdp-receipt-pro { max-width: 800px; margin: 20px auto; padding: 25px; background: #fff; border: 1px solid #dfe6ee; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.mdp-receipt-actions { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px dashed #ccc; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.mdp-page-break { display: none; }

/* New Compact Header */
.receipt-header-pro { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #f0f0f0; padding-bottom: 15px; margin-bottom: 20px; }
.dairy-info { display: flex; align-items: center; gap: 15px; text-align: left; }
.header-logo {
    max-height: 60px; /* थोड़ी ऊंचाई बढ़ाई */
    max-width: 100px; /* थोड़ी चौड़ाई बढ़ाई */
    object-fit: contain; /* यह सुनिश्चित करेगा कि लोगो कटेगा नहीं */
    align-self: flex-start; /* लोगो को कंटेनर के टॉप पर रखेगा */
}
.dairy-name-address h2 { margin: 0; font-size: 1.4em; color: #000; }
.dairy-name-address p { margin: 0; color: #666; font-size: 0.9em; }
.member-info { text-align: right; }
.member-info h3 { margin: 0 0 8px 0; font-size: 1.2em; color: #555; }
.member-info p { margin: 2px 0; font-size: 0.95em; }
.member-info p strong { font-weight: 600; }

/* Content Sections */
.receipt-section { margin-bottom: 20px; } 
.receipt-section h4 { margin-top: 0; margin-bottom: 10px; border-bottom: 1px solid #ccc; padding-bottom: 5px; font-size: 1.1em; font-weight: bold; }
.two-column-layout { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.two-column-layout .column { width: 48%; }
.section-summary-pdf { display: flex; justify-content: flex-end; gap: 40px; margin-top: 15px; padding: 10px 15px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; background-color: #f8f9fa; }
.summary-item { text-align: right; }
.summary-item span { display: block; font-size: 0.9em; color: #555; }
.summary-item strong { font-size: 1.2em; color: #000; }
.receipt-footer-pdf { margin-top: 30px; padding-top: 10px; border-top: 1px solid #eee; text-align: center; font-size: 10px; color: #888; }

/* Final Summary */
.receipt-summary, .receipt-summary-pdf { margin-top: 20px; padding-top: 15px; border-top: 2px solid #333; }
.receipt-summary p, .receipt-summary-pdf p { display: flex; justify-content: space-between; font-size: 1em; margin: 8px 0; }
.receipt-summary p.net-payable, .receipt-summary-pdf p.final-amount { font-size: 1.3em; font-weight: bold; margin-top: 15px; border-top: 1px dashed #ccc; padding-top: 15px; }
.receipt-manual-adjust input { width: 100px; padding: 3px 5px; font-size: 1em; }
.payment-status { padding: 3px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; color: #fff; text-transform: uppercase; }
.payment-status.unpaid { background-color: #ef4444; }
.payment-status.paid { background-color: #10b981; }

/* Table Fixes */
.receipt-body-columns table.widefat, .two-column-layout table.widefat, .receipt-section-pdf table.widefat { display: table !important; width: 100%; white-space: normal !important; }
.two-column-layout .column th { padding: 5px 8px; font-size: 0.9em; }

/* --- RESPONSIVE & PRINT --- */
@media (max-width: 600px) {
    .receipt-header-pro { flex-direction: column; align-items: center; text-align: center; }
    .dairy-info { flex-direction: column; }
    .dairy-name-address { text-align: center; }
    .member-info { text-align: center; margin-top: 15px; }
    .two-column-layout { flex-direction: column; gap: 0; }
    .two-column-layout .column { width: 100%; }
    .two-column-layout .column:first-child { margin-bottom: 15px; }
}

@media print { 
    body, .wrap, .mdp-receipt-pro { background: #fff !important; font-size: 9pt; } 
    #wpadminbar, #adminmenumain, .wrap > h1, .wrap > h2, .wrap > p, .mdp-receipt-actions, .notice, #wpfooter, #wpbody-content .notice { display: none !important; } 
    .wrap, #wpcontent, #wpbody-content, .mdp-receipt-pro { margin: 0 !important; padding: 0 !important; box-shadow: none !important; border: none !important; max-width: 100% !important; } 
    a { text-decoration: none !important; color: #000 !important; } 
    
    .mdp-page-break { display: block; page-break-before: always; }
    .receipt-section, .receipt-summary { page-break-inside: avoid; }
    .widefat tbody tr { page-break-inside: avoid !important; }
    .widefat thead { display: table-header-group; }
}

/* Add space above the deductions section */
.deductions-section {
    margin-top: 30px;
}

/* For Print View, use padding to ensure space is added at the top of a new page */
@media print {
    .deductions-section {
        padding-top: 20mm; /* Adjust this value for more/less space on new page */
        margin-top: 0;
    }
}

/* Quick Entry Header Formatting */
.mdp11-form-quick .quick-entry-header {
    display: flex;
    align-items: center; /* सभी आइटम को वर्टिकली सेंटर में लाएगा */
    gap: 20px; /* आइटम्स के बीच में स्पेस */
    padding: 15px;
    background-color: #f6f7f7;
    border: 1px solid #ccd0d4;
    margin-bottom: 20px;
    flex-wrap: wrap; /* छोटी स्क्रीन पर आइटम्स को अगली लाइन में ले जाएगा */
}

/* इस वाले CSS को बदलें */
.mdp-quick-search-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-grow: 0; /* इसे 1 से 0 कर दें */
}

/* यह नया CSS जोड़ें */
.quick-entry-date-shift-group {
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}

/* यह नया कोड Shift वाले हिस्से को Date से दूर कर देगा */
.quick-entry-date-shift-group .row:last-child {
    margin-left: 25px; 
}

.mdp11-form-quick .quick-entry-header .row {
    margin-bottom: 0; /* हेडर के अंदर के रो से निचला मार्जिन हटा देगा */
    flex-shrink: 0; /* डेट/शिफ्ट को सिकुड़ने से रोकेगा */
}

.mdp11-form-quick .quick-entry-header .row label {
    flex-basis: auto; /* लेबल की फिक्स चौड़ाई हटा देगा */
    text-align: left;
    margin-right: 5px;
}

#mdp-member-search {
    min-width: 250px;
    width: 100%;
}

/* Mobile responsive styles for Quick Entry header */
@media (max-width: 782px) {
    .mdp11-form-quick .quick-entry-header {
        flex-direction: column; /* आइटम्स को एक के नीचे एक रखेगा */
        gap: 15px; /* आइटम्स के बीच वर्टीकल गैप */
    }

    .mdp-quick-search-wrapper {
        width: 100%; /* सर्च बार को पूरी चौड़ाई देगा */
    }

    .quick-entry-date-shift-group {
        margin: 0; /* सेंटर मार्जिन हटा देगा */
        padding-right: 0; /* पैडिंग हटा देगा */
        width: 100%;
        justify-content: center; /* Date और Shift को सेंटर में रखेगा */
    }

    .quick-entry-date-shift-group .row:last-child {
        margin-left: 15px; /* मोबाइल पर Shift के लिए थोड़ा गैप */
    }
}

/* छोटी स्क्रीन पर पहले कॉलम को फ्रीज करने के लिए CSS */
@media (max-width: 782px) {
    /* यह सुनिश्चित करता है कि टेबल हॉरिजॉन्टल स्क्रॉल हो */
    #quick-entry-table {
        display: block;
        overflow-x: auto;
    }

    /* टेबल के हेडर (Member) को फ्रीज करें */
    #quick-entry-table thead th:first-child {
        position: -webkit-sticky; /* Safari ब्राउज़र के लिए */
        position: sticky;
        left: 0;
        z-index: 2; /* यह सुनिश्चित करता है कि यह दूसरे कॉलम के ऊपर रहे */
        background-color: #f9f9fa; /* हेडर का बैकग्राउंड कलर */
    }

    /* टेबल की हर रो के पहले सेल (Member Name) को फ्रीज करें */
    #quick-entry-table tbody td:first-child {
        position: -webkit-sticky; /* Safari ब्राउज़र के लिए */
        position: sticky;
        left: 0;
        z-index: 1;
        background-color: #fff; /* सामान्य रो का बैकग्राउंड कलर */
    }

    /* अल्टरनेट (धारीदार) रो के लिए बैकग्राउंड कलर मैच करें */
    #quick-entry-table tbody tr:nth-child(even) td:first-child {
        background-color: #f8f9fa;
    }
}

/* Styling for Member Contact Buttons (Text Version) */
.contact-buttons {
    display: flex;
    gap: 5px; /* Buttons ke beech me space */
    margin-top: 5px;
}

.contact-buttons a {
    padding: 3px 10px; /* Button ke andar vertical aur horizontal space */
    border-radius: 4px; /* Halke gol corner */
    text-decoration: none;
    color: #fff !important; /* Text ka color hamesha safed */
    font-size: 11px; /* Chhota font size */
    line-height: 1.5;
    transition: opacity 0.2s ease-in-out;
}

.contact-buttons a:hover {
    opacity: 0.85;
}

/* Button Colors */
.button-call {
    background-color: #0073aa; /* WordPress blue */
}

.button-sms {
    background-color: #5a4fcf; /* Purple color */
}

.button-whatsapp {
    background-color: #25D366; /* WhatsApp green */
}

/* Table row hover effect for better UX */
.widefat tbody tr:hover {
    background-color: #f0f4f8; /* A light, non-intrusive hover color */
}

/* This ensures the sticky column on mobile also gets the hover color */
@media (max-width: 782px) {
    #quick-entry-table tbody tr:hover td:first-child {
        background-color: #f0f4f8;
    }
}

/* Collapsible Section for Backup Guide */
.collapsible-trigger {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f6f7f7;
    padding: 10px 15px;
    margin: -12px -12px 10px -12px;
    border-bottom: 1px solid #ddd;
}
.collapsible-trigger:hover {
    background-color: #f0f0f1;
}
.collapsible-trigger .dashicons {
    transition: transform 0.3s ease;
}
.collapsible-trigger.active .dashicons {
    transform: rotate(180deg);
}
.collapsible-content {
    padding-top: 10px;
}
.collapsible-content code {
    background: #f0f0f1;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #ddd;
}
.collapsible-content ol {
    margin-left: 20px;
}
.collapsible-content ol li {
    margin-bottom: 10px;
}

/* Force Desktop Layout for PDF Generation */
.pdf-generation-mode .receipt-header-pro,
.pdf-generation-mode .two-column-layout {
    flex-direction: row !important;
}

.pdf-generation-mode .column {
    width: 48% !important;
}

/* PDF बनाते समय लेआउट और फ़ॉन्ट को बेहतर बनाने के लिए */
.pdf-generation-mode .mdp-receipt-pro {
    font-size: 14px; /* PDF के लिए बेस फ़ॉन्ट साइज़ थोड़ा बढ़ाएं */
}

/* Fix for large logo preview in settings */
.wrap .mdp-image-uploader .mdp-image-preview {
    max-width: 150px; /* Adjust width as needed */
    max-height: 100px; /* Adjust height as needed */
    width: auto;
    height: auto;
    border: 1px solid #ddd;
    display: block; /* Ensures the image doesn't stretch inline elements */
    margin-bottom: 10px; /* Add some space below the image */
}

.wrap .mdp-image-uploader .mdp-no-image-placeholder {
    width: 150px; /* Match max-width */
    height: 100px; /* Match max-height */
    background-color: #f0f0f1;
    border: 1px dashed #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    margin-bottom: 10px; /* Add space below placeholder */
}

.wrap .mdp-image-uploader .mdp-no-image-placeholder::before {
   content: "No Image"; /* Placeholder text */
   font-size: 12px;
}

/* Member Dashboard Enhancements */
.mdp-dashboard {
    background-color: #f9f9f9; /* हल्का बैकग्राउंड */
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.mdp-dashboard h3,
.mdp-dashboard h4 {
    color: var(--primary-color, #2a7f62); /* Use primary color if defined */
    border-bottom: 1px solid var(--border-color, #dfe6ee);
    padding-bottom: 8px;
    margin-bottom: 20px;
}

/* Summary Cards */
.mdp-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Responsive grid */
    gap: 20px;
    margin-bottom: 30px;
}

.mdp-summary-cards .card {
    background-color: #fff;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color, #dfe6ee);
    text-align: center;
}

.mdp-summary-cards .card h4 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1em;
    color: #555;
    border-bottom: none; /* Remove border from card headings */
}

.mdp-summary-cards .card p {
    font-size: 1.6em;
    font-weight: 600;
    margin: 0;
    color: #333;
}

.mdp-summary-cards .card.net-payable-card p {
    color: var(--primary-color, #2a7f62); /* Highlight net payable */
}

/* Chart Container */
.mdp-chart-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color, #dfe6ee);
    margin-bottom: 30px;
}

.mdp-chart-container h4 {
    text-align: center;
}

/* Tables */
.mdp-recent-activity table.widefat,
.mdp-payment-history table.widefat {
    margin-top: 15px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color, #dfe6ee);
}

.mdp-recent-activity table.widefat th,
.mdp-payment-history table.widefat th {
   background-color: var(--light-gray-color, #f7f9fc);
}

/* Button Alignment */
.mdp-dashboard > div:first-child { /* Targets the top div with heading and logout */
    align-items: center;
    border-bottom: 1px solid var(--border-color, #dfe6ee);
    padding-bottom: 15px;
}

.mdp-recent-activity > div:first-child { /* Targets div with heading and View All button */
     border-bottom: none; /* Remove border */
     padding-bottom: 0;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .mdp-summary-cards {
        grid-template-columns: 1fr; /* Stack cards on small screens */
    }

    .mdp-dashboard {
        padding: 15px;
    }

    .mdp-summary-cards .card p {
        font-size: 1.4em;
    }
}

/* Month Filter Styles for Dashboard */
.mdp-month-filter {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #fff;
    border: 1px solid var(--border-color, #dfe6ee);
    border-radius: 6px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
}

.mdp-month-filter form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap; /* Allow wrapping on small screens */
}

.mdp-month-filter label {
    font-weight: 600;
    color: #333;
}

.mdp-month-filter input[type="month"] {
    padding: 8px 10px;
    border: 1px solid #8c8f94;
    border-radius: 4px;
}

.mdp-month-filter button {
    padding: 8px 15px;
}

/* Adjust button alignment within the filter */
.mdp-month-filter button {
    margin-left: 5px; /* Add slight space before button */
}

/* Responsive adjustments for filter */
@media (max-width: 600px) {
    .mdp-month-filter form {
        flex-direction: column; /* Stack vertically */
        align-items: stretch; /* Stretch items to full width */
    }
    .mdp-month-filter input[type="month"] {
         width: 100%;
         box-sizing: border-box;
    }
    .mdp-month-filter button {
         width: 100%;
         box-sizing: border-box;
         margin-left: 0;
         margin-top: 10px;
    }
}

/* Month Navigation Styles */
.mdp-month-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: #fff;
    border: 1px solid var(--border-color, #dfe6ee);
    border-radius: 6px;
    margin-bottom: 20px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
}

.mdp-month-navigation .current-month-display {
    font-weight: 600;
    font-size: 1.1em;
    color: var(--primary-color, #2a7f62);
}

.mdp-month-navigation .button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive adjustments for navigation */
@media (max-width: 600px) {
    .mdp-month-navigation {
        flex-direction: column;
        gap: 10px;
    }
    .mdp-month-navigation .current-month-display {
       order: -1; /* Month name comes first on mobile */
    }
     .mdp-month-navigation a, .mdp-month-navigation span.button {
         width: 100%;
         text-align: center;
         box-sizing: border-box;
    }
}

/* Limit recent activities height and add scroll */
.mdp-recent-activity {
  position: relative; /* Needed for button positioning */
}

.mdp-recent-activity table.widefat tbody {
   display: block;
   max-height: 300px; /* Adjust height as needed */
   overflow-y: auto;
}
.mdp-recent-activity table.widefat thead,
.mdp-recent-activity table.widefat tbody tr {
   display: table;
   width: 100%;
   table-layout: fixed; /* Important for scrollable body */
}
.mdp-recent-activity table.widefat thead {
   width: calc( 100% - 1em ); /* Adjust for scrollbar width */
}

/* Adjust Chart Container Height */
.mdp-chart-container {
    max-height: 350px; /* Adjust this value as needed (e.g., 300px, 400px) */
    /* You might need !important if the height doesn't change */
    /* max-height: 350px !important; */
}




/* Style for Arrow Navigation Buttons */
.mdp-month-navigation a.mdp-nav-arrow,
.mdp-month-navigation span.mdp-nav-arrow {
    font-size: 1.4em; /* Make arrows slightly larger */
    padding: 4px 12px; /* Adjust padding if needed */
    line-height: 1; /* Adjust line height for vertical centering */
}

@media (max-width: 600px) {
    .mdp-month-navigation a.mdp-nav-arrow,
    .mdp-month-navigation span.mdp-nav-arrow {
         font-size: 1.2em; /* Slightly smaller arrows on mobile */
         padding: 5px 10px;
    }
}

/* Login Form Styling - Final Update */
.mdp-login-container {
    max-width: 380px; /* Reduced width for PC */
    margin: 50px auto; /* More vertical margin, centered */
    padding: 30px 35px; /* Adjusted padding */
    background-color: #ffffff; /* Explicit white background */
    border-radius: 6px; /* Slightly softer corners */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07); /* Slightly softer shadow */
    border: 1px solid #e5e7eb; /* Light border */
    box-sizing: border-box;
}

/* Override mdp11-card padding if needed */
.mdp-login-container.mdp11-card {
   padding: 30px 35px; /* Match above padding */
}

.mdp-login-container h3 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 30px; /* More space below heading */
    color: #333; /* Darker heading color */
    font-size: 1.4em; /* Slightly adjusted size */
    font-weight: 600;
    border-bottom: none;
}

.mdp-login-form .mdp-login-row {
    margin-bottom: 22px; /* Increased row spacing */
}

.mdp-login-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500; /* Slightly less bold */
    color: #555; /* Lighter label color */
    font-size: 0.95em;
}

.mdp-login-form input[type="tel"],
.mdp-login-form input[type="password"] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #d1d5db; /* Lighter border */
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1em;
    background-color: #f9fafb; /* Very light input background */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mdp-login-form input:focus {
    border-color: var(--primary-color, #2a7f62);
    box-shadow: 0 0 0 3px rgba(42, 127, 98, 0.15); /* Adjusted focus shadow */
    outline: none;
    background-color: #fff;
}

.mdp-login-actions {
    margin-top: 30px; /* More space above button */
    text-align: center;
}

.mdp-login-button {
    padding: 12px 30px;
    font-size: 1.1em;
    font-weight: 600; /* Bolder button text */
    width: 100%;
    cursor: pointer;
    background-color: var(--primary-color, #2a7f62);
    border-color: var(--primary-color, #2a7f62);
    color: #fff;
    border-radius: 4px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    text-transform: uppercase; /* Uppercase button text */
    letter-spacing: 0.5px; /* Slight letter spacing */
}

.mdp-login-button:hover {
     background-color: #226a51; /* Darker shade on hover */
     border-color: #1e5e46; /* Slightly darker border on hover */
}

/* Mobile Responsive adjustments (Kept from previous version) */
@media (max-width: 480px) {
    .mdp-login-container {
        padding: 25px 20px; /* Adjusted padding for mobile */
        margin: 20px 10px; /* Side margin on small screens */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); /* Less shadow on mobile */
    }
    .mdp-login-container.mdp11-card {
         padding: 25px 20px;
    }
    .mdp-login-container h3 {
        font-size: 1.3em;
        margin-bottom: 20px;
    }
    .mdp-login-button {
        padding: 11px 20px; /* Adjust button padding for mobile */
        font-size: 1em;
    }
}

/* --- Frontend Quick Entry Styles (Improved) --- */