/* ================================================================
   LISTMONK ADMIN THEME — GROUPE APOLLINE
   Charte : Navy (#1a2332) / Gold (#c9a961)
   Appliquer dans : Settings → Appearance → Admin custom CSS
   ================================================================ */

/* --- Variables de couleurs (charte Apolline) --- */
:root {
  --apo-navy: #1a2332;
  --apo-navy-dark: #0f1620;
  --apo-navy-light: #2a3648;
  --apo-gold: #c9a961;
  --apo-gold-dark: #b5975a;
  --apo-gold-light: #d4b97a;
  --apo-gold-soft: #f5ecd4;
  --apo-cream: #faf8f3;
  --apo-text: #1a2332;
  --apo-text-muted: #6b7280;
  --apo-border: #e5e2d9;
}

/* --- Typographie globale --- */
body,
.b-table,
.navbar-item,
.menu-list a,
.input,
.textarea,
.select select,
.button,
.tag {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

body {
  background-color: var(--apo-cream) !important;
  color: var(--apo-text) !important;
}

/* --- Sidebar de navigation (barre de gauche) --- */
.side-nav,
aside.menu,
.b-sidebar .sidebar-content {
  background-color: var(--apo-navy) !important;
  border-right: 3px solid var(--apo-gold) !important;
}

/* Logo zone */
.side-nav .logo,
.side-nav .brand {
  background-color: var(--apo-navy-dark) !important;
  border-bottom: 1px solid var(--apo-gold) !important;
  padding: 1.25rem 1rem !important;
}

/* Liens du menu */
.side-nav a,
.menu-list a,
aside.menu .menu-list a {
  color: #e5e7eb !important;
  font-weight: 400 !important;
  border-radius: 0 !important;
  padding: 0.75rem 1.25rem !important;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}

.side-nav a:hover,
.menu-list a:hover,
aside.menu .menu-list a:hover {
  background-color: var(--apo-navy-light) !important;
  color: var(--apo-gold-light) !important;
  border-left-color: var(--apo-gold) !important;
}

/* Lien actif */
.side-nav a.is-active,
.menu-list a.is-active,
.menu-list li.is-active > a,
aside.menu .menu-list a.is-active {
  background-color: var(--apo-navy-dark) !important;
  color: var(--apo-gold) !important;
  border-left: 3px solid var(--apo-gold) !important;
  font-weight: 500 !important;
}

/* Sous-menu */
.menu-list li ul {
  border-left: 1px solid rgba(201, 169, 97, 0.3) !important;
  margin-left: 1rem !important;
  padding-left: 0.5rem !important;
}

/* Titres de section dans le menu */
.menu-label,
.side-nav .menu-label {
  color: var(--apo-gold-light) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  padding: 1.25rem 1.25rem 0.5rem !important;
  margin: 0 !important;
}

/* --- Barre supérieure (topbar) --- */
.navbar,
.top-nav {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--apo-border) !important;
  box-shadow: 0 1px 3px rgba(26, 35, 50, 0.04) !important;
}

.navbar-item {
  color: var(--apo-text) !important;
}

/* --- Boutons primaires (actions principales) --- */
.button.is-primary,
button.is-primary {
  background-color: var(--apo-navy) !important;
  border-color: var(--apo-navy) !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  border-radius: 4px !important;
  transition: all 0.2s ease;
}

.button.is-primary:hover,
button.is-primary:hover {
  background-color: var(--apo-navy-dark) !important;
  border-color: var(--apo-gold) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(26, 35, 50, 0.15);
}

.button.is-primary:active {
  transform: translateY(0);
}

/* Bouton succès → on le rend gold */
.button.is-success {
  background-color: var(--apo-gold) !important;
  border-color: var(--apo-gold) !important;
  color: var(--apo-navy) !important;
  font-weight: 500 !important;
}

.button.is-success:hover {
  background-color: var(--apo-gold-dark) !important;
  border-color: var(--apo-gold-dark) !important;
  color: var(--apo-navy-dark) !important;
}

/* Boutons secondaires */
.button.is-link {
  background-color: transparent !important;
  border-color: var(--apo-navy) !important;
  color: var(--apo-navy) !important;
}

