/* ============================================================
   AQAHOM — Thème admin Perfex
   Palette de marque : marine #0B2A5B · bleu #143D80 · cyan #00E0FF · teal #00805C
   Fichier à déposer dans : <perfex>/assets/css/custom.css
   (Perfex le charge automatiquement, sans modifier le coeur.)
   Pour changer l'accent : modifier les variables ci-dessous.
   ============================================================ */

:root {
  --aq-navy:      #0B2A5B;
  --aq-navy-2:    #143D80;
  --aq-blue:      #1e5bd6;
  --aq-cyan:      #00E0FF;
  --aq-teal:      #00805C;
  --aq-bg:        #f4f6fb;
  --aq-card:      #ffffff;
  --aq-border:    #e6eaf2;
  --aq-text:      #26324a;
  --aq-muted:     #7a869e;
  --aq-radius:    14px;
  --aq-radius-sm: 9px;
  /* Ombres 3D multi-couches : contact rapproché + diffusion + halo profond */
  --aq-shadow:    0 1px 2px rgba(11,42,91,.08),
                  0 4px 10px rgba(11,42,91,.07),
                  0 12px 26px rgba(11,42,91,.06);
  --aq-shadow-h:  0 2px 4px rgba(11,42,91,.10),
                  0 10px 22px rgba(11,42,91,.12),
                  0 24px 48px rgba(11,42,91,.14);
  /* Reflet supérieur interne (donne le galbe) — très discret */
  --aq-inset-top: inset 0 1px 0 rgba(255,255,255,.28);
  --aq-sidebar-w: 240px;
}

/* ---------- Base ---------- */
body,
.body-expanded {
  background: var(--aq-bg) !important;
  color: var(--aq-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--aq-navy-2); }
a:hover, a:focus { color: var(--aq-blue); }

/* ---------- Sidebar : marine dégradé ---------- */
#wrapper #sidebar {
  background: linear-gradient(180deg, var(--aq-navy) 0%, #08213f 100%) !important;
  /* Profondeur : ombre portée + arête lumineuse interne à droite */
  box-shadow: 4px 0 18px rgba(8,33,63,.28), inset -1px 0 0 rgba(0,224,255,.08);
}
#sidebar .slimScrollDiv,
#sidebar #sidebar-menu { background: transparent !important; }

#sidebar ul.menu li a,
#sidebar #sidebar-menu > ul > li > a {
  color: #c7d3ea !important;
  font-weight: 500;
  letter-spacing: .2px;
  border-left: 3px solid transparent;
  transition: all .18s ease;
}
#sidebar ul.menu li a i,
#sidebar #sidebar-menu > ul > li > a i { color: #8ea6cf !important; transition: color .18s ease; }

#sidebar ul.menu li a:hover,
#sidebar #sidebar-menu > ul > li > a:hover {
  background: rgba(255,255,255,.06) !important;
  color: #ffffff !important;
  border-left-color: var(--aq-cyan);
}
#sidebar ul.menu li a:hover i { color: var(--aq-cyan) !important; }

#sidebar ul.menu li.active > a,
#sidebar #sidebar-menu li.active > a,
#sidebar li.active > a {
  background: linear-gradient(90deg, rgba(0,224,255,.20) 0%, rgba(0,224,255,.05) 100%) !important;
  color: #ffffff !important;
  border-left-color: var(--aq-cyan) !important;
  /* Relief : halo cyan + arête lumineuse en haut */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), -3px 0 10px -2px rgba(0,224,255,.45);
}
#sidebar li.active > a i { color: var(--aq-cyan) !important; text-shadow: 0 0 10px rgba(0,224,255,.6); }

/* Sous-menus */
#sidebar .sub-menu li a { background: rgba(0,0,0,.15) !important; color: #aebdd8 !important; }
#sidebar .sub-menu li a:hover { color:#fff !important; }

/* Badges dans le menu (compteurs SAV, stock…) */
#sidebar .menu-item .badge,
#sidebar ul.menu li a .badge {
  background: var(--aq-cyan) !important;
  color: var(--aq-navy) !important;
  font-weight: 700;
  border-radius: 10px;
  box-shadow: 0 0 6px rgba(0,224,255,.28), inset 0 1px 0 rgba(255,255,255,.12);
}

/* ---------- Top header ---------- */
.top-header,
#top-header {
  background: var(--aq-card) !important;
  border-bottom: 1px solid var(--aq-border) !important;
  box-shadow: 0 1px 6px rgba(11,42,91,.05);
}
.top-header .navbar-nav > li > a { color: var(--aq-text) !important; }
.top-header .navbar-nav > li > a:hover { color: var(--aq-navy-2) !important; }

