@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    --primary-color: #2f2fb1;
    --primary-hover: #242488;
    --primary-dark: #242488;
    --primary-accent: var(--primary-color);
    --primary-indigo: var(--primary-color);
    --primary-blue: var(--primary-color);
    --success-green: #22c55e;
    --danger-red: #ef4444;
    --bg-color: #f3f3f9;
    --text-main: #212529;
    --text-muted: #878a99;
    --border-color: #e9ebec;
    --grid-header-bg: #f3f6f9;
    /* Slate Tokens */
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --shadow-soft: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --border-radius-md: 8px;
}

/* --- Standardized Full Width Form Card --- */
.form-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 100%;
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 170px);
    overflow: visible !important;
    padding: 0 !important;
}

.form-header {
    padding: 8px 16px;
    border-bottom: 1px solid #f1f5f9;
    background: #fcfdfe;
}

.form-body {
    padding: 15px 20px;
    flex: 1;
    overflow-y: auto;
}

.form-footer {
    margin-top: auto !important;
    padding: 15px 25px;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.footer-actions-row {
    margin-top: auto;
    padding: 8px 16px;
    border-top: 2px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    position: sticky;
    bottom: 0;
    background: #f8fafc;
    z-index: 1000;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 0 0 12px 12px;
    backdrop-filter: blur(8px);
    border-bottom: 1px solid #e2e8f0;
}

.footer-actions-left {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    align-items: center;
}

.footer-actions-right {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    align-items: center;
    margin-left: auto;
}

.form-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
    margin-bottom: 0 !important;
}

.form-header h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 0;
    color: var(--primary-color);
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100%;
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg-color);
    /* Do NOT set overflow-x: hidden here — it blocks grid horizontal scroll on mobile */
    overflow-x: clip;
    /* 'clip' prevents scroll bar on body but does not create a scroll container, preserving inner scroll */
    box-sizing: border-box;
}

* {
    box-sizing: border-box;
}

/* Hide Numeric Spinners Globally */
.e-numeric.e-control-wrapper .e-input-group-icon.e-spin-up,
.e-numeric.e-control-wrapper .e-input-group-icon.e-spin-down {
    display: none !important;
}

.hide-arrow.e-control.e-dropdownlist .e-input-group-icon.e-ddl-icon {
    display: none !important;
}

/* --- Standard Page Header Pattern --- */
.page-header-wrapper {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.4) !important;
}

.page-title-area h2 {
    font-size: 26px;
    font-weight: 800;
    color: var(--primary-blue);
    margin: 0;
    letter-spacing: -0.025em;
}

.header-action-buttons {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
}

/* --- Grid Toolbar with Title, Search, and Button --- */
.standard-grid-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    overflow: visible;
    /* Allow child grid to show its own horizontal scrollbar */
    border: 1px solid #eef2f7;
    margin-top: 8px;
}

.grid-top-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 12px 20px;
    background: #fcfdfe;
    border-bottom: 1px solid #eef2f7;
    gap: 12px;
}

.page-title-inline {
    flex: 0 0 auto;
}

.page-title-inline h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0;
    white-space: nowrap;
}

.page-title-inline h2 i {
    font-size: 16px;
    color: var(--primary-color);
    margin-left: 8px;
}

.header-action-buttons {
    flex: 0 0 auto;
    display: flex;
    gap: 12px;
    align-items: center;
    margin-left: auto;
}

.search-wrapper {
    flex: 0 0 320px;
    min-width: 200px;
}

.grid-search-input {
    width: 100%;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .grid-top-bar {
        padding: 10px 15px;
        gap: 10px;
    }

    .page-title-inline h2 {
        font-size: 18px;
    }

    .search-wrapper {
        flex: 1 1 100%;
        order: 3;
    }

    .header-action-buttons {
        order: 2;
        margin-left: 0;
    }

    .footer-actions-row {
        flex-direction: row !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }

    .footer-actions-left,
    .footer-actions-right {
        flex-direction: row !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        width: auto !important;
        gap: 8px !important;
    }

    .footer-actions-right {
        margin-left: auto !important;
    }

    .footer-actions-left .e-btn,
    .footer-actions-right .e-btn {
        flex: none !important;
        min-width: unset !important;
        width: auto !important;
    }
}

/* Reminder page filters */
.filters-container {
    flex: 0 0 auto;
    display: flex;
    gap: 12px;
    align-items: center;
}


/* --- Styled Action Buttons (GLOBAL PRIMARY BRANDING) --- */
.e-primary,
.e-btn.e-primary,
.header-action-buttons button.e-primary,
.footer-actions-row button.e-primary,
.sgbill-popup-actions button.e-primary,
.form-footer button.e-primary {
    background: var(--primary-color) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 8px 20px !important;
    border: none !important;
    opacity: 1 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    text-transform: none !important;
    transition: all 0.2s ease !important;
}

