/*
    Thème only_payment_link
    Sobre : noir, blanc et gris neutres (pas de teinte bleue/verte).
    Surcharge les couleurs pétrole/citron de assets/css/style.css.
*/

:root {
  touch-action: pan-x pan-y;
  height: 100%;
  --main-color-primary: #171717;

  /* Palette "brand" : gris neutres (échelle Tailwind "neutral"). */
  --brand: #171717; /* couleur principale (boutons, accents) */
  --brand-50: #fafafa;
  --brand-100: #f5f5f5;
  --brand-200: #e5e5e5;
  --brand-300: #d4d4d4;
  --brand-400: #a3a3a3;
  --brand-500: #737373;
  --brand-600: #525252;
  --brand-700: #404040;
  --brand-800: #262626;
  --brand-900: #171717;
  --brand-950: #0a0a0a;

  --background: #f5f5f5;
  --surface: #ffffff;
  --border: #e5e5e5;
  --text: #262626;
  --text-muted: #737373;
}

/* ---------- Base ---------- */

body {
  font-family: "Inter", sans-serif;
  background: var(--brand-900);
  color: var(--text);
}

#wrapper,
.content {
  background-color: var(--background);
}

a {
  color: var(--brand-900);
}
a:hover,
a:focus {
  color: var(--brand-600);
}

::-moz-selection {
  background: var(--brand-800);
  color: #fff;
}

::selection {
  background: var(--brand-800);
  color: #fff;
}

/* ---------- Header ---------- */

#header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.navbar-nav > li > a {
  color: var(--text);
}
#header li > a.active {
  background: var(--brand-100);
}

/* ---------- Sidebar ---------- */

.sidebar {
  background: var(--brand-900);
}
.sidebar li a {
  color: var(--brand-400);
}
.sidebar li.active > a,
.sidebar .nav > li > a:hover,
.sidebar .nav > li > a:focus {
  background: var(--brand-800);
  color: #fff;
  border-radius: 6px;
}

/* Sous-menu */
.sidebar li .nav-second-level li.active a {
  background: var(--brand-700) !important;
  color: #fff !important;
}
.sidebar li .nav-second-level li.active a .menu-icon {
  color: #fff;
}
.sidebar .nav > li .nav-second-level > li:not(.active) > a:hover,
.sidebar .nav > li .nav-second-level > li:not(.active) > a:focus {
  background-color: var(--brand-800);
  color: #fff;
}

/* ---------- Boutons ---------- */

.btn-primary,
.btn-primary.focus,
.btn-primary:focus {
  background-color: var(--brand-900);
  border-color: var(--brand-900);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-color: var(--brand-700);
  border-color: var(--brand-700);
  color: #fff;
}
.btn-primary.disabled,
.btn-primary[disabled] {
  background-color: var(--brand-500);
  border-color: var(--brand-500);
}
.btn-primary .badge {
  color: var(--brand-900);
  background-color: #fff;
}

.btn-default {
  background-color: var(--surface);
  border-color: var(--brand-300);
  color: var(--text);
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active {
  background-color: var(--brand-100);
  border-color: var(--brand-400);
  color: var(--brand-900);
}

/* ---------- Onglets, pagination, menus ---------- */

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--brand-900);
  border-bottom-color: var(--brand-900);
}
.nav-tabs > li.active > a i.menu-icon {
  color: var(--brand-900);
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span {
  background-color: var(--brand-900);
  border-color: var(--brand-900);
  color: #fff;
}
.pagination > li > a {
  color: var(--text);
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  background-color: var(--brand-900);
  color: #fff;
}

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

.form-control:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 2px rgba(23, 23, 23, 0.08);
}

/* ---------- Divers (couleurs pétrole de style.css) ---------- */

.table.items thead,
.customer-profile-group-heading,
.screen-options-btn {
  color: var(--brand-900);
}
.bootstrap-select.task-action-select > .btn-default:hover {
  color: var(--brand-900) !important;
}
.card {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.tw-bg-brand {
  background-color: var(--brand-900);
}


/*
  brand-primary (#004852) et brand-accent (#E2FF54) sont des hex fixes dans
  tailwind.config.js : on les remappe ici sur la palette grise.
*/
.tw-text-brand-primary {
  color: var(--brand-900);
}
.tw-border-brand-primary {
  border-color: var(--brand-900);
}
.tw-bg-brand-primary {
  background-color: var(--brand-900);
}
.tw-bg-brand-accent {
  background-color: var(--brand-700);
}
/* Bouton "accent" (fond accent + texte primary) : texte blanc sur gris foncé */
.tw-bg-brand-accent.tw-text-brand-primary {
  color: #fff;
}
.tw-bg-brand-accent.tw-text-brand-primary:hover,
.tw-bg-brand-accent.tw-text-brand-primary:focus {
  background-color: var(--brand-900);
  color: #fff;
}

.tw-bg-\[\#004852\] {
  background-color: var(--brand-900);
}

a[href="#staff_permissions"] {
    display: none !important;
}