/**
 * Capitito Record System - Main Styles
 * 
 * Color Scheme:
 * - Primary: #146032 (Capitito green)
 * - Accent: #D02126 (Capitito red)
 * - Background: #ffffff (White)
 * 
 * Performance Optimized - Google Fonts loaded via PHP with preconnect
 */

/* Subtle Sparkle Animation */
@keyframes subtle-sparkle {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@keyframes gentle-pulse {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(20, 96, 50, 0.3);
    }
    50% {
        box-shadow: 0 4px 20px rgba(20, 96, 50, 0.5), 0 0 30px rgba(20, 96, 50, 0.2);
    }
}

@keyframes text-shimmer {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

:root {
    --crs-primary: #146032 !important;
    --crs-primary-light: #185D30 !important;
    --crs-secondary: #146032 !important;
    --crs-secondary-light: #185D30 !important;
    --crs-accent: #D02126 !important;
    --crs-accent-light: #E13338 !important;
    --crs-accent-dark: #A91A1F !important;
    --crs-success: #146032 !important;
    --crs-success-light: #1E7C45 !important;
    --crs-warning: #d97706 !important;
    --crs-danger: #D02126 !important;
    --crs-danger-light: #E13338 !important;
    --crs-white: #ffffff !important;
    --crs-light: #f1f5f9 !important;
    --crs-lighter: #f8fafc !important;
    --crs-gray: #64748b !important;
    --crs-gray-light: #94a3b8 !important;
    --crs-dark: #0f172a !important;
    --crs-border: #e2e8f0 !important;
    --crs-border-dark: #cbd5e1 !important;
    --crs-shadow: rgba(10, 22, 40, 0.12) !important;
    --crs-shadow-lg: rgba(10, 22, 40, 0.2) !important;
    --crs-glass-bg: rgba(255, 255, 255, 0.85) !important;
    --crs-glass-border: rgba(30, 58, 95, 0.25) !important;
    --crs-glass-shadow: 0 8px 32px rgba(10, 22, 40, 0.15), 0 0 0 1px rgba(30, 58, 95, 0.08) !important;
    --crs-radius: 16px !important;
    --crs-radius-sm: 8px !important;
    --crs-radius-lg: 24px !important;
    --crs-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    --crs-gradient-primary: linear-gradient(135deg, #146032 0%, #185D30 100%) !important;
    --crs-gradient-accent: linear-gradient(135deg, #D02126 0%, #A91A1F 100%) !important;
    --crs-gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(241,245,249,0.9) 100%) !important;
}

.crs-import-proof-control {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    min-width: 150px;
}

.crs-import-proof-status {
    min-height: 34px;
    font-size: 0.78rem;
    color: var(--crs-gray);
}

.crs-import-proof-loading {
    color: var(--crs-primary);
    font-weight: 600;
}

.crs-import-proof-preview {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    max-width: 210px;
    color: var(--crs-primary);
    font-weight: 700;
    text-decoration: none;
}

.crs-import-proof-preview img {
    width: 34px;
    height: 34px;
    border: 1px solid var(--crs-border);
    border-radius: 6px;
    object-fit: cover;
    background: var(--crs-white);
}

.crs-import-proof-preview-sm {
    max-width: 120px;
    font-size: 0.72rem;
}

.crs-import-proof-preview-sm img {
    width: 28px;
    height: 28px;
}

.crs-import-row-error {
    outline: 2px solid var(--crs-danger);
    outline-offset: -2px;
    background: rgba(208, 33, 38, 0.08) !important;
}

/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Responsive page canvas */
html {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    background: var(--crs-white);
    color: var(--crs-dark);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    width: 100% !important;
    min-width: 0 !important;
    transform-origin: top left;
    overflow-x: hidden !important;
}

/* Iconify Solar icons */
.crs-icon,
iconify-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    vertical-align: -0.125em !important;
}

.crs-spin {
    animation: crs-spin 1s linear infinite !important;
}

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

/* GLOBAL DARK HEADER STYLES - Ensures all text visible on dark backgrounds */
.crs-page-header,
.crs-form-header,
[class*="header"][style*="background"],
.crs-order-header,
.crs-debtor-header {
    color: white !important;
}

.crs-page-header h1,
.crs-page-header h2,
.crs-page-header h3,
.crs-page-header h4,
.crs-page-header p,
.crs-page-header span,
.crs-page-header a,
.crs-page-header i,
.crs-form-header h1,
.crs-form-header h2,
.crs-form-header h3,
.crs-form-header p,
.crs-form-header span,
.crs-form-header a,
.crs-form-header i {
    color: #ffffff !important;
    font-size: 0.75rem !important;
}

.crs-page-header h1,
.crs-form-header h1 {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

/* Sleek button styles for headers */
.crs-btn-history {
    background: #ffffff !important;
    color: #146032 !important;
    border: 2px solid #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.65rem !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
    padding: 0.4rem 0.6rem !important;
}

.crs-btn-history i {
    color: #146032 !important;
    font-size: 0.65rem !important;
}

.crs-btn-history:hover {
    background: #f0f4f8 !important;
    transform: translateY(-2px) !important;
}

/* Typography */
h1, h2, h3, h4, h5, h6,
body h1, body h2, body h3, body h4, body h5, body h6,
.crs-main h1, .crs-main h2, .crs-main h3 {
    color: #146032 !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-bottom: 0.5em !important;
}

/* Subtle shimmer effect for page titles */
.crs-page-title h1,
.crs-main .crs-page-title h1 {
    background: linear-gradient(
        90deg, 
        #146032 0%, 
        #146032 40%, 
        #1D7240 50%, 
        #146032 60%, 
        #146032 100%
    ) !important;
    background-size: 200% auto !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: text-shimmer 4s linear infinite !important;
}

h1 { font-size: 2rem !important; }
h2 { font-size: 1.75rem !important; }
h3 { font-size: 1.5rem !important; }
h4 { font-size: 1.25rem !important; }
h5 { font-size: 1.1rem !important; }
h6 { font-size: 1rem !important; }

p { margin-bottom: 1rem; }

a {
    color: var(--crs-accent);
    text-decoration: none;
    transition: var(--crs-transition);
}

a:hover,
a:focus,
a:visited {
    color: var(--crs-primary);
    text-decoration: none !important;
}

.crs-main a,
.crs-main a:hover,
.crs-main a:focus,
.crs-main a:visited,
.crs-footer a,
.crs-footer a:hover,
.crs-footer a:focus,
.crs-footer a:visited {
    text-decoration: none !important;
}

/* Glassmorphism Card - More visible without hover */
.crs-glass,
body .crs-glass {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-radius: 16px !important;
    border: 2px solid rgba(30, 58, 95, 0.2) !important;
    box-shadow: 
        0 8px 32px rgba(10, 22, 40, 0.18),
        0 4px 16px rgba(30, 58, 95, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    padding: 1.5rem !important;
    transition: all 0.3s ease !important;
}

.crs-glass:hover {
    box-shadow: 
        0 16px 48px rgba(10, 22, 40, 0.22),
        0 8px 24px rgba(30, 58, 95, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    transform: translateY(-3px);
    border-color: rgba(208, 33, 38, 0.3) !important;
}

/* Buttons - With high specificity to override theme styles */
.crs-btn,
body .crs-btn,
.crs-main .crs-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    line-height: 1.5 !important;
    position: relative !important;
    overflow: hidden !important;
}

.crs-btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

.crs-btn-primary,
body .crs-btn-primary,
.crs-main .crs-btn-primary,
.crs-card .crs-btn-primary {
    background: linear-gradient(135deg, #146032 0%, #185D30 50%, #146032 100%) !important;
    background-size: 200% 200% !important;
    color: #ffffff !important;
    animation: subtle-sparkle 3s ease infinite !important;
    box-shadow: 0 4px 15px rgba(20, 96, 50, 0.3) !important;
}

.crs-btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #185D30 0%, #1D7240 50%, #185D30 100%) !important;
    background-size: 200% 200% !important;
    color: #ffffff !important;
    animation: gentle-pulse 2s ease infinite, subtle-sparkle 2s ease infinite !important;
    transform: translateY(-2px) !important;
}

.crs-btn-secondary,
body .crs-btn-secondary,
.crs-main .crs-btn-secondary {
    background: linear-gradient(135deg, #146032 0%, #185D30 50%, #146032 100%) !important;
    background-size: 200% 200% !important;
    color: #ffffff !important;
    animation: subtle-sparkle 4s ease infinite !important;
    box-shadow: 0 4px 15px rgba(20, 96, 50, 0.3) !important;
}

.crs-btn-secondary:hover:not(:disabled) {
    background: linear-gradient(135deg, #185D30 0%, #1D7240 50%, #185D30 100%) !important;
    background-size: 200% 200% !important;
    color: #ffffff !important;
    animation: gentle-pulse 2s ease infinite !important;
    transform: translateY(-2px) !important;
}

.crs-btn-outline,
body .crs-btn-outline {
    background: transparent !important;
    color: #146032 !important;
    border: 2px solid #146032 !important;
}

.crs-btn-outline:hover:not(:disabled) {
    background: #146032 !important;
    color: #ffffff !important;
}

.crs-btn-success,
body .crs-btn-success {
    background: #146032 !important;
    background-color: #146032 !important;
    color: #ffffff !important;
}

.crs-btn-danger,
body .crs-btn-danger {
    background: #D02126 !important;
    background-color: #D02126 !important;
    color: #ffffff !important;
}

.crs-btn-sm {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.8rem !important;
}

.crs-btn-lg {
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem !important;
}

/* Forms */
.crs-form-group {
    margin-bottom: 1rem;
}

.crs-form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--crs-primary);
}

.crs-input,
.crs-select,
.crs-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: 2px solid var(--crs-border);
    border-radius: var(--crs-radius-sm);
    background: var(--crs-white);
    color: var(--crs-dark);
    transition: var(--crs-transition);
}

.crs-input:focus,
.crs-select:focus,
.crs-textarea:focus {
    outline: none;
    border-color: var(--crs-accent);
    box-shadow: 0 0 0 3px rgba(208, 33, 38, 0.16);
}

.crs-input::placeholder {
    color: var(--crs-gray);
}

.crs-input[readonly] {
    background: var(--crs-light);
    color: var(--crs-gray);
}

.crs-textarea {
    min-height: 100px;
    resize: vertical;
}

/* Checkbox & Radio */
.crs-checkbox,
.crs-radio {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.crs-checkbox input,
.crs-radio input {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--crs-accent);
    cursor: pointer;
}

/* Tables - keep wide data scrollable inside the table area */
.crs-table-wrapper,
.table-wrapper,
.crs-recon-table-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-inline: contain;
    margin-bottom: 1.5rem;
}

.crs-table-wrapper::-webkit-scrollbar,
.table-wrapper::-webkit-scrollbar,
.crs-recon-table-wrapper::-webkit-scrollbar {
    height: 8px;
}

.crs-table-wrapper::-webkit-scrollbar-track,
.table-wrapper::-webkit-scrollbar-track,
.crs-recon-table-wrapper::-webkit-scrollbar-track {
    background: #e2e8f0;
    border-radius: 999px;
}

.crs-table-wrapper::-webkit-scrollbar-thumb,
.table-wrapper::-webkit-scrollbar-thumb,
.crs-recon-table-wrapper::-webkit-scrollbar-thumb {
    background: #146032;
    border-radius: 999px;
}

.crs-table,
body .crs-table {
    width: 100% !important;
    min-width: 760px !important;
    border-collapse: collapse !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    overflow: visible !important;
    table-layout: auto !important;
}

.crs-table th,
.crs-table td {
    padding: 0.5rem 0.4rem !important;
    text-align: left !important;
    border-bottom: 1px solid #e2e8f0 !important;
    font-size: 0.8rem !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    vertical-align: middle !important;
}

.crs-table th {
    background: #146032 !important;
    background-color: #146032 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    white-space: normal !important;
    font-size: 0.75rem !important;
    padding: 0.6rem 0.4rem !important;
}

#crs-import-history #crs-history-table {
    min-width: 1080px !important;
}

