@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;900&display=swap');
        
:root {
    /* Global Colors & Styles */
    --primary-color: #222222; /* New Modern Blue */
    --secondary-color: #00b4d8; 
    --dark-bg: #111827; 
    --dark-card: #1f2937;
    --radius-main: 18px; /* Slightly smoother radius */
    --page-width-mm: 210;
    --page-height-mm: 297;
     user-select: none;
}

body { font-family: 'Poppins', sans-serif; transition: background-color 0.3s; overflow-x: hidden;  user-select: none; }

/* --- Dark Mode/UI Styles --- */
.light body { background-color: #f3f4f6; color: #1f2937; }
.dark body { background-color: var(--dark-bg); color: #f3f4f6; }
.dark .card { background-color: var(--dark-card); }
.dark input, .dark select, .dark textarea { 
    background-color: #374151; 
    border-color: #4b5563; 
    color: #f3f4f6; 
}
.light input, .light select, .light textarea { color: #1f2937; }
.dark .item-input-group { background-color: #374151; border-color: #4b5563; }

/* --- Buttons & Accent --- */
.creative-btn { 
    background-color: #e34f05; 
    transition: background-color 0.2s, transform 0.1s;
}
.creative-btn:hover { background-color: #b03e04; transform: translateY(-1px); }

.clear-btn { background-color: #dc2626; } 
.clear-btn:hover { background-color: #b91c1c; }

/* --- Theme Toggle (Modern) --- */
#theme-toggle { 
    position: fixed; 
    bottom: 20px; 
    right: 20px; 
    z-index: 100; 
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s, color 0.3s;
}
.light #theme-toggle { background-color: #374151; color: white; }
.dark #theme-toggle { background-color: #fca311; color: var(--dark-bg); }

/* --- History Button & Sidebar --- */
#history-toggle {
    position: fixed;
    bottom: 80px;
    right: 20px;
    z-index: 100;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #3b82f6;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 0.2s;
}
#history-toggle:hover { transform: scale(1.1); }

#history-sidebar {
    position: fixed;
    top: 0;
    right: -350px;
    width: 320px;
    height: 100%;
    background: white;
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    transition: right 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);
    z-index: 1000;
    overflow-y: auto;
    padding: 20px;
}
.dark #history-sidebar { background: var(--dark-card); color: white; }
#history-sidebar.open { right: 0; }
.history-item {
    padding: 12px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background 0.2s;
}
.dark .history-item { border-bottom-color: #374151; }
.history-item:hover { background: #f9f9f9; }
.dark .history-item:hover { background: #374151; }

/* --- Tab Styles (New for Combined UI) --- */
.tab-button {
    padding: 12px 20px;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease-in-out;
    color: #4b5563;
}
.dark .tab-button {
     color: white;
}
.tab-button.active {
    color: #e34f05;
    border-bottom-color: #e34f05;
}

/* --- Invoice/Quotation PDF Styles (Re-used/Modified) --- */
#invoice-preview {
    width: 794px; 
    background-color: white;
    padding: 50px;
    position: absolute; 
    left: -9999px; 
    top: -9999px; 
    box-sizing: border-box; 
    height: auto !important; 
}
.invoice-header-section {
    background-color: var(--primary-color);
    color: white;
    padding: 20px 25px; /* Reduced height */
    border-radius: var(--radius-main); 
    margin-bottom: 25px;
}

/* --- Receipt/Voucher PDF Styles (Re-used/Modified) --- */
#receipt-preview {
    width: 794px; 
    height: 1123px; 
    background-color: white;
    padding: 50px;
    position: absolute; 
    left: -9999px; 
    top: -9999px; 
    box-sizing: border-box; 
}
.receipt-header-section {
    background-color: var(--primary-color);
    color: white;
    padding: 15px 20px; /* Reduced height */
    border-radius: 12px; 
    margin-bottom: 20px;
}
#pdf-receipt-a5-template {
    width: 794px; 
    height: 561px; 
    overflow: hidden; 
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.a5-content-frame {
    border: 2px solid #111827; /* Neater, thinner black border */
    border-radius: 12px; 
    padding: 20px; 
    box-sizing: border-box;
    height: 100%;
}
.amount-value {
    font-size: 1.5rem; 
    font-weight: 700;
    padding: 5px 0;
    border-bottom: 2px solid #111827; /* Black underline */
    width: 80%; 
    display: block;
}
.text-xxs { font-size: 0.625rem; }
.pdf-content-line { border-bottom: none; } /* Override original styles for cleaner look */

/* Install Button Style */
.install-pwa-btn {
    background-color: #fca311; /* Amber/Orange */
    color: white;
    transition: background-color 0.3s;
}
.install-pwa-btn:hover {
     background-color: #e4910a;
}