.e-delete {
    background: #d32f2f !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 8px 20px !important;
    border: none !important;
    opacity: 1 !important;
    box-shadow: 0 4px 12px rgba(211, 47, 47, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    text-transform: none !important;
    transition: all 0.2s ease !important;
}

.e-dropdown-btn.e-delete {
    background: #d32f2f !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 8px 20px !important;
    border: none !important;
    opacity: 1 !important;
    box-shadow: 0 4px 12px rgba(211, 47, 47, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    text-transform: none !important;
    transition: all 0.2s ease !important;
}

/* 2. REMOVES THE RED BACKGROUND FROM THE POPUP CONTAINER */
body .e-dropdown-popup.e-delete,
body .e-dropdown-popup.e-delete .e-dropdown-menu {
    background: #ffffff !important;
    background-color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 4px 0 !important;
}

/* 3. FIXES THE TEXT AND ICON COLORS FOR ALL OPTIONS */
body .e-dropdown-popup.e-delete .e-item,
body .e-dropdown-popup.e-delete .e-item .e-menu-url,
body .e-dropdown-popup.e-delete .e-item .e-menu-icon {
    color: #333333 !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* 4. CLEAN LIGHT-GRAY HOVER FEEDBACK FOR THE OPTIONS */
body .e-dropdown-popup.e-delete .e-item.e-focused,
body .e-dropdown-popup.e-delete .e-item:hover {
    background: #f5f5f5 !important;
    background-color: #f5f5f5 !important;
    color: #000000 !important;
}

/* Checkbox UI imported from InfoHR */
.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* Native Checkboxes and Radios Fallback */
input[type="radio"],
input[type="checkbox"] {
    accent-color: var(--primary-color);
}

/* Force solid color on Syncfusion Checkboxes and Radios (No Gradients) */
.e-checkbox-wrapper .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-frame.e-check {
    background-image: none !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

body .e-radio-wrapper .e-radio:checked + .e-radio-circle::after,
body .e-css.e-radio-wrapper .e-radio:checked + .e-radio-circle::after {
    background-image: none !important;
    background-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}
body .e-radio-wrapper .e-radio:checked + .e-radio-circle,
body .e-css.e-radio-wrapper .e-radio:checked + .e-radio-circle {
    border-color: var(--primary-color) !important;
}

/* Force solid color on Syncfusion Tabs */
body .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text,
body .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-icon {
    color: var(--primary-color) !important;
}
body .e-tab .e-tab-header .e-indicator {
    background: var(--primary-color) !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* Specific adjustment for smaller buttons to prevent padding overflow */
.e-primary.e-small,
.e-btn.e-primary.e-small {
    padding: 4px 12px !important;
    font-size: 12px !important;
}

.e-primary:hover,
.e-btn.e-primary:hover,
.header-action-buttons button.e-primary:hover,
.footer-actions-row button.e-primary:hover {
    background-color: var(--primary-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45) !important;
    color: #ffffff !important;
}

.header-action-buttons button.e-primary.e-btn .e-btn-icon,
.header-action-buttons button.e-primary i {
    color: #ffffff !important;
    margin-right: 8px !important;
    font-size: 16px !important;
}

/* --- Grid Action Buttons --- */
.action-buttons-container {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

.action-icon-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    border: 1px solid #e2e8f0 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.action-icon-btn:hover {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    transform: translateY(-2px) !important;
}

.action-icon-btn.edit-btn:hover {
    background: #eff6ff !important;
    border-color: #3b82f6 !important;
}

.action-icon-btn .e-btn-icon,
.action-icon-btn i {
    font-size: 14px !important;
    margin: 0 !important;
    color: #64748b !important;
}

.action-icon-btn.edit-btn:hover .e-btn-icon,
.action-icon-btn.edit-btn:hover i {
    color: #3b82f6 !important;
}

/* --- PREMIUM FORM DESIGN SYSTEM --- */
.form-card {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-md) !important;
    width: 100%;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 170px);
    overflow: hidden !important;
    animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 0 !important;
}

/* Responsive form adjustments for smaller screens */
@media (max-width: 1400px) {
    .form-body .row {
        gap: 8px 0;
    }

    .form-body .col-md-2 {
        flex: 0 0 calc(20% - 10px);
        max-width: calc(20% - 10px);
        padding-right: 8px;
        padding-left: 8px;
    }

    .form-body .col-md-6 {
        flex: 0 0 60%;
        max-width: 60%;
    }
}

@media (max-width: 1200px) {
    .form-body .col-md-2 {
        flex: 0 0 calc(25% - 8px);
        max-width: calc(25% - 8px);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-header {
    background: var(--bg-secondary) !important;
    border: none !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-radius: 12px 12px 0 0 !important;
    box-shadow: none !important;
    padding: 14px 20px !important;
}

.form-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0;
}

.form-body {
    padding: 20px !important;
    background: transparent !important;
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* Hide outer x-scroll — grids handle their own internal horizontal scroll */
    border: none !important;
    box-shadow: none !important;
    min-width: 0 !important;
    /* Crucial: allows flex child to shrink, prevents expanding page width */
}

.form-card>.form-body:first-child {
    border-radius: 12px !important;
}

.form-header {
    background: #fcfdfe !important;
    border: 1px solid var(--border-color) !important;
    border-bottom: none !important;
    border-radius: 12px 12px 0 0 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
}

.form-header+.form-body {
    border-top: none !important;
    border-radius: 0 !important;
    padding-top: 15px !important;
}

/* Premium Form Grid */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 20px;
}

.form-grid.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.form-group.full-width {
    grid-column: span 2;
}

.form-grid.grid-4 .form-group.span-2 {
    grid-column: span 2;
}

.form-grid.grid-4 .form-group.span-3 {
    grid-column: span 3;
}

.form-grid.grid-4 .form-group.span-4,
.form-grid.grid-4 .section-title.span-4 {
    grid-column: span 4;
}

.section-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 4px 10px;
    background: #f8fafc;
    border-radius: 4px;
    margin: 4px 0 1px 0;
    line-height: 1;
    min-height: auto;
    display: flex;
    align-items: center;
    border: 1px solid #f1f5f9;
}

.form-body>.form-grid>.section-title:first-child,
.form-body>.section-title:first-child {
    margin-top: 0;
}

.section-title::before {
    content: '';
    width: 4px;
    height: 16px;
    background: var(--primary-color);
    margin-right: 12px;
    border-radius: 2px;
}

.form-group {
    margin-bottom: 0;
}

.form-group label {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 4px;
    display: block;
}

/* Standardizing Input Appearance (Global Compact Design) */

/* Sticky Footer (Standardized) */
/* Specific handling for Outlined inputs */

/* Ensure child input elements fit the compact height */

/* Ensure child input elements fit the compact height */

/* Floating Label Adjustment for Compact Height */

/* Floating Label Adjustment for Compact Height */

/* Remove default underline indicators */

/* Sticky Footer (Standardized) */
.form-footer {
    margin-top: auto !important;
    padding: 12px 20px !important;
    background: var(--bg-tertiary) !important;
    border-top: 1px solid var(--border-color) !important;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-radius: 0 0 12px 12px !important;
    position: sticky;
    bottom: 0;
    z-index: 1000;
    box-shadow: none !important;
    border-bottom: none !important;
}

/* Save / Primary button */
.form-footer .e-primary.e-btn,
.form-footer button.e-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 7px 20px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.form-footer .e-primary.e-btn:hover,
.form-footer button.e-primary:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
    transform: translateY(-1px) !important;
}

/* Cancel / Danger outline button */
.form-footer .e-outline.e-btn,
.form-footer button.e-outline,
.form-footer .e-outline.e-danger.e-btn,
.form-footer button.e-outline.e-danger {
    background-color: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #64748b !important;
    border-radius: 8px !important;
    padding: 7px 20px !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.form-footer .e-outline.e-btn:hover,
.form-footer button.e-outline:hover,
.form-footer .e-outline.e-danger.e-btn:hover,
.form-footer button.e-outline.e-danger:hover {
    background-color: #fff1f2 !important;
    border-color: #fca5a5 !important;
    color: #dc2626 !important;
}

/* Icon inside footer buttons */
.form-footer .e-btn .e-btn-icon,
.form-footer .e-btn i {
    font-size: 13px !important;
    margin: 0 !important;
}

/* --- PREMIUM MASTER GRID SYSTEM --- */
.standard-grid-card {
    background: white;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    margin-top: 8px;
    max-height: calc(100vh - 180px);
    /* Ensure grid fits in 1366x778 with pagination */
    overflow: hidden;
    position: relative;
    animation: fadeIn 0.3s ease-out;
    display: flex;
    flex-direction: column;
}

.page-content,
.page-container,
.container-fluid {
    padding: 0 !important;
    margin: 0 !important;
}

.page-content-wrapper {
    padding-top: 0 !important;
}

/* Main Grid Style */
.e-grid {
    border: 1px solid var(--border-color) !important;
    background: transparent !important;
    min-height: 400px !important;
    max-height: calc(100vh - 250px) !important;
    /* Ensure pagination fits in 1366x778 */
    display: flex !important;
    flex-direction: column !important;
}

.e-grid .e-gridcontent,
.e-grid .e-content {
    flex: 1 !important;
}

.e-grid .e-pager {
    background: #ffffff !important;
    border-top: 1px solid #f1f5f9 !important;
    padding: 12px !important;
    flex-shrink: 0 !important;
    /* Prevent pager from shrinking */
    position: sticky !important;
    bottom: 0 !important;
    z-index: 10 !important;
}

.grid-search-input.e-input-group {
    width: 280px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 2px 12px !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

.grid-search-input.e-input-group:focus-within {
    border-color: var(--primary-color) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1) !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Redesigned Grid Action Buttons */
.action-buttons-container {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

/* Consolidated Action Icon Buttons */
.action-icon-btn.e-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
}

.action-icon-btn.e-btn .e-btn-icon {
    margin: 0 !important;
    font-size: 14px !important;
}

/* Edit Button Style */
.btn-edit-row.e-btn {
    color: var(--primary-color) !important;
}

.btn-edit-row.e-btn:hover {
    background: #eef2ff !important;
    border-color: #e0e7ff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

/* Delete Button Style */
.btn-delete-row.e-btn {
    color: #ef4444 !important;
}

.btn-delete-row.e-btn:hover {
    background: #fef2f2 !important;
    border-color: #fee2e2 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(239, 68, 68, 0.1) !important;
}

/* Status Badges */
.status-badge {
    padding: 6px 6px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}

.status-active {
    background-color: #dcfce7 !important;
    color: #166534 !important;
    border: 1px solid #bbf7d0 !important;
}

.status-inactive {
    background-color: #fee2e2 !important;
    color: #991b1b !important;
    border: 1px solid #fecaca !important;
}

/* Additional Grid Overrides */

.e-grid .e-headercell {
    background-color: #f8fafc !important;
    color: #1e293b !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-bottom: 2px solid #e2e8f0 !important;
    height: 36px !important;
    padding: 0 12px !important;
}

/* Fix for filter icons being too far from column names */
.e-grid .e-headercell .e-headercelldiv {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    padding: 0 4px !important;
    width: 100% !important;
    /* Changed from auto to 100% for justification */
    overflow: visible !important;
}

.e-grid .e-headercell .e-headertext {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: inline-block !important;
}

.e-grid .e-headercell .e-filtericon,
.e-grid .e-headercell .e-sortfilterdiv {
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
    order: 2 !important;
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 auto !important;
    float: none !important;
}

/* Parent alignment for inline-flex container */
.e-grid .e-headercell.e-rightalign {
    text-align: right !important;
}

.e-grid .e-headercell.e-rightalign .e-headercelldiv {
    justify-content: flex-end !important;
}

.e-grid .e-headercell.e-centeralign {
    text-align: center !important;
}

.e-grid .e-headercell.e-centeralign .e-headercelldiv {
    justify-content: center !important;
}

.e-grid .e-headercell.e-leftalign {
    text-align: left !important;
}

.e-grid .e-headercell.e-leftalign .e-headercelldiv {
    justify-content: flex-start !important;
}

.e-grid .e-headercelldiv span {
    flex: 0 0 auto !important;
}

/* Hide Syncfusion's default absolute filter icon if it exists separately */
.e-grid .e-headercell .e-filtericon.e-icons.e-filterset {
    position: static !important;
}

.e-grid .e-rowcell {
    height: 32px !important;
    font-size: 13px !important;
    color: #334155 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 0 8px !important;
}

/* Action buttons are consolidated above */

.e-grid .e-row:hover .e-rowcell {
    background-color: #f8fafc !important;
}

.e-grid .e-pager {
    background: #ffffff !important;
    border-top: 1px solid #f1f5f9 !important;
    padding: 12px !important;
}

.e-grid .e-pager .e-currentitem,
.e-grid .e-pager .e-currentitem:hover {
    background: var(--primary-color) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
}

/* Menu Context Auto-Close Fix - More Aggressive */
.e-menu-popup.e-popup {
    z-index: 1000 !important;
    transition: opacity 0.2s ease !important;
}

/* Force close all menu popups on any page interaction */
.page-content:active .e-menu-popup.e-popup,
.page-content:focus .e-menu-popup.e-popup,
.page-content:hover .e-menu-popup.e-popup,
.form-body:active .e-menu-popup.e-popup,
.form-body:focus .e-menu-popup.e-popup,
.form-body:hover .e-menu-popup.e-popup {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(0) !important;
}

/* Hide menu popups when any input is focused */
input:focus~.e-menu-popup.e-popup,
.e-input-group:focus~.e-menu-popup.e-popup,
.e-control-wrapper:focus~.e-menu-popup.e-popup,
.SfTextBox:focus~.e-menu-popup.e-popup,
.SfComboBox:focus~.e-menu-popup.e-popup,
.SfDatePicker:focus~.e-menu-popup.e-popup {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Force hide on any click outside menu */
body:active .e-menu-popup.e-popup:not(:hover),
body:focus .e-menu-popup.e-popup:not(:hover) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Hide all popups when navigating */
.e-menu-popup.e-popup {
    animation: menuHide 0.3s ease forwards !important;
}

@keyframes menuHide {
    0% {
        opacity: 1;
        visibility: visible;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}

/* Additional force close for specific scenarios */
.form-footer-section:active~.e-menu-popup.e-popup,
.form-footer-section:focus~.e-menu-popup.e-popup,
.form-footer:active~.e-menu-popup.e-popup,
.form-footer:focus~.e-menu-popup.e-popup {
    display: none !important;
    visibility: hidden !important;
}

/* Auto-close menu when clicking outside */
.page-content:active~.e-menu-popup.e-popup,
.page-content:focus~.e-menu-popup.e-popup,
.form-body:active~.e-menu-popup.e-popup,
.form-body:focus~.e-menu-popup.e-popup {
    display: none !important;
    visibility: hidden !important;
}

/* Force close menu popups on page interaction */
.page-content:hover .e-menu-popup.e-popup:not(:hover),
.form-body:hover .e-menu-popup.e-popup:not(:hover) {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Aggressive menu close - hide all menu popups when page content is clicked */
.page-content:active .e-menu-popup.e-popup,
.page-content:focus .e-menu-popup.e-popup,
.page-content:hover .e-menu-popup.e-popup,
.form-body:active .e-menu-popup.e-popup,
.form-body:focus .e-menu-popup.e-popup,
.form-body:hover .e-menu-popup.e-popup {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Hide menu popups when any input is focused */
input:focus~.e-menu-popup.e-popup,
.e-input-group:focus~.e-menu-popup.e-popup,
.e-control-wrapper:focus~.e-menu-popup.e-popup {
    display: none !important;
    visibility: hidden !important;
}

/* Fix for Excel Filter Menu and Popups */
.e-filter-popup.e-popup,
.e-excel-filter.e-popup {
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    padding: 0 !important;
    /* Reset padding to handle internal margins */
    min-width: 260px !important;
    overflow: hidden !important;
}

.e-excel-filter .e-filter-main-panel {
    background: #ffffff !important;
    padding: 15px !important;
}

.e-excel-filter .e-searchwrapper {
    margin-bottom: 15px !important;
}

/* Cleaning the Search Box */
.e-excel-filter .e-searchwrapper .e-input-group,
.e-excel-filter .e-searchwrapper .e-input-group.e-control-wrapper {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    height: 36px !important;
    padding: 0 8px !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.e-excel-filter .e-searchwrapper .e-input-group::before,
.e-excel-filter .e-searchwrapper .e-input-group::after,
.e-excel-filter .e-searchwrapper .e-input-group.e-input-focus::before,
.e-excel-filter .e-searchcontainer {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

.e-excel-filter .e-searchwrapper .e-input-group .e-input {
    background: transparent !important;
    font-size: 14px !important;
    color: #1e293b !important;
}

.report-grid {
    border-left: 1px solid var(--border-color) !important;
    border-right: 1px solid var(--border-color) !important;
}

.e-excel-filter .e-checkboxlist {
    max-height: 200px !important;
    margin: 10px 0 !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 8px !important;
    background: #fcfdfe !important;
}

.e-excel-filter .e-ftrbtns {
    padding: 12px 15px !important;
    background: #f8fafc !important;
    border-top: 1px solid #f1f5f9 !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}

.e-excel-filter .e-ftrbtns .e-btn {
    margin: 0 !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: none !important;
}

.e-excel-filter .e-ftrbtns .e-primary {
    background-color: var(--primary-color) !important;
    border: none !important;
}

/* Enhancing Grid Selection and Hover */
.e-grid .e-selectionbackground {
    background-color: #eef2ff !important;
}

.e-grid .e-row:hover .e-rowcell {
    background-color: #f1f5f9 !important;
    cursor: pointer;
}

.e-filter-popup .e-footer-content {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 10px !important;
    border-radius: 0 0 12px 12px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

.e-grid .e-filterbarcell.e-filterbarbackcolor {
    background-color: #ffffff !important;
}

/* --- Grid Image Styling --- */
.grid-row-img-container {
    width: 34px;
    height: 34px;
    border-radius: 4px;
    overflow: hidden;
    background-color: #eff2f7;
    border: 1px solid #e9ebec;
    display: flex;
    align-items: center;
    justify-content: center;
}

.grid-row-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.grid-row-img-placeholder {
    color: #94a3b8;
    font-size: 14px;
}

.item-name-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.item-main-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.item-name-text {
    font-weight: 600;
    color: var(--text-main);
    font-size: 14px;
    line-height: 1.2;
}

.item-sub-text {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* --- Breadcrumbs --- */
.breadcrumb-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: #94a3b8;
    margin: 0;
    padding: 2px 0;
}

.breadcrumb-wrapper i {
    font-size: 12px;
}

.breadcrumb-item.active {
    color: var(--primary-color);
    font-weight: 500;
}

.breadcrumb-separator {
    color: #cbd5e1;
}

/* --- Search Box Refinement --- */
.search-wrapper .e-input-group {
    border: none !important;
    border-bottom: 1.5px solid #e2e8f0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 2px 0 !important;
}

.search-wrapper .e-input-group.e-input-focus {
    border-bottom-color: var(--primary-color) !important;
}

.search-wrapper .e-input-group::before,
.search-wrapper .e-input-group::after {
    display: none !important;
}


/* Standardized Dropdown Popups and List Items */

/* DatePicker & Calendar Popups Fix */

/* DatePicker & Calendar Popups Fix */
/*.e-datepicker.e-popup,
.e-calendar.e-lib,
.e-popup.e-datepicker {
    z-index: 1000002 !important;
    background-color: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid #e2e8f0 !important;
    padding: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 300px !important;
    min-width: 250px !important;
    display: block !important;
}

.e-calendar {
    background-color: #ffffff !important;
    border: none !important;
    width: 100% !important;
}

.e-calendar .e-content span,
.e-calendar .e-day,
.e-calendar .e-content td {
    color: #334155 !important;
    visibility: visible !important;
}

.e-calendar .e-header {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.e-calendar .e-header .e-title,
.e-calendar .e-header .e-prev,
.e-calendar .e-header .e-next {
    color: #1e293b !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    display: inline-block !important;
}

.e-calendar .e-content td.e-today span.e-day {
    color: #4f46e5 !important;
    font-weight: 700 !important;
}

.e-calendar .e-content td.e-selected span.e-day {
    background-color: #4f46e5 !important;
    color: #ffffff !important;
}

.e-dropdownlist.e-popup.e-control.e-lib,
.e-combobox.e-popup.e-control.e-lib {
    z-index: 1000001 !important;
    width: auto !important;
    min-width: 250px !important;
}*/

/* --- Grid Action Buttons & Badges --- */
.status-badge {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.status-active {
    background-color: #22c55e !important;
    color: white !important;
}

.status-inactive {
    background-color: #ef4444 !important;
    color: white !important;
}

.action-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.action-buttons .edit-btn,
.action-buttons .delete-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    min-width: 32px !important;
    background: white !important;
    border: 1px solid #e2e8f0 !important;
    transition: all 0.2s !important;
}

.action-buttons .edit-btn {
    color: var(--primary-color) !important;
}

.action-buttons .delete-btn {
    color: #dc2626 !important;
}

.action-buttons .edit-btn:hover {
    background: #f0f0ff !important;
    border-color: var(--primary-color) !important;
}

.action-buttons .delete-btn:hover {
    background: #fef2f2 !important;
    border-color: #dc2626 !important;
}

/* --- Grid Paging Customization --- */
.e-grid .e-pager .e-currentitem,
.e-grid .e-pager .e-currentitem:hover {
    background: #eef2ff !important;
    color: var(--primary-color) !important;
    border-radius: 4px !important;
}


/* --- PREMIUM HEADER & MOBILE DRAWER SYSTEM --- */

.main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    height: 60px;
    padding: 0 24px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid #f1f5f9;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-left,
.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-logo {
    height: 34px;
    width: auto;
}

/* Desktop Navigation */
.header-nav-desktop {
    flex: 1;
    display: flex;
    justify-content: center;
}

@media (max-width: 991px) {
    .header-nav-desktop {
        display: none;
    }
}

/* Premium Buttons Styling */
.mobile-hamburger-btn {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s;
}

.mobile-hamburger-btn:hover {
    background: #f1f5f9;
    color: var(--primary-color);
}

.logout-icon-btn.e-btn {
    background: #fff1f2 !important;
    color: #e11d48 !important;
    border: 1px solid #ffe4e6 !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 1px 2px rgba(225, 29, 72, 0.1) !important;
}

.logout-icon-btn.e-btn:hover {
    background: #e11d48 !important;
    color: #ffffff !important;
    border-color: #e11d48 !important;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.2) !important;
}



/* 4. PREMIUM MOBILE DRAWER */
.mobile-drawer {
    position: fixed;
    top: 0;
    right: -320px;
    width: 300px;
    height: 100vh;
    background: #ffffff;
    z-index: 3001;
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-drawer.drawer-open {
    transform: translateX(-320px);
}

.drawer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    z-index: 3000;
}

.drawer-header {
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f1f5f9;
}

.drawer-logo {
    height: 30px;
}

.close-drawer-btn {
    background: #f1f5f9;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px 0;
}

.mobile-vertical-menu.e-menu-wrapper {
    background: transparent;
    border: none;
    width: 100%;
}



.drawer-footer {
    padding: 20px 24px;
    border-top: 1px solid #f1f5f9;
}

.mobile-logout-btn {
    width: 100%;
    height: 50px;
    background: #fff1f2;
    border: 1px solid #ffe4e6;
    border-radius: 12px;
    color: #e11d48;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
}

/* DASHBOARD & RESPONSIVE FIXES */
.main-content {
    flex: 1;
    overflow-y: auto;
    background: #f8fafc;
}

.dashboard-container {
    padding: 40px 24px;
    width: 100%;
}

@media (max-width: 991px) {
    .main-layout {
        overflow-y: auto !important;
    }

    .stats-grid {
        grid-template-columns: 1fr !important;
    }

    .quick-actions-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .dashboard-welcome {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px !important;
        gap: 20px;
    }
}

@media (max-width: 576px) {
    .quick-actions-grid {
        grid-template-columns: 1fr !important;
    }
}

.d-none {
    display: none !important;
}

@media (min-width: 768px) {
    .d-md-flex {
        display: flex !important;
    }

    .d-md-none {
        display: none !important;
    }
}

.e-caret {
    margin-left: auto !important;
}

/* Timeline Components */
.timeline-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px 0;
}

.timeline-item {
    display: flex;
    gap: 16px;
    position: relative;
}

.timeline-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #eef2ff;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 2;
    border: 2px solid white;
    box-shadow: 0 0 0 2px #e2e8f0;
}

.timeline-line {
    position: absolute;
    top: 40px;
    left: 20px;
    bottom: -20px;
    width: 2px;
    background: #e2e8f0;
    z-index: 1;
}

.timeline-content {
    flex: 1;
    padding-top: 4px;
}

.timeline-title {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.timeline-time {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 2px;
}

/* --- RESPONSIVE DESIGN SYSTEM --- */

/* 1366x778 Resolution Optimization */
@media (max-width: 1400px) and (min-width: 1200px) {
    .form-card {
        max-width: 100% !important;
        margin: 1px auto !important;
        height: calc(100vh - 170px) !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    .form-body {
        padding: 4px 8px !important;
        max-height: 80vh !important;
        min-width: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .form-header {
        padding: 4px 12px !important;
    }

    .form-header h3 {
        font-size: 16px !important;
        margin: 0 !important;
    }

    /* Optimize Bootstrap grid columns for 1366x778 (Removed global overrides to prevent layout corruption) */

    .col-md-7 {
        flex: 0 0 70% !important;
        max-width: 70% !important;
    }

    /* Form field width adjustments */
    .legacy-form .row {
        margin-bottom: 2px !important;
    }

    .legacy-form input,
    .legacy-form .e-input-group,
    .legacy-form .e-control-wrapper {
        font-size: 11px !important;
    }

    /* Compact opening balance section */
    .legacy-fieldset {
        padding: 4px !important;
        max-width: 320px !important;
        margin-top: 4px !important;
    }

    .legacy-fieldset .row {
        margin-bottom: 1px !important;
    }

    .legacy-fieldset .mb-2 {
        margin-bottom: 3px !important;
    }

    /* Ensure all form elements are visible except Syncfusion grids which need scroll */
    .form-body *:not(.e-grid):not(.e-grid *) {
        overflow: visible !important;
    }

    /* Specific fixes for Contact form at 1366x778 */
    .legacy-form .parcel-input-group {
        max-width: 140px !important;
    }

    .legacy-form .input-with-lookup {
        position: relative;
    }

    .legacy-form .lookup-btn {
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 3px;
        padding: 2px 6px;
        cursor: pointer;
        font-size: 10px !important;
    }

    .legacy-form .remarks-height-fix {
        min-height: 40px !important;
        height: 40px !important;
    }

    /* Compact footer for 1366x778 */
    .form-footer {
        padding: 4px 8px !important;
        gap: 4px !important;
        position: sticky !important;
        bottom: 0 !important;
        background: #f8fafc !important;
        margin-top: auto !important;
    }

    .legacy-row {
        flex-wrap: wrap !important;
        gap: 4px !important;
        margin-bottom: 2px !important;
    }

    /* Ensure checkboxes and pricing options fit */
    .pricing-options-wrapper {
        max-width: 100% !important;
        padding: 4px !important;
    }

    /* Modal adjustments for 1366x778 */
    .modal-dialog-large {
        max-width: 90% !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
    }

    .modal-dialog-medium {
        max-width: 600px !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
    }

    /* Item form specific optimizations */
    .legacy-form .col-md-1 {
        flex: 0 0 18% !important;
        max-width: 18% !important;
        padding-left: 1px !important;
        padding-right: 1px !important;
    }

    .legacy-form .col-md-2 {
        flex: 0 0 34% !important;
        max-width: 34% !important;
        padding-left: 1px !important;
        padding-right: 1px !important;
    }

    .legacy-form .col-md-3 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding-left: 1px !important;
        padding-right: 1px !important;
    }

    .legacy-form .col-md-4 {
        flex: 0 0 68% !important;
        max-width: 68% !important;
        padding-left: 1px !important;
        padding-right: 1px !important;
    }

    .legacy-form .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 1px !important;
        padding-right: 1px !important;
    }

    /* Item form row spacing - ultra compact */
    .legacy-form .row {
        margin-bottom: 1px !important;
    }

    /* Item form specific field spacing */
    .legacy-form .row>div {
        padding-left: 1px !important;
        padding-right: 1px !important;
    }

    /* Ensure proper spacing in dense forms */
    .legacy-form .row {
        margin-left: 0px !important;
        margin-right: 0px !important;
    }

    .legacy-form .row>div {
        padding-left: 2px !important;
        padding-right: 2px !important;
    }

    /* Reduce font sizes for compact display */
    .legacy-legend {
        font-size: 10px !important;
        margin-bottom: 2px !important;
        font-weight: 600 !important;
    }

    .legacy-checkbox .e-checkbox-wrapper .e-label {
        font-size: 10px !important;
    }

    /* Make opening balance section more compact */
    .legacy-fieldset .col-md-7 {
        max-width: 160px !important;
    }

    .legacy-fieldset .col-md-5 {
        max-width: 100px !important;
    }

    .legacy-fieldset .col-md-6 {
        max-width: 140px !important;
    }

    .legacy-fieldset .col-md-12 {
        max-width: 280px !important;
    }

    /* Reduce button sizes */
    .form-footer .e-btn {
        padding: 4px 12px !important;
        font-size: 11px !important;
        min-height: 28px !important;
    }


    /* Make numeric input controls more compact for 1366x778 */
    .e-numeric.e-input-group,
    .e-numeric.e-control-wrapper,
    .e-numeric.e-input-group.e-control-wrapper {
        min-height: 26px !important;
    }

    /* Table numeric fields - more compact */
    .table-input.e-numeric,
    .table-input.e-numeric.e-input-group,
    .table-input.e-numeric.e-control-wrapper {
        min-height: 22px !important;
        max-width: 80px !important;
    }

    .table-input.e-numeric .e-input-group {
        height: 20px !important;
    }

    .table-input.e-numeric .e-input-group input.e-input {
        height: 18px !important;
        font-size: 9px !important;
        padding: 1px 3px !important;
    }

    .table-input.e-numeric .e-spin-up,
    .table-input.e-numeric .e-spin-down {
        height: 10px !important;
        width: 14px !important;
        font-size: 7px !important;
    }

    .e-numeric .e-input-group {
        height: 24px !important;
    }

    .e-numeric .e-input-group input.e-input {
        height: 22px !important;
        font-size: 10px !important;
        padding: 2px 4px !important;
    }

    .e-numeric .e-spin-up,
    .e-numeric .e-spin-down {
        height: 12px !important;
        width: 16px !important;
        font-size: 8px !important;
    }

    /* Compact parcel input group */
    .parcel-input-group {
        max-width: 120px !important;
        gap: 1px !important;
    }

    .parcel-input-group .e-numeric {
        max-width: 90px !important;
    }

    .parcel-input-group .legacy-unit {
        font-size: 9px !important;
        padding: 2px 4px !important;
    }

    /* Make date picker compact */
    .e-datepicker.e-input-group,
    .e-datepicker.e-control-wrapper {
        min-height: 26px !important;
    }

    .e-datepicker .e-input-group {
        height: 24px !important;
    }

    .e-datepicker .e-input-group input.e-input {
        height: 22px !important;
        font-size: 10px !important;
        padding: 2px 4px !important;
    }

    /* Compact combo boxes for numeric data */
    .e-dropdownlist.e-input-group,
    .e-combobox.e-input-group,
    .e-dropdownlist.e-control-wrapper,
    .e-combobox.e-control-wrapper {
        min-height: 26px !important;
    }

    .e-dropdownlist .e-input-group,
    .e-combobox .e-input-group {
        height: 24px !important;
    }

    .e-dropdownlist .e-input-group input.e-input,
    .e-combobox .e-input-group input.e-input {
        height: 22px !important;
        font-size: 10px !important;
        padding: 2px 4px !important;
    }

    /* Make page container fit screen */
    .page-container {
        height: 100vh !important;
        overflow: hidden !important;
    }

    .page-content {
        height: calc(100vh - 60px) !important;
        overflow: hidden !important;
    }

    /* Prevent any horizontal overflow */
    body,
    html {
        overflow-x: hidden !important;
    }
}

/* Tablet & Smaller Screens (< 992px) */
@media (max-width: 991.98px) {
    .page-header-wrapper {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        padding: 5px 0 !important;
    }

    .header-action-buttons {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    .header-action-buttons button.e-primary.e-btn {
        width: 100% !important;
        padding: 8px 16px !important;
    }

    .form-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .form-grid.grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .form-group.full-width,
    .form-grid.grid-4 .form-group.span-2,
    .form-grid.grid-4 .form-group.span-3,
    .form-grid.grid-4 .form-group.span-4,
    .form-grid.grid-4 .section-title.span-4 {
        grid-column: span 2 !important;
    }

    .page-content-wrapper {
        padding: 8px 12px 0 12px !important;
    }

    .form-header,
    .form-body,
    .form-footer {
        padding: 10px 15px !important;
    }

    body .e-menu-popup.e-popup {
        left: 15px !important;
        right: 15px !important;
        width: auto !important;
    }
}

/* Mobile Screens (< 768px) */
@media (max-width: 767.98px) {

    .form-grid,
    .form-grid.grid-4 {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .form-group.full-width,
    .form-grid.grid-4 .form-group.span-2,
    .form-grid.grid-4 .form-group.span-3,
    .form-grid.grid-4 .form-group.span-4,
    .form-grid.grid-4 .section-title.span-4 {
        grid-column: span 1 !important;
    }

    /* Prevents the entire page from scrolling horizontally on mobile */
    .page-content-wrapper,
    .main-content-area,
    .container-fluid,
    .layout-wrapper {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    .form-footer {
        flex-direction: row !important;
        justify-content: flex-start !important;
        gap: 8px !important;
    }

    .form-footer .e-btn {
        width: auto !important;
        flex: none !important;
        min-width: unset !important;
        justify-content: center !important;
    }

    /* --- GRID RESPONSIVE SYSTEM --- */
    /* Ensure all columns are displayed, not hidden */
    .e-grid .e-headercell.hide-on-mobile,
    .e-grid .e-rowcell.hide-on-mobile,
    .hide-on-mobile {
        display: table-cell !important;
    }

    /* Grid search and top bar adjustments */
    .grid-top-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .grid-search-input.e-input-group {
        width: 100% !important;
    }

    .status-badge {
        padding: 4px 8px !important;
        font-size: 11px !important;
    }

    .page-title-inline h2 {
        font-size: 18px !important;
    }

    .standard-grid-card {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        border-radius: 8px !important;
        position: relative;
        display: flex !important;
        flex-direction: column !important;
    }

    .list-grid-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        width: 100% !important;
    }

    .e-grid {
        min-width: 850px !important;
        /* Enough width to ensure scrolling */
        border: none !important;
    }

    /* CRITICAL: Allow sticky to work by making internal containers visible */
    .e-grid .e-gridheader,
    .e-grid .e-content {
        overflow: visible !important;
    }

    .e-grid .e-headercontent {
        overflow: hidden !important;
    }

    /* Sticky Action Column (Last Column) */
    .e-grid .e-headercell:last-child,
    .e-grid .e-rowcell:last-child {
        position: sticky !important;
        right: 0 !important;
        background-color: white !important;
        z-index: 20 !important;
        /* Keep above other cells */
        box-shadow: -4px 0 10px rgba(0, 0, 0, 0.1) !important;
        border-left: 1px solid #f1f5f9 !important;
    }

    .e-grid .e-headercell:last-child {
        background-color: #f8fafc !important;
        z-index: 21 !important;
        /* Header above row cells */
    }

    /* Adjust cell padding for mobile density */
    .e-grid .e-rowcell,
    .e-grid .e-headercell {
        padding-left: 8px !important;
        padding-right: 8px !important;
        height: auto !important;
        min-height: 40px !important;
    }

    /* Prevent the page from bouncing/scrolling horizontally when dragging the grid */
    .standard-grid-card {
        touch-action: pan-x pan-y !important;
    }
}

/* Fix for Syncfusion Popups on Mobile */
@media (max-width: 576px) {

    .e-popup.e-control.e-dropdownlist,
    .e-popup.e-control.e-combobox {
        max-width: 90vw !important;
    }

    .e-filter-popup.e-popup,
    .e-excel-filter.e-popup {
        width: 95vw !important;
        left: 2.5vw !important;
    }
}

/* Sale Voucher & Complex Transaction Form Responsiveness */
@media (max-width: 1200px) {
    .entry-row-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 15px !important;
    }

    .entry-item.barcode-input,
    .entry-item.item-select {
        grid-column: span 2 !important;
    }

    .entry-item.per-select,
    .entry-item.action-item {
        grid-column: span 1 !important;
    }
}

@media (max-width: 991.98px) {
    .form-row-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }

    .full-span-master {
        grid-column: span 2 !important;
    }

    .entry-row-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .entry-item.barcode-input,
    .entry-item.item-select,
    .entry-item.amount-item {
        grid-column: span 2 !important;
    }

    .voucher-summary-section {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .summary-details {
        padding-left: 0 !important;
        border-left: none !important;
        border-top: 1px dashed #d1d5db !important;
        padding-top: 15px !important;
    }
}

@media (max-width: 767.98px) {

    .form-row-grid,
    .entry-row-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .full-span-master,
    .lg-span,
    .entry-item.barcode-input,
    .entry-item.item-select,
    .entry-item.amount-item {
        grid-column: span 1 !important;
    }

    .payment-mode-group {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .payment-mode-group .account-select {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .entry-item:not(.action-item) {
        margin-bottom: 5px;
    }

    .entry-item.action-item {
        margin-top: 10px;
    }

    .grand-total {
        font-size: 14px !important;
    }

    .grand-total .summary-value {
        font-size: 18px !important;
    }

    .e-grid .e-headercell,
    .e-grid .e-rowcell {
        padding: 0 5px !important;
    }
}

/* Utility Pages (Merge Accounts/Items) Responsiveness */
@media (max-width: 767.98px) {
    .merge-arrow-divider-horizontal {
        position: relative !important;
        left: 50% !important;
        top: 0 !important;
        margin: 20px 0 !important;
        transform: translate(-50%, 0) !important;
    }

    .merge-arrow-divider-horizontal i {
        transform: rotate(90deg) !important;
    }

    .col-md-6.border-end {
        border-right: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
        padding-bottom: 20px !important;
    }
}

/* =============================================
   Uniform Input - All Syncfusion Controls (from InfoHR)
   ============================================= */

/* Inner input element padding/font fix */
.e-outline .e-input,
.e-outline.e-input-group .e-input,
.e-outline.e-input-group.e-control-wrapper .e-input {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    line-height: normal !important;
    font-size: 13px !important;
    vertical-align: middle !important;
}

/* DropDown arrow icon - vertically centered */
.e-outline.e-ddl .e-input-group-icon,
.e-outline.e-ddl .e-ddl-icon {
    width: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* NumericTextBox spin buttons - center */
.e-outline .e-spin-up,
.e-outline .e-spin-down {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Grid Inputs */
.grid-input.e-input-group,
.grid-input.e-numeric-wrapper {
    height: 24px !important;
    border: 1px solid transparent;
    background: transparent;
}

.grid-input.e-input-group.e-input-focus,
.grid-input.e-numeric-wrapper.e-input-focus {
    border-color: #3b82f6;
    background: #ffffff;
    box-shadow: 0 0 0 1px #3b82f6;
}

.grid-input:hover {
    background-color: #f3f4f6;
}

.grid-input input {
    font-size: 12px !important;
    text-align: right;
    padding-right: 4px !important;
}

.grid-input.e-dropdownlist,
.grid-input.e-combobox {
    text-align: left;
}

.page-header-wrapper {
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-title-area h2 {
    font-size: 16px;
    margin: 0;
}

/* Dropdown Popup Box - Border & Shadow Fix */
.e-ddl.e-popup,
.e-dropdownbase.e-popup,
.e-small.e-ddl .e-popup.e-ddl {
    max-height: 500px !important;
    height: auto !important;
    width: auto !important;
    border: 1px solid #c4c4c4 !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
    background: var(--bg-primary);
    overflow-y: auto !important;
    z-index: 1000;
    transition: all 0.2s ease;
}

/* Content inside popup - Generalize for all dropdowns */
.e-ddl.e-popup .e-content,
.e-dropdownbase.e-popup .e-content,
.e-small.e-ddl.e-popup.e-ddl .e-content {
    height: unset !important;
    max-height: 200px !important;
    overflow-y: auto !important;
}

/* Each option styling */
.e-small.e-ddl .e-popup.e-ddl .e-list-item {
    align-items: center;
}

.e-float-text e-label-bottom {
    left: -5px !important;
    top: -2px !important;
}

.e-outline.e-input-group.e-control-wrapper .e-input-group-icon {
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 4px !important;
}

/* --- PREMIUM UI STACK (Standard for Transactions & Forms) --- */
.premium-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--slate-200);
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 0.75rem;
    width: 100%;
}

.premium-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.card-body-premium {
    padding: 12px 16px;
}

/* Internal Component Tables (History, Details) */
.history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    table-layout: fixed;
}

.history-table th {
    padding: 6px 8px;
    font-weight: 700;
    color: var(--slate-600);
    background: var(--slate-50);
    border: 1px solid var(--slate-200);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    position: sticky;
    top: 0;
}

.history-table td {
    padding: 4px 8px;
    color: var(--slate-700);
    border: 1px solid var(--slate-200);
}

.history-table tbody tr:hover {
    background: var(--slate-100);
}

/* Scrollable Wrapper for Component Grids */
.table-scroll-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--slate-200);
    position: relative;
    -webkit-overflow-scrolling: touch;
}

/* Footer & Global Actions */
.footer-actions-row,
.form-footer {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 12px !important;
    background: #ffffff !important;
    border-top: 1px solid var(--slate-200) !important;
    padding: 12px 20px !important;
    z-index: 1000 !important;
    border-radius: 0 !important;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05) !important;
    /* Fixed at the bottom by default to prevent vertical blinking/layout shift */
    position: fixed !important;
    bottom: 0 !important;
    left: 250px !important;
    width: calc(100% - 250px) !important;
    right: 0 !important;
}

.footer-actions-right,
.footer-actions-left {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 12px !important;
}

.vertical-layout .footer-actions-row,
.vertical-layout .form-footer {
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.vertical-layout .sidebar.collapsed~main .footer-actions-row,
.vertical-layout .sidebar.collapsed~main .form-footer {
    left: 64px !important;
    width: calc(100% - 64px) !important;
}

.horizontal-layout .footer-actions-row,
.horizontal-layout .form-footer {
    left: 0 !important;
    width: 100% !important;
}

@media (max-width: 768px) {

    .footer-actions-row,
    .form-footer {
        left: 0 !important;
        width: 100% !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 8px 16px !important;
    }

    .footer-actions-left,
    .footer-actions-right {
        flex-direction: row !important;
        justify-content: flex-start !important;
        width: auto !important;
        gap: 8px !important;
    }

    .footer-actions-left .e-btn,
    .footer-actions-right .e-btn,
    .form-footer .e-btn {
        flex: none !important;
        width: auto !important;
        min-width: unset !important;
        padding: 4px 12px !important;
        font-size: 12px !important;
        height: 32px !important;
    }
}

/* Stat Banners (Gold/Fine Values) */
.premium-summary-banner {
    background: linear-gradient(135deg, var(--slate-50) 0%, var(--slate-100) 100%);
    border: 1px solid var(--slate-200);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    gap: 2rem;
}

.stat-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--slate-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.stat-value {
    font-size: 20px;
    font-weight: 800;
    color: var(--slate-700);
    line-height: 1;
}


/* ============================
   SHARED REPORT STYLES
   ============================ */

/* Layout */
.report-page-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 110px);
    width: 100%;
    max-width: 100%;
    background: #f8fafc;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

.report-header-sticky {
    flex-shrink: 0;
    z-index: 10;
    background: white;
    overflow-x: hidden;
    max-width: 100%;
}

.report-icon-box {
    width: 42px;
    height: 42px;
    background: rgba(71, 85, 105, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.report-content {
    flex-grow: 1;
    position: relative;
    background: #f1f5f9;
    overflow: hidden;
    max-width: 100%;
}

/* Filters */
.report-filter-container {
    padding: 8px 16px !important;
    background: #fcfdfe !important;
    overflow-x: hidden;
    max-width: 100%;
    box-sizing: border-box;
}

.report-filter-label,
.filter-label-casting,
.filter-label-mcb {
    font-size: 13px;
    font-weight: 500;
    color: #475569;
    margin-bottom: 0;
    white-space: nowrap;
}

.filter-label-mcb {
    font-weight: 600;
    min-width: 80px;
}

.filter-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 120px;
}

.filter-item .e-small.e-outline {
    width: 100% !important;
}

.filter-input-wrapper {
    width: 50%;
    min-width: 150px;
}

.filter-container-casting,
.filter-container-mcb {
    padding: 8px 24px !important;
}

.filter-container-mcb {
    padding: 12px 24px !important;
}

.btn-filter {
    min-width: 90px;
}

/* Buttons */
.ghost-button {
    color: #495057 !important;
    background: #fff !important;
}

.action-btn {
    width: 100px !important;
    font-size: 11px !important;
}

/* Grid */
.grid-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
}

.grid-custom-footer {
    flex-shrink: 0;
    font-size: 13px;
    z-index: 5;
}

.report-grid.e-grid,
.casting-report-grid.e-grid,
.mcb-report-grid.e-grid {
    border-left: 1px solid #e2e8f0 !important;
    border-right: 1px solid #e2e8f0 !important;
    height: 100% !important;
}

.casting-report-grid.e-grid,
.mcb-report-grid.e-grid {
    border: none !important;
    height: 100% !important;
    flex-grow: 1;
}

.report-grid .e-headercell,
.casting-report-grid .e-headercell,
.mcb-report-grid .e-headercell {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    border-bottom: 2px solid #e2e8f0 !important;
}

.casting-report-grid .e-headercell,
.mcb-report-grid .e-headercell {
    background-color: #fff !important;
    border-bottom: 2px solid #f1f5f9 !important;
}

.report-grid .e-rowcell,
.casting-report-grid .e-rowcell,
.mcb-report-grid .e-rowcell {
    font-size: 13px !important;
    color: #334155 !important;
    padding: 0 8px !important;
}

.report-grid .e-gridheader,
.casting-report-grid .e-gridheader,
.mcb-report-grid .e-gridheader {
    border-bottom: 1px solid #e2e8f0 !important;
}

.report-grid .e-pager,
.casting-report-grid .e-pager,
.mcb-report-grid .e-pager {
    border-top: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    padding: 6px 12px !important;
}

/* iframe Reports */
.report-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: white;
}

/* Empty State */
.empty-state-icon {
    background: white;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.empty-report-state {
    min-height: 300px;
}

.animate-fade-in {
    animation: reportFadeIn 0.5s ease-in-out;
}

@keyframes reportFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Checkboxes */
.small-checkbox {
    font-weight: 600 !important;
}

.no-clear-btn .e-clear-icon {
    display: none !important;
}

/* Scrollbar (checklist / category boxes) */
.items-checklist-box::-webkit-scrollbar,
.category-box::-webkit-scrollbar {
    width: 4px;
}

.items-checklist-box::-webkit-scrollbar-thumb,
.category-box::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

/* Syncfusion Overrides (scoped to reports) */
.report-page-container .e-small.e-outline {
    background: white !important;
    border-radius: 4px !important;
    height: 30px !important;
}

/* Specific fix for textboxes and numeric inputs in report headers */
.report-page-container .e-input-group.e-small,
.report-page-container .e-input-group.e-small .e-input,
.report-page-container .e-ddl.e-small .e-input-group {
    height: 30px !important;
}

.report-page-container .e-checkbox-wrapper .e-label {
    font-size: 12px !important;
    color: #334155 !important;
}

/* Account Summary checkboxes */
.account-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.type-checkbox {
    font-size: 11px !important;
}

/* Standardized Report Headers */
.report-page-container h5,
.report-page-container h6,
.report-header-sticky h6,
.report-header-sticky h5 {
    color: var(--primary-blue) !important;
}

.report-header-sticky i[class*="bi-"],
.report-header-sticky i[class*="fa-"] {
    color: var(--primary-blue) !important;
}

/* ============================
   REPORT RESPONSIVENESS
   ============================ */
@media (max-width: 1366px) {
    .page-content-wrapper {
        padding: 0 12px 0 12px !important;
    }

    .report-page-container {
        height: calc(100vh - 105px);
    }

    .report-filter-container {
        padding: 6px 16px !important;
    }

    .report-filter-container .d-flex.flex-wrap {
        gap: 8px 12px !important;
    }

    .report-page-container h6 {
        font-size: 14px !important;
    }
}

@media (max-width: 1199.98px) {
    .report-page-container {
        height: calc(100vh - 100px);
    }

    .report-filter-container .filter-item {
        min-width: 100px;
    }
}

@media (max-width: 991.98px) {
    .report-page-container {
        height: calc(100vh - 90px);
    }
}

@media (max-width: 767.98px) {
    .report-page-container {
        height: calc(100vh - 90px);
    }

    .report-header-sticky .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: 8px;
    }

    .report-filter-container {
        padding: 8px 12px !important;
    }

    .report-filter-container .d-flex.flex-wrap,
    .report-filter-container .d-flex.gap-3,
    .report-filter-container .row {
        flex-direction: column;
        gap: 6px !important;
    }

    .report-filter-container .filter-item,
    .report-filter-container .col-md-1,
    .report-filter-container .col-md-auto {
        width: 100% !important;
        min-width: unset;
    }

    .report-filter-container .filter-item [style*="width"] {
        width: 100% !important;
    }

    .report-page-container .d-flex.gap-2 .e-btn {
        padding: 4px 8px;
        font-size: 11px;
    }

    .report-icon-box {
        width: 32px;
        height: 32px;
    }

    .report-page-container h5,
    .report-page-container h6 {
        font-size: 13px !important;
    }

    .empty-report-state {
        min-height: 200px;
    }

    .empty-report-state .display-1 {
        font-size: 3rem !important;
    }

    .empty-report-state .fs-5 {
        font-size: 0.95rem !important;
    }

    .grid-custom-footer {
        font-size: 12px;
    }
}

.report-icon-box {
    display: none !important;
}

/* --- Special Rate Grid Editable Fields --- */
.grid-textbox.e-numeric,
.grid-textbox.e-control-wrapper.e-numeric {
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
}

.grid-textbox.e-numeric:focus-within,
.grid-textbox.e-control-wrapper.e-numeric:focus-within {
    border-color: #3b82f6 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1) !important;
}

.grid-textbox.e-numeric .e-input,
.grid-textbox.e-control-wrapper.e-numeric .e-input {
    text-align: right !important;
    font-size: 13px !important;
    padding: 0 8px !important;
    height: 26px !important;
}

.grid-dropdown.e-combobox,
.grid-dropdown.e-control-wrapper.e-combobox {
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    border-radius: 4px !important;
}

.grid-dropdown.e-combobox .e-input,
.grid-dropdown.e-control-wrapper.e-combobox .e-input {
    font-size: 13px !important;
    height: 26px !important;
    padding-left: 8px !important;
}

/* --- CONSOLIDATED MOBILE RESPONSIVE FIXES --- */
@media (max-width: 768px) {

    /* 1. Global Scrolling and Layout */
    html,
    body,
    .layout-wrapper,
    .main-content-area,
    .page-content-wrapper {
        height: auto !important;
        min-height: 100vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .page-content-wrapper {
        padding: 8px 12px 0 12px !important;
    }

    /* 2. Grid and Card Behavior */
    .standard-grid-card,
    .premium-card.grid-card,
    .unified-form-container {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        display: block !important;
    }

    /* Internal Grid Scrolling with Sticky Header/Pager */
    .e-grid {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        max-height: 70vh !important;
        min-height: 350px !important;
        overflow: hidden !important;
        margin-bottom: 20px !important;
    }

    .e-grid .e-content {
        overflow: auto !important;
        flex: 1 !important;
        -webkit-overflow-scrolling: touch;
    }

    .e-grid .e-table {
        min-width: 800px !important;
    }

    .e-grid .e-gridheader,
    .e-grid .e-pager {
        position: sticky !important;
        z-index: 5 !important;
        flex-shrink: 0 !important;
        background: #fff !important;
    }

    .e-grid .e-gridheader {
        top: 0;
    }

    .e-grid .e-pager {
        bottom: 0;
    }

    /* 3. Form and Footer Layout Stacking */
    .footer-layout,
    .footer-right-side,
    .footer-right-side>div,
    .footer-right-side .d-flex {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        display: flex !important;
        gap: 15px !important;
        flex-wrap: wrap !important;
    }

    .opening-balance-card,
    .calculation-group,
    .remarks-group {
        width: 100% !important;
        max-width: none !important;
        margin: 5px 0 !important;
        flex: 1 1 auto !important;
    }

    /* 4. Calculation Grid (Full Width Fields) */
    .voucher-calc-grid,
    .calculation-group.voucher-calc-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 12px !important;
    }

    .voucher-calc-grid>*,
    .voucher-calc-grid .e-control-wrapper,
    .voucher-calc-grid .e-numerictextbox {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        margin-bottom: 5px !important;
    }

    /* Hide separator lines to save space */
    .voucher-calc-grid div[style*="height: 1px"] {
        display: none !important;
    }
}

/* Global Mobile Form Fixes */
@media (max-width: 768px) {

    .form-body .col-md-1,
    .form-body .col-md-2,
    .form-body .col-md-3,
    .form-body .col-md-4,
    .form-body .col-md-5,
    .form-body .col-md-6,
    .form-body .col-md-7,
    .form-body .col-md-8,
    .form-body .col-md-9,
    .form-body .col-md-10,
    .form-body .col-md-11,
    .form-body .col-md-12,
    .legacy-form .col-md-1,
    .legacy-form .col-md-2,
    .legacy-form .col-md-3,
    .legacy-form .col-md-4,
    .legacy-form .col-md-5,
    .legacy-form .col-md-6,
    .legacy-form .col-md-7,
    .legacy-form .col-md-8,
    .legacy-form .col-md-9,
    .legacy-form .col-md-10,
    .legacy-form .col-md-11,
    .legacy-form .col-md-12,
    .legacy-item-master .col-md-1,
    .legacy-item-master .col-md-2,
    .legacy-item-master .col-md-3,
    .legacy-item-master .col-md-4,
    .legacy-item-master .col-md-5,
    .legacy-item-master .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 10px !important;
    }

    .legacy-item-master .stock-limit-box {
        width: 100% !important;
    }

    .parcel-input-group {
        max-width: 100% !important;
    }

    .legacy-form .parcel-input-group {
        max-width: 100% !important;
    }

    .d-flex.gap-3 {
        flex-direction: column !important;
    }

    .legacy-fieldset {
        max-width: 100% !important;
    }
}



/* NATIVE SCROLLING FIX FOR SYNCFUSION GRID ON MOBILE */
@media (max-width: 768px) {

    /* 1. Make the outer wrapper the sole scroll container */
    .e-grid:not(.auto-shrink-grid) {
        overflow: auto !important;
        max-height: 70vh !important;
        display: block !important;
        /* Override flex */
    }

    /* 2. Disable internal scroll containers so everything expands */
    .e-grid:not(.auto-shrink-grid) .e-gridheader,
    .e-grid:not(.auto-shrink-grid) .e-headercontent,
    .e-grid:not(.auto-shrink-grid) .e-gridcontent,
    .e-grid:not(.auto-shrink-grid) .e-content {
        overflow: visible !important;
        width: max-content !important;
        min-width: 100% !important;
    }

    /* 3. Ensure the tables can expand naturally */
    .e-grid:not(.auto-shrink-grid) .e-table {
        width: max-content !important;
        min-width: 100% !important;
    }

    /* 4. Keep headers sticky to the top of the outer wrapper */
    .e-grid .e-gridheader {
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
        background: #fff !important;
    }

    /* 5. Removed sticky last column as per user request */
    .e-grid .e-headercell:last-child,
    .e-grid .e-rowcell:last-child {
        position: static !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }
}

/* STICKY ACTIONS FIX */
@media (max-width: 768px) {
    .e-grid .action-sticky-col {
        position: static !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }

    .e-grid th.action-sticky-col {
        z-index: auto !important;
    }

    /* We don't need the old last-child rule anymore */
    .e-grid .e-headercell:last-child,
    .e-grid .e-rowcell:last-child {
        box-shadow: none !important;
    }
}


/* --- Contact and Contact Group Styles moved from Razor files --- */
.breadcrumb-wrapper {
    padding: 2px 0;
    margin-bottom: 4px;
    font-size: 11px;
}

/* Status badge clickable */
.status-clickable {
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.1s ease;
    user-select: none;
}

.status-clickable:hover {
    opacity: 0.82;
    transform: scale(1.05);
}

/* Fix Excel filter dialog OK/Cancel buttons always visible */
.e-excelfilter .e-footer-content,
.e-filtermenudiv .e-footer-content {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    padding: 8px !important;
    min-height: 44px !important;
    position: sticky !important;
    bottom: 0 !important;
    background: #fff !important;
    border-top: 1px solid #e0e0e0 !important;
    z-index: 10 !important;
}

.e-excelfilter .e-checkboxlist-wrapper,
.e-excelfilter .e-ul {
    max-height: 200px !important;
    overflow-y: auto !important;
}

.e-excelfilter {
    overflow: visible !important;
}

.e-excelfilter .e-dlg-content {
    overflow: visible !important;
    padding-bottom: 0 !important;
}

.form-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 170px);
    /* Enable scroll inside contact */
    overflow: visible !important;
    padding: 0 !important;
}

.form-header {
    padding: 12px 20px;
    background: #fcfdfe;
    border-bottom: 1px solid #eef2f7;
    position: sticky;
    top: 0;
    z-index: 10;
}

.form-footer {
    margin-top: auto;
}

.form-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-color);
}

.form-subtitle {
    margin: 2px 0 0 0;
    font-size: 11px;
    color: #64748b;
}

.form-body {
    padding: 12px 20px;
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.form-section {
    margin-bottom: 15px;
}

.section-title {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #f1f5f9;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.legacy-form {
    padding: 10px 20px;
}

.legacy-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 6px;
    align-items: center;
}

.legacy-field {
    display: flex;
    align-items: center;
    gap: 6px;
}

.legacy-label {
    font-size: 13px;
    font-weight: 500;
    color: #1e293b;
    min-width: 80px;
    white-space: nowrap;
}

.legacy-input {
    border-radius: 4px !important;
    min-height: 28px !important;
    height: 28px !important;
    font-size: 13px !important;
    border: 1px solid #cbd5e1 !important;
    padding: 0 6px !important;
}

.legacy-field .e-control-wrapper.legacy-input {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 !important;
}

.legacy-textarea {
    border-radius: 4px !important;
    font-size: 13px !important;
    border: 1px solid #ccc !important;
    min-height: 60px !important;
    width: 100%;
}

.input-with-lookup {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 4px;
}

.border-red {
    border: 1px solid #f87171 !important;
}

.is-invalid {
    border-color: #ef4444 !important;
}

.invalid-feedback {
    font-size: 11px;
    color: #ef4444;
    margin-top: 2px;
}

.lookup-btn {
    background: #f1f5f9;
    border: 1px solid #ccc;
    height: 30px;
    width: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
    color: #475569;
}

.lookup-btn:hover {
    background: #e2e8f0;
}

.legacy-plus-btn {
    background: #4f46e5;
    border: none;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    margin: 0 2px;
}

.legacy-plus-btn:hover {
    background: #4338ca;
}

.legacy-plus-btn i {
    font-size: 10px;
}

.silver-icon {
    color: #94a3b8;
    font-size: 14px;
}

.legacy-unit {
    font-size: 12px;
    color: #64748b;
    margin-left: 4px;
}

.parcel-input-group {
    display: flex;
    align-items: center;
    gap: 5px;
}

.legacy-fieldset {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 15px;
    margin-top: 20px;
    position: relative;
}

.legacy-legend-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: -12px;
    left: 10px;
    right: 15px;
    background: transparent;
    pointer-events: none;
}

.legacy-legend {
    background: white;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    pointer-events: auto;
}

.erp-form-legend {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--primary-color) !important;
    letter-spacing: 0.5px;
    padding: 0 4px;
}

.legacy-fieldset .legacy-checkbox {
    pointer-events: auto;
    background: white;
    padding: 0 10px;
}

.legacy-btn-catalog {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    /* Added */
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3) !important;
    /* Added */
    border-radius: 8px !important;
    /* Updated from 4px */
    color: white !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    height: 28px !important;
    padding: 0 15px !important;
}

.legacy-input-small {
    width: 150px !important;
    height: 30px !important;
}

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

.justify-content-end {
    justify-content: flex-end;
}

.mt-2 {
    margin-top: 8px;
}

.mt-3 {
    margin-top: 15px;
}

.mb-4 {
    margin-bottom: 30px;
}

.gap-4 {
    gap: 30px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.control-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}

.premium-input {
    height: 32px !important;
    font-size: 13px !important;
}

.tab-content-wrapper {
    padding: 12px 0;
}

.compact-tab {
    padding: 8px 0 !important;
}

.required::after {
    content: " *";
    color: #ef4444;
}

.section-subtitle {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e2e8f0;
}

.input-with-dropdown {
    display: flex;
    gap: 6px;
    align-items: center;
}

.input-with-dropdown .premium-input {
    flex: 1;
}

.input-with-dropdown .premium-input-small {
    width: 80px;
    flex-shrink: 0;
}

.pricing-options-wrapper {
    padding: 8px 12px;
    background: #f8fafc;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.btn-special-rate-small {
    padding: 4px 12px !important;
    font-size: 11px !important;
    height: 28px !important;
}

.small-radio {
    --radio-size: 14px;
}

.btn-special-rate {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    border: none;
    padding: 6px 16px;
    border-radius: 4px;
    color: white;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 12px;
}

.btn-special-rate:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.2s ease;
}

.modal-dialog-large {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 1000px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
}

.modal-dialog-medium {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
}

.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.premium-modal-header {
    background: var(--primary-color) !important;
    padding: 12px 20px !important;
}

.premium-modal-header h3 {
    margin: 0;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: white !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.premium-modal-header .modal-close-btn {
    color: rgba(255, 255, 255, 0.7) !important;
}

.premium-modal-header .modal-close-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
}

.premium-search-input.e-input-group {
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s ease !important;
    background: #f8fafc !important;
}

.premium-search-input.e-input-group.e-input-focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1) !important;
    background: white !important;
}