#crs-stock-form #crs-stock-table {
    width: max-content !important;
    min-width: 1480px !important;
    table-layout: fixed !important;
}

#crs-stock-history #crs-history-table {
    min-width: 1180px !important;
}

#crs-import-table {
    min-width: 980px !important;
}

.crs-table-wrapper > .crs-table,
.table-wrapper > table,
.crs-recon-table-wrapper > table {
    margin-bottom: 0 !important;
}

.crs-table tbody tr:hover {
    background: #f1f5f9 !important;
}

.crs-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Table inputs - compact for fitting in cells */
.crs-table .crs-input,
.crs-table input[type="number"],
.crs-table input[type="text"] {
    width: 100% !important;
    min-width: 50px !important;
    max-width: 100% !important;
    padding: 0.3rem 0.4rem !important;
    font-size: 0.75rem !important;
    text-align: right !important;
}

#crs-stock-form #crs-stock-table th,
#crs-stock-form #crs-stock-table td {
    overflow-wrap: normal !important;
    word-break: normal !important;
    white-space: nowrap !important;
    text-align: center !important;
}

#crs-stock-form #crs-stock-table th:first-child,
#crs-stock-form #crs-stock-table td:first-child {
    width: 190px !important;
    min-width: 190px !important;
    max-width: 190px !important;
    white-space: normal !important;
    text-align: left !important;
}

#crs-stock-form #crs-stock-table th:not(:first-child),
#crs-stock-form #crs-stock-table td:not(:first-child) {
    width: 126px !important;
    min-width: 126px !important;
}

#crs-stock-form #crs-stock-table input {
    min-width: 92px !important;
    width: 92px !important;
    font-size: 0.72rem !important;
    padding: 0.35rem 0.45rem !important;
}

.receipt-modal,
.confirm-modal,
.modal[id$="-modal"] {
    z-index: 16000 !important;
}

.receipt-modal .receipt-content,
#order-modal .modal-content,
#pay-modal .modal-content,
#debtor-offline-receipt-modal .modal-content,
#payment-offline-receipt-modal .modal-content {
    width: min(92mm, calc(100vw - 1rem)) !important;
    max-width: 92mm !important;
    max-height: calc(100vh - 1.25rem) !important;
    overflow: hidden !important;
}

.receipt-contact,
.receipt-contact *,
.receipt-company h2,
.receipt-info span,
.receipt-info strong,
.receipt-totals span,
.receipt-totals strong,
.receipt-footer .thanks,
.receipt-company .receipt-contact,
.receipt-company .receipt-contact *,
.receipt-amount,
.item-price,
.item-qty,
.item-total,
.receipt-item-header,
.receipt-totals .grand,
.profoma-receipt-body h2,
.profoma-receipt-title,
.profoma-discount,
.profoma-row span,
.profoma-info span,
.profoma-totals span,
.psd-receipt-body h2,
.psd-receipt-discount,
.psd-receipt-row span,
.psd-receipt-info span,
.psd-receipt-totals span {
    font-weight: 900 !important;
    color: #000 !important;
}

#order-modal .modal-footer,
#pay-modal .modal-footer,
#debtor-offline-receipt-modal .modal-footer,
#payment-offline-receipt-modal .modal-footer,
.receipt-modal .receipt-actions,
.profoma-receipt-footer,
.psd-receipt-footer {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)) !important;
    gap: 0.5rem !important;
}

#order-modal .modal-footer .btn,
#pay-modal .modal-footer .btn,
#debtor-offline-receipt-modal .modal-footer .btn,
#payment-offline-receipt-modal .modal-footer .btn,
.receipt-modal .receipt-actions .btn,
.profoma-receipt-footer .crs-btn,
.psd-receipt-footer .crs-btn {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
    padding: 0.62rem 0.45rem !important;
    font-size: 0.78rem !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    overflow: hidden !important;
}

@media (max-width: 420px) {
    #order-modal .modal-footer,
    #pay-modal .modal-footer,
    #debtor-offline-receipt-modal .modal-footer,
    #payment-offline-receipt-modal .modal-footer,
    .receipt-modal .receipt-actions,
    .profoma-receipt-footer,
    .psd-receipt-footer {
        grid-template-columns: 1fr !important;
    }
}

/* Responsive Table - Cards on Mobile */
@media (max-width: 768px) {
    .crs-table-wrapper {
        overflow-x: visible !important;
    }
    
    .crs-table,
    .crs-table-responsive {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    #crs-import-history #crs-history-table,
    #crs-stock-form #crs-stock-table,
    #crs-stock-history #crs-history-table,
    #crs-import-table {
        min-width: 0 !important;
    }
    
    .crs-table-responsive thead,
    .crs-table thead {
        display: none !important;
    }
    
    .crs-table-responsive tbody,
    .crs-table tbody {
        display: block !important;
    }
    
    .crs-table-responsive tbody tr,
    .crs-table tbody tr {
        display: block !important;
        margin-bottom: 1rem !important;
        background: rgba(255, 255, 255, 0.85) !important;
        border-radius: 12px !important;
        padding: 1rem !important;
        box-shadow: 0 4px 16px rgba(10, 22, 40, 0.12) !important;
        border: 2px solid rgba(30, 58, 95, 0.15) !important;
    }
    
    .crs-table-responsive tbody td,
    .crs-table tbody td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0.5rem 0 !important;
        border-bottom: 1px solid #e2e8f0 !important;
        text-align: right !important;
        font-size: 0.85rem !important;
    }
    
    .crs-table-responsive tbody td:last-child,
    .crs-table tbody td:last-child {
        border-bottom: none !important;
    }
    
    .crs-table-responsive tbody td::before,
    .crs-table tbody td::before {
        content: attr(data-label) !important;
        font-weight: 600 !important;
        color: #0a1628 !important;
        text-align: left !important;
        flex: 1 !important;
    }
    
    .crs-table tbody td input,
    .crs-table-responsive tbody td input {
        max-width: 100px !important;
        text-align: right !important;
    }
}

/* Header */
.crs-header {
    position: sticky;
    top: 0;
    z-index: 1200;
    padding: 0.75rem clamp(0.75rem, 2vw, 1.5rem);
    background: transparent;
    border-bottom: 0;
}

.crs-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1440px;
    margin: 0 auto;
    gap: 1rem;
    padding: 0.55rem 0.75rem;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(20, 96, 50, 0.18);
    border-radius: 999px;
    box-shadow: 0 14px 35px rgba(10, 22, 40, 0.14);
}

.crs-header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.crs-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--crs-primary);
}

.crs-logo img {
    width: 40px;
    height: 40px;
}

.crs-menu-toggle,
.crs-sidebar-close {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    border: 0;
    border-radius: 999px;
    background: var(--crs-primary);
    color: var(--crs-white);
    cursor: pointer;
    transition: var(--crs-transition);
    box-shadow: 0 8px 20px rgba(20, 96, 50, 0.24);
}

.crs-menu-toggle:hover,
.crs-menu-toggle.active,
.crs-sidebar-close:hover {
    background: var(--crs-accent);
    color: var(--crs-white);
    transform: translateY(-1px);
}

.crs-menu-toggle iconify-icon,
.crs-sidebar-close iconify-icon {
    font-size: 1.35rem;
}

.crs-header-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.crs-user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.crs-user-name {
    font-weight: 600;
    color: var(--crs-primary);
}

.crs-user-role {
    font-size: 0.75rem;
    color: var(--crs-gray);
}

.crs-datetime {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.crs-date {
    font-size: 0.875rem;
    color: var(--crs-dark);
}

.crs-time {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--crs-primary);
    font-family: 'JetBrains Mono', monospace;
}

.crs-sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 1190;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.crs-sidebar-menu {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1201;
    width: min(360px, 88vw);
    min-height: 100vh;
    background: var(--crs-white);
    box-shadow: 18px 0 45px rgba(10, 22, 40, 0.22);
    transform: translateX(-105%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
}

body.crs-sidebar-open {
    overflow: hidden !important;
}

body.crs-sidebar-open .crs-sidebar-overlay {
    opacity: 1;
    pointer-events: auto;
}

body.crs-sidebar-open .crs-sidebar-menu {
    transform: translateX(0);
}

.crs-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--crs-primary);
    color: var(--crs-white);
}

.crs-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    color: var(--crs-white) !important;
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.2;
}

.crs-sidebar-brand img {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 8px;
    background: var(--crs-white);
}

.crs-sidebar-brand span {
    color: var(--crs-white) !important;
}

.crs-sidebar-close {
    background: rgba(255, 255, 255, 0.14);
    box-shadow: none;
}

.crs-sidebar-nav {
    padding: 0.75rem;
}

.crs-sidebar-nav ul {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    list-style: none;
}

.crs-sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 48px;
    padding: 0.75rem 0.85rem;
    color: var(--crs-dark) !important;
    font-weight: 700;
    border-radius: var(--crs-radius-sm);
    transition: var(--crs-transition);
}

.crs-sidebar-nav a:hover,
.crs-sidebar-nav a:focus {
    background: rgba(20, 96, 50, 0.09);
    color: var(--crs-primary) !important;
}

.crs-sidebar-nav iconify-icon {
    flex: 0 0 1.25rem;
    font-size: 1.25rem;
    color: var(--crs-accent);
}

/* Footer */
.crs-footer {
    background: var(--crs-primary);
    color: var(--crs-white);
    padding: 1.5rem;
    text-align: center;
    margin-top: auto;
}

.crs-footer p {
    margin: 0.25rem 0;
    font-size: 0.875rem;
}

.crs-footer a {
    color: var(--crs-white);
    text-decoration: none;
}

/* Mobile Navigation - REMOVED ENTIRELY */
.crs-mobile-nav {
    display: none !important;
}

/* Scroll to Top */
.crs-scroll-top {
    position: fixed;
    bottom: 100px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: var(--crs-accent);
    color: var(--crs-white);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: var(--crs-transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.crs-scroll-top.visible {
    opacity: 1;
    visibility: visible;
}

.crs-scroll-top:hover {
    background: var(--crs-primary);
    transform: scale(1.1);
}

.crs-scroll-progress {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.crs-scroll-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 4;
}

.crs-scroll-indicator {
    fill: none;
    stroke: var(--crs-white);
    stroke-width: 4;
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    stroke-linecap: round;
}

/* Main Content */
.crs-main {
    min-height: calc(100vh - 200px);
    padding: 2rem 1.5rem;
    padding-bottom: 100px;
}

.crs-container {
    max-width: 1440px;
    margin: 0 auto;
}

/* Page Title */
.crs-page-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.crs-page-title h1 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
}

.crs-page-title h1 i {
    color: var(--crs-accent);
}

/* Dashboard Cards Grid */
.crs-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 1.5rem !important;
    margin-bottom: 2rem !important;
}

