:root { --primary: #FF6B00; --primary-dark: #E05A00; --mtn: #FFCC00; --mtn-text: #1a1a1a; --orange: #FF6600; --moov: #0066CC; --success: #28a745; --danger: #dc3545; --warning: #ffc107; --info: #17a2b8; --bg: #f4f6f9; --card-bg: #ffffff; --text: #2d3748; --text-muted: #718096; --border: #e2e8f0; --radius: 10px; --shadow: 0 2px 8px rgba(0,0,0,0.08); } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; } .screen { min-height: 100vh; } .hidden { display: none !important; } /* ── Visibilité par rôle ── Toute élément avec data-role="admin" ou data-role="operator" n'est visible que si la classe correspondante est sur . La classe est posée par showApp() après login en fonction de currentUser.role. */ body:not(.role-admin) [data-role="admin"] { display: none !important; } body:not(.role-operator) [data-role="operator"] { display: none !important; } /* ── Widget solde vendeur (header) ── */ .vendor-balance { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px; background: linear-gradient(135deg, #FFF4E6 0%, #FFE0B3 100%); border: 1px solid #FFB366; border-radius: var(--radius); font-weight: 600; font-size: 13px; color: #7a3e00; } .vendor-balance .vb-sep { color: #FFB366; } .vendor-balance .vb-commission { color: #28a745; } .vendor-balance.low-balance { background: linear-gradient(135deg, #ffe0e0 0%, #ffb3b3 100%); border-color: #dc3545; color: #721c24; } /* ── Carte vente vendeur ── */ .vendor-sale-card { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; margin-bottom: 8px; } .vendor-sale-card .vs-info { flex: 1; } .vendor-sale-card .vs-recipient { font-weight: 600; font-family: monospace; } .vendor-sale-card .vs-amount { font-weight: 700; font-size: 16px; } .vendor-sale-card .vs-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; } /* Bordure latérale = opérateur (MTN jaune, Orange orange, Moov bleu). On garde un dégradé subtil pour mieux distinguer d'un coup d'œil. */ .vendor-sale-card.op-mtn { border-left: 5px solid var(--mtn); background: linear-gradient(90deg, #FFFBEB 0%, #fff 60%); } .vendor-sale-card.op-orange { border-left: 5px solid var(--orange); background: linear-gradient(90deg, #FFF4E6 0%, #fff 60%); } .vendor-sale-card.op-moov { border-left: 5px solid var(--moov); background: linear-gradient(90deg, #E6F2FF 0%, #fff 60%); } /* Petit badge "rond" coloré dans la carte qui répète l'opérateur, utile pour les daltoniens et pour les listes denses où la bordure se voit moins. */ .op-pill { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; vertical-align: middle; margin-left: 2px; } .op-pill.op-mtn { background: var(--mtn); color: var(--mtn-text); } .op-pill.op-orange { background: var(--orange); color: white; } .op-pill.op-moov { background: var(--moov); color: white; } /* Le statut prend la priorité visuelle (succès/échec/cours) sur la droite plutôt que sur la bordure gauche (qui reste celle de l'opérateur). Un petit point coloré dans la zone status remplit ce rôle. */ .vendor-sale-card .vs-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; } .vendor-sale-card .vs-status-dot.s-success { background: var(--success); } .vendor-sale-card .vs-status-dot.s-failed, .vendor-sale-card .vs-status-dot.s-timeout { background: var(--danger); } .vendor-sale-card .vs-status-dot.s-queued, .vendor-sale-card .vs-status-dot.s-processing, .vendor-sale-card .vs-status-dot.s-in_progress, .vendor-sale-card .vs-status-dot.s-dispatched { background: var(--info); } /* Litige : on rend ça très visible (fond ambré + chevalet). La bordure gauche reste la couleur de l'opérateur — on superpose un indicateur droit. */ .vendor-sale-card.has-dispute { background: linear-gradient(90deg, #fffbea 0%, #fff5d6 100%) !important; box-shadow: inset -4px 0 0 #f59e0b; } .vendor-sale-card.has-dispute::after { content: '⚖️ litige'; font-size: 11px; color: #856404; background: #fff3cd; padding: 2px 6px; border-radius: 4px; margin-left: 8px; } /* ── Badge nav (compteur litiges / count chips dans les onglets) ── */ .badge { display: inline-block; min-width: 18px; padding: 2px 6px; font-size: 11px; font-weight: 700; background: var(--danger); color: white; border-radius: 10px; margin-left: 4px; text-align: center; line-height: 1.2; } /* Dans un sort-btn actif, le badge se fond dans le bouton */ .sort-btn .badge { background: rgba(0,0,0,0.15); color: inherit; } .sort-btn.active .badge { background: rgba(255,255,255,0.3); color: white; } /* ── En-tête carte avec actions à droite ── */ .card-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .card-header-row h2 { margin: 0; } .filter-bar { display: flex; align-items: center; gap: 12px; font-size: 13px; flex-wrap: wrap; } .filter-check { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: white; font-size: 13px; cursor: pointer; user-select: none; } .filter-check input { cursor: pointer; } .hint { color: var(--text-muted); font-size: 13px; margin-bottom: 12px; } /* ── Stats mini (vendor dashboard) ── */ .vendor-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; } .stat-mini { display: flex; flex-direction: column; padding: 12px; background: linear-gradient(135deg, #fff 0%, #f4f6f9 100%); border: 1px solid var(--border); border-radius: var(--radius); } .stat-mini-label { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; } .stat-mini-value { font-size: 22px; font-weight: 700; color: var(--text); } /* ── Liste de visibilité forfaits (admin) ── */ .vis-list { display: flex; flex-direction: column; gap: 4px; max-height: 500px; overflow-y: auto; } .vis-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 6px; cursor: pointer; } .vis-row:hover { background: #f4f6f9; } .vis-row .vis-info { flex: 1; } .vis-row .vis-path { font-size: 11px; color: var(--text-muted); font-family: monospace; } .vis-checkbox { width: 18px; height: 18px; cursor: pointer; } /* ── Table admin vendeurs ── */ .data-table { width: 100%; border-collapse: collapse; font-size: 13px; } .data-table thead th { text-align: left; padding: 10px 12px; background: #f4f6f9; font-weight: 600; color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); } .data-table tbody td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: top; } .data-table tbody tr:hover { background: #fafbfc; } .data-table tbody tr.row-inactive { opacity: 0.55; } .data-table .vs-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; } .data-table .btn { margin-right: 4px; } .empty-state { text-align: center; padding: 40px 20px; color: var(--text-muted); background: #fafbfc; border-radius: var(--radius); border: 1px dashed var(--border); } .vendor-sales-list { display: flex; flex-direction: column; gap: 6px; } .page-info { padding: 0 12px; color: var(--text-muted); font-size: 13px; } .pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; } /* ── Forfait vendeur (catalogue cliquable) ── */ .bundle-tile { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; cursor: pointer; transition: all 0.15s; } .bundle-tile:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: var(--shadow); } .bundle-tile.selected { border-color: var(--primary); background: #FFF4E6; box-shadow: var(--shadow); } .bundle-tile .bt-label { font-weight: 600; } .bundle-tile .bt-price { font-size: 18px; font-weight: 700; color: var(--primary); } .bundle-tile .bt-desc { font-size: 12px; color: var(--text-muted); } /* ── Login ── */ #login-screen { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #FF6B00 0%, #E05A00 50%, #1a1a2e 100%); min-height: 100vh; } .login-card { background: white; border-radius: 16px; padding: 40px; width: 100%; max-width: 380px; box-shadow: 0 20px 60px rgba(0,0,0,0.2); } .logo { font-size: 28px; font-weight: 700; color: var(--primary); text-align: center; margin-bottom: 8px; } .login-card h2 { text-align: center; color: var(--text-muted); font-weight: 400; margin-bottom: 28px; } /* ── Navbar ── */ .navbar { background: white; border-bottom: 2px solid var(--primary); padding: 0 24px; display: flex; align-items: center; gap: 16px; height: 56px; position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow); } .nav-brand { font-size: 18px; font-weight: 700; color: var(--primary); flex-shrink: 0; } .nav-links { display: flex; gap: 4px; flex: 1; } .nav-right { display: flex; align-items: center; gap: 12px; } .nav-btn { background: none; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; color: var(--text-muted); font-size: 14px; font-weight: 500; transition: all 0.2s; } .nav-btn:hover { background: var(--bg); color: var(--text); } .nav-btn.active { background: var(--primary); color: white; } #current-user { font-size: 13px; color: var(--text-muted); } .ws-indicator { width: 10px; height: 10px; border-radius: 50%; background: #ccc; display: inline-block; transition: background 0.3s; } .ws-indicator.connected { background: var(--success); box-shadow: 0 0 6px var(--success); } .ws-indicator.disconnected { background: var(--danger); } /* ── Layout ── */ .container { max-width: 1100px; margin: 0 auto; padding: 24px; } .tab-content { padding-top: 8px; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 768px) { .grid-2 { grid-template-columns: 1fr; } .navbar { flex-wrap: wrap; height: auto; padding: 8px 16px; } } /* ── Cards ── */ .card { background: var(--card-bg); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); margin-bottom: 20px; } .card h2 { font-size: 18px; margin-bottom: 20px; color: var(--text); } .card h3 { font-size: 15px; margin-bottom: 16px; color: var(--text); } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; } .card-header h2 { margin-bottom: 0; } /* ── Forms ── */ .field { margin-bottom: 18px; } .field label { display: block; font-weight: 600; margin-bottom: 8px; color: var(--text); font-size: 13px; } input[type="text"], input[type="tel"], input[type="password"], select { width: 100%; padding: 10px 14px; border: 2px solid var(--border); border-radius: 8px; font-size: 14px; transition: border-color 0.2s; outline: none; color: var(--text); background: white; } input:focus, select:focus { border-color: var(--primary); } .phone-input { display: flex; } .phone-prefix { background: var(--bg); border: 2px solid var(--border); border-right: none; border-radius: 8px 0 0 8px; padding: 10px 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap; } .phone-input input { border-radius: 0 8px 8px 0; } /* ── Operator Radio ── */ .operator-select { display: flex; gap: 10px; } .op-radio input { display: none; } .op-badge { display: flex; align-items: center; justify-content: center; padding: 10px 20px; border-radius: 8px; font-weight: 700; font-size: 13px; cursor: pointer; border: 3px solid transparent; transition: all 0.2s; opacity: 0.6; } .op-badge.mtn { background: var(--mtn); color: var(--mtn-text); } .op-badge.orange { background: var(--orange); color: white; } .op-badge.moov { background: var(--moov); color: white; } .op-badge.unknown { background: #e5e7eb; color: #6b7280; } .op-badge.null { background: #e5e7eb; color: #6b7280; } .op-radio input:checked + .op-badge { border-color: var(--text); opacity: 1; transform: scale(1.05); } /* ── Amount Grid ── */ .amount-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .amount-btn { padding: 10px 6px; border: 2px solid var(--border); border-radius: 8px; background: white; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text); transition: all 0.2s; } .amount-btn:hover { border-color: var(--primary); color: var(--primary); } .amount-btn.selected { border-color: var(--primary); background: var(--primary); color: white; } /* ── Custom amount input ── */ .custom-amount-wrap { margin-top: 8px; } .custom-amount-input { width: 100%; padding: 10px 12px; border: 2px solid var(--border); border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--text); background: white; transition: all 0.2s; } .custom-amount-input:focus { outline: none; border-color: var(--primary); } .custom-amount-input.selected { border-color: var(--primary); background: rgba(99, 102, 241, 0.05); } /* ── Operator auto-detected ── */ .operator-detected { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 12px; background: var(--bg, #f8f9fa); border-radius: 8px; font-size: 13px; } .op-detected-label { color: var(--text-muted); } #op-detected-badge { padding: 4px 12px !important; font-size: 12px !important; border: none !important; transform: none !important; } #op-detected-badge.unknown { background: #e5e7eb !important; color: #6b7280 !important; } .link-sm { font-size: 12px; color: var(--primary); text-decoration: none; margin-left: auto; cursor: pointer; } .link-sm:hover { text-decoration: underline; } .hidden { display: none !important; } /* ── Clickable table row ── */ #history-table tbody tr { cursor: pointer; transition: background 0.15s; } #history-table tbody tr:hover { background: rgba(99, 102, 241, 0.06); } #history-table tbody tr.no-hover { cursor: default; } #history-table tbody tr.no-hover:hover { background: transparent; } /* ── Modal ── */ .modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; } .modal.hidden { display: none; } .modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(2px); } .modal-dialog { position: relative; background: white; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); width: 100%; max-width: 620px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); } .modal-header h3 { margin: 0; font-size: 16px; } .modal-close { background: transparent; border: none; font-size: 24px; line-height: 1; cursor: pointer; color: var(--text-muted); padding: 0 4px; } .modal-close:hover { color: var(--text); } .modal-body { padding: 16px 20px; overflow-y: auto; flex: 1; } .modal-footer { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; } .tx-detail-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; } .tx-detail-row:last-child { border-bottom: none; } .tx-detail-row strong { color: var(--text-muted); font-weight: 500; min-width: 140px; flex-shrink: 0; } .tx-detail-row > span, .tx-detail-row > code { text-align: right; word-break: break-word; } .tx-detail-row code { font-family: ui-monospace, monospace; font-size: 12px; background: #f3f4f6; padding: 2px 6px; border-radius: 4px; } .tx-response-block { background: #f8fafc; border: 1px solid var(--border); border-radius: 6px; padding: 10px; font-size: 12px; color: var(--text); white-space: pre-wrap; margin-top: 4px; } /* ── Onglet Forfaits ── */ .bundle-controls { display: flex; gap: 10px; align-items: center; } .bundle-controls select { padding: 8px 12px; border: 2px solid var(--border); border-radius: 8px; background: white; font-size: 13px; font-weight: 600; } .bundle-meta { margin: 12px 0 16px; padding: 10px 14px; background: #f8fafc; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .bundle-meta-item strong { color: var(--text); } .bundle-meta-sep { color: var(--border); } .bundle-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; } .bundle-input { padding: 8px 12px; border: 2px solid var(--border); border-radius: 8px; font-size: 13px; background: white; color: var(--text); flex: 1; min-width: 140px; } .bundle-input-num { flex: 0 0 110px; min-width: 110px; } .bundle-input:focus { outline: none; border-color: var(--primary); } .bundle-filters select { padding: 8px 12px; border: 2px solid var(--border); border-radius: 8px; background: white; font-size: 13px; flex: 0 0 130px; } .bundle-category { margin-bottom: 28px; } .bundle-category-header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--border); } .bundle-category-header h3 { margin: 0; font-size: 16px; color: var(--text); } .bundle-category-count { font-size: 12px; color: var(--text-muted); } .bundle-subcategory { margin: 14px 0 18px; } .bundle-subcategory-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding-left: 4px; } .bundle-subcategory-label { font-weight: 700; font-size: 13px; color: var(--text); text-transform: uppercase; letter-spacing: 0.4px; } .bundle-subcategory-count { font-size: 11px; color: var(--text-muted); background: #f3f4f6; padding: 1px 8px; border-radius: 10px; } .bundle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; } .bundle-card { border: 2px solid var(--border); border-radius: 10px; padding: 12px; background: white; display: flex; flex-direction: column; gap: 6px; transition: all 0.15s; } .bundle-card:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1); } .bundle-card-name { font-weight: 700; font-size: 14px; color: var(--text); line-height: 1.3; } .bundle-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--text-muted); } .bundle-tag { padding: 2px 8px; border-radius: 6px; font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px; } .bundle-tag-data { background: #dbeafe; color: #1e40af; } .bundle-tag-voice { background: #fef3c7; color: #92400e; } .bundle-tag-sms { background: #f3e8ff; color: #6b21a8; } .bundle-tag-mix { background: #dcfce7; color: #166534; } .bundle-card-price { font-size: 15px; font-weight: 800; color: var(--primary); } .bundle-card-actions { margin-top: 4px; display: flex; gap: 6px; } .bundle-card-actions button { flex: 1; font-size: 12px; padding: 6px 10px; } .bundle-empty { padding: 28px; text-align: center; color: var(--text-muted); font-size: 14px; border: 2px dashed var(--border); border-radius: 10px; } /* ── Modal explore ── */ .modal-intro { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin: 0 0 14px; } .modal-intro code { background: #f3f4f6; padding: 1px 5px; border-radius: 4px; font-size: 12px; } .field-hint { display: block; font-size: 11px; color: var(--text-muted); margin-top: 4px; line-height: 1.4; } .explore-params { display: flex; gap: 10px; margin-top: 12px; } .field-half { flex: 1; } /* Section catégories MTN dans le modal exploration */ #explore-mtn-cat-section { margin-bottom: 4px; padding: 10px 14px; background: #fffde7; border: 1px solid #FFD54F; border-radius: 8px; } #explore-mtn-cat-section .field { margin: 0; } #explore-mtn-cat { width: 100%; } .explore-warning { margin-top: 14px; padding: 10px 14px; background: #fffbeb; border: 1px solid #fde68a; color: #78350f; border-radius: 8px; font-size: 12px; line-height: 1.5; } /* ── Modal progression exploration ── */ .explore-progress-bar { width: 100%; height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden; margin-bottom: 12px; } .explore-progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary), #8b5cf6); border-radius: 4px; transition: width 0.3s ease; } .explore-progress-stats { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); margin-bottom: 14px; } .explore-progress-stats strong { color: var(--text); font-size: 16px; } .explore-progress-text { padding: 10px 14px; background: #f8fafc; border-radius: 8px; font-size: 12px; font-family: ui-monospace, monospace; color: var(--text); border: 1px solid var(--border); min-height: 40px; word-break: break-word; } .ussd-preview { background: #1a1a2e; color: #00ff88; font-family: monospace; padding: 12px 16px; border-radius: 8px; font-size: 15px; letter-spacing: 1px; } /* ── Buttons ── */ .btn { padding: 10px 20px; border-radius: 8px; border: none; cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.2s; } .btn-primary { background: var(--primary); color: white; } .btn-primary:hover { background: var(--primary-dark); } .btn-primary:disabled { background: #ccc; cursor: not-allowed; } .btn-outline { background: white; color: var(--primary); border: 2px solid var(--primary); } .btn-outline:hover { background: var(--primary); color: white; } .btn-sm { padding: 6px 14px; font-size: 13px; } .btn-block { width: 100%; } .btn-danger { background: var(--danger); color: white; } .btn-danger:hover { background: #c82333; } /* ── Badges ── */ .badge { padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; display: inline-block; } .badge-success { background: #d4edda; color: #155724; } .badge-danger { background: #f8d7da; color: #721c24; } .badge-warning { background: #fff3cd; color: #856404; } .badge-info { background: #d1ecf1; color: #0c5460; } .badge-primary { background: #cce5ff; color: #004085; } .badge-secondary { background: #e2e3e5; color: #383d41; } /* ── Stats ── */ .stat-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); } .stat-row:last-child { border-bottom: none; } /* ── Transaction List ── */ .tx-list { display: flex; flex-direction: column; gap: 8px; } .tx-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: var(--bg); border-radius: 8px; font-size: 13px; } .tx-item .tx-left { display: flex; flex-direction: column; gap: 2px; } .tx-item .tx-phone { font-weight: 600; } .tx-item .tx-meta { color: var(--text-muted); font-size: 11px; } .tx-item .tx-right { text-align: right; } .tx-item .tx-amount { font-weight: 700; } /* ── Table ── */ .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 13px; } thead th { background: var(--bg); padding: 10px 12px; text-align: left; font-weight: 600; color: var(--text-muted); border-bottom: 2px solid var(--border); } tbody td { padding: 10px 12px; border-bottom: 1px solid var(--border); } tbody tr:hover { background: var(--bg); } /* ── Filters ── */ .filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .filters select, .filters input { width: auto; padding: 7px 10px; font-size: 13px; } /* ── Sort toggle ── */ .sort-toggle { display: flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } .sort-btn { padding: 6px 10px; font-size: 12px; font-weight: 500; cursor: pointer; background: var(--card-bg); border: none; color: var(--text-muted); transition: all .15s; } .sort-btn:hover { background: #f3f4f6; color: var(--text); } .sort-btn.active { background: var(--primary); color: #fff; } .bh-filters .sort-toggle { margin: 0; } /* ── Pagination ── */ .pagination { display: flex; justify-content: center; gap: 6px; padding: 16px 0 0; } .page-btn { padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; background: white; cursor: pointer; font-size: 13px; } .page-btn.active { background: var(--primary); color: white; border-color: var(--primary); } .page-btn:hover:not(.active) { border-color: var(--primary); } /* ── Result card ── */ .result-success { border-left: 4px solid var(--success); } .result-error { border-left: 4px solid var(--danger); } .result-pending { border-left: 4px solid var(--warning); } .result-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; } .result-row:last-child { border: none; } .result-row strong { color: var(--text-muted); } .spinner { display: inline-block; width: 18px; height: 18px; border: 3px solid #f3f3f3; border-top: 3px solid var(--primary); border-radius: 50%; animation: spin 1s linear infinite; vertical-align: middle; margin-right: 8px; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Devices ── */ .device-card { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: var(--bg); border-radius: 8px; margin-bottom: 10px; } .device-info { display: flex; flex-direction: column; gap: 4px; } .device-name { font-weight: 700; } .device-meta { font-size: 12px; color: var(--text-muted); } .device-status { display: flex; align-items: center; gap: 8px; } .status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .status-online { background: var(--success); } .status-offline { background: #ccc; } .status-busy { background: var(--warning); } /* Card layout v2 : la device-card devient un vrai bloc avec ligne d'en-tête (nom + statut) et la liste SIM en dessous. */ .device-card { flex-direction: column; align-items: stretch; gap: 8px; background: #fff; border: 1px solid var(--border); padding: 14px 16px; } .device-header { display: flex; justify-content: space-between; align-items: center; font-size: 15px; } .device-header .device-name { font-size: 16px; } .sim-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding: 8px; border-radius: var(--radius); background: #fafbfc; border: 1px solid var(--border); } .sim-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; cursor: pointer; user-select: none; background: white; border: 1px solid var(--border); transition: opacity 0.15s, background 0.15s; } .sim-row:hover { background: #f4f6f9; } .sim-row.sim-off { opacity: 0.55; background: #fafafa; } .sim-row.sim-off .sim-op-raw { text-decoration: line-through; } .sim-row input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; } .sim-row input[type="checkbox"]:disabled { cursor: not-allowed; } .sim-row .sim-num { font-weight: 700; font-size: 12px; color: var(--text-muted); background: #f4f6f9; padding: 2px 8px; border-radius: 4px; } .sim-row .sim-op-raw { flex: 1; font-size: 13px; } .sim-row .sim-state { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 4px; background: #ecfdf5; color: var(--success); } .sim-row.sim-off .sim-state { background: #fef2f2; color: var(--danger); } /* ── Config box ── */ .config-box { background: var(--bg); border-radius: 8px; padding: 16px; } .config-item { margin-bottom: 14px; } .config-item label { display: block; font-weight: 600; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; text-transform: uppercase; } .config-item code { display: block; background: #1a1a2e; color: #00ff88; padding: 10px 14px; border-radius: 6px; font-size: 13px; word-break: break-all; } /* ── Toast ── */ .toast-container { position: fixed; top: 70px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; } .toast { background: white; border-radius: 8px; padding: 12px 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-left: 4px solid var(--primary); font-size: 13px; max-width: 300px; animation: slideIn 0.3s ease; } .toast.success { border-color: var(--success); } .toast.error { border-color: var(--danger); } .toast.warning { border-color: var(--warning); } @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* ── Error ── */ .error { color: var(--danger); font-size: 13px; margin-top: 8px; } /* ───────────────────────────────────────────────────────────────────────── Wizard d'achat de forfait (inspiré TransfertCI) ───────────────────────────────────────────────────────────────────────── */ .bundle-flow-card { padding: 22px 26px 26px; } .bundle-flow-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .bundle-flow-header h2 { margin: 0; } .bundle-flow-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--text-muted); } .bundle-flow-meta strong { color: var(--text); } .bundle-op-select { padding: 6px 10px; border: 2px solid var(--border); border-radius: 8px; background: white; font-size: 13px; font-weight: 600; } /* ── Stepper ── */ .bundle-stepper { display: flex; align-items: center; justify-content: space-between; list-style: none; margin: 0 auto 24px; padding: 0; max-width: 720px; position: relative; } .bundle-stepper::before { content: ''; position: absolute; left: 22px; right: 22px; top: 14px; height: 2px; background: var(--border); z-index: 0; } .bundle-stepper .step { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; z-index: 1; flex: 1; } .bundle-stepper .step-num { width: 30px; height: 30px; border-radius: 50%; background: white; border: 2px solid var(--border); color: var(--text-muted); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .bundle-stepper .step-label { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; } .bundle-stepper .step.active .step-num, .bundle-stepper .step.done .step-num { background: var(--primary); border-color: var(--primary); color: white; } .bundle-stepper .step.active .step-label, .bundle-stepper .step.done .step-label { color: var(--text); } .bundle-stepper .step.done .step-num::before { content: '✓'; } .bundle-stepper .step.done .step-num { font-size: 0; } .bundle-stepper .step.done .step-num::before { font-size: 14px; } /* ── Étapes ── */ .flow-step { animation: flowFadeIn 0.25s ease; } .flow-step h3 { font-size: 16px; margin: 0 0 4px; color: var(--text); } .step-hint { font-size: 13px; color: var(--text-muted); margin: 0 0 18px; } .step-hint strong { color: var(--text); } .flow-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); } @keyframes flowFadeIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } } /* ── Étape 1 : opérateur détecté ── */ .bf-op-detected { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg); border: 2px solid var(--border); border-radius: 10px; margin-top: 10px; font-size: 13px; font-weight: 600; } /* ── Étape 2 : sous-types ── */ .subtype-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; } .subtype-card { border: 2px solid var(--border); border-radius: 14px; background: white; padding: 22px 16px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; transition: all 0.15s; position: relative; } .subtype-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(255, 107, 0, 0.12); } .subtype-card.active { border-color: var(--primary); background: #fff7f0; } .subtype-icon { font-size: 32px; line-height: 1; } .subtype-name { font-weight: 700; font-size: 15px; color: var(--text); } .subtype-desc { font-size: 12px; color: var(--text-muted); } .subtype-count { margin-top: 6px; background: #f3f4f6; color: var(--text); font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 12px; } .subtype-card.active .subtype-count { background: var(--primary); color: white; } /* ── Étape 3 : catégories ── */ .category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .category-card { border: 2px solid var(--border); border-radius: 12px; background: white; padding: 16px 18px; cursor: pointer; transition: all 0.15s; display: flex; flex-direction: column; gap: 4px; text-align: left; } .category-card:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255, 107, 0, 0.10); } .category-card.featured { background: linear-gradient(135deg, #fff7f0 0%, #ffe8d4 100%); border-color: #ffd5a8; } .category-card-name { font-weight: 700; font-size: 14px; color: var(--text); } .category-card-count { font-size: 12px; color: var(--text-muted); } /* ── Étape 4 : liste forfaits (style TransfertCI) ── */ .bf-bundle-list { display: flex; flex-direction: column; gap: 10px; max-height: 480px; overflow-y: auto; padding: 4px; } .bf-bundle-row { border: 2px solid var(--border); border-radius: 12px; background: white; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; transition: all 0.15s; } .bf-bundle-row:hover { border-color: var(--primary); background: #fff7f0; } .bf-bundle-row-info { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .bf-bundle-row-name { font-weight: 700; font-size: 14px; color: var(--text); } .bf-bundle-row-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); } .bf-bundle-row-validity { display: inline-flex; align-items: center; gap: 4px; background: #ede9fe; color: #5b21b6; font-weight: 600; padding: 2px 10px; border-radius: 14px; font-size: 11px; } .bf-bundle-row-price { text-align: right; flex-shrink: 0; } .bf-bundle-row-price-amount { font-size: 22px; font-weight: 800; color: var(--primary); line-height: 1; } .bf-bundle-row-price-unit { font-size: 11px; color: var(--text-muted); font-weight: 600; } /* ── Étape 5 : récap ── */ .bundle-recap-table { width: 100%; border-collapse: collapse; margin-bottom: 18px; background: var(--bg); border-radius: 10px; overflow: hidden; } .bundle-recap-table th, .bundle-recap-table td { padding: 10px 16px; font-size: 13px; text-align: left; border-bottom: 1px solid var(--border); } .bundle-recap-table tr:last-child th, .bundle-recap-table tr:last-child td { border-bottom: 0; } .bundle-recap-table th { width: 30%; color: var(--text-muted); font-weight: 600; } .bundle-recap-table td { color: var(--text); font-weight: 600; } .bundle-recap-table #bf-rec-details-final { display: flex; flex-direction: column; gap: 4px; font-weight: 500; } .recap-feature { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); font-weight: 500; } .recap-feature::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--moov-orange); flex-shrink: 0; } .bundle-recap-table .amount-cell { color: var(--primary); font-size: 16px; font-weight: 800; } .sim-slot-pick { margin-bottom: 14px; } .sim-pick-label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 8px; } .sim-options { display: flex; gap: 10px; } .sim-option { flex: 1; border: 2px solid var(--border); border-radius: 10px; padding: 10px 14px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; transition: all 0.15s; } .sim-option input { margin: 0; } .sim-option:has(input:checked) { border-color: var(--primary); background: #fff7f0; color: var(--primary); } .recap-warning { background: #fef3c7; border-left: 4px solid #f59e0b; padding: 10px 14px; border-radius: 8px; font-size: 12px; color: #78350f; margin-bottom: 14px; line-height: 1.4; } /* ── Étape 6 : transaction ── */ .tx-progress-card { background: linear-gradient(135deg, #1f2937 0%, #111827 100%); color: white; border-radius: 14px; padding: 20px 24px; } .tx-progress-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; } .tx-progress-head .tx-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: #9ca3af; } .tx-progress-head .tx-value { font-size: 18px; font-weight: 700; margin-top: 2px; letter-spacing: 1px; } .tx-amount { font-size: 28px; font-weight: 800; color: white; margin-bottom: 2px; } .tx-subtitle { font-size: 12px; color: #9ca3af; margin-bottom: 16px; } .tx-progress-bar { height: 12px; background: #374151; border-radius: 6px; overflow: hidden; margin-bottom: 8px; position: relative; } .tx-progress-fill { height: 100%; background: linear-gradient(90deg, #10b981 0%, #34d399 100%); border-radius: 6px; width: 0%; transition: width 0.4s ease; background-size: 30px 30px; background-image: linear-gradient(45deg, rgba(255,255,255,0.18) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.18) 75%, transparent 75%, transparent); animation: tx-stripes 1s linear infinite; } .tx-progress-fill.done { animation: none; background: #10b981; } .tx-progress-fill.failed { animation: none; background: linear-gradient(90deg, #ef4444 0%, #f87171 100%); } @keyframes tx-stripes { from { background-position: 0 0; } to { background-position: 30px 0; } } .tx-progress-stats { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .tx-progress-status { background: #10b981; color: white; padding: 3px 12px; border-radius: 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; } .tx-progress-status.done { background: #10b981; } .tx-progress-status.failed { background: #ef4444; } .tx-progress-status.pending { background: #f59e0b; } .tx-progress-eta { font-size: 11px; color: #9ca3af; } .tx-progress-text { font-size: 13px; color: #d1d5db; background: rgba(255,255,255,0.06); padding: 8px 12px; border-radius: 8px; margin-top: 8px; line-height: 1.4; } /* ── Footer historique récents ── */ .bundle-history-card { padding: 18px 22px; } .bundle-history-card .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .bundle-history-card .card-header h3 { margin: 0; font-size: 14px; } .status-live { font-size: 11px; font-weight: 700; color: #10b981; display: inline-flex; align-items: center; gap: 4px; } .bf-recent-list { display: flex; flex-direction: column; gap: 8px; } .bf-recent-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--bg); border-radius: 10px; font-size: 13px; } .bf-recent-icon { width: 32px; height: 32px; border-radius: 8px; background: white; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; } .bf-recent-info { flex: 1; min-width: 0; } .bf-recent-name { font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bf-recent-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; } .bf-recent-amount { font-size: 14px; font-weight: 800; color: var(--primary); } .bf-recent-status { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 8px; text-transform: uppercase; } .bf-recent-status.success { background: #d1fae5; color: #065f46; } .bf-recent-status.failed { background: #fee2e2; color: #991b1b; } .bf-recent-status.pending, .bf-recent-status.queued, .bf-recent-status.processing { background: #fef3c7; color: #92400e; } .bf-empty { color: var(--text-muted); font-size: 13px; font-style: italic; text-align: center; padding: 16px; } /* responsive */ @media (max-width: 720px) { .bundle-flow-card { padding: 16px; } .bundle-stepper .step-label { display: none; } .bundle-stepper { max-width: 100%; } } /* ───────────────────────────────────────────────────────────────────────── STYLE MOOV AFRICA — grille catégories + accordéons + cards (couleurs : orange #F58220, bleu #16538A → #1E6FB8) ───────────────────────────────────────────────────────────────────────── */ :root { --moov-blue: #16538A; --moov-blue-2: #1E6FB8; --moov-orange: #F58220; --moov-orange-2: #FFA552; --moov-card-border: #B5D4F0; } /* ── Étape 2 : grille catégories racine ── */ .moov-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-bottom: 8px; } .moov-cat-card { border-radius: 14px; border: none; cursor: pointer; padding: 22px 18px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: white; text-align: center; transition: all 0.15s; position: relative; min-height: 130px; justify-content: center; } .moov-cat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18); } .moov-cat-orange { background: linear-gradient(135deg, var(--moov-orange) 0%, var(--moov-orange-2) 100%); } .moov-cat-blue { background: linear-gradient(135deg, var(--moov-blue) 0%, var(--moov-blue-2) 100%); } .moov-cat-icon { width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, 0.95); font-size: 26px; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; } .moov-cat-name { font-weight: 700; font-size: 14px; letter-spacing: 0.2px; line-height: 1.25; } .moov-cat-count { font-size: 11px; opacity: 0.85; background: rgba(255, 255, 255, 0.18); padding: 2px 10px; border-radius: 12px; font-weight: 700; } /* ── Étape 3 : accordéons + cards ── */ .moov-bundles { display: flex; flex-direction: column; gap: 12px; } /* Accordéon : header bleu fermé / orange ouvert */ .moov-accordion { } .moov-accordion-head { width: 100%; border: none; border-radius: 14px; background: linear-gradient(135deg, var(--moov-blue) 0%, var(--moov-blue-2) 100%); color: white; padding: 16px 22px; font-size: 15px; font-weight: 700; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: all 0.2s; } .moov-accordion-head:hover { filter: brightness(1.05); } .moov-accordion-head .chev { transition: transform 0.25s; font-size: 13px; } .moov-accordion.open .moov-accordion-head { background: linear-gradient(135deg, var(--moov-orange) 0%, var(--moov-orange-2) 100%); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .moov-accordion.open .moov-accordion-head .chev { transform: rotate(180deg); } .moov-accordion-body { display: none; padding: 12px 0 4px; flex-direction: column; gap: 10px; } .moov-accordion.open .moov-accordion-body { display: flex; } /* Card forfait : bordure bleu clair, prix capsule orange */ .moov-bundle-card { border: 1px solid var(--moov-card-border); border-radius: 12px; background: white; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; transition: all 0.15s; } .moov-bundle-card:hover { border-color: var(--moov-blue-2); box-shadow: 0 4px 14px rgba(22, 83, 138, 0.12); transform: translateY(-1px); } .moov-bundle-info { flex: 1; min-width: 0; } .moov-bundle-title { font-weight: 600; font-size: 14px; color: #2d3748; line-height: 1.4; margin-bottom: 4px; } .moov-bundle-sub { font-size: 12px; color: var(--text-muted); font-style: italic; } .moov-bundle-features { list-style: none; padding: 0; margin: 4px 0 4px 0; display: flex; flex-direction: column; gap: 2px; } .moov-bundle-features li { font-size: 12px; color: #555; padding-left: 14px; position: relative; line-height: 1.4; } .moov-bundle-features li::before { content: '•'; position: absolute; left: 2px; color: var(--moov-blue); font-weight: 700; } .moov-bundle-price { flex-shrink: 0; background: linear-gradient(135deg, var(--moov-orange) 0%, var(--moov-orange-2) 100%); color: white; font-weight: 700; font-size: 15px; padding: 8px 18px; border-radius: 22px; white-space: nowrap; box-shadow: 0 2px 6px rgba(245, 130, 32, 0.30); } /* Si une catégorie a une seule "sous-cat" (ex Izy Mix +), on affiche les cards directement sans accordéon */ .moov-bundles-direct { display: flex; flex-direction: column; gap: 10px; } /* Empty state dédié */ .moov-bundles-empty { padding: 24px; text-align: center; color: var(--text-muted); font-size: 14px; border: 1px dashed var(--moov-card-border); border-radius: 12px; } /* ── Historique des achats forfaits (Étape D-3) ──────────────────────────── */ .bh-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 16px 0 24px; } .bh-stat-card { background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; } .bh-stat-card.success { background: #ecfdf5; border-color: #a7f3d0; } .bh-stat-card.failed { background: #fef2f2; border-color: #fecaca; } .bh-stat-card.revenue { background: #fff7ed; border-color: #fed7aa; } .bh-stat-card.cash { background: #fff4e6; border-color: #ffb366; } .bh-stat-card.commission { background: #f0fdf4; border-color: #86efac; } .bh-stat-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); } .bh-stat-value { font-size: 22px; font-weight: 700; color: var(--text); } .bh-filters { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .bh-filters select, .bh-filters input { padding: 8px 12px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 13px; flex: 1; min-width: 140px; } .bh-list { display: flex; flex-direction: column; gap: 8px; } .bh-empty { padding: 32px; text-align: center; color: var(--text-muted); border: 1px dashed #e5e7eb; border-radius: 10px; } .bh-row { display: grid; grid-template-columns: auto 1fr auto auto auto auto; gap: 12px; align-items: center; padding: 12px 14px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; cursor: pointer; transition: all 0.15s; } .bh-row:hover { border-color: var(--primary); background: #fafbff; } .bh-row-status { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.3px; } .bh-row-status.success { background: #d1fae5; color: #065f46; } .bh-row-status.failed, .bh-row-status.timeout { background: #fee2e2; color: #991b1b; } .bh-row-status.queued, .bh-row-status.dispatched, .bh-row-status.in_progress { background: #fef3c7; color: #92400e; } .bh-row-recipient { font-weight: 600; font-size: 14px; color: var(--text); } .bh-row-label { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .bh-row-price { font-size: 15px; font-weight: 700; color: var(--text); } .bh-cashback { display: block; font-size: 11px; font-weight: 600; color: #16a34a; margin-top: 1px; } .bh-row-balance { font-size: 11px; color: var(--text-muted); text-align: right; white-space: nowrap; } .bh-row-balance b { color: var(--text); font-size: 12px; } .bh-row-verified { font-size: 16px; cursor: help; } .bh-row-date { font-size: 11px; color: var(--text-muted); white-space: nowrap; } /* Type badge — historique unifié */ .type-badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; margin-bottom: 3px; letter-spacing: .3px; } .type-badge.recharge { background: #dbeafe; color: #1e40af; } .type-badge.forfait { background: #ede9fe; color: #5b21b6; } .bh-row-bundle { font-size: 11px; color: var(--text-muted); margin-top: 1px; } /* Modal détails */ .modal-lg { max-width: 720px !important; } .modal-xl { max-width: 1100px !important; } .bh-detail-section { margin-bottom: 18px; } .bh-detail-section h4 { margin: 0 0 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); } .bh-detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 24px; font-size: 13px; } .bh-detail-grid > div { display: flex; justify-content: space-between; border-bottom: 1px dashed #f1f5f9; padding: 4px 0; } .bh-detail-grid > div span:first-child { color: var(--text-muted); } .bh-detail-grid > div span:last-child { font-weight: 600; } .bh-detail-pre { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; font-family: ui-monospace, 'SF Mono', Consolas, monospace; font-size: 12px; white-space: pre-wrap; word-break: break-word; max-height: 200px; overflow-y: auto; color: #334155; } .bh-balance-delta { display: inline-block; margin-left: 8px; font-weight: 700; padding: 2px 8px; border-radius: 6px; font-size: 12px; } .bh-balance-delta.match { background: #d1fae5; color: #065f46; } .bh-balance-delta.mismatch { background: #fef3c7; color: #92400e; } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }