/* LincPay — charte appliquee a l'espace client et au back-office xRemit.
 *
 * Chargee apres les feuilles de l'editeur: elle redefinit les couleurs sans
 * toucher a la mise en page. Les classes ciblees sont celles reellement
 * presentes dans les vues (form--control, btn--base, dashboard-*,
 * preview-list-*), pas des noms supposes.
 *
 * Memes jetons que site.css: une seule charte pour la vitrine et le portail. */

:root {
  --lp-blue-deep:  #002878;
  --lp-blue:       #0048A8;
  --lp-green-deep: #007A28;
  --lp-green:      #14A038;

  --lp-ink:      #0A1A2F;
  --lp-muted:    #5A6B7C;
  --lp-line:     #D3DBE3;
  --lp-canvas:   #F2F5F8;

  /* Le vert de marque ne dit pas "succes": sans cette distinction, un montant
     recu, un bouton d'envoi et une confirmation deviennent indiscernables. */
  --lp-success: #147A32;
  --lp-warning: #B4700A;
  --lp-danger:  #B3261E;

  /* Variables deja consommees par le theme d'origine: on les detourne plutot
     que de reecrire chaque regle qui s'en sert. */
  --primary-color:   var(--lp-blue-deep);
  --secondary-color: var(--lp-green-deep);
  --base-color:      var(--lp-blue-deep);
  --title-color:     var(--lp-ink);
  --text-color:      var(--lp-muted);
  --border-color:    var(--lp-line);
  --body-color:      var(--lp-muted);
  --heading-color:   var(--lp-ink);
}

/* --- Typographie ---------------------------------------------------- */

body, .body-wrapper, p, td, th, label, input, select, textarea, button {
  font-family: 'Karla', system-ui, sans-serif !important;
}

/* Karla porte bien un interligne serre: 1.55 aerait trop les listes de
   transactions, ou la densite est un avantage. */
body, .body-wrapper { line-height: 1.45; }
p { margin-bottom: .85em; }

h1, h2, h3, h4, h5, h6,
.title, .card-header h5, .dashboard-header-wrapper h3, .section-title {
  font-family: 'Karla', system-ui, sans-serif !important;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--lp-ink);
}

/* Les montants s'alignent en colonne: chiffres a chasse fixe.
   Sans cela, l'oeil ne peut plus comparer les ordres de grandeur. */
