/* ================= DARK MODE ================= */
html{
    background:#121212;
    min-height:100%;
}

body{
    margin:0;
    padding:0;
    min-height:100vh;
    background:#fff;
    font-family:'Poppins',sans-serif;
}

body.dark{
    background:#121212;
}


body.dark .page-header{
    background:#1e1e1e;
}

body.dark .page-title{
    color:#f5f5f5;
}

body.dark .page-link a{
    color:#26a69a;
}

body.dark .page-link a:hover{
    opacity:.85;
}

body.dark .page-separator{
    color:#26a69a;
}

body.dark .page-current{
    color:#bdbdbd;
}



body.dark{
    background:#121212;
    color:#e0e0e0;
}

body.dark .page-wrapper{
    background:transparent;
}

body.dark .form-card{
    background:#1e1e1e;
    box-shadow:0 4px 20px rgba(0,0,0,.35);
}

body.dark .jose-form-group input{
    background:#2a2a2a;
    color:#fff;
}

body.dark .jose-form-group input:focus{
    background:#333;
    box-shadow:0 0 0 3px rgba(0,150,136,.15);
}

body.dark .jose-form-group input[readonly]{
    background:#2a2a2a;
    color:#fff;
}

body.dark .jose-form-group input[readonly]:focus{
    background:#2a2a2a;
    box-shadow:none;
}

body.dark .jose-form-group label{
    color:#bdbdbd;
}

body.dark .jose-form-group input:focus + label,
body.dark .jose-form-group input:not(:placeholder-shown) + label,
body.dark .jose-form-group input[readonly] + label{
    color:#26a69a;
    background:#1e1e1e;
}

body.dark .btn-back{
    background:#2a2a2a;
    color:#e0e0e0;
}

body.dark .btn-back:hover{
    background:#353535;
}

body.dark .btn-action{
    background:#009688;
    color:#fff;
}

body.dark .btn-action:hover{
    background:#00796b;
}

body.dark .toast{
    background:#1e1e1e;
}

body.dark .toast-message{
    color:#f5f5f5;
}

body.dark .toast-close{
    color:#bdbdbd;
}

body.dark .toast-close:hover{
    color:#fff;
}



body.dark{
    background:#121212;
    color:#e0e0e0;
}

body.dark .settings-card,
body.dark .modal-box{
    background:#1e1e1e;
}

body.dark .card-title,
body.dark .api-key-text,
body.dark .modal-title{
    color:#f5f5f5;
}

body.dark .card-desc,
body.dark .meta-info,
body.dark .modal-message,
body.dark .section-divider span{
    color:#bdbdbd;
}

body.dark .api-key-box,
body.dark .empty-state,
body.dark .jose-form-group input,
body.dark .btn-secondary{
    background:#2a2a2a;
}

body.dark .api-key-text.masked{
    color:#888;
}

body.dark .jose-form-group input{
    color:#fff;
}

body.dark .jose-form-group input:focus{
    background:#333;
    box-shadow:0 0 0 3px rgba(0,150,136,.15);
}

body.dark .jose-form-group input[readonly]{
    background:#2a2a2a;
    color:#fff;
}

body.dark .jose-form-group input[readonly]:focus{
    background:#2a2a2a;
    box-shadow:none;
}

body.dark .jose-form-group label{
    color:#aaa;
}

body.dark .jose-form-group input:focus + label,
body.dark .jose-form-group input:not(:placeholder-shown) + label,
body.dark .jose-form-group input[readonly] + label{
    background:#1e1e1e;
    color:#26a69a;
}

body.dark .btn-primary{
    background:#009688;
}

body.dark .btn-primary:hover{
    background:#00796b;
}

body.dark .btn-danger{
    background:#4a1f1f;
    color:#ff8a80;
}

body.dark .btn-danger:hover{
    background:#612727;
}

body.dark .btn-warning{
    background:#4e3a16;
    color:#ffcc80;
}

body.dark .btn-warning:hover{
    background:#62481c;
}

body.dark .btn-secondary{
    color:#e0e0e0;
}

body.dark .btn-secondary:hover{
    background:#353535;
}

body.dark .toggle-visibility,
body.dark .copy-btn{
    color:#26a69a;
}

body.dark .toggle-visibility:hover{
    background:rgba(38,166,154,.12);
}

body.dark .copy-btn.copied{
    color:#25D366;
}

body.dark .toast{
    background:#1e1e1e;
}

body.dark .toast-message{
    color:#f5f5f5;
}

body.dark .toast-close{
    color:#aaa;
}

body.dark .toast-close:hover{
    color:#fff;
}