.crs-card,
body .crs-card,
.crs-main .crs-card {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-radius: 16px !important;
    border: 2px solid rgba(30, 58, 95, 0.2) !important;
    box-shadow: 
        0 8px 32px rgba(10, 22, 40, 0.15),
        0 4px 16px rgba(30, 58, 95, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    padding: 1.5rem !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    color: #0f172a !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
}

.crs-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 
        0 16px 48px rgba(10, 22, 40, 0.2),
        0 8px 24px rgba(30, 58, 95, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(37, 99, 235, 0.35) !important;
}

.crs-card-icon,
body .crs-card-icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.5rem !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.crs-card-icon iconify-icon,
body .crs-card-icon iconify-icon,
.crs-main .crs-card-icon iconify-icon {
    font-size: 1.5rem !important;
    color: #ffffff !important;
}

.crs-card-title,
body .crs-card-title {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: #0a1628 !important;
    margin: 0 !important;
}

.crs-card-description,
body .crs-card-description {
    font-size: 0.875rem !important;
    color: #64748b !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

.crs-card-btn {
    margin-top: auto !important;
}

/* Login Page */
.crs-login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: linear-gradient(135deg, var(--crs-primary) 0%, var(--crs-secondary) 100%);
}

.crs-login-box {
    background: var(--crs-glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--crs-radius);
    padding: 2.5rem;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.crs-login-logo {
    text-align: center;
    margin-bottom: 2rem;
}

.crs-login-logo img {
    width: 80px;
    height: 80px;
    margin-bottom: 1rem;
}

.crs-login-logo h1 {
    font-size: 1.5rem;
    margin: 0;
}

.crs-login-form .crs-form-group {
    margin-bottom: 1.5rem;
}

.crs-login-form .crs-btn {
    width: 100%;
    padding: 0.875rem;
    font-size: 1rem;
}

/* Password Toggle */
.crs-password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.crs-password-wrapper .crs-input {
    padding-right: 3rem;
    width: 100%;
}

.crs-password-toggle {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.crs-password-toggle:hover {
    color: #0a1628;
}

.crs-password-toggle i {
    font-size: 1rem;
}

/* Order Table */
.crs-order-table .crs-input {
    min-width: 80px;
    text-align: right;
}

.crs-order-total {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--crs-light);
    border-radius: var(--crs-radius-sm);
    margin-top: 1rem;
}

.crs-order-total-item {
    display: flex;
    flex-direction: column;
}

.crs-order-total-label {
    font-size: 0.75rem;
    color: var(--crs-gray);
    text-transform: uppercase;
}

.crs-order-total-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--crs-primary);
}

/* Payment Section */
.crs-payment-section {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--crs-light);
    border-radius: var(--crs-radius);
}

.crs-payment-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.crs-payment-method {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--crs-white);
    border: 2px solid var(--crs-border);
    border-radius: var(--crs-radius-sm);
    cursor: pointer;
    transition: var(--crs-transition);
}

.crs-payment-method:hover {
    border-color: var(--crs-accent);
}

.crs-payment-method.active {
    border-color: var(--crs-accent);
    background: rgba(208, 33, 38, 0.1);
}

.crs-payment-method input {
    display: none;
}

.crs-bank-options {
    display: none;
    margin-top: 1rem;
    padding: 1rem;
    background: var(--crs-white);
    border-radius: var(--crs-radius-sm);
}

.crs-bank-options.visible {
    display: block;
}

.crs-bank-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    cursor: pointer;
}

.crs-split-payment {
    display: none;
    margin-top: 1rem;
    gap: 1rem;
}

.crs-split-payment.visible {
    display: flex;
    flex-wrap: wrap;
}

/* Confirmation Modal */
.crs-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: var(--crs-transition);
}

.crs-modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.crs-modal {
    background: var(--crs-white);
    border-radius: var(--crs-radius);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.9);
    transition: var(--crs-transition);
}

.crs-modal-overlay.visible .crs-modal {
    transform: scale(1);
}

.crs-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid var(--crs-border);
}

.crs-modal-header h3 {
    margin: 0;
}

.crs-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--crs-gray);
}

.crs-modal-body {
    padding: 1.5rem;
}

.crs-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1.5rem;
    border-top: 1px solid var(--crs-border);
}

/* Debtor Cards */
.crs-debtor-card {
    cursor: pointer;
}

.crs-debtor-balance {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--crs-danger);
}

.crs-debtor-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--crs-primary);
}

/* Calendar */
.crs-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.crs-calendar-header {
    text-align: center;
    padding: 0.5rem;
    font-weight: 600;
    color: var(--crs-primary);
    background: var(--crs-light);
}

.crs-calendar-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background: var(--crs-white);
    border: 1px solid var(--crs-border);
    border-radius: var(--crs-radius-sm);
    cursor: pointer;
    transition: var(--crs-transition);
}

.crs-calendar-day:hover:not(.disabled) {
    border-color: var(--crs-accent);
}

.crs-calendar-day.today {
    border-color: var(--crs-accent);
    background: rgba(208, 33, 38, 0.1);
}

.crs-calendar-day.reconciled {
    background: var(--crs-success);
    color: var(--crs-white);
}

.crs-calendar-day.partial {
    background: var(--crs-warning);
    color: var(--crs-white);
}

.crs-calendar-day.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Filter Section */
.crs-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--crs-light);
    border-radius: var(--crs-radius-sm);
}

.crs-filter-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.crs-filter-group label {
    font-weight: 600;
    white-space: nowrap;
}

.crs-filter-group .crs-input,
.crs-filter-group .crs-select {
    width: auto;
    min-width: 150px;
}