.premium-search-input.e-input-group .e-input {
    padding: 8px 12px !important;
    font-size: 13px !important;
}

.modal-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #1e293b;
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 20px;
    color: #64748b;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.modal-close-btn:hover {
    background: #f1f5f9;
    color: #1e293b;
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* SgBill Popup Styles Parity */
.voucher-popup-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 16px !important;
    background: var(--primary-color) !important;
    color: white !important;
    flex-shrink: 0 !important;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.voucher-popup-title {
    font-weight: 700 !important;
    font-size: 1rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.voucher-popup-close {
    cursor: pointer !important;
    font-size: 1.25rem !important;
    opacity: 0.7 !important;
    transition: all 0.2s !important;
}

.voucher-popup-close:hover {
    opacity: 1 !important;
    transform: scale(1.1);
}

.voucher-save-section {
    padding: 12px 16px !important;
    border-top: 1px solid #e2e8f0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    background: #f8fafc !important;
    flex-shrink: 0 !important;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.special-rate-tabs .tab-buttons {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    border-bottom: 2px solid #e2e8f0;
}

.special-rate-tabs .tab-btn {
    padding: 10px 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: #64748b;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: -2px;
}

.special-rate-tabs .tab-btn.active {
    color: #6366f1;
    border-bottom-color: #6366f1;
}

.special-rate-tabs .tab-btn:hover {
    color: #4f46e5;
}

.special-rate-grid {
    margin-top: 15px;
}

.grid-dropdown {
    width: 100%;
}

.grid-numeric-input.e-input-group {
    height: 26px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 4px !important;
}

.grid-numeric-input.e-input-group.e-input-focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1) !important;
}

