.tftable {
    font-family: 'Times New Roman', Times, serif;
    font-size: 14px;
    color: #000000;
    width: 100%;
    border-width: 1px;
    border-color: #9dcc7a;
    border-collapse: collapse;
}

.tftable th {
    font-size: 14px;
    background-color: #abd28e;
    border-width: 1px;
    padding: 4px;
    border-color: #9dcc7a;
    text-align: left;
}

.tftable tr {
    background-color: #ffffff;
}

.tftable td {
    font-size: 14px;
    border-width: 1px;
    padding: 2px;
    border-color: #9dcc7a;
}

.tftable tr:hover {
    background-color: #ffff99;
}


/* আপনার পছন্দের স্টাইল (শুধুমাত্র ইনফো টেবিল - border='0' এর জন্য) */
.tftable[border='0'] {
    border-top: 2px solid #9dcc7a;
    /* টেবিলের একদম উপরের মোটা দাগ */
    border-bottom: 2px solid #9dcc7a;
    /* টেবিলের একদম নিচের মোটা দাগ */
}

.tftable[border='0'] td {
    border-bottom: 1px solid #9dcc7a;
    /* প্রতি রো এর নিচে হালকা চিকন দাগ */
}

.tftable[border='0'] tr:last-child td {
    border-bottom: none;
    /* শেষ লাইনের নিচের চিকন দাগ দরকার নেই কারণ নিচে মোটা দাগ আছে */
}




table td,
table th {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}





/* ///Select2///////////////// */
/* Select2 কন্টেইনারকে ইনপুট গ্রুপের সাথে লাইনে রাখার জন্য */
.input-group>.select2-container--default {
    flex: 1 1 auto;
    width: 1% !important;
}

/* ড্রপডাউন বক্সের হাইট এবং বর্ডার ঠিক করার জন্য */
.input-group>.select2-container--default .select2-selection--single {
    height: 100% !important;
    border: 1px solid #ced4da;
    border-radius: 0;
    /* ইনপুট গ্রুপের মাঝখানে রেডিয়াস রিমুভ করার জন্য */
    display: flex;
    align-items: center;
}