/* Toast Notifications */
.crs-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.crs-toast {
    padding: 1rem 1.5rem;
    border-radius: var(--crs-radius-sm);
    color: var(--crs-white);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.crs-toast-success { background: var(--crs-success); }
.crs-toast-error { background: var(--crs-danger); }
.crs-toast-warning { background: var(--crs-warning); }
.crs-toast-info { background: var(--crs-accent); }

/* Loading */
.crs-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.crs-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--crs-border);
    border-top-color: var(--crs-accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Offline Banner */
.crs-offline-banner {
    position: fixed;
    bottom: 70px;
    left: 0;
    right: 0;
    background: var(--crs-warning);
    color: var(--crs-white);
    text-align: center;
    padding: 0.5rem;
    font-weight: 600;
    z-index: 999;
    display: none;
}

.crs-offline-banner.visible {
    display: block;
}

/* Admin Panel Section */
.crs-admin-section {
    background: var(--crs-glass-bg);
    border-radius: var(--crs-radius);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.crs-admin-section h3 {
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--crs-border);
}

/* Responsive */
@media (max-width: 1024px) {
    .crs-header-inner {
        max-width: 100%;
    }
    
    .crs-header-right {
        gap: 1rem;
    }
    
    .crs-user-info {
        display: none;
    }
}

/* Mobile styles - NO bottom nav padding */
@media (max-width: 768px) {
    .crs-main {
        padding-bottom: 20px;
    }
    
    .crs-scroll-top {
        bottom: 40px;
    }
    
    .crs-datetime {
        display: none;
    }
    
    .crs-logo span {
        display: none;
    }

    .crs-header {
        padding: 0.55rem;
    }

    .crs-header-inner {
        padding: 0.45rem 0.55rem;
    }

    .crs-menu-toggle {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }
    
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1.125rem; }
    
    .crs-cards-grid {
        grid-template-columns: 1fr;
    }
    
    .crs-page-title {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 540px) {
    .crs-header-right {
        gap: 0.5rem;
    }

    .crs-header-right .crs-btn span {
        display: none;
    }

    .crs-header-right .crs-btn {
        width: 40px;
        height: 40px;
        padding: 0 !important;
        border-radius: 999px !important;
    }
}

/* Bottom page menu */
.crs-main {
    padding-bottom: 128px !important;
}

.crs-footer {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-bottom: 102px !important;
    border-radius: 0 !important;
}

.crs-footer-inner {
    width: min(100%, 1440px) !important;
    margin: 0 auto !important;
    padding: 0 1.25rem !important;
}

.crs-mobile-nav {
    position: fixed !important;
    left: 50% !important;
    bottom: 14px !important;
    transform: translateX(-50%) !important;
    z-index: 10020 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    width: min(calc(100vw - 24px), 1120px) !important;
    min-height: 72px !important;
    max-width: calc(100vw - 24px) !important;
    padding: 0.48rem !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(20, 96, 50, 0.18) !important;
    border-radius: 20px !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(20, 96, 50, 0.55) rgba(226, 232, 240, 0.7) !important;
}

.crs-mobile-nav::-webkit-scrollbar {
    height: 5px !important;
}

.crs-mobile-nav::-webkit-scrollbar-track {
    background: rgba(226, 232, 240, 0.7) !important;
    border-radius: 999px !important;
}

.crs-mobile-nav::-webkit-scrollbar-thumb {
    background: rgba(20, 96, 50, 0.55) !important;
    border-radius: 999px !important;
}

.crs-mobile-nav-item {
    position: relative !important;
    flex: 0 0 88px !important;
    min-width: 88px !important;
    min-height: 56px !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.2rem !important;
    padding: 0.45rem 0.35rem !important;
    color: #146032 !important;
    text-decoration: none !important;
    border-radius: 15px !important;
    line-height: 1.05 !important;
    background: rgba(20, 96, 50, 0.05) !important;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease !important;
}

.crs-mobile-nav-item iconify-icon,
.crs-mobile-nav-item .crs-icon {
    color: currentColor !important;
    font-size: 1.18rem !important;
    line-height: 1 !important;
}

.crs-mobile-nav-item span {
    width: 100% !important;
    color: currentColor !important;
    font-size: 0.56rem !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

.crs-mobile-nav-item:hover,
.crs-mobile-nav-item:focus,
.crs-mobile-nav-item.is-active {
    color: #ffffff !important;
    background: #D02126 !important;
    box-shadow: 0 12px 26px rgba(208, 33, 38, 0.26) !important;
    transform: translateY(-8px) scale(1.06) !important;
}

.crs-mobile-nav-item:hover span,
.crs-mobile-nav-item:focus span,
.crs-mobile-nav-item.is-active span {
    color: #ffffff !important;
}

.crs-scroll-top {
    bottom: 106px !important;
    z-index: 10010 !important;
}

@media (max-width: 768px) {
    .crs-main {
        padding-bottom: 128px !important;
    }

    .crs-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.75rem !important;
    }

    .crs-card,
    .crs-dashboard-card {
        min-width: 0 !important;
    }

    .crs-mobile-nav {
        width: calc(100vw - 18px) !important;
        min-height: 68px !important;
        border-radius: 18px !important;
        padding: 0.42rem !important;
    }

    .crs-mobile-nav-item {
        flex-basis: 76px !important;
        min-width: 76px !important;
        min-height: 52px !important;
    }

    .crs-mobile-nav-item span {
        font-size: 0.5rem !important;
    }

    .crs-mobile-nav-item iconify-icon,
    .crs-mobile-nav-item .crs-icon {
        font-size: 1.08rem !important;
    }
}

/* ============================================
   GLOBAL FONT SIZE BOOST - Bigger fonts across site
   ============================================ */
body, html {
    font-size: 18px !important;
}

/* Increase all text elements */
.crs-main, .crs-main * {
    font-size: inherit;
}

/* Tables - Bigger text */
table, .crs-table {
    font-size: 1.1rem !important;
}

table th, table td,
.crs-table th, .crs-table td {
    font-size: 1.1rem !important;
    padding: 0.75rem 1rem !important;
}

/* Form inputs - Bigger */
input, select, textarea,
.crs-input, .crs-select, .crs-textarea {
    font-size: 1.1rem !important;
    padding: 0.75rem 1rem !important;
}

/* Labels bigger */
label, .crs-label {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
}

/* Buttons bigger */
button, .crs-btn {
    font-size: 1.1rem !important;
    padding: 0.75rem 1.25rem !important;
}

/* Cards and content */
.crs-card, .crs-glass {
    font-size: 1.1rem !important;
}

/* Debtor cards */
.crs-debtor-card .card-name {
    font-size: 1.3rem !important;
}

.crs-debtor-card .card-balance {
    font-size: 1.5rem !important;
}

.crs-debtor-card .card-phone {
    font-size: 1.1rem !important;
}

/* Order/History amounts */
.amount, .price, .total,
[class*="amount"], [class*="price"], [class*="total"] {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
}

/* Price displays */
.crs-price, .crs-amount, .crs-total,
.receipt-amount, .row-total, .grand-total {
    font-size: 1.3rem !important;
    font-weight: 800 !important;
}

/* Make headings even bigger */
h1 { font-size: 2.5rem !important; }
h2 { font-size: 2rem !important; }
h3 { font-size: 1.75rem !important; }
h4 { font-size: 1.5rem !important; }
h5 { font-size: 1.25rem !important; }
h6 { font-size: 1.1rem !important; }

/* Page titles */
.crs-page-title h1 {
    font-size: 2.2rem !important;
}

/* Navigation */
.crs-sidebar-nav a {
    font-size: 1rem !important;
}

/* Summary cards numbers */
.crs-summary-card .number,
.crs-stat-number, .stat-number {
    font-size: 2rem !important;
}

/* Admin panel */
.crs-admin-number {
    font-size: 2.5rem !important;
}

/* High contrast page headers and green-only action states */
.crs-main .page-header,
.crs-main .crs-page-header,
.crs-main .crs-page-header-custom,
.crs-main .crs-form-header,
.crs-main .crs-order-header,
.crs-main .crs-debtor-header,
.crs-main .crs-recon-header {
    background: linear-gradient(135deg, #146032, #185D30) !important;
    color: #ffffff !important;
    border-color: #146032 !important;
}

.crs-main .page-header h1,
.crs-main .crs-page-header h1,
.crs-main .crs-page-header-custom h1,
.crs-main .crs-form-header h1,
.crs-main .crs-order-header h1,
.crs-main .crs-debtor-header h1,
.crs-main .crs-recon-header h1 {
    color: #ffffff !important;
    font-size: clamp(1rem, 2vw, 1.35rem) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

.crs-main .page-header a,
.crs-main .page-header span,
.crs-main .page-header iconify-icon,
.crs-main .crs-page-header-custom a,
.crs-main .crs-page-header-custom span,
.crs-main .crs-page-header-custom iconify-icon,
.crs-main .crs-recon-header a,
.crs-main .crs-recon-header span,
.crs-main .crs-recon-header iconify-icon {
    color: #ffffff !important;
}

.crs-main .page-header .btn,
.crs-main .page-header .crs-btn,
.crs-main .crs-page-header-custom .btn,
.crs-main .crs-page-header-custom .crs-btn,
.crs-main .crs-recon-header .btn,
.crs-main .crs-recon-header .crs-btn,
.crs-main .btn-edit {
    background: #146032 !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
    font-size: 0.9rem !important;
}

.crs-main .page-header .btn:hover,
.crs-main .page-header .crs-btn:hover,
.crs-main .crs-page-header-custom .btn:hover,
.crs-main .crs-page-header-custom .crs-btn:hover,
.crs-main .crs-recon-header .btn:hover,
.crs-main .crs-recon-header .crs-btn:hover,
.crs-main .btn-edit:hover {
    background: #185D30 !important;
    color: #ffffff !important;
}

.crs-main .btn-white,
.crs-main .page-header .btn-white,
.crs-main .crs-page-header-custom .btn-white,
.crs-main .crs-recon-header .btn-white {
    background: #ffffff !important;
    color: #146032 !important;
    border-color: #ffffff !important;
}

.crs-main .crs-btn-history-custom,
.crs-main .crs-btn-history,
.crs-main .page-header .btn-white,
.crs-main .page-header .btn-outline {
    background: #ffffff !important;
    color: #146032 !important;
    border: 2px solid #ffffff !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

.crs-main .crs-btn-history-custom iconify-icon,
.crs-main .crs-btn-history iconify-icon,
.crs-main .page-header .btn-white iconify-icon,
.crs-main .page-header .btn-outline iconify-icon {
    color: #146032 !important;
}

/* Standalone template headers load their own CSS, so keep their action text readable too. */
.page-header,
.crs-page-header,
.crs-page-header-custom,
.crs-recon-header {
    background: linear-gradient(135deg, #146032, #185D30) !important;
    color: #ffffff !important;
    border-color: #146032 !important;
}

.page-header h1,
.crs-page-header h1,
.crs-page-header-custom h1,
.crs-recon-header h1 {
    color: #ffffff !important;
    font-size: clamp(1rem, 2vw, 1.35rem) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

.page-header .btn-white,
.page-header .btn-outline,
.page-header .crs-btn-history,
.page-header .crs-btn-history-custom,
.crs-page-header-custom .btn-white,
.crs-page-header-custom .btn-outline,
.crs-page-header-custom .crs-btn-history,
.crs-page-header-custom .crs-btn-history-custom,
.crs-recon-header .btn-white,
.crs-recon-header .btn-outline,
.crs-recon-header .crs-btn-history,
.crs-recon-header .crs-btn-history-custom {
    background: #ffffff !important;
    color: #146032 !important;
    border: 2px solid #ffffff !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
}

.page-header .btn-white:hover,
.page-header .btn-outline:hover,
.page-header .crs-btn-history:hover,
.page-header .crs-btn-history-custom:hover,
.crs-page-header-custom .btn-white:hover,
.crs-page-header-custom .btn-outline:hover,
.crs-page-header-custom .crs-btn-history:hover,
.crs-page-header-custom .crs-btn-history-custom:hover,
.crs-recon-header .btn-white:hover,
.crs-recon-header .btn-outline:hover,
.crs-recon-header .crs-btn-history:hover,
.crs-recon-header .crs-btn-history-custom:hover {
    background: #f8fafc !important;
    color: #146032 !important;
}

.page-header .btn-white iconify-icon,
.page-header .btn-outline iconify-icon,
.page-header .crs-btn-history iconify-icon,
.page-header .crs-btn-history-custom iconify-icon,
.crs-page-header-custom .btn-white iconify-icon,
.crs-page-header-custom .btn-outline iconify-icon,
.crs-page-header-custom .crs-btn-history iconify-icon,
.crs-page-header-custom .crs-btn-history-custom iconify-icon,
.crs-recon-header .btn-white iconify-icon,
.crs-recon-header .btn-outline iconify-icon,
.crs-recon-header .crs-btn-history iconify-icon,
.crs-recon-header .crs-btn-history-custom iconify-icon {
    color: #146032 !important;
}

/* Form legibility, visible placeholders, and red hover polish */
input,
select,
textarea,
.form-input,
.filter-input,
.crs-input,
.crs-select,
.crs-textarea,
.crs-psd-input,
.crs-psd-select {
    box-sizing: border-box !important;
    min-height: 46px !important;
    line-height: 1.35 !important;
    font-size: 1rem !important;
    padding: 0.65rem 0.85rem !important;
    color: #0f172a !important;
    text-align: left;
    overflow: visible !important;
}

select,
.crs-select,
.crs-psd-select {
    min-width: 160px !important;
    padding-right: 2.25rem !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

input::placeholder,
textarea::placeholder,
.form-input::placeholder,
.filter-input::placeholder,
.crs-input::placeholder,
.crs-textarea::placeholder,
.crs-psd-input::placeholder {
    color: #64748b !important;
    opacity: 1 !important;
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
}

table input,
table select,
table textarea,
.crs-table input,
.crs-table select,
.crs-table textarea {
    min-height: 42px !important;
    font-size: 0.95rem !important;
    padding: 0.5rem 0.65rem !important;
}

a:hover {
    color: #D02126 !important;
}

.crs-btn:hover:not(:disabled),
button:hover:not(:disabled),
.btn:hover:not(:disabled),
.crs-btn-history:hover,
.crs-btn-history-custom:hover,
.page-header .btn-white:hover,
.page-header .btn-outline:hover,
.page-header .crs-btn-history:hover,
.page-header .crs-btn-history-custom:hover,
.crs-main .crs-page-header-custom a.crs-btn-history-custom:hover,
.crs-main .crs-page-header-custom .crs-page-actions a:hover,
.crs-main .crs-page-title .crs-page-actions a:hover,
.crs-main .crs-page-title .crs-page-actions button:hover,
.crs-page-header .crs-btn:hover,
.crs-page-header-custom .btn:hover,
.crs-page-header-custom .crs-btn:hover,
.crs-card-btn:hover,
.crs-history-btn:hover,
.crs-save-btn:hover {
    background: #D02126 !important;
    background-color: #D02126 !important;
    border-color: #D02126 !important;
    color: #ffffff !important;
}

.crs-btn:hover:not(:disabled) iconify-icon,
button:hover:not(:disabled) iconify-icon,
.btn:hover:not(:disabled) iconify-icon,
.crs-btn-history:hover iconify-icon,
.crs-btn-history-custom:hover iconify-icon,
.page-header .btn-white:hover iconify-icon,
.page-header .btn-outline:hover iconify-icon,
.page-header .crs-btn-history:hover iconify-icon,
.page-header .crs-btn-history-custom:hover iconify-icon,
.crs-main .crs-page-header-custom a.crs-btn-history-custom:hover iconify-icon,
.crs-main .crs-page-header-custom .crs-page-actions a:hover iconify-icon,
.crs-main .crs-page-title .crs-page-actions a:hover iconify-icon,
.crs-main .crs-page-title .crs-page-actions button:hover iconify-icon,
.crs-card-btn:hover iconify-icon,
.crs-history-btn:hover iconify-icon,
.crs-save-btn:hover iconify-icon {
    color: #ffffff !important;
}

.crs-btn-history,
.crs-btn-history-custom,
.crs-page-actions .crs-btn,
.crs-page-actions .btn {
    min-width: max-content !important;
    color: #146032 !important;
    background: #ffffff !important;
    border: 2px solid #ffffff !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
}

.crs-main .crs-page-header-custom a.crs-btn-history-custom,
.crs-main .crs-page-header-custom .crs-page-actions a,
.crs-main .crs-page-title .crs-page-actions a,
.crs-main .crs-page-title .crs-page-actions button,
.crs-main .crs-form-header .crs-page-actions a,
.crs-main .crs-order-header .crs-page-actions a,
.crs-main .crs-debtor-header .crs-page-actions a {
    background: #ffffff !important;
    color: #146032 !important;
    border: 2px solid #ffffff !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    min-width: max-content !important;
}

.crs-page-actions .crs-btn iconify-icon,
.crs-page-actions .btn iconify-icon,
.crs-btn-history iconify-icon,
.crs-btn-history-custom iconify-icon,
.crs-main .crs-page-header-custom a.crs-btn-history-custom iconify-icon,
.crs-main .crs-page-header-custom .crs-page-actions a iconify-icon,
.crs-main .crs-page-title .crs-page-actions a iconify-icon,
.crs-main .crs-page-title .crs-page-actions button iconify-icon {
    color: #146032 !important;
}

.crs-import-proof-preview-sm {
    max-width: none !important;
}

.crs-import-proof-view {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    min-width: 92px !important;
    min-height: 38px !important;
    padding: 0.45rem 0.75rem !important;
    border: 2px solid rgba(20, 96, 50, 0.18) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #146032 !important;
    font-weight: 800 !important;
    font-size: 0.85rem !important;
    text-decoration: none !important;
    box-shadow: 0 6px 16px rgba(20, 96, 50, 0.12) !important;
}

.crs-import-proof-view:hover {
    background: #D02126 !important;
    border-color: #D02126 !important;
    color: #ffffff !important;
}

.crs-import-proof-view img {
    width: 24px !important;
    height: 24px !important;
    border-radius: 6px !important;
    object-fit: cover !important;
}

.crs-proof-modal {
    position: fixed;
    inset: 0;
    z-index: 17000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.72);
}

.crs-proof-modal.is-open {
    display: flex;
}

.crs-proof-modal-content {
    width: min(920px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow: hidden;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.38);
}

.crs-proof-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    background: #146032;
    color: #ffffff;
}

.crs-proof-modal-header h3 {
    margin: 0;
    color: #ffffff !important;
    font-size: 1rem !important;
}

.crs-proof-modal-close {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
}

.crs-proof-modal-body {
    padding: 1rem;
    max-height: calc(100vh - 7rem);
    overflow: auto;
    background: #f8fafc;
    text-align: center;
}

.crs-proof-modal-body img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
}

.crs-admin-users-table {
    min-width: 1420px !important;
    table-layout: fixed !important;
}

.crs-admin-users-table th,
.crs-admin-users-table td {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    vertical-align: top !important;
    font-size: 0.95rem !important;
}

.crs-admin-users-table th:nth-child(1),
.crs-admin-users-table td:nth-child(1) {
    width: 230px !important;
}

.crs-admin-users-table th:nth-child(2),
.crs-admin-users-table td:nth-child(2) {
    width: 230px !important;
}

.crs-admin-users-table th:nth-child(3),
.crs-admin-users-table td:nth-child(3),
.crs-admin-users-table th:nth-child(4),
.crs-admin-users-table td:nth-child(4) {
    width: 380px !important;
}

.crs-admin-users-table th:nth-child(5),
.crs-admin-users-table td:nth-child(5) {
    width: 150px !important;
}

.crs-admin-user-name {
    display: block;
    color: #0f172a;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.crs-admin-user-email {
    display: block;
    margin-top: 0.25rem;
    color: #64748b;
    font-size: 0.82rem !important;
    overflow-wrap: anywhere;
}

.crs-admin-access-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
    gap: 0.45rem !important;
    padding: 0.75rem !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
}

.crs-admin-access-grid label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.45rem !important;
    margin: 0 !important;
    color: #334155 !important;
    font-size: 0.9rem !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

.crs-admin-access-grid input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    margin-top: 0.1rem !important;
    flex: 0 0 18px !important;
}

.crs-admin-create-user-form {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 0.85rem !important;
    align-items: end !important;
    margin-bottom: 1.5rem !important;
}

.crs-admin-create-user-form label {
    display: block !important;
    margin-bottom: 0.3rem !important;
    color: #146032 !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
}

.crs-admin-role-select {
    width: 100% !important;
    min-width: 220px !important;
}

/* Final brand hover guard for page-local buttons and payment widgets */
html body .crs-main button:hover:not(:disabled),
html body .crs-main .btn:hover:not(:disabled),
html body .crs-main .crs-btn:hover:not(:disabled),
html body .crs-main input[type="submit"]:hover:not(:disabled),
html body .entry-content button:hover:not(:disabled),
html body .entry-content .btn:hover:not(:disabled),
html body .entry-content .crs-btn:hover:not(:disabled),
html body .entry-content input[type="submit"]:hover:not(:disabled),
html body .page-header .btn:hover:not(:disabled),
html body .page-header .crs-btn:hover:not(:disabled) {
    background: #D02126 !important;
    background-color: #D02126 !important;
    border-color: #D02126 !important;
    color: #ffffff !important;
}

html body .crs-main button:hover:not(:disabled) iconify-icon,
html body .crs-main .btn:hover:not(:disabled) iconify-icon,
html body .crs-main .crs-btn:hover:not(:disabled) iconify-icon,
html body .entry-content button:hover:not(:disabled) iconify-icon,
html body .entry-content .btn:hover:not(:disabled) iconify-icon,
html body .entry-content .crs-btn:hover:not(:disabled) iconify-icon {
    color: #ffffff !important;
}

html body .crs-main .payment-method:hover,
html body .crs-main .crs-payment-method:hover,
html body .entry-content .payment-method:hover,
html body .entry-content .crs-payment-method:hover,
html body .crs-main .bank-option:hover,
html body .entry-content .bank-option:hover {
    border-color: #D02126 !important;
    box-shadow: 0 0 0 3px rgba(208, 33, 38, 0.12) !important;
}

html body .crs-main .payment-method:hover:not(.selected),
html body .crs-main .crs-payment-method:hover:not(.active),
html body .entry-content .payment-method:hover:not(.selected),
html body .entry-content .crs-payment-method:hover:not(.active),
html body .crs-calendar-day:hover:not(.disabled) {
    background: rgba(208, 33, 38, 0.08) !important;
}

/* Site-wide table readability: keep columns readable and scroll wide ledgers. */
body .crs-table-wrapper,
body .table-wrapper,
body .crs-recon-table-wrapper,
body div[style*="overflow-x:auto"],
body div[style*="overflow-x: auto"] {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-inline: contain !important;
}

body .crs-table-wrapper > table,
body .table-wrapper > table,
body .crs-recon-table-wrapper > table,
body div[style*="overflow-x:auto"] > table,
body div[style*="overflow-x: auto"] > table,
body table.crs-table-responsive,
body table.crs-recon-table,
body table.history-table {
    width: max-content !important;
    min-width: max(100%, 980px) !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
}

body .crs-table-wrapper > table th,
body .crs-table-wrapper > table td,
body .table-wrapper > table th,
body .table-wrapper > table td,
body .crs-recon-table-wrapper > table th,
body .crs-recon-table-wrapper > table td,
body div[style*="overflow-x:auto"] > table th,
body div[style*="overflow-x:auto"] > table td,
body div[style*="overflow-x: auto"] > table th,
body div[style*="overflow-x: auto"] > table td,
body table.crs-recon-table th,
body table.crs-recon-table td,
body table.history-table th,
body table.history-table td {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    line-height: 1.35 !important;
    vertical-align: middle !important;
    font-size: 0.86rem !important;
    padding: 0.65rem 0.8rem !important;
}

body .crs-table-wrapper > table th,
body .table-wrapper > table th,
body .crs-recon-table-wrapper > table th,
body div[style*="overflow-x:auto"] > table th,
body div[style*="overflow-x: auto"] > table th,
body table.crs-recon-table th,
body table.history-table th {
    font-size: 0.84rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    background: #146032 !important;
    background-color: #146032 !important;
}

body .crs-table-wrapper > table input,
body .table-wrapper > table input,
body .crs-recon-table-wrapper > table input,
body div[style*="overflow-x:auto"] > table input,
body div[style*="overflow-x: auto"] > table input {
    min-height: 42px !important;
    font-size: 0.86rem !important;
}

body .crs-table-wrapper > table input[type="number"],
body .table-wrapper > table input[type="number"],
body .crs-recon-table-wrapper > table input[type="number"],
body div[style*="overflow-x:auto"] > table input[type="number"],
body div[style*="overflow-x: auto"] > table input[type="number"] {
    width: 104px !important;
    min-width: 104px !important;
    max-width: none !important;
    text-align: right !important;
}

body .crs-table-wrapper > table input[type="text"],
body .crs-table-wrapper > table select,
body .crs-table-wrapper > table textarea,
body .table-wrapper > table input[type="text"],
body .table-wrapper > table select,
body .table-wrapper > table textarea,
body div[style*="overflow-x:auto"] > table input[type="text"],
body div[style*="overflow-x:auto"] > table select,
body div[style*="overflow-x:auto"] > table textarea,
body div[style*="overflow-x: auto"] > table input[type="text"],
body div[style*="overflow-x: auto"] > table select,
body div[style*="overflow-x: auto"] > table textarea {
    min-width: 150px !important;
    max-width: none !important;
}

body .crs-table-wrapper > table button,
body .table-wrapper > table button,
body .crs-recon-table-wrapper > table button,
body div[style*="overflow-x:auto"] > table button,
body div[style*="overflow-x: auto"] > table button,
body .crs-table-wrapper > table .btn,
body .table-wrapper > table .btn {
    white-space: nowrap !important;
    min-width: max-content !important;
}

body #crs-import-history #crs-history-table {
    min-width: 1400px !important;
    table-layout: fixed !important;
}

body #crs-import-history #crs-history-table th:nth-child(1),
body #crs-import-history #crs-history-table td:nth-child(1) { width: 130px !important; }
body #crs-import-history #crs-history-table th:nth-child(2),
body #crs-import-history #crs-history-table td:nth-child(2) { width: 115px !important; }
body #crs-import-history #crs-history-table th:nth-child(3),
body #crs-import-history #crs-history-table td:nth-child(3) { width: 190px !important; text-align: left !important; }
body #crs-import-history #crs-history-table th:nth-child(4),
body #crs-import-history #crs-history-table td:nth-child(4) { width: 120px !important; }
body #crs-import-history #crs-history-table th:nth-child(5),
body #crs-import-history #crs-history-table td:nth-child(5),
body #crs-import-history #crs-history-table th:nth-child(6),
body #crs-import-history #crs-history-table td:nth-child(6) { width: 170px !important; }
body #crs-import-history #crs-history-table th:nth-child(7),
body #crs-import-history #crs-history-table td:nth-child(7) { width: 210px !important; text-align: left !important; }
body #crs-import-history #crs-history-table th:nth-child(8),
body #crs-import-history #crs-history-table td:nth-child(8) { width: 135px !important; }
body #crs-import-history #crs-history-table th:nth-child(9),
body #crs-import-history #crs-history-table td:nth-child(9) { width: 190px !important; text-align: left !important; }

body #crs-stock-history #crs-history-table {
    min-width: 1660px !important;
    table-layout: fixed !important;
}