.button.is-link:hover {
  background-color: var(--apo-navy) !important;
  color: #ffffff !important;
}

/* Bouton danger (rouge plus sobre) */
.button.is-danger {
  background-color: #a32d2d !important;
  border-color: #a32d2d !important;
}

/* --- Cartes et panels --- */
.box,
.card,
.card-content {
  background-color: #ffffff !important;
  border: 1px solid var(--apo-border) !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 3px rgba(26, 35, 50, 0.04) !important;
}

.card-header {
  background-color: #ffffff !important;
  border-bottom: 2px solid var(--apo-gold) !important;
  border-radius: 6px 6px 0 0 !important;
}

.card-header-title {
  color: var(--apo-navy) !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
}

/* --- Titres de page --- */
h1.title,
h2.title,
h3.title,
.page-title,
.section-title {
  color: var(--apo-navy) !important;
  font-weight: 600 !important;
  position: relative;
  padding-bottom: 0.5rem;
}

h1.title::after,
h2.title::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background-color: var(--apo-gold);
  margin-top: 0.5rem;
  border-radius: 2px;
}

/* --- Inputs et formulaires --- */
.input,
.textarea,
.select select {
  border: 1px solid var(--apo-border) !important;
  border-radius: 4px !important;
  color: var(--apo-text) !important;
  background-color: #ffffff !important;
  transition: all 0.2s ease;
}

.input:focus,
.textarea:focus,
.select select:focus {
  border-color: var(--apo-gold) !important;
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.15) !important;
  outline: none !important;
}

.label {
  color: var(--apo-navy) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
}

/* --- Tableaux (listes subscribers, campaigns, etc.) --- */
.b-table table.table,
table.table {
  background-color: #ffffff !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(26, 35, 50, 0.04) !important;
  border: 1px solid var(--apo-border) !important;
}

table.table thead th {
  background-color: var(--apo-navy) !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.05em !important;
  border: none !important;
  padding: 1rem !important;
}

table.table tbody tr {
  transition: background-color 0.2s ease;
  border-bottom: 1px solid var(--apo-border) !important;
}

table.table tbody tr:hover {
  background-color: var(--apo-gold-soft) !important;
}

table.table tbody td {
  color: var(--apo-text) !important;
  padding: 1rem !important;
  border: none !important;
  border-bottom: 1px solid var(--apo-border) !important;
}

table.table tbody tr:last-child td {
  border-bottom: none !important;
}

/* --- Tags et badges --- */
.tag {
  border-radius: 3px !important;
  font-weight: 500 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 0.35rem 0.75rem !important;
}

.tag.is-success,
.tag.is-active {
  background-color: var(--apo-gold-soft) !important;
  color: #7a5d20 !important;
  border: 1px solid var(--apo-gold) !important;
}

.tag.is-info {
  background-color: #e8eef5 !important;
  color: var(--apo-navy) !important;
  border: 1px solid var(--apo-navy-light) !important;
}

.tag.is-warning {
  background-color: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #f59e0b !important;
}

.tag.is-danger {
  background-color: #fee2e2 !important;
  color: #991b1b !important;
  border: 1px solid #dc2626 !important;
}

/* --- Modales --- */
.modal-card-head {
  background-color: var(--apo-navy) !important;
  border-bottom: 3px solid var(--apo-gold) !important;
  border-radius: 6px 6px 0 0 !important;
}

.modal-card-title {
  color: #ffffff !important;
  font-weight: 500 !important;
}

.modal-card-head .delete,
.modal-card-head button.delete {
  background-color: var(--apo-gold) !important;
}

.modal-card-body {
  background-color: #ffffff !important;
}

.modal-card-foot {
  background-color: var(--apo-cream) !important;
  border-top: 1px solid var(--apo-border) !important;
}

/* --- Notifications (toast) --- */
.notification,
.notices .toast {
  border-radius: 4px !important;
  border-left: 4px solid var(--apo-gold) !important;
  box-shadow: 0 4px 12px rgba(26, 35, 50, 0.15) !important;
}

.notification.is-success,
.notices .toast.is-success {
  background-color: var(--apo-gold-soft) !important;
  color: var(--apo-navy) !important;
  border-left-color: var(--apo-gold) !important;
}