/* যদি বাম পাশের টেক্সট বক্স (Prepend) থাকে তবে তার পাশের কোণা সোজা করার জন্য */
.input-group-prepend~.select2-container--default .select2-selection--single {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* ///Select2///////////////// */

/* Dark theme overrides for Login page input fields */
body.theme-dark .dt-login--container .form-control {
    background-color: #1a2234 !important;
    border-color: #2c374e !important;
    color: #f8fafc !important;
}

body.theme-dark .dt-login--container .form-control::placeholder {
    color: #94a3b8 !important;
    opacity: 0.8;
}

body.theme-dark .dt-login--container label {
    color: #cbd5e1 !important;
}

/* Dark theme adaptation for dashboard and reports */
body.theme-dark .welcome-banner {
    background: linear-gradient(135deg, #0f172a, #1e293b) !important;
    border: 1px solid #2c374e !important;
}

body.theme-dark .dashboard-stat-card {
    background-color: #1a2234 !important;
    border: 1px solid #2c374e !important;
}

body.theme-dark .dashboard-stat-card h2,
body.theme-dark .dashboard-stat-card h4,
body.theme-dark .dashboard-stat-card div {
    color: #f8fafc !important;
}

body.theme-dark .stat-icon-bg {
    color: #ffffff !important;
    opacity: 0.03 !important;
}

body.theme-dark .card-header-dark-friendly {
    background-color: #1a2234 !important;
    border-bottom: 1px solid #2c374e !important;
    color: #f8fafc !important;
}

body.theme-dark .card-body-dark-friendly {
    background-color: #111a2e !important;
    color: #cbd5e1 !important;
}

body.theme-dark .filter-card-dark-friendly {
    background-color: #1a2234 !important;
    border: 1px solid #2c374e !important;
}

body.theme-dark .filter-card-dark-friendly label {
    color: #94a3b8 !important;
}

body.theme-dark .filter-card-dark-friendly .form-control {
    background-color: #111a2e !important;
    border-color: #2c374e !important;
    color: #f8fafc !important;
}

body.theme-dark .table-dark-friendly {
    color: #cbd5e1 !important;
}

body.theme-dark .table-dark-friendly th,
body.theme-dark .table-dark-friendly thead th {
    background-color: #1a2234 !important;
    border-color: #2c374e !important;
    color: #f8fafc !important;
}

body.theme-dark .table-dark-friendly td {
    border-color: #2c374e !important;
}

body.theme-dark .card-header-dark-friendly h6.text-dark,
body.theme-dark .card-header-dark-friendly .text-dark {
    color: #f8fafc !important;
}

/* ///Ticket System///////////////// */





/* ///Accounts Expenses///////////////// */

.acc-card {
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #eef0f3 !important;
    background: #ffffff;
}

.acc-header {
    background: transparent !important;
    border-bottom: 1px solid #eef0f3 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #2D3748 !important;
    padding: 12px 15px !important;
}

.btn-toggle-group {
    display: flex;
    background: #edf2f7;
    padding: 4px;
    border-radius: 10px;
    margin-bottom: 20px;
    border: 1px solid #cbd5e1;
}

.btn-toggle-group button {
    flex: 1;
    border: none !important;
    background: transparent;
    padding: 10px 15px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 8px;
    transition: all 0.3s ease;
    outline: none !important;
}

/* Active received button */
.btn-toggle-group button.btn-received {
    background: #006B44 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 6px rgba(0, 107, 68, 0.15) !important;
}

/* Inactive received button */
.btn-toggle-group button.btn-outline-received {
    color: #006B44 !important;
}

/* Active bill button */
.btn-toggle-group button.btn-info {
    background: #0284c7 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 6px rgba(2, 132, 199, 0.15) !important;
}

/* Inactive bill button */
.btn-toggle-group button.btn-outline-info {
    color: #0284c7 !important;
}

/* Active payment button */
.btn-toggle-group button.btn-payment {
    background: #007bff !important;
    color: #ffffff !important;
    box-shadow: 0 4px 6px rgba(0, 123, 255, 0.15) !important;
}

/* Inactive payment button */
.btn-toggle-group button.btn-outline-payment {
    color: #007bff !important;
}

/* Amount box styling */
.amount-box {
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.amount-box label {
    font-weight: 700 !important;
    font-size: 13px !important;
    margin-bottom: 8px !important;
}

.bg-cr {
    background-color: #f0f4ff !important;
    border: 1px solid #cbd5e1 !important;
}

.bg-bill {
    background-color: #ecfdf5 !important;
    border: 1px solid #a7f3d0 !important;
}

.bg-dr {
    background-color: #fff1f2 !important;
    border: 1px solid #fecdd3 !important;
}

.amount-box input.form-control {
    font-size: 20px !important;
    font-weight: 700 !important;
    height: 48px !important;
    border-radius: 8px !important;
    text-align: right !important;
    padding-right: 15px !important;
}

#cr_part input.form-control {
    background-color: #e8f0fe !important;
    border: 1.5px solid #a5b4fc !important;
    color: #4338ca !important;
}

#bill_part input.form-control {
    background-color: #ecfdf5 !important;
    border: 1.5px solid #6ee7b7 !important;
    color: #047857 !important;
}

#dr_part input.form-control {
    background-color: #fff1f2 !important;
    border: 1.5px solid #fda4af !important;
    color: #be123c !important;
}

.word-display {
    font-size: 11px !important;
    font-style: italic !important;
    color: #64748b !important;
    display: block !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* Card input and labels styling */
.acc-card .form-control {
    border-radius: 8px !important;
    border: 1.5px solid #cbd5e1 !important;
    font-size: 13px !important;
    height: 42px !important;
    transition: all 0.2s ease !important;
}

.acc-card .form-control:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.acc-card label {
    font-weight: 700 !important;
    color: #334155 !important;
    font-size: 13px !important;
    margin-bottom: 6px !important;
}

/* Select2 Global overriding to match standard inputs */
.select2-container--default .select2-selection--single {
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 10px !important;
    transition: all 0.2s ease !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #334155 !important;
    font-size: 13px !important;
    padding-left: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
    right: 8px !important;
}

.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Save transaction button custom styling */
#btn_preview_trigger {
    background: #006B44 !important;
    border-color: #006B44 !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
}

#btn_preview_trigger:hover {
    background: #005234 !important;
    border-color: #005234 !important;
}

