/* dark-mode.css */
/* কাজ: এই ফাইলটিতে শুধুমাত্র ডার্ক মোডের জন্য প্রয়োজনীয় স্টাইলগুলো থাকবে। */

/* === মূল ফিক্স: ডার্ক মোডে HTML ও Body এর ব্যাকগ্রাউন্ড কালো করা === */
html.dark-mode, 
body.dark-mode {
  background-color: #121212 !important;
  color: #e0e0e0;
}

/* === হেডার ফিক্স (সবচেয়ে গুরুত্বপূর্ণ) === */
/* ডার্ক মোড চালু থাকলে থিম কালার যাই হোক না কেন, হেডার ডার্ক হবে */
body.dark-mode .app-header,
body.dark-mode[class*="theme-"] .app-header {
    background-color: #1e1e1e !important; /* ডার্ক সারফেস কালার */
    border-bottom: 1px solid #333;
}

/* হেডারের কার্ভ বা বাঁকানো অংশের কালার বডি কালারের সাথে মিলানো */
body.dark-mode .app-header::after {
    background-color: #121212 !important; /* বডি ব্যাকগ্রাউন্ডের সমান */
}

/* === স্টিকি হেডার বা কন্টেইনারের পেছনের ব্যাকগ্রাউন্ড ফিক্স === */
body.dark-mode .sticky-header-container {
  background-color: #121212 !important; 
}

/* === অ্যাডভারটাইজমেন্ট এবং অ্যাকশন কন্টেইনার ফিক্স === */
body.dark-mode .ad-container-fixed {
    background-color: #121212 !important;
}

body.dark-mode .layer-2-background {
    background-color: #121212 !important;
}

/* === বাকি সাধারণ ডার্ক মোড স্টাইল === */

body.dark-mode .main-container,
body.dark-mode #cashbox-container,
body.dark-mode .content-body {
  background-color: #121212;
}

body.dark-mode #cashbox-container > .app-header,
body.dark-mode .notes-container .app-header {
    background-color: #1e1e1e !important;
    border-bottom: 1px solid #333;
}

body.dark-mode .app-header .header-settings-btn {
    background-color: #333;
    color: #e0e0e0;
}

body.dark-mode .ad-and-actions-container {
  background-color: #1e1e1e;
}

body.dark-mode .search-container {
    background-color: #1e1e1e;
}

body.dark-mode .shop-name-dropdown {
  background-color: #333;
  box-shadow: none;
}

body.dark-mode .shop-name-dropdown h1,
body.dark-mode .shop-name-dropdown i {
  color: #e0e0e0;
}

body.dark-mode .trial-status,
body.dark-mode .header-icons .icon-wrapper i,
body.dark-mode .header-icons .icon-wrapper span {
  color: #e0e0e0;
}

body.dark-mode .advertisement-banner {
  background-color: #2a2a2a;
  border-color: #333;
}
body.dark-mode .action-item span {
    color: #e0e0e0;
}

body.dark-mode .summary-footer {
  background: #1e1e1e;
  border-color: #333;
}

body.dark-mode .search-bar,
body.dark-mode .filter-btn {
  background: #2a2a2a;
  border-color: #444;
}

body.dark-mode .summary-divider {
  border-color: #444;
}

body.dark-mode .search-bar input {
  color: #e0e0e0;
}

body.dark-mode .list-header h2,
body.dark-mode .list-header .indicator,
body.dark-mode .customer-card .name {
  color: #e0e0e0;
}
body.dark-mode .customer-card .customer-subtitle {
  color: #aaa;
}

body.dark-mode .customer-list .customer-card {
  border-bottom-color: #333;
}

body.dark-mode .bottom-nav,
body.dark-mode .sidebar {
  background-color: #1e1e1e;
  border-color: #333;
}

body.dark-mode .nav-item {
  color: #aaa;
}

body.dark-mode .nav-item.active i,
body.dark-mode .nav-item.active span {
  color: #fff;
}

body.dark-mode .sidebar a,
body.dark-mode .sidebar .close-btn,
body.dark-mode .sidebar .sidebar-header {
  color: #e0e0e0;
}

body.dark-mode .sidebar a:hover {
  background-color: #333;
}