.amount, .price, .balance, .trx-amount, .dashboard-list-right,
.preview-list-right, td:last-child, .table td.text-end,
[class*="amount"], [class*="Amount"], [class*="balance"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* --- Surfaces ------------------------------------------------------- */

body { background: var(--lp-canvas); color: var(--lp-ink); }

.custom-card, .card, .dashboard-list-area, .card-form,
.dashboard-list-item, .preview-list-item {
  background: #fff;
  border: 1px solid var(--lp-line) !important;
  border-radius: 12px;
  box-shadow: none !important;
}

.card-header, .dashboard-header-wrapper {
  background: #fff !important;
  border-bottom: 1px solid var(--lp-line);
}

/* --- Navigation et en-tetes ----------------------------------------- */

.sidebar, .dashboard-area .sidebar, .navbar, .header,
.card-header-user-area, .dashboard-btn-wrapper {
  background-color: var(--lp-blue-deep) !important;
  background-image: none !important;
}

.sidebar a, .sidebar .nav-link, .navbar a { color: #C7D4E6 !important; }
.sidebar a:hover, .sidebar .nav-link.active, .navbar a:hover { color: #fff !important; }

/* --- Commandes: aplats uniquement ----------------------------------- */
/* Le degrade appartient au logo. Sous du texte, son contraste varie sur la
   longueur de l'element et une partie devient illisible. */

.btn--base, .btn-primary, .cmn--btn, .dashboard-btn, .btn-base,
button[type="submit"] {
  background-color: var(--lp-blue-deep) !important;
  border-color: var(--lp-blue-deep) !important;
  background-image: none !important;
  color: #fff !important;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  border-radius: 6px;
}

.btn--base:hover, .btn-primary:hover, .cmn--btn:hover,
.dashboard-btn:hover, button[type="submit"]:hover {
  background-color: var(--lp-blue) !important;
  border-color: var(--lp-blue) !important;
}

/* Le vert de marque est reserve au geste d'envoi. */
.btn--send, .btn-send, .btn--success, .btn-transfer {
  background-color: var(--lp-green-deep) !important;
  border-color: var(--lp-green-deep) !important;
  color: #fff !important;
}
.btn--send:hover, .btn-send:hover, .btn--success:hover {
  background-color: var(--lp-green) !important;
  border-color: var(--lp-green) !important;
}

.btn--outline, .btn-outline-primary {
  background: transparent !important;
  color: var(--lp-blue-deep) !important;
  border-color: var(--lp-line) !important;
}
.btn--outline:hover, .btn-outline-primary:hover {
  border-color: var(--lp-blue-deep) !important;
}

a, .text-primary, .text--base { color: var(--lp-blue); }
a:hover { color: var(--lp-blue-deep); }

/* --- Formulaires ---------------------------------------------------- */

.form--control, .form-control, .form-select, .select2-basic,
.trx-inputs input, .otp input {
  border: 1px solid var(--lp-line) !important;
  border-radius: 6px;
  color: var(--lp-ink);
  background: #fff;
}

.form--control:focus, .form-control:focus, .form-select:focus,
.trx-inputs input:focus, .otp input:focus {
  border-color: var(--lp-blue) !important;
  box-shadow: 0 0 0 3px rgba(0, 72, 168, .12) !important;
  outline: none;
}

.form-group label, .form-label { color: var(--lp-muted); font-size: 14px; }

/* Selection du type de transaction: le choix actif se lit d'un coup d'oeil. */
.trx-type-select input:checked + label,
.transaction-type input:checked + label,
.trx-type-select .active {
  border-color: var(--lp-blue-deep) !important;
  background: rgba(0, 40, 120, .05);
  color: var(--lp-blue-deep);
}

/* --- Listes et tableaux --------------------------------------------- */

.table thead th {
  color: var(--lp-muted);
  font-weight: 500;
  background: transparent;
  border-bottom: 1px solid var(--lp-line);
}
.table td { border-color: var(--lp-line); }

.preview-list-item, .dashboard-list-item {
  border-bottom: 1px solid var(--lp-line);
}

.preview-list-user-icon, .dashboard-list-user-icon {
  background: rgba(0, 40, 120, .07) !important;
  color: var(--lp-blue-deep) !important;
}

/* --- Etats ---------------------------------------------------------- */
/* Le rouge et l'ambre ne viennent pas du logo: c'est deliberé. Un refus ne
   doit jamais s'afficher dans une couleur de marque. */

.text--success, .badge--success, .text-success { color: var(--lp-success) !important; }
.bg--success, .badge.bg-success { background-color: var(--lp-success) !important; }

.text--warning, .badge--warning, .text-warning { color: var(--lp-warning) !important; }
.bg--warning, .badge.bg-warning { background-color: var(--lp-warning) !important; }

.text--danger, .badge--danger, .text-danger { color: var(--lp-danger) !important; }
.bg--danger, .badge.bg-danger { background-color: var(--lp-danger) !important; }

/* --- Marque --------------------------------------------------------- */

.navbar-brand img, .logo img, .site-logo img, .sidebar-logo img {
  max-height: 40px;
  width: auto;
}

/* Seul endroit ou le degrade est admis: un bandeau de marque, jamais
   derriere du texte courant. */
.lp-brand-band {
  background: linear-gradient(100deg, #002878 0%, #0048A8 42%, #14A038 62%, #007A28 100%);
  color: #fff;
}


/* --- Portail agent ---------------------------------------------------- */
/* Ces vues ont leur propre gabarit: sans ces regles elles gardent l'identite
 * de l'editeur, logo compris. */

.agent-area, .agent-wrapper, body { background: #fff; }

.agent-logo img, .auth-logo img, .login-logo img,
.card-header img, .navbar-brand img { max-height: 48px; width: auto; }

.agent-sidebar, .agent-header {
  background-color: var(--lp-blue-deep) !important;
  background-image: none !important;
}