.grid-numeric-input.e-input-group .e-input {
    text-align: right !important;
    font-size: 13px !important;
    padding-right: 4px !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.input-with-button {
    display: flex;
    gap: 8px;
    align-items: center;
}

.input-with-button .premium-input {
    flex: 1;
}

.add-btn {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    border: none;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.add-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.fine-grid-wrapper {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-top: 15px;
}

.fine-entry-table {
    width: 100%;
    border-collapse: collapse;
}

.fine-entry-table thead {
    background: #f8fafc;
    position: sticky;
    top: 0;
}

.fine-entry-table th,
.fine-entry-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

.fine-entry-table th {
    font-weight: 600;
    color: #334155;
    font-size: 14px;
}

.fine-entry-table td {
    color: #64748b;
}

.fine-entry-table .text-right {
    text-align: right;
}

.fine-entry-table tbody tr:hover {
    background: #f8fafc;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .legacy-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .legacy-field {
        width: 100% !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }

    .legacy-label {
        min-width: unset !important;
        width: 100% !important;
        margin-bottom: 2px !important;
    }

    .input-with-lookup,
    .parcel-input-group {
        width: 100% !important;
    }

    /* Opening Balance special handling */
    .legacy-fieldset .legacy-row {
        gap: 15px !important;
    }

    .legacy-legend-row {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        margin-bottom: 10px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .legacy-fieldset {
        padding: 15px 10px !important;
    }

    .form-grid-2 {
        grid-template-columns: 1fr !important;
    }

    .modal-dialog-large,
    .modal-dialog-medium {
        width: 95% !important;
        margin: 10px !important;
    }

    /* Override nowrap */
    .legacy-row[style*="nowrap"] {
        flex-wrap: wrap !important;
    }

    .parcel-input-group .e-numeric,
    .parcel-input-group .e-dropdownlist {
        width: 100% !important;
    }

    /* Force single-line footer buttons on mobile screen */
    .form-footer,
    .footer-actions-row,
    .footer-actions-right {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .form-footer button,
    .form-footer .e-btn,
    .footer-actions-row button,
    .footer-actions-row .e-btn,
    .footer-actions-right button,
    .footer-actions-right .e-btn {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: unset !important;
        padding: 6px 14px !important;
        font-size: 12px !important;
        margin: 0 !important;
    }
}

/* Standard Grid Layout */
.standard-grid-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 15px;
    border: 1px solid #e2e8f0;
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 100px);
    overflow: hidden;
}

.full-width-content {
    padding: 0 !important;
    margin-left: 0 !important;
    overflow-x: visible !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .full-width-content {
        padding: 8px !important;
    }
}

.list-view-container {
    margin: 10px;
}

.list-grid-wrapper {
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.list-page-grid {
    height: 100% !important;
    flex: 1;
}

.grid-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    gap: 15px;
    flex-wrap: wrap;
}

.page-title-inline h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-blue);
    margin: 0;
}