/* --- ডার্ক মোডে মডালের স্টাইল --- */
body.dark-mode .modal-content {
  background: #1e1e1e;
  color: #e0e0e0;
}

body.dark-mode .modal-content h2,
body.dark-mode .cs-input-group label,
body.dark-mode .edit-input-group label,
body.dark-mode .filter-group p,
body.dark-mode .filter-group label,
body.dark-mode .recon-input-group label,
body.dark-mode .recon-summary p,
body.dark-mode .recon-difference-container p {
  color: #e0e0e0;
}
body.dark-mode .recon-summary h3 { color: #4dabf7; }

body.dark-mode .modal-content input, 
body.dark-mode .modal-content select, 
body.dark-mode .modal-content textarea, 
body.dark-mode .cs-input-group, 
body.dark-mode .edit-input-group {
  background-color: #2a2a2a;
  border-color: #444;
  color: #e0e0e0;
}

body.dark-mode .cs-input-group input:focus + label, 
body.dark-mode .cs-input-group input:not(:placeholder-shown) + label {
  background: #1e1e1e;
}

body.dark-mode .edit-input-group label {
    background: #1e1e1e !important;
}

body.dark-mode .close-btn, 
body.dark-mode .cs-input-group i, 
body.dark-mode .edit-input-group i {
  color: #aaa;
}

/* কাস্টমার ডিটেইলস, এডিট এবং অ্যাড কাস্টমার মডাল */
body.dark-mode #customer-details-modal .modal-content, 
body.dark-mode #transaction-editor-modal .modal-content,
body.dark-mode #edit-customer-modal .modal-content,
body.dark-mode #add-customer-modal .modal-content,
body.dark-mode .add-cs-header,
body.dark-mode .edit-cs-header {
    background-color: #121212;
}

body.dark-mode #add-customer-modal .add-cs-body,
body.dark-mode #edit-customer-modal .edit-cs-body {
    background-color: #121212;
}

body.dark-mode .cs-input-group input:focus + label,
body.dark-mode .cs-input-group input:not(:placeholder-shown) + label {
  background: #121212;
}

body.dark-mode #edit-customer-modal .edit-cs-body,
body.dark-mode #edit-customer-modal .edit-input-group label {
    background-color: #121212 !important;
}
body.dark-mode .edit-avatar-icon {
    background: #444;
    border-color: #121212;
}
body.dark-mode .edit-avatar-icon i {
    color: #e0e0e0;
}

body.dark-mode .details-header, 
body.dark-mode .due-info-bar {
    background: #1e1e1e;
    border-bottom-color: #333;
}

body.dark-mode .input-box,
body.dark-mode #description,
body.dark-mode #edit-description {
    background: #2a2a2a;
    border-color: #444;
}
body.dark-mode .input-box input, body.dark-mode .input-box label { color: #e0e0e0; }

body.dark-mode .action-btn {
    background: #2a2a2a;
    border-color: #444;
    color: #e0e0e0;
}

body.dark-mode .action-buttons-bar .action-btn.primary {
    border-color: #f06571;
    color: #f06571;
    background: transparent;
}
body.dark-mode .action-buttons-bar .action-btn.primary:hover {
    background-color: rgba(220, 53, 69, 0.1);
}

body.dark-mode #confirm-transaction-btn-lg {
    background-color: rgba(220, 53, 69, 0.2);
    color: #f06571;
}

body.dark-mode .options-dropdown { background-color: #2a2a2a; }
body.dark-mode .dropdown-item { color: #e0e0e0; }
body.dark-mode .dropdown-item:hover { background-color: #333; }

body.dark-mode #details-keypad, body.dark-mode #edit-details-keypad,
body.dark-mode #cash-keypad-keypad {
    background-color: #121212;
}
body.dark-mode #details-keypad button, 
body.dark-mode #edit-details-keypad button,
body.dark-mode #cash-keypad-keypad button {
    background-color: #1e1e1e;
    color: #e0e0e0;
}
body.dark-mode #details-keypad .keypad-operator, 
body.dark-mode #edit-details-keypad .keypad-operator,
body.dark-mode #cash-keypad-keypad .keypad-operator {
    background-color: #2a2a2a;
}
body.dark-mode #details-keypad .keypad-operator.keypad-double, 
body.dark-mode #edit-details-keypad .keypad-operator.keypad-double,
body.dark-mode #cash-keypad-keypad .keypad-operator.keypad-double {
    background-color: rgba(220, 53, 69, 0.2);
    color: #f06571;
}