body #crs-stock-history #crs-history-table th:nth-child(1),
body #crs-stock-history #crs-history-table td:nth-child(1) { width: 130px !important; text-align: left !important; }
body #crs-stock-history #crs-history-table th:nth-child(2),
body #crs-stock-history #crs-history-table td:nth-child(2) { width: 210px !important; text-align: left !important; }
body #crs-stock-history #crs-history-table th:not(:nth-child(1)):not(:nth-child(2)),
body #crs-stock-history #crs-history-table td:not(:nth-child(1)):not(:nth-child(2)) { width: 125px !important; text-align: center !important; }

body #crs-stock-form #crs-stock-table {
    min-width: 1660px !important;
    table-layout: fixed !important;
}

body #crs-stock-form #crs-stock-table th:first-child,
body #crs-stock-form #crs-stock-table td:first-child {
    width: 210px !important;
    min-width: 210px !important;
}

body #crs-stock-form #crs-stock-table th:not(:first-child),
body #crs-stock-form #crs-stock-table td:not(:first-child) {
    width: 132px !important;
    min-width: 132px !important;
}

body #crs-import-table,
body #crs-not-supplied-table,
body #crs-supplied-table,
body #psd-order-table {
    min-width: 1120px !important;
}

body .crs-psd-table {
    min-width: 1420px !important;
    table-layout: fixed !important;
}

body .crs-admin-users-table {
    min-width: 1560px !important;
}

body .crs-recon-table {
    min-width: 1250px !important;
}