.search-wrapper {
    min-width: 250px;
}

.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    min-width: 80px;
    line-height: normal;
}

.status-active {
    background-color: #dcfce7;
    color: #166534;
}

.status-inactive {
    background-color: #fee2e2;
    color: #991b1b;
}

.status-clickable {
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.1s ease;
    user-select: none;
}

.status-clickable:hover {
    opacity: 0.82;
    transform: scale(1.05);
}

.debit-col,
.credit-col {
    padding: 8px 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.debit-col {
    background-color: #e8f5e9 !important;
    color: #1b5e20 !important;
}

.credit-col {
    background-color: #ffebee !important;
    color: #b71c1c !important;
}

.ledger-wrapper {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    height: 100%;
    min-height: 0;
    width: 100%;
    overflow: hidden;
}

.main-ledger-card {
    height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    background: #ffffff;
}

.ledger-header-title {
    font-size: 1.2rem !important;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
}

.back-btn-premium {
    border-color: #cbd5e1 !important;
    color: #475569 !important;
    font-weight: 500 !important;
}

.back-btn-premium:hover {
    background-color: #f1f5f9 !important;
    color: #1e293b !important;
}

.search-inputs-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 12px;
}

.checkboxes-actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 4px 2px;
}

.checkbox-group {
    display: flex;
    gap: 20px;
    align-items: center;
}