/* লেনদেনের ইতিহাস (Transaction History) */
body.dark-mode #transaction-history-modal .modal-content,
body.dark-mode .history-header,
body.dark-mode .history-footer {
    background-color: #1e1e1e;
}
body.dark-mode .history-body { background-color: #121212; }
body.dark-mode .reminder-bar, body.dark-mode .history-controls { background-color: #2a2a2a; border-color: #444; }
body.dark-mode .transaction-row { background-color: #1e1e1e; border-color: #333; }
body.dark-mode .trans-info-details .balance-label { background-color: #333; }
body.dark-mode .trans-info-details .time { color: #aaa; }
body.dark-mode .transaction-list-header { background-color: #1e1e1e; border-bottom-color: #333; color: #aaa; }
body.dark-mode .transaction-group .date-header { background-color: #121212; color: #e0e0e0; }
body.dark-mode .history-header .action-icon { color: #e0e0e0; }

/* লেনদেনের বিস্তারিত (Transaction Details) */
body.dark-mode #transaction-detail-modal .modal-content,
body.dark-mode #transaction-detail-modal .action-screen-body {
    background-color: #121212;
}
body.dark-mode #transaction-detail-modal .details-header {
    background-color: #1e1e1e;
    border-bottom-color: #333;
}
body.dark-mode #transaction-detail-modal .details-header h2 {
    color: #e0e0e0;
}
body.dark-mode .action-screen-summary {
    background-color: #1e1e1e;
    border-color: #333;
}
body.dark-mode .action-screen-summary .date-time {
    color: #e0e0e0;
}
body.dark-mode .action-screen-summary .info {
    border-bottom-color: #444;
}
body.dark-mode .action-buttons .action-delete {
    background-color: #1e1e1e;
    color: #f06571;
    border-color: #f06571;
}

/* পিন মডাল */
body.dark-mode .modal.full-screen-modal,
body.dark-mode #pin-lock-container,
body.dark-mode .change-pin-header,
body.dark-mode .change-pin-body,
body.dark-mode .pin-modal-header {
    background-color: #121212;
    color: #e0e0e0;
}
body.dark-mode #pin-user-name, body.dark-mode .pin-lock-main .unlock-title, body.dark-mode .change-pin-body p,
body.dark-mode .pin-modal-header h2 {
    color: #e0e0e0;
}
body.dark-mode .numeric-keypad-new .keypad-button-new { color: #e0e0e0; }
body.dark-mode .pin-input-container .pin-dot { background: #555; }
body.dark-mode .pin-input-container .pin-dot.filled { background: #e0e0e0; }

body.dark-mode .edit-pin-summary-grid, body.dark-mode #delete-trans-summary {
    background-color: #1e1e1e;
    border-color: #444;
}
body.dark-mode .edit-pin-summary-grid .label, body.dark-mode #delete-trans-summary .label {
    border-color: #444;
    color: #aaa;
}
body.dark-mode .edit-pin-summary-grid .value, body.dark-mode #delete-trans-summary .value {
    color: #e0e0e0;
}

/* ক্যাশবক্স পেইজ */
body.dark-mode #cashbox-container header { background-color: #1e1e1e; }
body.dark-mode .cashbox-summary-card { background-color: #2a2a2a; }
body.dark-mode .cashbox-summary-card .amount, 
body.dark-mode .cashbox-summary-card .label, 
body.dark-mode .cash-flow-summary,
body.dark-mode .cashbox-list p {
    color: #e0e0e0;
}
body.dark-mode .vertical-divider { border-color: #444; }
body.dark-mode .cashbox-actions .action-btn { background-color: #333; border-color: #555; color: #e0e0e0; }
body.dark-mode .cashbox-list .cashbox-category-item-new { background-color: #2a2a2a; border-color: #333; }
body.dark-mode .cashbox-category-item-new .category-details { color: #e0e0e0; }
body.dark-mode .cashbox-category-item-new .category-amount { color: #e0e0e0; }

/* === ডার্ক মোডে পণ্য নির্বাচন মডালের জন্য নতুন স্টাইল === */
body.dark-mode #product-selection-modal .modal-content,
body.dark-mode .product-selection-body {
    background-color: #121212;
}

body.dark-mode #product-selection-modal .add-cs-header {
    background-color: #1e1e1e;
    border-bottom: 1px solid #333;
}
body.dark-mode #product-selection-modal h2 {
    color: #e0e0e0;
}
body.dark-mode #product-selection-modal .search-container {
    background-color: #1e1e1e;
}
body.dark-mode #product-selection-modal .search-bar {
    background-color: #2a2a2a;
}

body.dark-mode .product-selection-item {
    background-color: #1e1e1e;
    border-bottom-color: #333;
}

body.dark-mode .product-selection-item .product-name {
    color: #e0e0e0;
}

body.dark-mode .product-selection-item .product-sub-info {
    color: #aaa;
}

body.dark-mode .product-quantity-control .quantity-btn {
    background-color: #333;
    border-color: #555;
    color: #e0e0e0;
}

body.dark-mode .product-quantity-control .quantity-input {
    color: #e0e0e0;
}


/* ===== স্টক পেইজের জন্য ডার্ক মোড স্টাইল ===== */
body.dark-mode #stock-container .app-header {
    background-color: #1e1e1e !important;
    border-bottom: none;
}
body.dark-mode #stock-container .content-body {
  background-color: #121212;
}
body.dark-mode #stock-container .search-container {
    background-color: #121212 !important;
    border-top: 1px solid #333;
}
body.dark-mode .summary-card-stock {
  background-color: #1e1e1e;
  border: 1px solid #333;
  box-shadow: none;
}
body.dark-mode .summary-card-stock .label,
body.dark-mode .product-pricing {
  color: #aaa;
}
body.dark-mode .summary-card-stock .amount,
body.dark-mode .product-list-header h3,
body.dark-mode .product-info .name {
  color: #e0e0e0;
}
body.dark-mode .product-card {
  background-color: #1e1e1e;
  border: 1px solid #333;
  box-shadow: none;
}
body.dark-mode .product-icon {
  background-color: #333;
}
body.dark-mode .product-icon i {
  color: #ccc;
}
body.dark-mode .product-list .empty-placeholder {
  color: #888;
}


/* ===== নোটস পেইজের জন্য ডার্ক মোড স্টাইল ===== */
body.dark-mode .notes-container {
  background-color: #121212;
}
body.dark-mode #notes-container .app-header {
    background-color: #1e1e1e !important;
    border-bottom: none;
}
body.dark-mode #notes-container .sticky-header-container::after {
    background-color: #121212;
    border-top: 1px solid #333;
    box-shadow: none;
}
body.dark-mode .notes-container .content-body {
  background-color: #121212 !important;
  border: none;
  margin-top: 0 !important;
}
body.dark-mode .note-card {
  background-color: #1e1e1e;
  border: 1px solid #333;
  box-shadow: none;
}
body.dark-mode .note-card .note-title {
  color: #e0e0e0;
}
body.dark-mode .note-card .note-content {
  color: #aaa;
}
body.dark-mode .note-card .note-date {
  color: #888;
}
body.dark-mode .empty-notes-placeholder {
  color: #888;
}

/* নোট এডিটর ডার্ক মোড */
body.dark-mode #note-editor-modal .modal-content,
body.dark-mode #note-editor-modal .pin-modal-header,
body.dark-mode #note-editor-modal .note-editor-body {
    background-color: #121212 !important;
}
body.dark-mode #note-editor-modal .pin-modal-header {
    border-bottom: 1px solid #333 !important;
}
body.dark-mode #note-editor-modal h2 {
    color: #e0e0e0 !important;
}
body.dark-mode #note-editor-modal .back-arrow {
    color: #e0e0e0 !important;
}
body.dark-mode #note-content-input {
    background-color: transparent !important;
    color: #e0e0e0 !important;
}