@media (max-width: 768px) {
    body .crs-table-wrapper,
    body .table-wrapper,
    body .crs-recon-table-wrapper,
    body div[style*="overflow-x:auto"],
    body div[style*="overflow-x: auto"] {
        overflow-x: auto !important;
        overflow-y: visible !important;
    }

    body .crs-table-wrapper > table,
    body .table-wrapper > table,
    body .crs-recon-table-wrapper > table,
    body div[style*="overflow-x:auto"] > table,
    body div[style*="overflow-x: auto"] > table,
    body table.crs-table,
    body table.crs-table-responsive,
    body table.crs-recon-table,
    body table.history-table {
        display: table !important;
        width: max-content !important;
        min-width: max(100%, 980px) !important;
    }

    body .crs-table-wrapper > table thead,
    body .table-wrapper > table thead,
    body .crs-recon-table-wrapper > table thead,
    body table.crs-table thead,
    body table.crs-table-responsive thead {
        display: table-header-group !important;
    }

    body .crs-table-wrapper > table tbody,
    body .table-wrapper > table tbody,
    body .crs-recon-table-wrapper > table tbody,
    body table.crs-table tbody,
    body table.crs-table-responsive tbody {
        display: table-row-group !important;
    }

    body .crs-table-wrapper > table tr,
    body .table-wrapper > table tr,
    body .crs-recon-table-wrapper > table tr,
    body table.crs-table tr,
    body table.crs-table-responsive tr {
        display: table-row !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    body .crs-table-wrapper > table th,
    body .crs-table-wrapper > table td,
    body .table-wrapper > table th,
    body .table-wrapper > table td,
    body .crs-recon-table-wrapper > table th,
    body .crs-recon-table-wrapper > table td,
    body table.crs-table th,
    body table.crs-table td,
    body table.crs-table-responsive th,
    body table.crs-table-responsive td {
        display: table-cell !important;
        white-space: nowrap !important;
        text-align: left !important;
        padding: 0.65rem 0.8rem !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }

    body .crs-table-wrapper > table td::before,
    body .table-wrapper > table td::before,
    body .crs-recon-table-wrapper > table td::before,
    body table.crs-table td::before,
    body table.crs-table-responsive td::before {
        content: none !important;
        display: none !important;
    }
}

/* Print Styles */
@media print {
    .crs-header,
    .crs-sidebar-menu,
    .crs-sidebar-overlay,
    .crs-footer,
    .crs-mobile-nav,
    .crs-scroll-top,
    .crs-btn {
        display: none !important;
    }
    
    .crs-main {
        padding: 0;
    }
    
    .crs-glass {
        box-shadow: none;
        border: 1px solid #000;
    }
}

/* Full-width, no-side-scroll application layout */
@media screen {
    html,
    body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body .crs-header,
    body .crs-main,
    body .crs-footer {
        width: 100vw !important;
        max-width: none !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
    }

    body .crs-main {
        padding-left: clamp(0.35rem, 0.9vw, 1rem) !important;
        padding-right: clamp(0.35rem, 0.9vw, 1rem) !important;
    }

    body .crs-header-inner,
    body .crs-container,
    body .crs-footer-inner,
    body .crs-page-title,
    body .crs-glass,
    body .crs-card,
    body .crs-admin-section,
    body .crs-form-card {
        width: 100% !important;
        max-width: none !important;
    }

    body .crs-container {
        padding-left: clamp(0.25rem, 0.75vw, 0.9rem) !important;
        padding-right: clamp(0.25rem, 0.75vw, 0.9rem) !important;
    }

    body .crs-table-wrapper,
    body .table-wrapper,
    body .crs-recon-table-wrapper,
    body div[style*="overflow-x:auto"],
    body div[style*="overflow-x: auto"] {
        max-width: 100% !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }

    body .crs-table-wrapper > table,
    body .table-wrapper > table,
    body .crs-recon-table-wrapper > table,
    body div[style*="overflow-x:auto"] > table,
    body div[style*="overflow-x: auto"] > table,
    body table.crs-table,
    body table.crs-table-responsive,
    body table.crs-recon-table,
    body table.history-table,
    body #crs-import-history #crs-history-table,
    body #crs-stock-history #crs-history-table,
    body #crs-stock-form #crs-stock-table,
    body #crs-import-table,
    body #crs-not-supplied-table,
    body #crs-supplied-table,
    body #psd-order-table,
    body .crs-psd-table,
    body .crs-admin-users-table {
        display: table !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        table-layout: fixed !important;
        border-collapse: collapse !important;
    }

    body .crs-table-wrapper > table thead,
    body .table-wrapper > table thead,
    body .crs-recon-table-wrapper > table thead,
    body table.crs-table thead,
    body table.crs-table-responsive thead {
        display: table-header-group !important;
    }

    body .crs-table-wrapper > table tbody,
    body .table-wrapper > table tbody,
    body .crs-recon-table-wrapper > table tbody,
    body table.crs-table tbody,
    body table.crs-table-responsive tbody {
        display: table-row-group !important;
    }

    body .crs-table-wrapper > table tr,
    body .table-wrapper > table tr,
    body .crs-recon-table-wrapper > table tr,
    body table.crs-table tr,
    body table.crs-table-responsive tr {
        display: table-row !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    body .crs-table-wrapper > table th,
    body .crs-table-wrapper > table td,
    body .table-wrapper > table th,
    body .table-wrapper > table td,
    body .crs-recon-table-wrapper > table th,
    body .crs-recon-table-wrapper > table td,
    body div[style*="overflow-x:auto"] > table th,
    body div[style*="overflow-x:auto"] > table td,
    body div[style*="overflow-x: auto"] > table th,
    body div[style*="overflow-x: auto"] > table td,
    body table.crs-table th,
    body table.crs-table td,
    body table.crs-table-responsive th,
    body table.crs-table-responsive td,
    body table.crs-recon-table th,
    body table.crs-recon-table td,
    body table.history-table th,
    body table.history-table td {
        display: table-cell !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        hyphens: auto !important;
        text-align: center !important;
        vertical-align: middle !important;
        font-size: clamp(0.48rem, 0.64vw, 0.78rem) !important;
        line-height: 1.2 !important;
        padding: clamp(0.25rem, 0.43vw, 0.56rem) !important;
    }

    body .crs-table-wrapper > table td::before,
    body .table-wrapper > table td::before,
    body .crs-recon-table-wrapper > table td::before,
    body table.crs-table td::before,
    body table.crs-table-responsive td::before {
        content: none !important;
        display: none !important;
    }

    body .crs-table-wrapper > table th,
    body .table-wrapper > table th,
    body .crs-recon-table-wrapper > table th,
    body table.crs-table th,
    body table.crs-table-responsive th,
    body table.crs-recon-table th,
    body table.history-table th {
        font-weight: 800 !important;
    }

    body .crs-table-wrapper > table input,
    body .crs-table-wrapper > table select,
    body .crs-table-wrapper > table textarea,
    body .table-wrapper > table input,
    body .table-wrapper > table select,
    body .table-wrapper > table textarea,
    body .crs-recon-table-wrapper > table input,
    body .crs-recon-table-wrapper > table select,
    body .crs-recon-table-wrapper > table textarea,
    body table.crs-table input,
    body table.crs-table select,
    body table.crs-table textarea,
    body table.crs-table-responsive input,
    body table.crs-table-responsive select,
    body table.crs-table-responsive textarea {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 30px !important;
        box-sizing: border-box !important;
        font-size: clamp(0.5rem, 0.66vw, 0.8rem) !important;
        line-height: 1.2 !important;
        padding: clamp(0.22rem, 0.38vw, 0.48rem) !important;
    }

    body .crs-table-wrapper > table input[type="number"],
    body .table-wrapper > table input[type="number"],
    body table.crs-table input[type="number"],
    body table.crs-table-responsive input[type="number"] {
        text-align: right !important;
    }

    body .crs-table-wrapper > table button,
    body .table-wrapper > table button,
    body .crs-recon-table-wrapper > table button,
    body table.crs-table button,
    body table.crs-table-responsive button,
    body table.history-table button,
    body .crs-table-wrapper > table .crs-btn,
    body .table-wrapper > table .crs-btn,
    body .crs-table-wrapper > table .btn,
    body .table-wrapper > table .btn {
        min-width: 0 !important;
        max-width: 100% !important;
        width: auto !important;
        white-space: normal !important;
        font-size: clamp(0.48rem, 0.62vw, 0.74rem) !important;
        line-height: 1.15 !important;
        padding: clamp(0.25rem, 0.38vw, 0.5rem) !important;
    }

    body .crs-table-wrapper > table th:first-child,
    body .crs-table-wrapper > table td:first-child,
    body .table-wrapper > table th:first-child,
    body .table-wrapper > table td:first-child,
    body table.crs-table th:first-child,
    body table.crs-table td:first-child,
    body table.history-table th:first-child,
    body table.history-table td:first-child {
        text-align: left !important;
    }

    body .crs-import-actions {
        justify-content: center !important;
        gap: 0.22rem !important;
    }

    body .crs-import-action-btn span {
        font-size: inherit !important;
    }

    body .crs-import-proof-view {
        max-width: 100% !important;
        gap: 0.2rem !important;
        padding: 0.22rem !important;
        white-space: normal !important;
    }

    body .crs-import-proof-view img {
        width: 28px !important;
        height: 28px !important;
        flex: 0 0 28px !important;
    }

    @media (max-width: 900px) {
        body .crs-main {
            padding-left: 0.25rem !important;
            padding-right: 0.25rem !important;
        }

        body .crs-container {
            padding-left: 0.2rem !important;
            padding-right: 0.2rem !important;
        }

        body .crs-glass,
        body .crs-card,
        body .crs-admin-section,
        body .crs-page-title {
            padding-left: 0.45rem !important;
            padding-right: 0.45rem !important;
        }

        body .crs-table-wrapper > table th,
        body .crs-table-wrapper > table td,
        body .table-wrapper > table th,
        body .table-wrapper > table td,
        body .crs-recon-table-wrapper > table th,
        body .crs-recon-table-wrapper > table td,
        body table.crs-table th,
        body table.crs-table td,
        body table.crs-table-responsive th,
        body table.crs-table-responsive td,
        body table.history-table th,
        body table.history-table td {
            font-size: clamp(0.42rem, 1.45vw, 0.62rem) !important;
            padding: 0.25rem 0.16rem !important;
        }

        body .crs-table-wrapper > table input,
        body .crs-table-wrapper > table select,
        body .crs-table-wrapper > table textarea,
        body .table-wrapper > table input,
        body .table-wrapper > table select,
        body .table-wrapper > table textarea,
        body table.crs-table input,
        body table.crs-table select,
        body table.crs-table textarea,
        body table.crs-table-responsive input,
        body table.crs-table-responsive select,
        body table.crs-table-responsive textarea {
            min-height: 26px !important;
            font-size: clamp(0.42rem, 1.45vw, 0.62rem) !important;
            padding: 0.18rem 0.12rem !important;
        }

        body .crs-table-wrapper > table button,
        body .table-wrapper > table button,
        body table.crs-table button,
        body table.crs-table-responsive button,
        body table.history-table button {
            font-size: clamp(0.4rem, 1.35vw, 0.58rem) !important;
            padding: 0.2rem 0.12rem !important;
        }
    }

    @media (max-width: 520px) {
        body .crs-table-wrapper > table th,
        body .crs-table-wrapper > table td,
        body .table-wrapper > table th,
        body .table-wrapper > table td,
        body .crs-recon-table-wrapper > table th,
        body .crs-recon-table-wrapper > table td,
        body table.crs-table th,
        body table.crs-table td,
        body table.crs-table-responsive th,
        body table.crs-table-responsive td,
        body table.history-table th,
        body table.history-table td {
            font-size: 0.4rem !important;
            line-height: 1.15 !important;
            padding: 0.2rem 0.1rem !important;
        }

        body .crs-table-wrapper > table input,
        body .crs-table-wrapper > table select,
        body .crs-table-wrapper > table textarea,
        body .table-wrapper > table input,
        body .table-wrapper > table select,
        body .table-wrapper > table textarea,
        body table.crs-table input,
        body table.crs-table select,
        body table.crs-table textarea,
        body table.crs-table-responsive input,
        body table.crs-table-responsive select,
        body table.crs-table-responsive textarea {
            font-size: 0.4rem !important;
            min-height: 23px !important;
            padding: 0.12rem 0.08rem !important;
        }

        body .crs-import-proof-view img {
            width: 20px !important;
            height: 20px !important;
            flex-basis: 20px !important;
        }
    }
}

/* Final table readability correction: 12px minimum fonts, readable inputs, and safe stock scrolling. */
html body .crs-table-wrapper,
html body .table-wrapper,
html body .crs-recon-table-wrapper,
html body div[style*="overflow-x:auto"],
html body div[style*="overflow-x: auto"] {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-inline: contain !important;
}

html body table.crs-table,
html body table.crs-table-responsive,
html body .crs-table-wrapper > table,
html body .table-wrapper > table,
html body .crs-recon-table-wrapper > table,
html body table.history-table {
    border-collapse: collapse !important;
    font-size: 12px !important;
}

html body table.crs-table th,
html body table.crs-table td,
html body table.crs-table-responsive th,
html body table.crs-table-responsive td,
html body .crs-table-wrapper > table th,
html body .crs-table-wrapper > table td,
html body .table-wrapper > table th,
html body .table-wrapper > table td,
html body .crs-recon-table-wrapper > table th,
html body .crs-recon-table-wrapper > table td,
html body table.history-table th,
html body table.history-table td {
    font-size: 12px !important;
    line-height: 1.32 !important;
    padding: 8px 8px !important;
    vertical-align: middle !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
}

html body table.crs-table th,
html body table.crs-table-responsive th,
html body .crs-table-wrapper > table th,
html body .table-wrapper > table th,
html body .crs-recon-table-wrapper > table th,
html body table.history-table th {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    background: #146032 !important;
    background-color: #146032 !important;
}

html body table.crs-table input,
html body table.crs-table select,
html body table.crs-table textarea,
html body table.crs-table-responsive input,
html body table.crs-table-responsive select,
html body table.crs-table-responsive textarea,
html body .crs-table-wrapper > table input,
html body .crs-table-wrapper > table select,
html body .crs-table-wrapper > table textarea,
html body .table-wrapper > table input,
html body .table-wrapper > table select,
html body .table-wrapper > table textarea,
html body .crs-recon-table-wrapper > table input,
html body .crs-recon-table-wrapper > table select,
html body .crs-recon-table-wrapper > table textarea {
    font-size: 12px !important;
    line-height: 1.25 !important;
    min-height: 38px !important;
    padding: 7px 8px !important;
    box-sizing: border-box !important;
}

html body table.crs-table button,
html body table.crs-table-responsive button,
html body .crs-table-wrapper > table button,
html body .table-wrapper > table button,
html body .crs-recon-table-wrapper > table button,
html body table.history-table button,
html body .crs-table-wrapper > table .crs-btn,
html body .table-wrapper > table .crs-btn,
html body .crs-table-wrapper > table .btn,
html body .table-wrapper > table .btn {
    font-size: 12px !important;
    line-height: 1.2 !important;
    padding: 7px 10px !important;
}

html body #crs-stock-form .crs-table-wrapper {
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding-bottom: 10px !important;
}

html body #crs-stock-form #crs-stock-table {
    width: 100% !important;
    min-width: 1220px !important;
    max-width: none !important;
    table-layout: fixed !important;
}