/* ---------- Cartes / panneaux ---------- */
.panel_s,
.panel-default,
.widget {
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%) !important;
  border: 1px solid var(--aq-border) !important;
  border-radius: var(--aq-radius) !important;
  box-shadow: var(--aq-shadow), var(--aq-inset-top) !important;
  transition: box-shadow .25s cubic-bezier(.2,.7,.3,1), transform .25s cubic-bezier(.2,.7,.3,1);
}
.panel_s:hover {
  box-shadow: var(--aq-shadow-h), var(--aq-inset-top) !important;
  transform: translateY(-2px);
}
.panel_s .panel-body { padding: 20px 22px; }
.hr-panel-heading { border-color: var(--aq-border) !important; }

/* Titres de section */
h4.no-margin, .panel-body > h4 { color: var(--aq-navy); font-weight: 700; }

/* ---------- Boutons ---------- */
.btn {
  border-radius: var(--aq-radius-sm) !important;
  font-weight: 600;
  letter-spacing: .2px;
  border: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 2px 5px rgba(11,42,91,.14), 0 4px 12px rgba(11,42,91,.09);
  transition: transform .13s ease, box-shadow .13s ease, filter .13s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 5px 12px rgba(11,42,91,.18), 0 9px 20px rgba(11,42,91,.13); filter: brightness(1.02); }
/* Effet "pressé" : le bouton s'enfonce */
.btn:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(11,42,91,.28); filter: brightness(.97); }