/* ===== ইনবক্স এবং ডাটা ব্যাকআপ পেইজের জন্য ডার্ক মোড স্টাইল ===== */
body.dark-mode .inbox-container, body.dark-mode .inbox-header {
    background-color: #1e1e1e;
    color: #e0e0e0;
    border-bottom: 1px solid #333;
}
body.dark-mode .message-list {
    background-color: #121212;
}
body.dark-mode .message-card {
    background-color: #1e1e1e;
    border-bottom-color: #333;
}
body.dark-mode .message-title {
    color: #e0e0e0;
}
body.dark-mode .message-summary, body.dark-mode .message-date {
    color: #aaa;
}
body.dark-mode .message-card.unread {
    background-color: #2a2f3b; /* হালকা নীল এর পরিবর্তে */
}

body.dark-mode #backup-status-modal .modal-content {
    background-color: #121212;
}
body.dark-mode .backup-status-header {
    background-color: #1e1e1e;
    color: #e0e0e0;
}
body.dark-mode .backup-status-header h2, body.dark-mode .backup-status-header .back-arrow {
    color: #e0e0e0;
}
body.dark-mode .backup-status-text {
    background-color: #1e1e1e;
    color: #e0e0e0;
    box-shadow: none;
    border: 1px solid #333;
}
body.dark-mode .last-backup-details, body.dark-mode .last-backup-label {
    color: #aaa;
}