body.dark .modal-overlay{
    background:rgba(0,0,0,.7);
}

body.dark .section-divider::before,
body.dark .section-divider::after{
    background:#444;
}



/* ================= DARK MODE (PAGE TITLE HAIHUSIKI) ================= */

body.dark{
    --transaction-bg:#121212;
    --transaction-card-bg:#1e1e1e;
    --transaction-border:#3a3a3a;
    --transaction-text:#f5f5f5;
    --transaction-text-muted:#bdbdbd;
    --transaction-shadow:0 2px 8px rgba(0,0,0,.45);
    --transaction-primary-light:rgba(0,150,136,.12);
}

body.dark .transaction-loading-overlay{
    background:rgba(18,18,18,.9);
}

body.dark .transaction-error-message{
    background:#3b1f24;
    border-color:#dc3545;
    color:#ffcdd2;
}

body.dark .transaction-table thead,
body.dark .transaction-table th{
    background:var(--transaction-bg);
}

body.dark .transaction-table td:first-child,
body.dark .transaction-table th:first-child{
    background:var(--transaction-card-bg);
}

body.dark .transaction-search-box input,
body.dark .transaction-status-filter-trigger,
body.dark .transaction-status-filter-menu{
    background:var(--transaction-card-bg);
    color:var(--transaction-text);
}

body.dark .transaction-search-box input::placeholder{
    color:var(--transaction-text-muted);
}



/* ==================== DARK MODE ==================== */
body.dark {
    --paypage-bg: #0f1419;
    --paypage-card-bg: #1a1f2e;
    --paypage-border: #2d3748;
    --paypage-text: #e4e6eb;
    --paypage-text-muted: #8b949e;
    --paypage-primary: #00bfa5;
    --paypage-primary-hover: #009688;
    --paypage-primary-light: rgba(0,191,165,0.15);
    --paypage-account-blue: #4dabf7;
    --paypage-shadow: 0 2px 8px rgba(0,0,0,0.4);
    --paypage-danger: #ef4444;
    --paypage-danger-hover: #dc2626;
    --focus-ring-color: rgba(0,191,165,0.15);
    background: var(--paypage-bg);
    color: var(--paypage-text);
}

/* ===== Dark: Table ===== */
body.dark .paypage-table-card {
    background: var(--paypage-card-bg);
    box-shadow: var(--paypage-shadow);
}
body.dark .paypage-table thead,
body.dark .paypage-table th {
    background: #151a24;
}
body.dark .paypage-table th,
body.dark .paypage-table td {
    border-bottom-color: var(--paypage-border);
    color: var(--paypage-text);
}
body.dark .paypage-table tr:hover {
    background: rgba(0,191,165,0.08);
}

/* ===== Dark: Badges ===== */
body.dark .paypage-id-badge {
    background: var(--paypage-primary-light);
    color: var(--paypage-primary);
}
body.dark .paypage-currency-badge {
    background: var(--paypage-primary-light);
    color: var(--paypage-primary);
    border-color: var(--paypage-primary);
}
body.dark .paypage-name,
body.dark .paypage-link-text {
    color: var(--paypage-account-blue);
}
body.dark .paypage-desc {
    color: var(--paypage-text);
}
body.dark .paypage-amount {
    color: var(--paypage-text);
}
body.dark .paypage-amount small {
    color: var(--paypage-text-muted);
}
body.dark .paypage-date-label {
    color: var(--paypage-primary);
}
body.dark .paypage-date-value {
    color: var(--paypage-text);
}

/* ===== Dark: Action Buttons ===== */
body.dark .paypage-action-btn {
    background: #151a24;
    border-color: var(--paypage-border);
    color: var(--paypage-text);
}
body.dark .paypage-action-btn:hover {
    background: var(--paypage-primary-light);
    border-color: var(--paypage-primary);
    color: var(--paypage-primary);
}
body.dark .paypage-action-btn-view:hover {
    background: rgba(77,171,247,0.15);
    border-color: var(--paypage-account-blue);
    color: var(--paypage-account-blue);
}
body.dark .paypage-action-btn-danger:hover {
    background: var(--paypage-danger);
    border-color: var(--paypage-danger);
    color: #fff;
}
body.dark .paypage-action-btn-copy:hover {
    background: var(--paypage-primary);
    border-color: var(--paypage-primary);
    color: #fff;
}

/* ===== Dark: Create Button ===== */
body.dark .paypage-create-btn {
    background: var(--paypage-primary);
    box-shadow: var(--paypage-shadow);
}
body.dark .paypage-create-btn:hover {
    background: var(--paypage-primary-hover);
}