/* ============================================================
   DARK MODE OVERRIDES (added 2026-07-22)
   পেজগুলোর ভেতরে হার্ডকোড করা সাদা ব্যাকগ্রাউন্ড ডার্ক মোডে
   ঠিক করার জন্য। লাইট মোডে কোনো প্রভাব নেই।
   Palette: surface #1a2234 | deep #111a2e | border #2c374e
            text #f8fafc / #cbd5e1 / muted #94a3b8
   ============================================================ */

/* --- tftable (রিপোর্ট টেবিল) --- */
body.theme-dark .tftable {
    color: #cbd5e1;
    border-color: #2c374e;
}

body.theme-dark .tftable th {
    background-color: #1a2234;
    color: #f8fafc;
    border-color: #2c374e;
}

body.theme-dark .tftable tr {
    background-color: #111a2e;
}

body.theme-dark .tftable td {
    border-color: #2c374e;
}

body.theme-dark .tftable tr:hover {
    background-color: #232f4b;
}

body.theme-dark .tftable[border='0'],
body.theme-dark .tftable[border='0'] td {
    border-color: #2c374e;
}

/* --- Ticket System --- */
body.theme-dark .ticket-container,
body.theme-dark .ticket-content,
body.theme-dark .ticket-chat-area,
body.theme-dark .chat-messages {
    background: #111a2e !important;
}

body.theme-dark .ticket-sidebar,
body.theme-dark .sidebar-header,
body.theme-dark .chat-header,
body.theme-dark .chat-input-area,
body.theme-dark .mobile-header {
    background: #1a2234 !important;
    color: #f8fafc !important;
    border-color: #2c374e !important;
}

body.theme-dark .staff-message .message-content,
body.theme-dark .attachment-file {
    background: #1a2234 !important;
    border-color: #2c374e !important;
    color: #e2e8f0 !important;
}

body.theme-dark .message-content {
    background: #1a2234;
    color: #e2e8f0;
}

/* --- Accounts (acc-card) --- */
body.theme-dark .acc-card {
    background: #1a2234 !important;
    border-color: #2c374e !important;
}

body.theme-dark .acc-header {
    color: #f8fafc !important;
    border-bottom-color: #2c374e !important;
}

body.theme-dark .acc-card label {
    color: #cbd5e1 !important;
}

body.theme-dark .acc-card .form-control {
    background-color: #111a2e !important;
    border-color: #2c374e !important;
    color: #f8fafc !important;
}

body.theme-dark .btn-toggle-group {
    background: #111a2e;
    border-color: #2c374e !important;
}

/* --- PM2 Server --- */
body.theme-dark .pm2-card {
    background: #1a2234 !important;
    border-color: #2c374e !important;
}

body.theme-dark .nav-tabs-custom {
    background: #111a2e !important;
    color: #cbd5e1 !important;
}

body.theme-dark .nav-tabs-custom .nav-link.active {
    background: #1a2234 !important;
    border-color: #2c374e !important;
}

body.theme-dark .icon-interval {
    background: #3b2f0b !important;
    color: #fbbf24 !important;
}

/* --- বিভিন্ন পেজের কার্ড --- */
body.theme-dark .tree-node-card,
body.theme-dark .stats-banner-card,
body.theme-dark .wa-card,
body.theme-dark .dashboard-stat-card {
    background: #1a2234 !important;
    border-color: #2c374e !important;
    color: #e2e8f0;
}

body.theme-dark .whatsapp-settings-container {
    color: #cbd5e1;
}

/* ইনলাইন style-এ সাদা ব্যাকগ্রাউন্ড দেওয়া কার্ড (যেমন reseller পেজ) */
body.theme-dark .card[style*="background: #fff"],
body.theme-dark .card[style*="background: #ffffff"],
body.theme-dark .card[style*="background-color: #ffffff"] {
    background: #1a2234 !important;
    border-color: #2c374e !important;
}

/* --- Modal (সব পেজের জন্য) --- */
body.theme-dark .modal-content {
    background-color: #1a2234;
    color: #e2e8f0;
}

body.theme-dark .modal-header,
body.theme-dark .modal-footer {
    background: #1a2234 !important;
    border-color: #2c374e !important;
}

body.theme-dark .modal-header .modal-title {
    color: #f8fafc;
}