/* ===== লেনদেন নিশ্চিতকরণ মডালের জন্য ডার্ক মোড স্টাইল ===== */
body.dark-mode #transaction-confirmation-modal {
    background-color: #121212;
}
body.dark-mode #transaction-confirmation-modal .close-btn {
    background: #333;
    color: #e0e0e0;
}
body.dark-mode #transaction-confirmation-modal .confirmation-title {
    color: #e0e0e0;
}
body.dark-mode #transaction-confirmation-modal .confirmation-summary {
    background-color: #1e1e1e;
    box-shadow: none;
    border: 1px solid #333;
}
body.dark-mode .conf-customer-info {
    border-bottom-color: #333;
}
body.dark-mode .conf-customer-info #conf-customer-name,
body.dark-mode .conf-customer-info #conf-customer-mobile {
    color: #e0e0e0;
}
body.dark-mode #transaction-confirmation-modal .conf-row span {
    color: #aaa;
}
body.dark-mode #transaction-confirmation-modal hr {
    border-top-color: #444;
}
body.dark-mode #transaction-confirmation-modal .share-section {
    background-color: #1e1e1e;
    border-top-color: #333;
}
body.dark-mode #transaction-confirmation-modal .share-section p {
    color: #aaa;
}
body.dark-mode #transaction-confirmation-modal .share-button span {
    color: #e0e0e0;
}
body.dark-mode .share-icon-wrapper.tally { background-color: #442c2e; }
body.dark-mode .share-icon-wrapper.sms { background-color: #4b3f2a; }
body.dark-mode .share-icon-wrapper.whatsapp { background-color: #2c3e34; }
body.dark-mode .share-icon-wrapper.messenger { background-color: #2a3a4a; }

/* ডার্ক মোডে বটম নেভিগেশন */
body.dark-mode .bottom-nav {
    background-color: #1e1e1e !important;
    border-top: 1px solid #333;
}

body.dark-mode .nav-item {
    color: #aaa;
}

body.dark-mode .nav-item.active i,
body.dark-mode .nav-item.active span {
    color: #ffffff; /* ডার্ক মোডে অ্যাক্টিভ আইকন সাদা */
}

/* যদি ডার্ক মোড + কোনো থিম (যেমন ব্লু) একসাথে চালু থাকে, তবে থিম কালার প্রাধান্য পাবে না, ডার্ক মোড জিতবে */
body.dark-mode[class*="theme-"] .bottom-nav { 
    background-color: #1e1e1e !important; 
    border-top: 1px solid #333; 
}

/* যদি ক্যাশবক্সের জন্য আলাদা স্টাইল থাকে */
body.dark-mode #cashbox-container .sticky-header-container::after {
    background-color: #121212;
    border-top: 1px solid #333; /* বর্ডার ভিজিবিলিটির জন্য */
}

/* ================================================================ */
/* ========= CUSTOMER DETAILS & TRANSACTION (DARK MODE) =========== */
/* ================================================================ */

/* ১. মেইন ব্যাকগ্রাউন্ড এবং হেডার */
body.dark-mode #customer-details-modal .modal-content,
body.dark-mode #transaction-editor-modal .modal-content {
    background-color: #121212 !important;
}

body.dark-mode .details-header, 
body.dark-mode .due-info-bar {
    background-color: #1e1e1e !important;
    border-bottom: 1px solid #333 !important;
}

body.dark-mode .details-header .name,
body.dark-mode .details-header .mobile a,
body.dark-mode .due-info-bar .due-amount {
    color: #e0e0e0 !important;
}

/* ২. ইনপুট বক্স (দিলাম / পেলাম) */
body.dark-mode .input-box {
    background-color: #1e1e1e !important;
    border: 1px solid #333 !important;
}

body.dark-mode .input-box label {
    color: #aaaaaa !important;
}

body.dark-mode .input-box input {
    color: #ffffff !important;
    background-color: transparent !important;
}

/* যখন ইনপুট সিলেক্ট করা থাকবে */
body.dark-mode .input-box.active {
    border-color: #B91C1C !important; /* লাল বর্ডার */
    background-color: #2a1a1a !important; /* হালকা লালচে ব্যাকগ্রাউন্ড */
}

/* ৩. বিবরণ বক্স (Description) */
body.dark-mode #description, 
body.dark-mode #edit-description {
    background-color: #1e1e1e !important;
    border: 1px solid #333 !important;
    color: #e0e0e0 !important;
}

/* ৪. অ্যাকশন বাটনগুলো (তারিখ, স্টক, ছবি ইত্যাদি) */
body.dark-mode .action-buttons-bar .action-btn {
    background-color: #1e1e1e !important;
    border: 1px solid #333 !important;
    color: #e0e0e0 !important;
}

/* স্টক বাটন (লাল বর্ডার ওয়ালা) */
body.dark-mode .action-buttons-bar .action-btn.primary {
    border-color: #f06571 !important;
    color: #f06571 !important;
    background-color: transparent !important;
}

/* ৫. নিশ্চিত করুন বাটন (নিচে) */
body.dark-mode #confirm-transaction-btn-lg {
    background-color: #B91C1C !important; /* গাঢ় লাল */
    color: #ffffff !important; /* সাদা লেখা */
    border: none !important;
}