.btn-search-premium {
    background: var(--primary-color) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25) !important;
    transition: all 0.2s ease !important;
    font-weight: 600 !important;
    padding: 6px 16px !important;
}

.btn-search-premium:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35) !important;
}

.ledger-wrapper {
    background: #f1f5f9;
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    height: 100%;
    min-height: 0;
    width: 100%;
    overflow: hidden;
    gap: 12px;
    padding: 12px;
}

.ledger-column {
    display: flex;
    flex-direction: column;
    width: 50%;
    height: 100%;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.ledger-grid-container {
    flex-grow: 1;
    height: 100%;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 18px !important;
}

.ledger-grid-container .e-grid {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    min-width: 500px !important;
}

.debit-col,
.credit-col {
    padding: 10px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.debit-col {
    /* Credit column: Styled emerald green */
    background: linear-gradient(135deg, #e8f5e9 0%, #d4edda 100%) !important;
    color: #0f5132 !important;
    border-bottom: 2px solid #badbcc !important;
}

.credit-col {
    /* Debit column: Styled crimson red */
    background: linear-gradient(135deg, #fdf2f2 0%, #f8d7da 100%) !important;
    color: #842029 !important;
    border-bottom: 2px solid #f5c2c7 !important;
}

.ledger-column-footer {
    background-color: #f8fafc !important;
    flex-shrink: 0;
    border-top: 1px solid #e2e8f0 !important;
}

.badge-credit-total {
    background-color: #d1e7dd;
    color: #0f5132;
    border: 1px solid #badbcc;
    padding: 6px 14px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.85rem;
    display: inline-block;
}

.badge-debit-total {
    background-color: #f8d7da;
    color: #842029;
    border: 1px solid #f5c2c7;
    padding: 6px 14px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.85rem;
    display: inline-block;
}

.total-summary-bar {
    padding: 12px 14px !important;
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
}

.total-summary-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.grand-balance-wrapper {
    display: flex;
    align-items: center;
}

.grand-total-pill {
    padding: 6px 16px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    display: inline-flex;
    align-items: center;
}

.grand-total-pill.credit-bg {
    background-color: #d1e7dd;
    color: #0f5132;
    border: 1px solid #badbcc;
}

.grand-total-pill.debit-bg {
    background-color: #f8d7da;
    color: #842029;
    border: 1px solid #f5c2c7;
}

/* Syncfusion Grid Modern Tweaks */
.e-grid {
    border: none !important;
}

.e-grid .e-headercell {
    background-color: #f8fafc !important;
    color: #475569 !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-bottom: 1px solid #e2e8f0 !important;
    height: 38px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.e-grid .e-rowcell {
    font-size: 0.85rem !important;
    padding: 8px 12px !important;
    color: #334155 !important;
}

.e-grid .e-row:hover .e-rowcell {
    background-color: #f1f5f9 !important;
    transition: background-color 0.15s ease;
}

/* Grid Footer Aggregate Row Custom Styling */
.e-grid .e-gridfooter {
    border-top: 1px solid #cbd5e1 !important;
    background-color: #f8fafc !important;
}

.e-grid .e-summarycell {
    padding: 10px 14px !important;
    /* Spacious padding to increase height */
    font-size: 0.95rem !important;
    /* Increased font size */
    font-weight: 700 !important;
    background-color: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.e-grid .e-summarycell div,
.e-grid .e-summarycell span {
    font-size: 0.95rem !important;
    /* Bold, clear text size */
    font-weight: 700 !important;
}

/* Mobile Responsiveness for Ledger */
@media (max-width: 768px) {
    .main-ledger-card {
        height: auto !important;
        min-height: calc(100vh - 120px) !important;
    }

    .ledger-wrapper {
        flex-direction: column !important;
        overflow-y: auto !important;
        gap: 16px !important;
        padding: 8px !important;
    }

    .ledger-column {
        width: 100% !important;
        height: auto !important;
        min-height: 380px !important;
        flex-shrink: 0 !important;
        border-bottom: 2px solid #e2e8f0;
        border-right: none !important;
        min-width: 0 !important;
    }

    .ledger-grid-container {
        height: 320px !important;
        min-width: 0 !important;
    }

    /* Enable horizontal scroll on mobile and adjust column widths */
    .e-grid .e-content {
        overflow-x: auto !important;
    }

    .e-grid .e-table {
        width: auto !important;
        min-width: 100% !important;
    }

    .e-grid .e-rowcell {
        white-space: nowrap !important;
    }

    /* Summary Grids Column Widths (Fixed pixels to allow horizontal scroll on mobile) */
    .ledger-column .e-grid colgroup col:nth-child(1) {
        width: 150px !important;
    }

    .ledger-column .e-grid colgroup col:nth-child(2) {
        width: 90px !important;
    }

    .ledger-column .e-grid .e-headercell:nth-child(1),
    .ledger-column .e-grid .e-rowcell:nth-child(1) {
        width: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;
    }

    .ledger-column .e-grid .e-headercell:nth-child(2),
    .ledger-column .e-grid .e-rowcell:nth-child(2) {
        width: 90px !important;
        min-width: 90px !important;
        max-width: 90px !important;
    }

    /* Detail Grids Column Widths (3 columns - inside .h-100 container) */
    .h-100 .ledger-column .e-grid colgroup col:nth-child(1) {
        width: 90px !important;
    }

    .h-100 .ledger-column .e-grid colgroup col:nth-child(2) {
        width: 90px !important;
    }

    .h-100 .ledger-column .e-grid colgroup col:nth-child(3) {
        width: 160px !important;
    }

    .h-100 .ledger-column .e-grid .e-headercell:nth-child(1),
    .h-100 .ledger-column .e-grid .e-rowcell:nth-child(1) {
        width: 90px !important;
        min-width: 90px !important;
        max-width: 90px !important;
    }

    .h-100 .ledger-column .e-grid .e-headercell:nth-child(2),
    .h-100 .ledger-column .e-grid .e-rowcell:nth-child(2) {
        width: 90px !important;
        min-width: 90px !important;
        max-width: 90px !important;
    }

    .h-100 .ledger-column .e-grid .e-headercell:nth-child(3),
    .h-100 .ledger-column .e-grid .e-rowcell:nth-child(3) {
        width: 160px !important;
        min-width: 160px !important;
        max-width: 160px !important;
    }

    .checkboxes-actions-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
    }

    .checkbox-group {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .btn-search-premium {
        width: 100% !important;
        text-align: center !important;
    }

    .total-summary-card {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .grand-balance-wrapper {
        justify-content: space-between !important;
    }
}

/* Premium Centered Delete Dialog Styling */
.premium-delete-dialog {
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
    border: none !important;
}

.premium-delete-dialog .e-dlg-header-content {
    display: none !important;
    /* Hide header completely */
}

.premium-delete-dialog .e-dlg-content {
    padding: 10px !important;
}

.premium-delete-dialog .dialog-body-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Circular Icon with ! */
.premium-delete-dialog .confirm-icon-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 4px solid #fecaca;
    /* Red-200 border */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    margin-top: 10px;
    animation: scaleIn 0.3s ease-out;
}

.premium-delete-dialog .confirm-icon-circle.info-icon {
    border: 4px solid #bfdbfe !important;
    /* Blue-200 border */
}

.premium-delete-dialog .confirm-icon-text {
    font-size: 42px;
    font-weight: 300;
    color: #ef4444;
    /* red-500 */
    line-height: 1;
}

.premium-delete-dialog .confirm-icon-circle.info-icon .confirm-icon-text {
    color: #3b82f6 !important;
    /* Blue-500 */
}

.premium-delete-dialog .confirm-dialog-title {
    font-size: 22px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    margin-bottom: 12px !important;
}

.premium-delete-dialog .confirm-dialog-message {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 15px;
    line-height: 1.5;
    padding: 0 15px;
}

/* Premium Centered Delete Dialog Footer Styling */
.premium-delete-dialog .confirm-dialog-footer {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    /* Horizontally center the buttons inside the dialog */
    align-items: center !important;
    gap: 16px !important;
    /* Gap between Cancel and Yes, delete it! buttons */
    padding: 0 24px 24px 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Cancel Button */
.premium-delete-dialog .confirm-dialog-footer .btn-confirm-cancel {
    background-color: #f8fafc !important;
    /* Slate-50 */
    color: #475569 !important;
    /* Slate-600 */
    border-radius: 8px !important;
    padding: 0 24px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    border: 1px solid #cbd5e1 !important;
    /* Slate-300 border */
    height: 38px !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.premium-delete-dialog .confirm-dialog-footer .btn-confirm-cancel:hover {
    background-color: #f1f5f9 !important;
    /* Slate-100 */
    border-color: #94a3b8 !important;
    /* Slate-400 border */
    color: #1e293b !important;
    /* Slate-800 */
}

/* Yes Delete Button (Strictly Red Danger color) */
.premium-delete-dialog .confirm-dialog-footer .btn-confirm-delete {
    background-color: #ef4444 !important;
    /* Red-500 danger color */
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 0 24px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    border: 1px solid #ef4444 !important;
    /* Red border */
    height: 38px !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.premium-delete-dialog .confirm-dialog-footer .btn-confirm-delete:hover {
    background-color: #dc2626 !important;
    /* Red-600 danger hover color */
    border-color: #dc2626 !important;
}

/* Primary Confirm Button (Blue) */
.premium-delete-dialog .confirm-dialog-footer .btn-confirm-primary {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 0 24px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    border: 1px solid #3b82f6 !important;
    height: 38px !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.premium-delete-dialog .confirm-dialog-footer .btn-confirm-primary:hover {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
}

@keyframes scaleIn {
    0% {
        transform: scale(0.6);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Dialog Overlay Container and Backdrop Blur */
.e-dlg-container {
    z-index: 100000 !important;
    /* Force dialog container to stack above vertical sidebar menu (z-index: 1040) */
}

.e-dlg-overlay {
    backdrop-filter: blur(5px) !important;
    background-color: rgba(15, 23, 42, 0.3) !important;
    /* Premium dark slate semi-transparent overlay */
    transition: backdrop-filter 0.2s ease, background-color 0.2s ease !important;
    z-index: 100000 !important;
    /* Stack overlay above sidebar to blur it */
}

.e-dialog {
    z-index: 100001 !important;
    /* Stack active dialog wrapper above overlay */
}

/* Responsive Less Weight Bag Details Dialog styling */
.responsive-bag-dialog {
    max-width: 95% !important;
    margin: auto !important;
    height: auto !important;
}

@media (max-width: 768px) {
    .responsive-bag-dialog {
        width: 95% !important;
    }
}

/* Responsive grid height override */
.e-grid.auto-shrink-grid {
    min-height: unset !important;
    /* Override the global 400px min-height */
}

/* Force horizontal scroll on auto-shrink-grid */
.e-grid.auto-shrink-grid .e-gridcontent,
.e-grid.auto-shrink-grid .e-content {
    overflow-x: auto !important;
}

/* Job Work Button Theme */
.btn-theme-jobwork {
    background-color: var(--primary-blue) !important;
    color: #ffffff !important;
    border: 1px solid var(--primary-blue) !important;
    transition: all 0.2s ease-in-out !important;
}

.btn-theme-jobwork:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-1px) !important;
}

/* Premium Responsive Dialog */
.responsive-dialog .e-dlg-content {
    padding: 0 !important;
}

/* Ensure we only target the dialog box, not the full-screen container */
.e-dlg-container.responsive-dialog .e-dialog,
.responsive-dialog.e-dialog {
    max-width: 95% !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    margin: auto !important;
    left: 0 !important;
    right: 0 !important;
}

@media (max-width: 768px) {

    .e-dlg-container.responsive-dialog .e-dialog,
    .responsive-dialog.e-dialog {
        width: 100% !important;
        max-width: 100vw !important;
        border-radius: 0 !important;
    }
}

/* ==========================================================================
   Premium Adaptive Form Layout System
   ========================================================================== */
.adaptive-form-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px 16px !important;
    /* Tight row gap 12px, column gap 16px */
    align-items: flex-end !important;
    /* Vertically align all input elements at bottom */
    margin-bottom: 16px !important;
    width: 100% !important;
}

.adaptive-form-col {
    flex: 1 1 200px !important;
    /* Grow and shrink dynamically, base width of 200px */
    min-width: 150px !important;
    max-width: 240px !important;
    /* Standard, polished field width */
    /* overflow:visible ensures the Syncfusion e-outline top-border notch (float label gap)
       is never clipped by a parent with overflow:hidden */
    overflow: visible !important;
    /* padding-top: 3px gives the 1px outline border breathing room so it's never
       flush-clipped against the container edge (fixes "border cut" visual) */
    padding-top: 3px !important;
}

/* Wide control layout */
.adaptive-form-col.col-wide {
    flex: 2 2 400px !important;
    max-width: 500px !important;
    /* Ideal for Name, Item Name, Account dropdowns */
}

/* Extra wide control layout */
.adaptive-form-col.col-xwide {
    flex: 3 3 600px !important;
    max-width: 750px !important;
}

/* Full-width control layout */
.adaptive-form-col.col-full {
    flex: 1 1 100% !important;
    max-width: 100% !important;
}

/* Narrow control layout - standard (130px) */
.adaptive-form-col.col-narrow {
    flex: 0 1 120px !important;
    min-width: 90px !important;
    max-width: 130px !important;
    /* Ideal for Touch, Wastage, Credit Days, HSN code */
}

/* Narrow 120px - Item No */
.adaptive-form-col.col-narrow-xs {
    flex: 0 1 110px !important;
    min-width: 90px !important;
    max-width: 120px !important;
}

/* Narrow 140px - HSN/SAC Type, Labor Unit, Tax Rate */
.adaptive-form-col.col-narrow-md {
    flex: 0 1 130px !important;
    min-width: 100px !important;
    max-width: 140px !important;
}

/* Narrow 170px - Stock Maintenance checkbox area */
.adaptive-form-col.col-narrow-lg {
    flex: 0 1 160px !important;
    min-width: 130px !important;
    max-width: 170px !important;
}

/* Medium 190px - opening bal button / Pur Labor Unit */
.adaptive-form-col.col-medium {
    flex: 0 1 180px !important;
    min-width: 140px !important;
    max-width: 200px !important;
}

/* Wide-small 320px - Item Name, Category */
.adaptive-form-col.col-wide-sm {
    flex: 2 2 300px !important;
    max-width: 320px !important;
}

/* Checkbox Alignment layout */
.adaptive-form-col.col-checkbox {
    flex: 0 1 auto !important;
    min-width: auto !important;
    max-width: none !important;
    padding-bottom: 8px !important;
    /* Vertically aligns checkboxes with inputs */
    display: flex !important;
    align-items: center !important;
}

/* Force inner Syncfusion inputs inside adaptive column to stretch to full column width */
.adaptive-form-col .e-control-wrapper:not(.e-popup),
.adaptive-form-col .e-input-group:not(.e-popup),
.adaptive-form-col input.form-control,
.adaptive-form-col .e-checkbox-wrapper {
    width: 100% !important;
    max-width: 100% !important;
}

/* Allow the float-label top-border notch to render without clipping.
   overflow-y:auto on .form-body is kept for scrolling; overflow-x:visible
   on the row lets the ::before/::after border gap appear correctly. */
.adaptive-form-row {
    overflow: visible !important;
}

/* Utility: Remove top margin from first fieldset in a column */
.erp-form-fieldset.no-top-margin {
    margin-top: 0 !important;
}

/* =============================================
   EAItemMaster - Page Specific Helpers
   ============================================= */

/* Multi-category placeholder mimic (replaces inline padding style) */
.multi-cat-placeholder {
    padding: 10px 12px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    background-color: var(--bg-secondary) !important;
    min-height: 32px !important;
    display: flex !important;
    align-items: center !important;
    color: var(--text-secondary);
}

/* Sub-label above multi-category list */
.eaitem-sub-label {
    font-size: 12px;
    font-weight: bold;
    color: var(--text-secondary);
    margin-bottom: 6px;
    display: block;
}

/* Multi-category scrollable list */
.eaitem-cat-list {
    max-height: 150px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--bg-primary);
}

/* Last adaptive row in a fieldset - remove bottom margin */
.adaptive-form-row.eaitem-last-row {
    margin-bottom: 0 !important;
}

/* Status row inside Stock Limits fieldset - top breathing room */
.adaptive-form-row.eaitem-status-row {
    margin-top: 10px !important;
}

/* Opening Bal button - compact size */
.e-btn.eaitem-opbal-btn,
.eaitem-opbal-btn.e-outline.e-small {
    padding: 0px 8px !important;
    font-size: 11px !important;
    height: 26px !important;
    line-height: 24px !important;
}

/* Branch list scroll container */
.eaitem-branch-list {
    height: 100px;
    overflow-y: auto;
    padding: 5px;
    border-radius: 4px;
}

/* =============================================
   User Custom Form Area Styles
   ============================================= */

/* ===== Account Form Section Styles ===== */
.erp-form-section {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
}

.erp-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.erp-section-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--primary-color);
    border-radius: 6px;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.erp-section-label {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.erp-section-body {
    padding: 16px;
    background: var(--bg-primary);
}

/* Disabled section */
.erp-section-disabled {
    opacity: 0.55;
    pointer-events: none;
}

/* Contact Person Card */
.contact-person-card {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.contact-person-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.contact-person-body {
    padding: 12px;
    background: var(--bg-primary);
}

.sticky-footer-modern {
    position: fixed;
    bottom: 0;
    left: 260px;
    right: 10px;
    height: 55px;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 20px;
    gap: 8px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    z-index: 999;
}

/* --- Global Layout Utility Helpers (Replacing Inline Styles) --- */
.title-icon-style {
    font-size: 16px;
    color: #94a3b8;
    margin-left: 8px;
}

.fieldset-dashed {
    border-style: dashed !important;
}

.mt-sm-custom {
    margin-top: 8px !important;
}

.mt-md-custom {
    margin-top: 10px !important;
}

.mb-md-custom {
    margin-bottom: 15px !important;
}

.btn-detail-action {
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.max-height-list-container {
    max-height: 150px;
    overflow-y: auto;
}

/* --- Voucher Tax Mapping Specific Classes --- */
.table-header-row {
    font-weight: 600 !important;
    font-size: 12px !important;
    color: var(--text-secondary) !important;
    border-bottom: 2px solid var(--border-color) !important;
    padding-bottom: 6px !important;
    margin-bottom: 8px !important;
}

.col-max-200 {
    max-width: 200px !important;
}

.col-vou-label {
    font-size: 13px !important;
    color: var(--text-primary) !important;
    font-weight: 500 !important;
    padding-bottom: 6px !important;
    max-width: 200px !important;
}

.mb-sm-custom {
    margin-bottom: 8px !important;
}

/* --- Rate Calculator Specific Classes --- */
.label-based-on {
    font-weight: 600 !important;
    font-size: 12px !important;
    color: var(--text-secondary) !important;
    margin-right: 12px !important;
}

.calc-radio-label {
    cursor: pointer !important;
    font-size: 13px !important;
}

.calculator-result-card {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    padding: 16px !important;
}

.calculator-result-header {
    font-weight: 600 !important;
    font-size: 13px !important;
    color: var(--text-primary) !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.info-blue-icon {
    color: #3b82f6 !important;
}

.word-info-box {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #3b82f6 !important;
    background-color: #eff6ff !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    border-left: 4px solid #3b82f6 !important;
}

.subgroup-header-label {
    font-weight: 600 !important;
    font-size: 13.5px !important;
    color: var(--primary-color) !important;
    margin-bottom: 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* --- Account Details & Report Grid Specific Classes --- */
.card-body-flex {
    flex-grow: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.flex-grow-1-hidden {
    flex-grow: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.icon-size-14 {
    font-size: 14px !important;
}

.icon-size-13 {
    font-size: 13px !important;
}

.fs-9-rem {
    font-size: 0.9rem !important;
}

/* Mobile responsive horizontal scroll support for ledger and voucher grids */
@media (max-width: 768px) {
    .ledger-grid-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        width: 100% !important;
    }

    .ledger-grid-container .e-grid {
        min-width: 600px !important;
        border: none !important;
    }
}

/* --- Voucher Specific Classes & General Utilities --- */
.calc-height-flex-col {
    height: calc(100vh - 120px) !important;
    display: flex !important;
    flex-direction: column !important;
}

.flex-grow-1-min-h-0 {
    flex-grow: 1 !important;
    min-height: 0 !important;
}

.color-danger-red {
    color: var(--danger-red) !important;
}

.paymode-container {
    height: 38px !important;
}

.paymode-label {
    font-size: 11px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
}

.btn-narrow-action {
    height: 32px !important;
    margin-bottom: 2px !important;
    width: 32px !important;
}

.section-title-flat {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
}

.inset-shadow-sm {
    box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.02) !important;
}

.btn-lookup-narrow {
    height: 34px !important;
    margin-bottom: 2px !important;
    width: 32px !important;
    font-weight: bold !important;
}

.words-label-style {
    font-size: 0.85rem !important;
    font-style: italic !important;
}

.custom-aggregation-bar {
    background-color: #f1f5f9;
    border-top: 1px solid #cbd5e1;
    padding: 10px 20px;
    font-size: 0.9rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #1e293b;
    width: 100%;
}

.custom-aggregation-bar .agg-label {
    font-weight: bold;
    color: #475569;
}

.custom-aggregation-bar .agg-value {
    font-weight: bold;
    color: #0f172a;
}

/* Global Syncfusion DatePicker Popup Size Fix */
.e-datepicker.e-popup,
.e-datetimepicker.e-popup,
.e-popup.e-datepicker,
.e-popup.e-calendar,
.e-calendar {
    width: 270px !important;
    min-width: 270px !important;
    max-width: 270px !important;
}

/* Helper column widths for adaptive forms */
.adaptive-form-col.col-w85 { flex: 0 1 85px !important; max-width: 85px !important; min-width: 85px !important; }
.adaptive-form-col.col-w100 { flex: 0 1 100px !important; max-width: 100px !important; min-width: 100px !important; }
.adaptive-form-col.col-w110 { flex: 0 1 110px !important; max-width: 110px !important; min-width: 110px !important; }
.adaptive-form-col.col-w120 { flex: 0 1 120px !important; max-width: 120px !important; min-width: 120px !important; }
.adaptive-form-col.col-w160 { flex: 0 1 160px !important; max-width: 160px !important; min-width: 130px !important; }
.adaptive-form-col.col-w180 { flex: 0 1 180px !important; max-width: 180px !important; min-width: 140px !important; }
.adaptive-form-col.col-w200 { flex: 0 1 200px !important; max-width: 200px !important; min-width: 150px !important; }
.adaptive-form-col.col-w220 { flex: 0 1 220px !important; max-width: 220px !important; min-width: 150px !important; }
.adaptive-form-col.col-w250 { flex: 1 1 250px !important; max-width: 250px !important; min-width: 150px !important; }
.adaptive-form-col.col-w260 { flex: 1 1 260px !important; max-width: 260px !important; min-width: 150px !important; }
.adaptive-form-col.col-w280 { flex: 1 1 280px !important; max-width: 280px !important; min-width: 150px !important; }
.adaptive-form-col.col-w320 { flex: 2 2 300px !important; max-width: 320px !important; min-width: 180px !important; }
.adaptive-form-col.col-w500 { flex: 2 2 400px !important; max-width: 500px !important; min-width: 250px !important; }

/* Custom Form and UI Element styles for EAContact page */
.btn-add-inline {
    height: 32px !important;
    width: 32px !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
}

.btn-search-inline {
    height: 32px !important;
    width: 32px !important;
    margin-top: 14px !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

.btn-folder-inline {
    height: 28px !important;
    width: 32px !important;
}

.address-input-group .e-textbox {
    margin-bottom: 5px !important;
}

.visible-users-list {
    height: 100px !important;
    overflow-y: auto !important;
    padding: 5px !important;
}

.tab-content-container {
    padding: 15px 5px !important;
    border: 1px dashed var(--input-border) !important;
    border-top: none !important;
}

.document-preview-box {
    width: 50px !important;
    height: 50px !important;
    border-style: dashed !important;
    border-color: var(--input-border) !important;
}

.clipboard-box {
    border-radius: 4px !important;
    min-height: 100px !important;
    border-style: dashed !important;
    border-color: var(--input-border) !important;
}

.btn-close-absolute {
    top: 5px !important;
    right: 5px !important;
    padding: 2px !important;
    background: #3b82f6 !important;
    color: white !important;
}

.font-13 {
    font-size: 13px !important;
}

.uploaded-files-header {
    background: linear-gradient(to bottom, #1e3a8a, #3b82f6) !important;
    color: white !important;
    padding: 6px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 2px !important;
}

.uploaded-files-title {
    font-weight: 600 !important;
    font-size: 14px !important;
    text-align: center !important;
    width: 100% !important;
}

.btn-close-transparent {
    background: transparent !important;
    color: white !important;
    border: none !important;
    padding: 0 !important;
    min-height: unset !important;
}

/* Align form row columns to the top */
.adaptive-form-row.align-start {
    align-items: flex-start !important;
}

/* Print Area Local Loader */
.print-loader-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 600px;
    background-color: var(--card-bg, #ffffff);
}

.print-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(0, 0, 0, 0.1);
    border-top-color: #9d1c52; /* Accent pink/maroon color from theme */
    border-radius: 50%;
    animation: print-spin 1s linear infinite;
    margin-bottom: 15px;
}

.print-loader-text {
    font-size: 16px;
    font-weight: 500;
    color: #4b5563; /* grey-600 */
    animation: print-pulse 1.5s ease-in-out infinite;
}

@keyframes print-spin {
    to { transform: rotate(360deg); }
}

@keyframes print-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* ─── Item Stock Popup: kill Syncfusion's forced minimum height ─── */
.e-dlg-container.stock-popup-dialog .e-dialog,
.stock-popup-dialog.e-dialog {
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
}

.e-dlg-container.stock-popup-dialog .e-dlg-content,
.stock-popup-dialog .e-dlg-content {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    flex: none !important;
}

.e-dlg-container.stock-popup-dialog .e-scroll-content {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

/* ─── Compact LessWt Popup ─── */
.compact-less-popup .e-input,
.compact-less-popup .e-input-group,
.compact-less-popup .e-dropdownlist,
.compact-less-popup .e-numerictextbox,
.compact-less-popup .e-float-text,
.compact-less-popup .e-btn {
    font-size: 12px !important;
}

.compact-less-popup .e-grid .e-headercell,
.compact-less-popup .e-grid .e-rowcell {
    font-size: 12px !important;
    padding: 4px 8px !important;
}

/* ─── Brutal Force Compact Grid ─── */
.force-compact-grid {
    min-height: 0 !important;
    height: 120px !important;
}

.force-compact-grid .e-gridcontent,
.force-compact-grid .e-content,
.force-compact-grid .e-table {
    min-height: 0 !important;
    height: auto !important;
}

.force-compact-grid .e-content {
    max-height: 85px !important;
    overflow-y: auto !important;
}

/* ─── Dynamic Grid Background Colors ─── */
.grid-inward-green .e-gridheader,
.grid-inward-green .e-gridcontent,
.grid-inward-green .e-headercell,
.grid-inward-green .e-rowcell {
    background-color: #d1ffd1 !important;
}

.grid-inward-red .e-gridheader,
.grid-inward-red .e-gridcontent,
.grid-inward-red .e-headercell,
.grid-inward-red .e-rowcell {
    background-color: #ffcccc !important;
}

.grid-gray .e-gridheader,
.grid-gray .e-gridcontent,
.grid-gray .e-headercell,
.grid-gray .e-rowcell {
    background-color: #eaeaea !important;
}

/* ─── Global Numeric Right Align ─── */
.e-control-wrapper.e-numeric input,
.e-float-input.e-numeric input,
.e-input-group.e-numeric input,
input.e-numerictextbox {
    text-align: right !important;
}

/* Global DatePicker Width Override */
.e-datepicker.e-popup,
.e-calendar.e-lib,
.e-popup.e-datepicker {
    min-width: 260px !important;
}

/* Compact layout to match WinForms density (For all form bodies) */
.form-body .mb-2,
.form-body .mb-3 {
    margin-bottom: 0.25rem !important;
}

.form-body .p-3 {
    padding: 0.5rem !important;
}

.form-body .g-3,
.form-body .g-2 {
    --bs-gutter-y: 0.5rem !important;
    --bs-gutter-x: 0.5rem !important;
}

/* Ensure left and right containers have the exact same font size */
.form-body,
.form-body .e-input,
.form-body .e-dropdownlist,
.form-body .e-numerictextbox,
.form-body .e-float-text,
.form-body .fw-bold,
.form-body .e-checkbox-wrapper .e-label,
.form-body .e-radio-wrapper .e-label {
    font-size: 13px !important;
}

.form-body .card {
    padding: 0.5rem !important;
}

.form-body .border.rounded.p-3 {
    padding: 0.5rem !important;
    margin-bottom: 0.25rem !important;
}

.btn-float-align {
    margin-top: 0px !important;
    align-self: center !important;
    /* Forces perfect vertical centering with adjacent inputs */
}