body.theme-dark .modal-header .close {
    color: #f8fafc;
    text-shadow: none;
}

/* --- Select2 (ডার্ক থিম CSS-এ select2 নেই) --- */
body.theme-dark .select2-container--default .select2-selection--single,
body.theme-dark .select2-container--default .select2-selection--multiple {
    background-color: #111a2e !important;
    border-color: #2c374e !important;
}

body.theme-dark .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #e2e8f0 !important;
}

body.theme-dark .select2-dropdown {
    background-color: #1a2234;
    border-color: #2c374e;
    color: #e2e8f0;
}

body.theme-dark .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: #111a2e;
    border-color: #2c374e;
    color: #e2e8f0;
}

body.theme-dark .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

/* select2-এর নিজের CSS বাছাই করা সারিতে হালকা ধূসর (#ddd) বসায়, তাই
   ডার্ক থিমে ধূসরের উপর ধূসর লেখা — পড়াই যেত না।  আর খোঁজার ঘরটা
   ব্রাউজারের সাদা ইনপুট হয়ে থাকত।  দুটোই এখানে ঠিক করা। */
body.theme-dark .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #1b3550 !important;
    color: #93c5fd !important;
}

body.theme-dark .select2-results__options,
body.theme-dark .select2-results__option {
    background-color: #1a2234;
    color: #e2e8f0;
}

body.theme-dark .select2-search--dropdown {
    background-color: #1a2234;
}

body.theme-dark .select2-search--dropdown .select2-search__field,
body.theme-dark .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: #111a2e !important;
    border: 1px solid #2c374e !important;
    color: #e2e8f0 !important;
    border-radius: 4px;
}

body.theme-dark .select2-search--dropdown .select2-search__field:focus {
    border-color: #3b82f6 !important;
    outline: none;
}

body.theme-dark .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-top-color: #94a3b8;
}

body.theme-dark .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-bottom-color: #94a3b8;
}

body.theme-dark .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #7c8798;
}

body.theme-dark .select2-dropdown {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}

/* বহু-বাছাইয়ের ঘর (টেকনিশিয়ান ইত্যাদি, select2 4.0.5).
   select2 বাছা নামের চিপে হালকা ধূসর (#e4e4e4) পটভূমি দেয়, অথচ ডার্ক
   থিমে লেখা হালকা — তাই বাছা নাম প্রায় অদৃশ্য ছিল।  চিপের ক্রস (#999),
   সব-মুছুন ×, ভেতরের খোঁজার ঘর, ফোকাসের কালো কিনারা আর তালিকার সাদা
   স্ক্রলবারও এখানে ঠিক করা।
   `.theme-dark` লেখা (body. নয়) — থিমের ক্লাস প্রথমে কেবল <html>-এ বসে,
   body-তে বসে পরে; নইলে ডার্ক মোডে এক ঝলক সাদা চিপ দেখা যেত। */
.theme-dark .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #1e3a5f;
    border-color: #2f5b8f;
    color: #dbeafe;
}

.theme-dark .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #93c5fd;
    margin-right: 4px;
}

.theme-dark .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #fca5a5;
}

.theme-dark .select2-container--default .select2-selection--multiple .select2-selection__clear {
    color: #94a3b8;
}

.theme-dark .select2-container--default .select2-selection--multiple .select2-selection__clear:hover {
    color: #fca5a5;
}

.theme-dark .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color: #7c8798;
}

.theme-dark .select2-container--default .select2-search--inline .select2-search__field {
    background: transparent;
    color: #e2e8f0;
}

.theme-dark .select2-container--default .select2-search--inline .select2-search__field::placeholder {
    color: #7c8798;
}

/* select2-এর নিজের নিয়ম ফোকাসে `border: solid black 1px` */
.theme-dark .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #3b82f6 !important;
}

/* খোলা তালিকার স্ক্রলবার ব্রাউজার নিজে সাদা আঁকত */
.theme-dark .select2-results__options {
    color-scheme: dark;
    scrollbar-color: #3a4658 #1a2234;
}

/* --- Bootstrap টেবিল (ডার্ক থিম CSS এগুলো কভার করে না) --- */
body.theme-dark .table {
    color: #cbd5e1;
}