html body #crs-stock-form #crs-stock-table th,
html body #crs-stock-form #crs-stock-table td {
    font-size: 12px !important;
    padding: 8px 7px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: center !important;
}

html body #crs-stock-form #crs-stock-table th:first-child,
html body #crs-stock-form #crs-stock-table td:first-child {
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
    text-align: left !important;
}

html body #crs-stock-form #crs-stock-table th:nth-child(8),
html body #crs-stock-form #crs-stock-table td:nth-child(8),
html body #crs-stock-form #crs-stock-table th:nth-child(9),
html body #crs-stock-form #crs-stock-table td:nth-child(9) {
    width: 138px !important;
    min-width: 138px !important;
}

html body #crs-stock-form #crs-stock-table input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 12px !important;
    min-height: 40px !important;
    padding: 7px 8px !important;
}

html body #crs-stock-form #crs-stock-table input[type="text"] {
    text-align: right !important;
}

@media (max-width: 900px) {
    html body table.crs-table th,
    html body table.crs-table td,
    html body table.crs-table-responsive th,
    html body table.crs-table-responsive td,
    html body .crs-table-wrapper > table th,
    html body .crs-table-wrapper > table td,
    html body .table-wrapper > table th,
    html body .table-wrapper > table td,
    html body .crs-recon-table-wrapper > table th,
    html body .crs-recon-table-wrapper > table td,
    html body table.history-table th,
    html body table.history-table td,
    html body table.crs-table input,
    html body table.crs-table select,
    html body table.crs-table textarea,
    html body table.crs-table-responsive input,
    html body table.crs-table-responsive select,
    html body table.crs-table-responsive textarea,
    html body .crs-table-wrapper > table input,
    html body .crs-table-wrapper > table select,
    html body .crs-table-wrapper > table textarea,
    html body .table-wrapper > table input,
    html body .table-wrapper > table select,
    html body .table-wrapper > table textarea {
        font-size: 12px !important;
    }
}

/* Final packing-store table isolation and full bottom-menu removal. */
html body .crs-packing-table-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-inline: contain !important;
}

html body table.crs-packing-store-table {
    width: max-content !important;
    min-width: 1720px !important;
    max-width: none !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
}

html body table.crs-packing-store-table th,
html body table.crs-packing-store-table td {
    box-sizing: border-box !important;
    overflow: hidden !important;
    vertical-align: middle !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
}

html body table.crs-packing-store-table th:nth-child(1),
html body table.crs-packing-store-table td:nth-child(1) {
    width: 190px !important;
    min-width: 190px !important;
    max-width: 190px !important;
    text-align: left !important;
}

html body table.crs-packing-store-table th:nth-child(2),
html body table.crs-packing-store-table td:nth-child(2),
html body table.crs-packing-store-table th:nth-child(12),
html body table.crs-packing-store-table td:nth-child(12) {
    width: 105px !important;
    min-width: 105px !important;
    max-width: 105px !important;
}

html body table.crs-packing-store-table th:nth-child(3),
html body table.crs-packing-store-table td:nth-child(3),
html body table.crs-packing-store-table th:nth-child(4),
html body table.crs-packing-store-table td:nth-child(4),
html body table.crs-packing-store-table th:nth-child(8),
html body table.crs-packing-store-table td:nth-child(8),
html body table.crs-packing-store-table th:nth-child(9),
html body table.crs-packing-store-table td:nth-child(9) {
    width: 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;
}

html body table.crs-packing-store-table th:nth-child(5),
html body table.crs-packing-store-table td:nth-child(5),
html body table.crs-packing-store-table th:nth-child(6),
html body table.crs-packing-store-table td:nth-child(6),
html body table.crs-packing-store-table th:nth-child(7),
html body table.crs-packing-store-table td:nth-child(7),
html body table.crs-packing-store-table th:nth-child(10),
html body table.crs-packing-store-table td:nth-child(10) {
    width: 145px !important;
    min-width: 145px !important;
    max-width: 145px !important;
}

html body table.crs-packing-store-table th:nth-child(11),
html body table.crs-packing-store-table td:nth-child(11) {
    width: 175px !important;
    min-width: 175px !important;
    max-width: 175px !important;
}

html body table.crs-packing-store-table .product-name {
    width: 190px !important;
    min-width: 190px !important;
    max-width: 190px !important;
    text-align: left !important;
}

html body table.crs-packing-store-table input,
html body table.crs-packing-store-table select,
html body table.crs-packing-store-table textarea {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    min-height: 40px !important;
    padding: 7px 8px !important;
}

html body table.crs-packing-store-table input[type="number"] {
    text-align: right !important;
}

html body table.crs-packing-store-table td:nth-child(11) input {
    text-align: left !important;
}

html body .crs-mobile-nav,
html body #crs-mobile-nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

html body .crs-main {
    padding-bottom: clamp(1rem, 2vw, 2rem) !important;
}

html body .crs-footer {
    margin-bottom: 0 !important;
}

html body .crs-scroll-top {
    bottom: 24px !important;
}

/* Final mobile stability and readable table layer.
   Android Chrome can produce horizontal repaint artifacts when sticky blurred
   surfaces and heavy card shadows overlap during scroll, so mobile uses solid
   surfaces and contained scrolling tables. */