/* ৬. নিচের কি-প্যাড (Keypad) */
body.dark-mode #details-keypad {
    background-color: #333 !important; /* গ্রিড লাইন */
}

body.dark-mode #details-keypad button {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

body.dark-mode #details-keypad button:active {
    background-color: #2a2a2a !important;
}

/* ================================================================ */
/* ========= FIX: CONFIRM BUTTON BACKGROUND (DARK MODE) =========== */
/* ================================================================ */

/* ফুটার কন্টেইনারের ব্যাকগ্রাউন্ড কালো করা হচ্ছে যাতে বাটনের কোণ দিয়ে সাদা না দেখা যায় */
body.dark-mode #customer-details-modal .modal-footer,
body.dark-mode #transaction-editor-modal .modal-footer {
    background-color: #121212 !important; /* ডার্ক ব্যাকগ্রাউন্ড */
    box-shadow: 0 -2px 10px rgba(255, 255, 255, 0.05) !important; /* হালকা শ্যাডো */
    border-top: 1px solid #333 !important; /* বর্ডার ডার্ক করা */
}

/* বাটনের স্টাইল নিশ্চিত করা */
body.dark-mode #confirm-transaction-btn-lg,
body.dark-mode .editor-footer-buttons button {
    box-shadow: none !important;
}

/* ================================================================ */
/* ========= TRANSACTION HISTORY PAGE (DARK MODE FIXES) =========== */
/* ================================================================ */

/* ১. মেইন ব্যাকগ্রাউন্ড এবং বডি */
body.dark-mode #transaction-history-modal .modal-content,
body.dark-mode .history-body {
    background-color: #121212 !important;
}

/* ২. তারিখের হেডার (যেমন: ১০ জানুয়ারী, ২০২৬) */
body.dark-mode .transaction-group .date-header {
    background-color: #121212 !important;
    color: #ffffff !important; /* উজ্জ্বল সাদা */
    border-bottom: 1px solid #333;
    padding-top: 20px;
}