.btn-primary,
.btn-primary:focus {
  background: linear-gradient(180deg, #1c4ea0 0%, var(--aq-navy-2) 55%, var(--aq-navy) 100%) !important;
  color: #fff !important;
}
.btn-info, .btn-info:focus {
  background: linear-gradient(180deg, #4defff 0%, var(--aq-cyan) 55%, #01c4e0 100%) !important;
  color: var(--aq-navy) !important;
}
.btn-success, .btn-success:focus {
  background: linear-gradient(180deg, #0aa676 0%, var(--aq-teal) 60%, #026a4d 100%) !important;
  color:#fff !important;
}
.btn-default {
  background: linear-gradient(180deg, #ffffff 0%, #eaeff7 100%) !important;
  color: var(--aq-navy) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 5px rgba(11,42,91,.09), 0 4px 10px rgba(11,42,91,.05);
}

/* ---------- Formulaires ---------- */
.form-control {
  border-radius: var(--aq-radius-sm) !important;
  border: 1px solid var(--aq-border) !important;
  box-shadow: none !important;
  color: var(--aq-text);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.form-control:focus {
  border-color: var(--aq-cyan) !important;
  box-shadow: 0 0 0 3px rgba(0,224,255,.18) !important;
}
.bootstrap-select .btn-default { background:#eef2f9 !important; }

/* ---------- Tableaux ---------- */
.table { color: var(--aq-text); }
.table > thead > tr > th {
  background: #f0f4fb;
  color: var(--aq-navy);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11.5px;
  letter-spacing: .4px;
  border-bottom: 2px solid var(--aq-border) !important;
}
.table > tbody > tr > td { border-color: #eef1f7 !important; vertical-align: middle; }
.table-striped > tbody > tr:nth-of-type(odd) { background: #fafbfe; }
.table.dt-table tbody tr:hover { background: #eef6ff !important; }

/* ---------- Labels / badges ---------- */
.label, .badge {
  border-radius: 20px; font-weight: 600; padding: .3em .7em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 2px rgba(11,42,91,.13);
}
.label-primary { background: var(--aq-navy-2) !important; }
.label-info    { background: var(--aq-cyan) !important; color: var(--aq-navy) !important; }
.label-success { background: var(--aq-teal) !important; }

/* ---------- Texte utilitaire ---------- */
.text-info    { color: var(--aq-navy-2) !important; }
.text-primary { color: var(--aq-navy) !important; }
.text-success { color: var(--aq-teal) !important; }

/* ---------- Onglets (nav-tabs) ---------- */
.nav-tabs { border-bottom: 1px solid var(--aq-border); }
.nav-tabs > li > a { color: var(--aq-muted); font-weight: 600; border: none; border-radius: 0; }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--aq-navy) !important;
  border: none;
  border-bottom: 3px solid var(--aq-cyan) !important;
  background: transparent !important;
}
.nav-tabs > li > a:hover { border: none; border-bottom: 3px solid var(--aq-border); background: transparent; }

/* ---------- Alertes ---------- */
.alert { border-radius: var(--aq-radius-sm); border: none; }
.alert-warning { background: #fff5e0; color: #8a5d00; }
.alert-success { background: #e2f7ef; color: var(--aq-teal); }

/* ---------- Page de connexion ---------- */
body.login {
  background: linear-gradient(135deg, var(--aq-navy) 0%, var(--aq-navy-2) 60%, #0a3aa0 100%) !important;
}
body.login .login-box,
body.login .panel_s {
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.35) !important;
  border: none !important;
}
body.login .btn-primary { background: var(--aq-cyan) !important; color: var(--aq-navy) !important; font-weight: 700; }
body.login .btn-primary:hover { background:#16c9e6 !important; }


/* Variante Perfex recent (page de login Tailwind : body.login_admin) */
body.login_admin {
  background: linear-gradient(135deg, var(--aq-navy) 0%, var(--aq-navy-2) 60%, #0a3aa0 100%) !important;
}
body.login_admin .authentication-form-wrapper .tw-mb-5 h1 { color: #ffffff !important; }
body.login_admin .authentication-form-wrapper .tw-mb-5 p { color: #c7d3ea !important; }
body.login_admin .authentication-form-wrapper .tw-bg-white {
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.35) !important;
}


/* ========== Sidebar interieur (Perfex recent : aside#menu) ========== */
aside#menu, aside#menu.sidebar {
  background: linear-gradient(180deg, #0B2A5B 0%, #08213f 100%) !important;
  box-shadow: 4px 0 18px rgba(8,33,63,.28), inset -1px 0 0 rgba(0,224,255,.08) !important;
}
aside#menu .slimScrollDiv, aside#menu #side-menu, aside#menu #setup-menu { background: transparent !important; }
aside#menu #side-menu > li > a, aside#menu #setup-menu > li > a {
  color: #c7d3ea !important;
  border-left: 3px solid transparent;
  transition: all .18s ease;
}
aside#menu #side-menu > li > a .menu-icon, aside#menu #side-menu > li > a i,
aside#menu #setup-menu > li > a .menu-icon, aside#menu #setup-menu > li > a i { color: #8ea6cf !important; }
aside#menu #side-menu > li > a .menu-text { color: #c7d3ea !important; }
aside#menu #side-menu > li > a:hover, aside#menu #setup-menu > li > a:hover {
  background: rgba(255,255,255,.06) !important;
  color: #ffffff !important;
  border-left-color: #00E0FF !important;
}
aside#menu #side-menu > li > a:hover .menu-icon, aside#menu #side-menu > li > a:hover i,
aside#menu #side-menu > li > a:hover .menu-text { color: #ffffff !important; }
aside#menu #side-menu > li.active > a, aside#menu #side-menu > li.menuitem-active > a {
  background: linear-gradient(90deg, rgba(0,224,255,.20) 0%, rgba(0,224,255,.05) 100%) !important;
  color: #ffffff !important;
  border-left-color: #00E0FF !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), -3px 0 10px -2px rgba(0,224,255,.40) !important;
}
aside#menu #side-menu > li.active > a .menu-icon, aside#menu #side-menu > li.active > a i,
aside#menu #side-menu > li.active > a .menu-text { color: #00E0FF !important; }
aside#menu .nav-second-level li a { background: rgba(0,0,0,.15) !important; color: #aebdd8 !important; }
aside#menu .nav-second-level li a:hover { color: #ffffff !important; }
aside#menu .panel_s, aside#menu .user-data {
  background: rgba(255,255,255,.06) !important; border: none !important; box-shadow: none !important; color: #e6edf8 !important;
}
aside#menu .panel_s a, aside#menu .user-data a, aside#menu .user-data span, aside#menu .panel_s span { color: #e6edf8 !important; }
aside#menu .badge { background: #00E0FF !important; color: #0B2A5B !important; box-shadow: 0 0 6px rgba(0,224,255,.28) !important; }
#header { background: #ffffff !important; box-shadow: 0 2px 8px rgba(11,42,91,.06) !important; }

/* ---------- Scrollbar discrète ---------- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #c3ccdd; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #a9b4cb; }

/* ---------- Divers ---------- */
.customer-profile-group-heading, .h4, h4 { color: var(--aq-navy); }
.dropdown-menu { border-radius: var(--aq-radius-sm); box-shadow: var(--aq-shadow-h); border: 1px solid var(--aq-border); }
.pointer-menu, .sidebar-menu-toggle i { color: var(--aq-navy-2); }