body.theme-dark .table th,
body.theme-dark .table td,
body.theme-dark .table thead th,
body.theme-dark .table-bordered,
body.theme-dark .table-bordered th,
body.theme-dark .table-bordered td {
    border-color: #2c374e !important;
}

body.theme-dark .table-striped tbody tr:nth-of-type(odd) {
    background-color: #1a2234;
}

body.theme-dark .table-striped tbody tr:nth-of-type(even) {
    background-color: #111a2e;
}

body.theme-dark .table thead th {
    background-color: #1a2234;
    color: #f8fafc;
}

/* --- Highcharts গ্রাফ ডার্ক মোড --- */
body.theme-dark .highcharts-background {
    fill: #1a2234;
}

body.theme-dark .highcharts-container text {
    fill: #cbd5e1 !important;
}

body.theme-dark .highcharts-grid-line {
    stroke: #2c374e;
}

body.theme-dark .highcharts-axis-line {
    stroke: #2c374e;
}

/* --- Form control: পেজের নিজস্ব <style> ব্লকের সাদা ইনপুট ঠিক করা --- */
body.theme-dark .form-control {
    background-color: #111a2e !important;
    border-color: #2c374e !important;
    color: #f8fafc !important;
}

body.theme-dark .form-control::placeholder {
    color: #94a3b8 !important;
}

body.theme-dark .form-control:focus {
    background-color: #1a2234 !important;
    color: #f8fafc !important;
}

/* --- টিকিট পেজের বাকি অংশ --- */
body.theme-dark .mobile-description-sidebar,
body.theme-dark .chat-input-group,
body.theme-dark .refresh-popup-modal,
body.theme-dark .custom-alert {
    background: #1a2234 !important;
    color: #e2e8f0 !important;
    border-color: #2c374e !important;
}

body.theme-dark .chat-tool-btn,
body.theme-dark .file-preview-item,
body.theme-dark .refresh-popup-header,
body.theme-dark .refresh-popup-footer,
body.theme-dark .refresh-setting-help,
body.theme-dark .file-info {
    background: #111a2e !important;
    color: #cbd5e1 !important;
    border-color: #2c374e !important;
}

body.theme-dark .file-preview-item:hover,
body.theme-dark .attachment-file:hover,
body.theme-dark .chat-tool-btn:hover {
    background: #232f4b !important;
}

body.theme-dark .notification-permission,
body.theme-dark .mobile-warning {
    background: #3b2f0b !important;
    color: #fbbf24 !important;
    border-color: #6b5416 !important;
}

/* টিকিট পেজে হেডার/টেক্সটের কালো রং হালকা করা */
body.theme-dark .chat-header,
body.theme-dark .sidebar-header,
body.theme-dark .mobile-header {
    color: #f8fafc !important;
}

body.theme-dark .ticket-sidebar h1,
body.theme-dark .ticket-sidebar h2,
body.theme-dark .ticket-sidebar h3,
body.theme-dark .ticket-sidebar h4,
body.theme-dark .ticket-sidebar h5,
body.theme-dark .ticket-sidebar h6,
body.theme-dark .ticket-sidebar label,
body.theme-dark .chat-header h1,
body.theme-dark .chat-header h3,
body.theme-dark .chat-header h4 {
    color: #f8fafc !important;
}

body.theme-dark .message-text {
    color: #e2e8f0;
}

body.theme-dark .message-time {
    color: #94a3b8;
}
/* ===== Dark theme: Bootstrap bg-light / bg-white boxes must stay readable (2026-07-23) ===== */
body.theme-dark .bg-light {
    background-color: #111a2e !important;
    border-color: #2c374e !important;
    color: #e2e8f0;
}
body.theme-dark .bg-white {
    background-color: #1a2234 !important;
    border-color: #2c374e !important;
    color: #e2e8f0;
}
body.theme-dark .bg-light .border,
body.theme-dark .bg-white .border {
    border-color: #2c374e !important;
}
body.theme-dark .bg-light .text-muted,
body.theme-dark .bg-white .text-muted {
    color: #94a3b8 !important;
}
body.theme-dark .navbar-light.bg-light .nav-link {
    color: #cbd5e1;
}