.notification.is-danger,
.notices .toast.is-danger {
  background-color: #fee2e2 !important;
  border-left-color: #dc2626 !important;
}

/* --- Onglets --- */
.tabs ul {
  border-bottom-color: var(--apo-border) !important;
}

.tabs li.is-active a {
  color: var(--apo-navy) !important;
  border-bottom-color: var(--apo-gold) !important;
  border-bottom-width: 3px !important;
  font-weight: 600 !important;
}

.tabs a {
  color: var(--apo-text-muted) !important;
  border-bottom-width: 3px !important;
  transition: all 0.2s ease;
}

.tabs a:hover {
  color: var(--apo-navy) !important;
  border-bottom-color: var(--apo-gold-light) !important;
}

/* --- Pagination --- */
.pagination-link.is-current {
  background-color: var(--apo-navy) !important;
  border-color: var(--apo-navy) !important;
  color: var(--apo-gold) !important;
  font-weight: 600 !important;
}

.pagination-link:hover,
.pagination-previous:hover,
.pagination-next:hover {
  border-color: var(--apo-gold) !important;
  color: var(--apo-navy) !important;
}

/* --- Checkboxes et radios --- */
.b-checkbox input[type=checkbox]:checked + .check,
input[type=checkbox]:checked + .check {
  background-color: var(--apo-gold) !important;
  border-color: var(--apo-gold) !important;
}

.b-radio input[type=radio]:checked + .check,
input[type=radio]:checked + .check {
  border-color: var(--apo-gold) !important;
}

.b-radio input[type=radio]:checked + .check::before {
  background-color: var(--apo-gold) !important;
}

/* --- Dashboard / KPI cards --- */
.level-item .heading {
  color: var(--apo-text-muted) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}

.level-item .title,
.level-item p.title {
  color: var(--apo-navy) !important;
  font-weight: 700 !important;
  font-size: 2rem !important;
}

/* Chiffres importants sur dashboard */
.dashboard .box .title,
.stats .number {
  background: linear-gradient(135deg, var(--apo-navy) 0%, var(--apo-gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- Liens classiques --- */
a {
  color: var(--apo-navy) !important;
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--apo-gold-dark) !important;
}

/* --- Scrollbar (webkit) --- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--apo-cream);
}

::-webkit-scrollbar-thumb {
  background: var(--apo-navy-light);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--apo-navy);
}

/* --- Détails esthétiques --- */
hr {
  background-color: var(--apo-border) !important;
  border: none !important;
  height: 1px !important;
}

code,
pre {
  background-color: var(--apo-navy-dark) !important;
  color: var(--apo-gold-light) !important;
  border-radius: 4px !important;
  font-family: 'JetBrains Mono', 'Courier New', monospace !important;
}

/* --- Icônes en gold sur fond navy --- */
.side-nav a .icon,
.menu-list a .icon {
  color: var(--apo-gold-light) !important;
  opacity: 0.85;
}

.side-nav a:hover .icon,
.menu-list a:hover .icon,
.side-nav a.is-active .icon {
  color: var(--apo-gold) !important;
  opacity: 1;
}

/* --- Editor (tiptap / quill) --- */
.ql-toolbar,
.editor-toolbar {
  background-color: var(--apo-navy) !important;
  border-color: var(--apo-navy) !important;
}

.ql-toolbar button,
.ql-toolbar .ql-stroke {
  color: var(--apo-gold-light) !important;
  stroke: var(--apo-gold-light) !important;
}

.ql-toolbar button:hover .ql-stroke,
.ql-toolbar button.ql-active .ql-stroke {
  stroke: var(--apo-gold) !important;
}

/* --- Touches finales : focus ring partout en gold --- */
*:focus-visible {
  outline: 2px solid var(--apo-gold) !important;
  outline-offset: 2px !important;
}

/* --- Barres de progression --- */
progress.progress::-webkit-progress-value {
  background-color: var(--apo-gold) !important;
}

progress.progress {
  background-color: var(--apo-border) !important;
}

/* --- Fin du thème Groupe Apolline --- */