@media (max-width: 900px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        background: #ffffff !important;
        font-size: 16px !important;
    }

    html body .crs-header,
    html body .crs-main,
    html body .crs-footer {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    html body .crs-main {
        min-height: auto !important;
        padding: 0.75rem 0.7rem 1.25rem !important;
        overflow-x: hidden !important;
        isolation: isolate !important;
    }

    html body .crs-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: hidden !important;
    }

    html body .crs-header {
        padding: 0.55rem 0.65rem !important;
        background: #ffffff !important;
    }

    html body .crs-header-inner,
    html body .crs-glass,
    html body .crs-card,
    html body .crs-home-card,
    html body .crs-admin-section,
    html body .crs-form-card,
    html body .crs-footer {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
        transform: none !important;
        animation: none !important;
        will-change: auto !important;
        contain: paint !important;
    }

    html body .crs-header-inner {
        background: #ffffff !important;
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.14) !important;
        border: 1px solid rgba(20, 96, 50, 0.16) !important;
    }

    html body .crs-page-title h1,
    html body .crs-main .crs-page-title h1 {
        background: none !important;
        background-clip: initial !important;
        -webkit-background-clip: initial !important;
        -webkit-text-fill-color: #146032 !important;
        color: #146032 !important;
        animation: none !important;
    }

    html body .crs-page-title {
        margin-bottom: 1rem !important;
        padding: 0 !important;
    }

    html body .crs-page-title img {
        width: 42px !important;
        height: 42px !important;
    }

    html body .crs-home-grid,
    html body .crs-cards-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.85rem !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0.25rem 0 0 !important;
        overflow: visible !important;
    }

    html body .crs-home-card,
    html body .crs-card {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        background: #ffffff !important;
        border: 1px solid rgba(20, 96, 50, 0.18) !important;
        border-radius: 14px !important;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1) !important;
        padding: 0.85rem !important;
        overflow: hidden !important;
    }

    html body .crs-home-card:hover,
    html body .crs-home-card:focus,
    html body .crs-card:hover,
    html body .crs-card:focus {
        transform: none !important;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12) !important;
        border-color: rgba(208, 33, 38, 0.35) !important;
    }

    html body .crs-home-card-icon,
    html body .crs-card-icon {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border-radius: 10px !important;
        margin-bottom: 0.65rem !important;
        box-shadow: none !important;
    }

    html body .crs-home-card-icon iconify-icon,
    html body .crs-card-icon iconify-icon {
        font-size: 1.15rem !important;
    }

    html body .crs-home-card-title,
    html body .crs-card-title {
        font-size: 0.86rem !important;
        line-height: 1.2 !important;
        margin-bottom: 0.35rem !important;
        overflow-wrap: anywhere !important;
        color: #146032 !important;
    }

    html body .crs-home-card-desc,
    html body .crs-card-description {
        font-size: 0.68rem !important;
        line-height: 1.35 !important;
        margin-bottom: 0.75rem !important;
        color: #64748b !important;
    }

    html body .crs-home-card-btn,
    html body .crs-card-btn {
        min-height: 34px !important;
        padding: 0.45rem 0.55rem !important;
        font-size: 0.7rem !important;
        line-height: 1.15 !important;
        border-radius: 8px !important;
    }

    html body .crs-table-wrapper,
    html body .table-wrapper,
    html body .crs-recon-table-wrapper,
    html body div[style*="overflow-x:auto"],
    html body div[style*="overflow-x: auto"] {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-inline: contain !important;
        padding-bottom: 0.55rem !important;
        border-radius: 12px !important;
        scrollbar-width: thin !important;
        scrollbar-color: #146032 #e2e8f0 !important;
    }

    html body .crs-table-wrapper::-webkit-scrollbar,
    html body .table-wrapper::-webkit-scrollbar,
    html body .crs-recon-table-wrapper::-webkit-scrollbar {
        height: 8px !important;
    }

    html body .crs-table-wrapper::-webkit-scrollbar-track,
    html body .table-wrapper::-webkit-scrollbar-track,
    html body .crs-recon-table-wrapper::-webkit-scrollbar-track {
        background: #e2e8f0 !important;
        border-radius: 999px !important;
    }

    html body .crs-table-wrapper::-webkit-scrollbar-thumb,
    html body .table-wrapper::-webkit-scrollbar-thumb,
    html body .crs-recon-table-wrapper::-webkit-scrollbar-thumb {
        background: #146032 !important;
        border-radius: 999px !important;
    }

    html body .crs-table-wrapper > table,
    html body .table-wrapper > table,
    html body .crs-recon-table-wrapper > table,
    html body div[style*="overflow-x:auto"] > table,
    html body div[style*="overflow-x: auto"] > table,
    html body table.crs-table,
    html body table.crs-table-responsive,
    html body table.crs-recon-table,
    html body table.history-table {
        display: table !important;
        width: max-content !important;
        min-width: max(100%, 760px) !important;
        max-width: none !important;
        table-layout: auto !important;
        border-collapse: collapse !important;
    }

    html body .crs-table-wrapper > table thead,
    html body .table-wrapper > table thead,
    html body .crs-recon-table-wrapper > table thead,
    html body table.crs-table thead,
    html body table.crs-table-responsive thead {
        display: table-header-group !important;
    }

    html body .crs-table-wrapper > table tbody,
    html body .table-wrapper > table tbody,
    html body .crs-recon-table-wrapper > table tbody,
    html body table.crs-table tbody,
    html body table.crs-table-responsive tbody {
        display: table-row-group !important;
    }

    html body .crs-table-wrapper > table tr,
    html body .table-wrapper > table tr,
    html body .crs-recon-table-wrapper > table tr,
    html body table.crs-table tr,
    html body table.crs-table-responsive tr {
        display: table-row !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    html body .crs-table-wrapper > table th,
    html body .crs-table-wrapper > table td,
    html body .table-wrapper > table th,
    html body .table-wrapper > table td,
    html body .crs-recon-table-wrapper > table th,
    html body .crs-recon-table-wrapper > table td,
    html body table.crs-table th,
    html body table.crs-table td,
    html body table.crs-table-responsive th,
    html body table.crs-table-responsive td,
    html body table.crs-recon-table th,
    html body table.crs-recon-table td,
    html body table.history-table th,
    html body table.history-table td {
        display: table-cell !important;
        min-width: 88px !important;
        width: auto !important;
        max-width: 220px !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        hyphens: auto !important;
        text-align: left !important;
        vertical-align: middle !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
        padding: 8px 9px !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }

    html body .crs-table-wrapper > table th,
    html body .table-wrapper > table th,
    html body .crs-recon-table-wrapper > table th,
    html body table.crs-table th,
    html body table.crs-table-responsive th,
    html body table.crs-recon-table th,
    html body table.history-table th {
        min-width: 96px !important;
        background: #146032 !important;
        color: #ffffff !important;
        font-weight: 800 !important;
        text-align: left !important;
    }

    html body .crs-table-wrapper > table td::before,
    html body .table-wrapper > table td::before,
    html body .crs-recon-table-wrapper > table td::before,
    html body table.crs-table td::before,
    html body table.crs-table-responsive td::before {
        content: none !important;
        display: none !important;
    }

    html body .crs-table-wrapper > table input,
    html body .crs-table-wrapper > table select,
    html body .crs-table-wrapper > table textarea,
    html body .table-wrapper > table input,
    html body .table-wrapper > table select,
    html body .table-wrapper > table textarea,
    html body .crs-recon-table-wrapper > table input,
    html body .crs-recon-table-wrapper > table select,
    html body .crs-recon-table-wrapper > table textarea,
    html body table.crs-table input,
    html body table.crs-table select,
    html body table.crs-table textarea,
    html body table.crs-table-responsive input,
    html body table.crs-table-responsive select,
    html body table.crs-table-responsive textarea {
        width: 100% !important;
        min-width: 72px !important;
        max-width: 100% !important;
        min-height: 38px !important;
        box-sizing: border-box !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
        padding: 7px 8px !important;
    }

    html body .crs-table-wrapper > table button,
    html body .table-wrapper > table button,
    html body .crs-recon-table-wrapper > table button,
    html body table.crs-table button,
    html body table.crs-table-responsive button,
    html body table.history-table button,
    html body .crs-table-wrapper > table .crs-btn,
    html body .table-wrapper > table .crs-btn,
    html body .crs-table-wrapper > table .btn,
    html body .table-wrapper > table .btn {
        min-width: 0 !important;
        width: auto !important;
        max-width: 100% !important;
        white-space: normal !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        padding: 7px 10px !important;
    }

    html body #crs-stock-form #crs-stock-table,
    html body #crs-stock-history #crs-history-table {
        min-width: 1180px !important;
    }

    html body table.crs-packing-store-table {
        min-width: 1720px !important;
        table-layout: fixed !important;
    }

    html body #crs-packing-history #crs-history-table,
    html body .crs-admin-users-table {
        min-width: 1320px !important;
    }

/* CRS 1.9.25 dashboard grouping and mobile paint hardening */
html body .crs-mobile-nav,
html body #crs-mobile-nav,
html body [class*="mobile-nav"],
html body [id*="mobile-nav"],
html body [class*="bottom-nav"],
html body [id*="bottom-nav"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

html body .crs-home-sections {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.4rem !important;
}

html body .crs-home-section {
    background: #ffffff !important;
    border: 1px solid rgba(20, 96, 50, 0.16) !important;
    border-radius: 18px !important;
    padding: 1.1rem !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08) !important;
    contain: layout paint !important;
    isolation: isolate !important;
    overflow: hidden !important;
}

html body .crs-home-section-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    padding-bottom: 0.85rem !important;
    border-bottom: 1px solid rgba(20, 96, 50, 0.12) !important;
}

html body .crs-home-section-title {
    display: flex !important;
    align-items: center !important;
    gap: 0.55rem !important;
    margin: 0 !important;
    color: #146032 !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

html body .crs-home-section-title iconify-icon {
    color: #D02126 !important;
}

html body .crs-home-section-desc {
    margin: 0.25rem 0 0 !important;
    color: #64748b !important;
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
}

html body .crs-home-section-count {
    flex: 0 0 auto !important;
    min-width: 2rem !important;
    min-height: 2rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: #f0fdf4 !important;
    color: #146032 !important;
    border: 1px solid rgba(20, 96, 50, 0.18) !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
}

@media (max-width: 900px) {
    html,
    body {
        background: #ffffff !important;
        overflow-x: hidden !important;
        overscroll-behavior-x: none !important;
        font-size: 16px !important;
    }

    html body .crs-header {
        position: relative !important;
        top: auto !important;
        z-index: 30 !important;
        padding: 0.55rem 0.6rem !important;
        background: #ffffff !important;
        contain: layout paint !important;
    }

    html body .crs-header-inner,
    html body .crs-glass,
    html body .crs-card,
    html body .crs-home-card,
    html body .crs-home-section,
    html body .crs-admin-section,
    html body .crs-form-card,
    html body .crs-btn,
    html body .crs-main .crs-btn {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
        transform: none !important;
        animation: none !important;
        will-change: auto !important;
        background-clip: padding-box !important;
    }

    html body .crs-header-inner {
        border-radius: 20px !important;
        background: #ffffff !important;
        border: 1px solid rgba(20, 96, 50, 0.16) !important;
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12) !important;
    }

    html body .crs-page-title h1,
    html body .crs-main .crs-page-title h1 {
        background: none !important;
        -webkit-background-clip: initial !important;
        background-clip: initial !important;
        -webkit-text-fill-color: #146032 !important;
        color: #146032 !important;
        animation: none !important;
    }

    html body .crs-main {
        background: #ffffff !important;
        padding: 0.7rem 0.65rem 1rem !important;
        overflow-x: hidden !important;
        isolation: isolate !important;
    }

    html body .crs-container {
        overflow-x: hidden !important;
    }

    html body .crs-home-sections {
        gap: 0.95rem !important;
    }

    html body .crs-home-section {
        padding: 0.8rem !important;
        border-radius: 14px !important;
        box-shadow: 0 5px 14px rgba(15, 23, 42, 0.08) !important;
    }

    html body .crs-home-section-head {
        align-items: flex-start !important;
        padding-bottom: 0.65rem !important;
    }

    html body .crs-home-section-title {
        font-size: 0.86rem !important;
    }

    html body .crs-home-section-desc {
        font-size: 0.62rem !important;
    }

    html body .crs-home-section-count {
        min-width: 1.65rem !important;
        min-height: 1.65rem !important;
        font-size: 0.62rem !important;
    }

    html body .crs-home-grid,
    html body .crs-cards-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.72rem !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    html body .crs-home-card,
    html body .crs-card {
        background: #ffffff !important;
        border: 1px solid rgba(20, 96, 50, 0.18) !important;
        border-radius: 13px !important;
        box-shadow: 0 5px 14px rgba(15, 23, 42, 0.08) !important;
        padding: 0.78rem !important;
        overflow: hidden !important;
        contain: layout paint !important;
    }

    html body .crs-home-card:hover,
    html body .crs-home-card:focus,
    html body .crs-card:hover,
    html body .crs-card:focus {
        transform: none !important;
        box-shadow: 0 5px 14px rgba(15, 23, 42, 0.1) !important;
    }

    html body .crs-scroll-top {
        bottom: 18px !important;
        right: 14px !important;
    }
}

    html body #crs-import-history #crs-history-table,
    html body #crs-stock-import-history-table,
    html body #crs-packing-import-history-table,
    html body .crs-profoma-history-table,
    html body .crs-psd-history-table,
    html body .crs-psd-table,
    html body table.history-table {
        min-width: 980px !important;
    }

    html body #crs-import-table,
    html body #crs-packing-import-table,
    html body #crs-not-supplied-table,
    html body #crs-supplied-table,
    html body #psd-order-table,
    html body #crs-profoma-table {
        min-width: 760px !important;
    }
}

/* CRS 1.9.25 final top-level mobile stability guard */
html body .crs-mobile-nav,
html body #crs-mobile-nav,
html body [class*="bottom-nav"],
html body [id*="bottom-nav"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

@media (max-width: 900px) {
    html body .crs-header {
        position: relative !important;
        top: auto !important;
        background: #ffffff !important;
        contain: layout paint !important;
    }

    html body .crs-header-inner,
    html body .crs-home-section,
    html body .crs-home-card,
    html body .crs-card,
    html body .crs-glass,
    html body .crs-btn {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
        transform: none !important;
        animation: none !important;
        will-change: auto !important;
    }

    html body .crs-main,
    html body .crs-container,
    html body .crs-home-sections,
    html body .crs-home-grid {
        background: #ffffff !important;
        overflow-x: hidden !important;
    }

    html body .crs-home-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}