/* ৩. প্রতিটি লেনদেনের রো (Row) */
body.dark-mode .transaction-row {
    background-color: #1e1e1e !important; /* হালকা কালো */
    border-bottom: 1px solid #333 !important;
}

/* ৪. টাকার বক্সগুলো (ক্লিয়ার এবং ট্রান্সপারেন্ট কালার) */
/* "দিলাম" বা খরচ */
body.dark-mode .transaction-row .amount-given {
    background-color: rgba(220, 53, 69, 0.15) !important;
    color: #ff6b6b !important;
    border: 1px solid rgba(220, 53, 69, 0.3) !important;
    font-weight: bold;
}

/* "পেলাম" বা জমা */
body.dark-mode .transaction-row .amount-received {
    color: #4cd964 !important; /* নিওন গ্রিন */
    font-weight: bold;
}

/* ৫. ব্যালেন্স লেবেল */
body.dark-mode .balance-label.pabo {
    background-color: rgba(220, 53, 69, 0.15) !important;
    color: #ff6b6b !important;
    border: 1px solid rgba(220, 53, 69, 0.3) !important;
}

body.dark-mode .balance-label.debo {
    background-color: rgba(40, 167, 69, 0.15) !important;
    color: #4cd964 !important;
    border: 1px solid rgba(40, 167, 69, 0.3) !important;
}

/* ৬. ফুটার (নিচের মোট হিসাব) */
body.dark-mode .history-footer {
    background-color: #1e1e1e !important;
    border-top: 1px solid #333 !important;
    color: #ffffff !important;
}

/* ৭. ওপরের রিমাইন্ডার বার */
body.dark-mode .reminder-bar {
    background-color: #1e1e1e !important;
    border: 1px solid #333 !important;
    color: #ff6b6b !important;
}

body.dark-mode .history-controls {
    background-color: #1e1e1e !important;
    border: 1px solid #333 !important;
}

/* ================================================================ */
/* ========= ADD CUSTOMER MODAL (DARK MODE FIXES) ================= */
/* ================================================================ */

/* ১. মেইন কন্টেন্ট */
body.dark-mode #add-customer-modal .modal-content,
body.dark-mode .add-cs-body {
    background-color: #121212 !important;
}

/* ২. হেডার */
body.dark-mode .add-cs-header {
    background-color: #1e1e1e !important;
    border-bottom: 1px solid #333 !important;
}

body.dark-mode .add-cs-header h2,
body.dark-mode .add-cs-header .back-arrow {
    color: #e0e0e0 !important;
}

/* ৩. ইনপুট গ্রুপ */
body.dark-mode .cs-input-group {
    background-color: #1e1e1e !important;
    border: 1px solid #333 !important;
}

body.dark-mode .cs-input-group input {
    color: #ffffff !important;
    background-color: transparent !important;
}

body.dark-mode .cs-input-group label,
body.dark-mode .cs-input-group i {
    color: #aaaaaa !important;
}

/* ইনপুট ফোকাস হলে */
body.dark-mode .cs-input-group.focused {
    border-color: #B91C1C !important;
}

body.dark-mode .cs-input-group input:focus + label,
body.dark-mode .cs-input-group input:not(:placeholder-shown) + label {
    background-color: #1e1e1e !important;
    color: #ff6b6b !important;
}

/* ৪. ফোনবুক বাটন */
body.dark-mode .phonebook-btn {
    background-color: #1c3829 !important; /* হালকা সবুজ আভা */
    color: #4cd964 !important;
    border: 1px solid #28a745 !important;
}

/* ৫. রেডিও বাটন (কাস্টমার/সাপ্লায়ার) */
body.dark-mode .type-radio-group label {
    background-color: #1e1e1e !important;
    color: #aaaaaa !important;
    border: 1px solid #333 !important;
}

body.dark-mode .type-radio-group input[type=radio]:checked + label {
    background-color: #B91C1C !important;
    color: #ffffff !important;
    border-color: #B91C1C !important;
}

/* ৬. সেভ বাটন */
body.dark-mode #save-customer-btn {
    background-color: #B91C1C !important;
    color: #ffffff !important;
}