/* ===== Header theme toggle (icon button) ===== */
/* Light theme: white header — dark icon on light pill */
.theme-toggle-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #cbd5e1;
    background: #f1f5f9;
    color: #334155;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    padding: 0;
    outline: none;
    transition: background .2s, transform .2s, color .2s;
}
.theme-toggle-btn:hover {
    background: #e2e8f0;
    transform: rotate(20deg);
}
.theme-toggle-btn:focus { outline: none; box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.3); }
.theme-toggle-btn .fa-moon { color: #334155; }
/* Dark theme: dark header — light icon on translucent pill */
body.theme-dark .theme-toggle-btn {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
}
body.theme-dark .theme-toggle-btn:hover { background: rgba(255, 255, 255, 0.16); }
.theme-toggle-btn .fa-sun { color: #fbbf24; }

/* ===== Dark theme: Bootstrap thead-light table headers readable ===== */
body.theme-dark .thead-light th {
    background-color: #111a2e !important;
    color: #e2e8f0 !important;
    border-color: #2c374e !important;
}
body.theme-dark .resp-link { color: #94a3b8; }
body.theme-dark .resp-link:hover { color: #60a5fa; }

/* ===== Dark theme: SweetAlert popup content contrast ===== */
body.theme-dark .swal2-popup pre {
    color: #e2e8f0;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    padding: 10px 12px;
}
.swal2-popup pre {
    background: #f1f5f9;
    border-radius: 8px;
    padding: 10px 12px;
}

/* (Sidebar menu override removed on request — using the theme's original menu design.) */

/* ===== Dark theme: badge-dark ("dark" যেটা আঁধারে সাদা হয়ে যায়) =====
   থিমের ডার্ক স্টাইলশিটে নামটার মানে উল্টে যায়:

       .badge-dark { color:#212529; background-color:#E0E0E0 }

   অর্থাৎ আঁধারে `badge-dark` মানে **হালকা ধূসর**।  ফলে বিল হিস্ট্রির
   কাজের বোতামগুলোর সারিতে নীল/লাল/হলুদের পাশে ওটা একটা সাদা চাকতি
   হয়ে ফুটে থাকত, আর ভেতরের ট্র্যাশ আইকনটা #212529-এ প্রায় মিশে গিয়ে
   চোখেই পড়ত না।  (একই দশা `.bg-dark`-এর — সেটা রিচার্জ পাতায় আগেই ধরা
   পড়েছিল।)

   এখন আঁধারে ওটা সত্যিকারের নিরপেক্ষ চিপ: গাঢ় স্লেট তল, হালকা লেখা —
   পাশের রঙিন বোতামগুলোর সাথে মানানসই, আর আইকনটা স্পষ্ট। */
body.theme-dark .badge-dark {
    background-color: #39445a !important;
    color: #e2e8f0 !important;
    border-color: #4b5670 !important;
}
body.theme-dark a.badge-dark:hover,
body.theme-dark a.badge-dark:focus,
body.theme-dark button.badge-dark:hover,
body.theme-dark button.badge-dark:focus {
    background-color: #4b5670 !important;
    color: #fff !important;
}
/* মোছার বোতামটা hover-এ লাল — চাপার আগেই বোঝা যায় কাজটা ফেরানো যাবে না */
body.theme-dark button.badge-dark:hover .icon-trash,
button.badge-dark:hover .icon-trash { color: #ff7b72; }

/* --- বন্ধ গ্রাহকের অনলাইন-বাতি (ui_online_dot):
       হলুদ = বন্ধ তবু রাউটারে অনলাইন, কালো = বন্ধ ও অফলাইন --- */
.dot-shape.dot-dis-on { background-color: #f59e0b !important; }
@keyframes pulse-warn-kf {
    0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, .55); }
    70%  { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}
.dot-shape.pulse-warn { animation: pulse-warn-kf 2s infinite; }
/* কালো বিন্দু — ডার্ক থিমেও যেন দেখা যায় (ভিতরে সাদা রিং), আর
   বাকি বাতিগুলোর মতো এটাও মিটমিট করে — ধূসর ঢেউ ছড়ায় */
@keyframes pulse-dark-kf {
    0%   { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6), 0 0 0 0 rgba(100, 116, 139, .6); }
    70%  { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6), 0 0 0 8px rgba(100, 116, 139, 0); }
    100% { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6), 0 0 0 0 rgba(100, 116, 139, 0); }
}
.dot-shape.dot-dis-off {
    background-color: #16181d !important;
    animation: pulse-dark-kf 2s infinite;
}
body.theme-dark .dot-shape.dot-dis-off { background-color: #000 !important; }


/* --- চার-রঙা বাতির ছোট্ট লেজেন্ড (গ্রাহক-তালিকার হেডারে) --- */
.dot-legend { display: inline-flex; gap: 12px; flex-wrap: wrap; align-items: center;
              font-size: 10.5px; font-weight: 700; opacity: .8; }
.dot-legend > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.dot-legend .dl { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.dot-legend .dl.g { background: #22c55e; }
.dot-legend .dl.r { background: #ef4444; }
.dot-legend .dl.y { background: #f59e0b; }
.dot-legend .dl.k { background: #16181d; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .65); }
body.theme-dark .dot-legend .dl.k { background: #000; }

/* ── মূল সাইডবারের স্ক্রল ─────────────────────────────────────────────
   PerfectScrollbar সরিয়ে ব্রাউজারের নিজের স্ক্রল (js/script.js দেখুন)।
   - overscroll-behavior: মেনুর শেষে পৌঁছালে চাকা ঘোরানো পেছনের পাতায়
     গড়ায় না।
   - ul-টা যেন flex-এ চেপে না যায়, পুরো উচ্চতা নিয়ে স্ক্রল হয়।
   - ছোট পর্দার ড্রয়ারে থিম dt-sidebar--fixed তুলে দেয়, তখন overflow-ও
     হারিয়ে যেত — তাই ওখানেও আলাদা করে দেওয়া। */
#main-sidebar.dt-sidebar {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.25) transparent;
}
#main-sidebar.dt-sidebar > .dt-side-nav { flex-shrink: 0; }
#main-sidebar.dt-drawer { height: 100vh !important; height: 100dvh !important; }
#main-sidebar::-webkit-scrollbar { width: 6px; }
#main-sidebar::-webkit-scrollbar-track { background: transparent; }
#main-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 3px; }
#main-sidebar:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.38); }

/* ── মেনুর মাথায় ব্যালেন্স-কার্ড (classes/themes_F.cls.php) ───────────────
   মেনুর রংগুলো CSS ভেরিয়েবলে আসে base.cls.php-র themeCss() থেকে;
   না এলে থিমের সেমিডার্ক রংই।  মেনু গুটালে লুকায়, ড্রয়ারে দেখায়। */
.sb-bal-item{padding:14px 16px 8px;list-style:none;}
.sb-bal{
    display:flex;align-items:center;gap:10px;
    padding:8px 12px;border-radius:8px;
    background:var(--sb-bg,rgba(255,255,255,.06));
    border:1px solid var(--sb-line,rgba(255,255,255,.08));
    border-left:3px solid var(--sb-acc,#00B378);
    color:var(--sb-ink,#9799AC);
    line-height:1.2;min-width:0;
}
.sb-bal__ic{
    flex:0 0 30px;width:30px;height:30px;border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:13px;color:#fff;
    background:var(--sb-acc,#00B378);
}
.sb-bal__txt{display:flex;flex-direction:column;min-width:0;}
.sb-bal__lbl{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
              color:var(--sb-acc,#00B378);}
.sb-bal__amt{font-size:14px;font-weight:600;margin-top:2px;white-space:nowrap;
             overflow:hidden;text-overflow:ellipsis;color:var(--sb-strong,#ffffff);}
.sb-bal__amt small{font-size:10.5px;font-weight:600;opacity:.85;}
.sb-bal.neg .sb-bal__amt{color:#ff6b6b;}
.sb-bal.neg{border-left-color:#ff6b6b;}
.sb-bal.neg .sb-bal__ic{color:#fff;background:#e5484d;}
.sb-bal.neg .sb-bal__lbl{color:#ff6b6b;}

/* মেনু গুটানো (ডেস্কটপ) — কার্ড নেই */
body.dt-sidebar--folded .sb-bal-item{display:none;}

/* ছোট পর্দায় একটু আঁটসাঁট */
@media (max-width:991px){
    .sb-bal-item{padding:10px 14px 6px;}
    .sb-bal{padding:7px 10px;}
    .sb-bal__amt{font-size:13.5px;}
}