/* ===== Dark: Search Box ===== */
body.dark .paypage-search-box input {
    background: var(--paypage-card-bg);
    border-color: var(--paypage-border);
    color: var(--paypage-text);
}
body.dark .paypage-search-box input::placeholder {
    color: var(--paypage-text-muted);
}
body.dark .paypage-search-box input:focus {
    border-color: var(--paypage-primary);
    background: #151a24;
}
body.dark .paypage-search-box button {
    background: var(--paypage-primary);
}
body.dark .paypage-search-box button:hover {
    background: var(--paypage-primary-hover);
}

/* ===== Dark: Counter ===== */
body.dark .paypage-counter {
    color: var(--paypage-text-muted);
}

/* ===== Dark: Empty State ===== */
body.dark .paypage-empty-state {
    color: var(--paypage-text-muted);
}
body.dark .paypage-empty-state i {
    color: var(--paypage-primary);
}
body.dark .paypage-empty-state h4 {
    color: var(--paypage-text);
}

/* ===== Dark: Loading Overlay ===== */
body.dark .paypage-loading-overlay {
    background: rgba(15,20,25,0.9);
}
body.dark .paypage-spinner {
    border-color: var(--paypage-border);
    border-top-color: var(--paypage-primary);
}
body.dark .paypage-load-more-spinner {
    border-color: var(--paypage-border);
    border-top-color: var(--paypage-primary);
}
body.dark .paypage-load-more-text {
    color: var(--paypage-text-muted);
}