body.dark-mode #save-customer-btn:disabled {
    background-color: #442c2e !important;
    color: #888 !important;
}

/* ================================================================ */
/* ========= FIX: ADD/EDIT CUSTOMER FOOTER (DARK MODE) ============ */
/* ================================================================ */

/* কাস্টমার অ্যাড এবং এডিট পেজের নিচের ফুটার কালো করা হচ্ছে */
body.dark-mode #add-customer-modal .modal-footer,
body.dark-mode #edit-customer-modal .modal-footer {
    background-color: #121212 !important; /* মেইন ডার্ক ব্যাকগ্রাউন্ড */
    border-top: 1px solid #333 !important; /* বর্ডার ডার্ক */
    box-shadow: none !important; /* সাদা শ্যাডো রিমুভ */
}

/* ================================================================ */
/* ========= PAYMENT COLLECTION SCREEN (DARK MODE FIXES) ========== */
/* ================================================================ */

/* ১. উপরের ইনপুট কার্ডের ব্যাকগ্রাউন্ড কালো করা */
body.dark-mode #payment-collection-screen .card {
    background-color: #1e1e1e !important;
    border: 1px solid #333 !important;
    box-shadow: none !important;
}

/* ২. টাইটেল এবং ছোট টেক্সটগুলোর কালার */
body.dark-mode #payment-collection-screen h3,
body.dark-mode #payment-collection-screen p {
    color: #e0e0e0 !important;
}

/* ৩. পেমেন্ট হিস্ট্রি লিস্টের আইটেমগুলো (সাদা বক্সগুলো কালো করা) */
body.dark-mode #digital-payment-list > div {
    background-color: #1e1e1e !important; /* ডার্ক ব্যাকগ্রাউন্ড */
    border-bottom: 1px solid #333 !important;
    color: #e0e0e0 !important;
}

/* ৪. কাস্টমারের নাম (লিস্টের ভেতরে) */
body.dark-mode #digital-payment-list > div > div:first-child > div:first-child {
    color: #e0e0e0 !important; /* সাদা লেখ


/* ================================================================ */
/* ========= PROFILE MODAL FINAL FIX (DARK MODE) ================== */
/* ================================================================ */

/* ১. প্রোফাইল মডালের পিছনের সাদা ব্যাকগ্রাউন্ড সরানো */
body.dark-mode #profile-modal .modal-content {
    background-color: #121212 !important;
    overflow: hidden; /* কোণাগুলো ঠিক করার জন্য */
}

/* ২. লাল হেডারটি কালো/ডার্ক করা (সবচেয়ে জরুরি) */
/* background: দিয়ে গ্রাডিয়েন্ট ওভাররাইড করা হচ্ছে */
body.dark-mode .profile-header-modern {
    background: #1e1e1e !important; /* লাল গ্রাডিয়েন্ট মুছে ডার্ক কালার */
    border-bottom: 1px solid #333 !important;
}

/* ৩. লেখার রঙ সাদা করা */
body.dark-mode #user-profile-name,
body.dark-mode #profile-mobile-header,
body.dark-mode #profile-mobile-header a {
    color: #ffffff !important;
    text-decoration: none;
}

/* ৪. ছবির চারপাশের বর্ডার এবং ব্যাকগ্রাউন্ড */
body.dark-mode #profile-avatar {
    background-color: #2d2d2d !important;
    border: 4px solid #333 !important;
    color: #e0e0e0 !important;
}

/* ৫. ক্যামেরা আইকন (ছবির কোণায়) */
body.dark-mode .camera-badge {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #333 !important;
}

/* ৬. নিচের ইনফো বক্সগুলো (দোকানের নাম, ঠিকানা ইত্যাদি) */
body.dark-mode .profile-item {
    background-color: #1e1e1e !important;
    border: 1px solid #333 !important;
}

body.dark-mode .profile-item .p-info label {
    color: #aaaaaa !important;
}

body.dark-mode .profile-item .p-info span {
    color: #ffffff !important;
}

/* ৭. ফুটার এবং বাটন */
body.dark-mode .profile-footer-modern {
    background-color: #121212 !important;
}