/* ===== Dark: Modals ===== */
body.dark .paypage-modal-overlay {
    background: rgba(0,0,0,0.75);
}
body.dark .paypage-modal-content {
    background: var(--paypage-card-bg);
    color: var(--paypage-text);
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
body.dark .paypage-modal-header {
    border-bottom-color: var(--paypage-border);
}
body.dark .paypage-modal-title {
    color: var(--paypage-text);
}
body.dark .paypage-modal-title i {
    color: var(--paypage-primary);
}
body.dark .paypage-modal-close {
    color: var(--paypage-text-muted);
}
body.dark .paypage-modal-close:hover {
    background: #151a24;
    color: var(--paypage-danger);
}

/* ===== Dark: Form Groups ===== */
body.dark .paypage-form-group label {
    color: var(--paypage-text);
}
body.dark .paypage-form-group input,
body.dark .paypage-form-group textarea,
body.dark .paypage-form-group select {
    background: #151a24;
    border-color: var(--paypage-border);
    color: var(--paypage-text);
}
body.dark .paypage-form-group input:focus,
body.dark .paypage-form-group textarea:focus,
body.dark .paypage-form-group select:focus {
    border-color: var(--paypage-primary);
    background: #0f1419;
}
body.dark .paypage-form-group .paypage-currency-fixed {
    background: var(--paypage-primary-light);
    color: var(--paypage-primary);
    border-color: var(--paypage-primary);
}
body.dark .paypage-form-help {
    color: var(--paypage-text-muted);
}

/* ===== Dark: Modal Buttons ===== */
body.dark .paypage-btn-primary {
    background: var(--paypage-primary);
    color: #fff;
}
body.dark .paypage-btn-primary:hover {
    background: var(--paypage-primary-hover);
}
body.dark .paypage-btn-secondary {
    background: #2d3748;
    color: var(--paypage-text);
}
body.dark .paypage-btn-secondary:hover {
    background: #374151;
}

/* ===== Dark: Delete Modal ===== */
body.dark .paypage-delete-modal-message {
    color: var(--paypage-text-muted);
}
body.dark .paypage-delete-modal-message strong {
    color: var(--paypage-danger);
}

/* ===== Dark: Toasts ===== */
body.dark .toast {
    background: #1a1f2e;
    color: var(--paypage-text);
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
body.dark .toast-message {
    color: var(--paypage-text);
}
body.dark .toast-close {
    color: var(--paypage-text-muted);
}
body.dark .toast-close:hover {
    color: var(--paypage-text);
}

/* ===== Dark: Scrollbar ===== */
body.dark .paypage-table-wrapper::-webkit-scrollbar-track {
    background: var(--paypage-bg);
}
body.dark .paypage-table-wrapper::-webkit-scrollbar-thumb {
    background: var(--paypage-primary);
}

/* ===== Dark: Page Header (kama ipo) ===== */
body.dark .page-header,
body.dark .page-title {
    color: var(--paypage-text);
}
body.dark .page-link a {
    color: var(--paypage-text-muted);
}
body.dark .page-current {
    color: var(--paypage-primary);
}
body.dark .page-separator {
    color: var(--paypage-text-muted);
}



/* ==================== DARK MODE ==================== */
body.dark {
    --kyc-settings-primary: #00bfa5;
    --kyc-settings-primary-dark: #009688;
    --kyc-settings-primary-light: rgba(0,191,165,0.15);
    --kyc-settings-success: #2ecc71;
    --kyc-settings-success-light: rgba(46,204,113,0.15);
    --kyc-settings-success-dark: #27ae60;
    --kyc-settings-warning: #ffa726;
    --kyc-settings-warning-light: rgba(255,167,38,0.15);
    --kyc-settings-danger: #ef5350;
    --kyc-settings-danger-light: rgba(239,83,80,0.15);
    --kyc-settings-info: #42a5f5;
    --kyc-settings-info-light: rgba(66,165,245,0.15);
    --kyc-settings-bg: #0f1419;
    --kyc-settings-card-bg: #1a1f2e;
    --kyc-settings-text: #e4e6eb;
    --kyc-settings-text-light: #a0a8b3;
    --kyc-settings-border: #2d3748;
    background: var(--kyc-settings-bg);
    color: var(--kyc-settings-text);
}

/* ===== Dark: Approved Mode Background ===== */
body.dark.kyc-settings-approved-mode {
    background: linear-gradient(135deg, #0a1a1f 0%, #0f1f1a 50%, #0a1f15 100%);
}

/* ===== Dark: Status Card ===== */
body.dark .kyc-settings-status-card {
    background: var(--kyc-settings-card-bg);
    border-color: var(--kyc-settings-border);
}

body.dark .kyc-settings-status-card.kyc-settings-approved-card {
    background: var(--kyc-settings-card-bg);
}

/* ===== Dark: Success Icon ===== */
body.dark .kyc-settings-success-icon {
    background: linear-gradient(135deg, var(--kyc-settings-success), #27ae60);
    box-shadow: 0 8px 25px rgba(46,204,113,0.3);
}

/* ===== Dark: Status Badges ===== */
body.dark .kyc-settings-status-badge.kyc-settings-pending {
    background: var(--kyc-settings-warning-light);
    color: var(--kyc-settings-warning);
    border-color: var(--kyc-settings-warning);
}

body.dark .kyc-settings-status-badge.kyc-settings-approved {
    background: linear-gradient(135deg, var(--kyc-settings-success), #27ae60);
    color: white;
}

body.dark .kyc-settings-status-badge.kyc-settings-rejected {
    background: var(--kyc-settings-danger-light);
    color: var(--kyc-settings-danger);
    border-color: var(--kyc-settings-danger);
}

body.dark .kyc-settings-status-badge.kyc-settings-required {
    background: var(--kyc-settings-primary-light);
    color: var(--kyc-settings-primary);
    border-color: var(--kyc-settings-primary);
}

/* ===== Dark: Titles & Messages ===== */
body.dark .kyc-settings-status-card .kyc-settings-success-title {
    color: var(--kyc-settings-text);
}

body.dark .kyc-settings-status-card .kyc-settings-success-subtitle {
    color: var(--kyc-settings-success);
}

body.dark .kyc-settings-status-card .kyc-settings-celebration-text {
    color: var(--kyc-settings-text-light);
}

body.dark .kyc-settings-status-message {
    color: var(--kyc-settings-text-light);
}

body.dark .kyc-settings-status-message strong {
    color: var(--kyc-settings-text);
}

/* ===== Dark: Description Boxes ===== */
body.dark .kyc-settings-description-box {
    background: var(--kyc-settings-info-light);
    border-color: var(--kyc-settings-info);
}

body.dark .kyc-settings-description-box p {
    color: var(--kyc-settings-text);
}

body.dark .kyc-settings-description-box i {
    color: var(--kyc-settings-info);
}

body.dark .kyc-settings-description-box.kyc-settings-rejected {
    background: var(--kyc-settings-danger-light);
    border-color: var(--kyc-settings-danger);
}

body.dark .kyc-settings-description-box.kyc-settings-rejected i {
    color: var(--kyc-settings-danger);
}

/* ===== Dark: Buttons ===== */
body.dark .kyc-settings-btn-primary {
    background: var(--kyc-settings-primary);
    border-color: var(--kyc-settings-primary);
    color: white;
}

body.dark .kyc-settings-btn-primary:hover {
    background: var(--kyc-settings-primary-dark);
}

body.dark .kyc-settings-btn-success {
    background: var(--kyc-settings-success);
    border-color: var(--kyc-settings-success);
    color: white;
}

body.dark .kyc-settings-btn-success:hover {
    background: var(--kyc-settings-success-dark);
}

body.dark .kyc-settings-btn-outline {
    background: transparent;
    color: var(--kyc-settings-primary);
    border-color: var(--kyc-settings-primary);
}

body.dark .kyc-settings-btn-outline:hover {
    background: var(--kyc-settings-primary);
    color: white;
}

body.dark .kyc-settings-btn-danger {
    background: var(--kyc-settings-danger);
    border-color: var(--kyc-settings-danger);
    color: white;
}

/* ===== Dark: Message Box ===== */
body.dark .kyc-settings-message {
    background: var(--kyc-settings-card-bg);
    color: var(--kyc-settings-text);
}

body.dark .kyc-settings-message.success {
    background: var(--kyc-settings-success-light);
    border-color: var(--kyc-settings-success);
    color: var(--kyc-settings-success);
}

body.dark .kyc-settings-message.error {
    background: var(--kyc-settings-danger-light);
    border-color: var(--kyc-settings-danger);
    color: var(--kyc-settings-danger);
}

body.dark .kyc-settings-message.info {
    background: var(--kyc-settings-info-light);
    border-color: var(--kyc-settings-info);
    color: var(--kyc-settings-info);
}

/* ===== Dark: Page Header (kama inatumika) ===== */
body.dark .page-header,
body.dark .page-title {
    color: var(--kyc-settings-text);
}

body.dark .page-link a {
    color: var(--kyc-settings-text-light);
}

body.dark .page-current {
    color: var(--kyc-settings-primary);
}

body.dark .page-separator {
    color: var(--kyc-settings-text-light);
}

/* ===== Dark: Confetti Colors (zaidi ya vivid kwa dark bg) ===== */
body.dark .kyc-settings-confetti {
    opacity: 0.8;
}

body.dark .kyc-settings-confetti:nth-child(odd) { background: var(--kyc-settings-primary); }
body.dark .kyc-settings-confetti:nth-child(3n) { background: var(--kyc-settings-warning); }
body.dark .kyc-settings-confetti:nth-child(4n) { background: var(--kyc-settings-danger); }
body.dark .kyc-settings-confetti:nth-child(5n) { background: #ab47bc; }


/* ================= DARK MODE STYLES (FILE NZIMA) ================= */
body.dark-mode {
    --ds-text-primary: #f9fafb;
    --ds-text-secondary: #d1d5db;
    --ds-text-muted: #9ca3af;
    --ds-bg-card: #1f2937;
    --ds-bg-page: #111827;
    --ds-border: #374151;
    --ds-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --ds-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
}

/* --- Service Notices Dark Mode --- */
body.dark-mode .notice-card {
    background: var(--ds-bg-card);
    border-color: var(--ds-border);
}

body.dark-mode .notice-header {
    background: var(--ds-bg-card); /* Inabadilika kuwa giza */
}

body.dark-mode .notice-title {
    color: var(--ds-text-primary); /* Text nyeupe */
}

body.dark-mode .notice-toggle {
    background: #374151; /* Icon box ya giza */
    color: #d1d5db;
}

body.dark-mode .notice-toggle:hover {
    background: #4b5563;
}

body.dark-mode .notice-content {
    background: var(--ds-bg-card); /* Content background giza */
}

body.dark-mode .notice-content.expanded {
    border-top-color: var(--ds-border);
}

body.dark-mode .notice-message {
    color: var(--ds-text-secondary); /* Message text kijivu wazi */
}

/* --- Balance Card Dark Mode --- */
body.dark-mode .ds-balance-card {
    background: #009688; /* Inabaki kijani */
    box-shadow: 0 10px 30px -10px rgba(0, 150, 136, 0.2);
}

/* --- TIL Number Card Dark Mode --- */
body.dark-mode .ds-til-card {
    background: var(--ds-bg-card);
    border-color: var(--ds-border);
}

body.dark-mode .ds-til-card:hover {
    box-shadow: var(--ds-shadow-md);
}

body.dark-mode .ds-til-label {
    color: var(--ds-text-muted);
}

body.dark-mode .ds-til-number {
    color: var(--ds-text-primary);
}

/* --- Stats Section Dark Mode --- */
body.dark-mode .ds-section-title {
    color: var(--ds-text-primary);
}

body.dark-mode .ds-stat-card {
    background: var(--ds-bg-card);
    border-color: var(--ds-border);
}

body.dark-mode .ds-stat-card:hover {
    box-shadow: var(--ds-shadow-md);
}

body.dark-mode .ds-stat-value {
    color: var(--ds-text-primary);
}

body.dark-mode .ds-stat-label {
    color: var(--ds-text-secondary);
}