/* =======================================================================
   Design System global – Admin & User
   Palette, 3D buttons, cartes, tables, badges produits, topbar/sidebars,
   responsive + accessibilité. Compatible avec tes classes existantes.
   ======================================================================= */

/* ------------------ Variables de thème ------------------ */
:root{
  --bg:            #f5f7fb;
  --surface:       #ffffff;
  --text:          #24324a;
  --muted:         #7b8794;

  --primary:       #3B82F6; /* bleu */
  --primary-600:   #2563eb;
  --primary-700:   #1d4ed8;

  --success:       #22c55e;
  --success-700:   #16a34a;

  --warning:       #f59e0b;
  --danger:        #ef4444;
  --danger-700:    #dc2626;

  --violet:        #8b5cf6;

  --radius:        14px;
  --radius-sm:     10px;
  --shadow-1:      0 6px 18px rgba(23,29,43,.08);
  --shadow-2:      0 18px 35px rgba(23,29,43,.12);
  --shadow-in:     inset 0 2px 0 rgba(255,255,255,.35),
                   inset 0 -2px 0 rgba(0,0,0,.08);
}


/* ------------------ Reset doux ------------------ */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Inter, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  color:var(--text);
  background:
    radial-gradient(1200px 400px at -20% -10%, rgba(59,130,246,.10), transparent 60%),
    radial-gradient(900px 320px at 120% -10%, rgba(139,92,246,.08), transparent 55%),
    var(--bg);
}

/* Liens & titres */
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--primary-600);text-decoration:underline}
h1,h2,h3,h4{margin:0 0 .6rem}
h1{font-size:1.6rem} h2{font-size:1.35rem} h3{font-size:1.15rem}

/* ------------------ Layout / Sidebar & Topbar ------------------ */
.admin-container { display:flex; min-height:100vh; }

.admin-sidebar,
.sidebar{
  width:240px; flex-shrink:0;
  position:fixed; inset:0 auto 0 0;
  background: linear-gradient(180deg,#0b1224 0%, #0f172a 100%);
  color:#e6eefc; box-shadow: var(--shadow-2);
  padding-top:18px;
}
.mb-2 {
    font-size: 20px;
}
.sidebar-header,.sidebar h2{
  text-align:center; margin:8px 0 22px;
  font-size:1.25rem; font-weight:700; color:#c7d2fe;
}
.sidebar-menu,.sidebar ul{list-style:none; padding:0; margin:0;}
.sidebar-menu li,.sidebar ul li{margin:0; padding:8px 14px;}
.sidebar-menu li a,.sidebar ul li a{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-radius:10px; color:#dbe7ff;
  text-decoration:none; transition:.2s ease; font-weight:500;
}
.sidebar-menu li a:hover,
.sidebar-menu li a.active,
.sidebar ul li:hover a{
  background:#1f2a44; color:#fff; transform:translateY(-1px);
}

.admin-main { margin-left:240px; flex:1; display:flex; flex-direction:column; }
.admin-content { padding:30px; min-height:100vh; }

/* Topbar */
.topbar, .admin-topbar{
  height:64px; display:flex; align-items:center; justify-content:space-between;
  padding:0 10px; background:var(--surface); color:var(--text);
  position:sticky; top:0; z-index:1; box-shadow: var(--shadow-1);
  border-bottom:1px solid rgba(0,0,0,.05); border-radius:0 0 18px 18px;
}
.topbar-title { font-size:18px; font-weight:700; }
.admin-topbar .topbar-right a { color: var(--text); font-size:1.15rem; margin-right:12px }

/* Notifications (header) */
.notification-dropdown { position: relative; }
.notif-btn{
  background:linear-gradient(180deg,#1e40af 0%, #1d4ed8 100%);
  color:#fff;border:0;border-radius:999px;padding:10px 16px;
  box-shadow:0 8px 18px rgba(29,78,216,.25), var(--shadow-in);
  cursor:pointer;font-weight:700;display:inline-flex;align-items:center;gap:.5rem
}
.notif-btn:hover{transform:translateY(-1px)}
.notif-count{
  background:#ef4444;color:#fff;min-width:22px;padding:2px 6px;border-radius:999px;
  font-size:12px; line-height:18px; display:inline-block; text-align:center;
  position:absolute; top:-8px; right:-12px;
}
.notif-menu{
  display:none; position:absolute; right:0; top:48px; z-index:1100;
  width:min(320px,85vw); background:var(--surface); color:var(--text);
  box-shadow: var(--shadow-2); border-radius:14px; padding:14px 16px;
  border:1px solid rgba(0,0,0,.06)
}
.notification-dropdown:hover .notif-menu{display:block}
.notif-menu ul{margin:8px 0 10px;padding:0;list-style:none}
.notif-menu li{padding:8px 0;border-bottom:1px dashed rgba(0,0,0,.07)}
.notif-menu li:last-child{border-bottom:0}
.voir-tout{display:block;text-align:center;font-weight:700}

/* Drawer / Off-canvas (mobile) */
.drawer-backdrop{
  position:fixed; inset:0; background:rgba(2,6,23,.35);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .25s ease, visibility .25s ease; z-index:1040;
}
.drawer-backdrop.show { opacity:1; visibility:visible; pointer-events:auto; }

@media (max-width: 992px) {
  .admin-main { margin-left: 0 !important; }
  .sidebar{
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 1050;
    width: 82vw; max-width: 320px; min-width: 280px; padding-top: 70px;
    transform: translateX(-100%) scale(0.98);
    transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease;
    box-shadow: 0 12px 30px rgba(0,0,0,0.18);
    background: #0b1224ee; backdrop-filter: blur(1px);
  }
  .sidebar.open { transform: translateX(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .drawer-backdrop, .sidebar { transition: none !important; }
}
body.no-scroll { overflow: hidden; }

/* ------------------ Cartes & Grilles ------------------ */
.card{
  background:var(--surface); border-radius:var(--radius);
  box-shadow: var(--shadow-1); border:1px solid rgba(0,0,0,.04);
  overflow:hidden; transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-2px); box-shadow: var(--shadow-2)}
.card .card-img-top{ object-fit:cover}
.card-body{padding:16px}
.card-footer{background:transparent; border-top:1px solid rgba(0,0,0,.06); padding:12px 16px}

.grid-admin{display:grid; gap:20px}
@media (max-width: 576px) { .grid-admin{grid-template-columns:1fr} }
@media (min-width: 576px) and (max-width: 992px){ .grid-admin{grid-template-columns: repeat(2, 1fr)} }
@media (min-width: 992px) { .grid-admin{grid-template-columns: repeat(4, 1fr)} }

/* ------------------ Boutons (3D) ------------------ */
.btn{
  min-width:50px; border:0; border-radius:12px; font-weight:800;
  padding:10px 14px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  transition: transform .08s ease, box-shadow .2s ease, filter .15s;
  box-shadow:0 10px 18px rgba(23,29,43,.12), var(--shadow-in);
}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.65; cursor:not-allowed}
.btn-outline-danger{ background:transparent; color:var(--danger); border:2px solid var(--danger) }

.btn-primary{
  background:linear-gradient(180deg,var(--primary) 0%, var(--primary-600) 100%);
  color:#fff; box-shadow:0 12px 24px rgba(59,130,246,.25), var(--shadow-in);
}
.btn-success{
  background:linear-gradient(180deg,var(--success) 0%, var(--success-700) 100%);
  color:#fff; box-shadow:0 12px 24px rgba(34,197,94,.25), var(--shadow-in);
}
.btn-danger{
  background:linear-gradient(180deg,var(--danger) 0%, var(--danger-700) 100%);
  color:#fff; box-shadow:0 12px 24px rgba(239,68,68,.25), var(--shadow-in);
}
.btn-secondary{
  background:linear-gradient(180deg,#94a3b8 0%, #64748b 100%); color:#fff;
}

/* ------------------ Formulaires ------------------ */
.form-label { font-weight: 700; }
input.form-control, .form-select, .form-control{
  background:var(--surface); color:var(--text);
  border:1px solid rgba(0,0,0,.08); border-radius:12px; padding:10px 12px;
  box-shadow: var(--shadow-in); transition:border-color .2s ease, box-shadow .2s ease
}
input.form-control:focus, .form-select:focus, .form-control:focus{
  outline:0; border-color:var(--primary); box-shadow:0 0 0 3px rgba(59,130,246,.15), var(--shadow-in)
}
.input-search { max-width: 360px; }

/* ------------------ Tables ------------------ */
.table{width:100%; border-collapse:separate; border-spacing:0 8px}
.table thead th{
  background:#f7f9fc; color:var(--text); font-weight:700; padding:12px;
  border:1px solid rgba(0,0,0,.06); border-bottom:0; text-transform:uppercase; font-size:.85rem;
}
.table tbody tr{
  background:var(--surface); box-shadow: var(--shadow-1);
  border:1px solid rgba(0,0,0,.06)
}
.table td, .table th { vertical-align: middle; padding:12px; }

/* Transactions */
.admin-table-transactions thead th{
  background:#f7f8fa; font-weight:700; color:var(--text);
  border-bottom:1px solid #e9ecef;
}
.admin-table-transactions tbody td{ padding-top:.85rem; padding-bottom:.85rem; }
.admin-table-transactions tbody tr:hover{ background:#fcfdff; }

/* Pagination */
.card-footer .pagination{margin-bottom:0; gap:6px}
.card-footer .page-link{ border-radius:.5rem; }
.page-link{
  border-radius:12px !important; border:1px solid rgba(0,0,0,.08) !important;
  box-shadow: var(--shadow-in);
}

/* ------------------ Badges produits ------------------ */
.product-media { position: relative; }
.badge-promo{
  position:absolute; top:10px; left:10px;
  background:linear-gradient(135deg, #ff8a00 0%, #ff3d00 100%);
  color:#fff; font-weight:800; font-size:12px; letter-spacing:.5px; padding:6px 10px;
  border-radius:999px; box-shadow:0 3px 10px rgba(255,61,0,0.25); text-transform:uppercase; z-index:2;
}
.badge-price{
  position:absolute; top:10px; right:10px;
  background: #9b59b6; color:#fff; font-weight:600; font-size:20px; padding:6px 10px;
  border-radius:8px; box-shadow:0 3px 10px rgba(155,89,182,0.25);
}
span.bg-purple {
    background-color: #f39d00;
    font-size: 15px;
}
.badge-price-old{
  position:absolute; top:44px; right:10px; background:#ffffff; color:#333; font-weight:700; font-size:11px;
  padding:4px 8px; border-radius:6px; text-decoration:line-through; border:1px solid rgba(0,0,0,.06);
}
.badge-timer{
  position:absolute; right:10px; bottom:10px; background:#e74c3c; color:#fff; font-weight:800; font-size:11px;
  padding:6px 10px; border-radius:8px; box-shadow:0 3px 10px rgba(231,76,60,0.25);
}
.btn-out-stock { background:#e74c3c !important; border-color:#e74c3c !important; opacity:.9; cursor:not-allowed; min-width:140px; }

/* Responsive médias badges */
@media (max-width: 576px) {
  .badge-promo, .badge-price, .badge-price-old, .badge-timer { font-size: 18px; padding: 5px 8px; }
  .badge-price-old { top: 40px; }
  .card-img-top { height: 300px !important;border-radius: 30%;border: 5px solid #eee; }
}
@media (min-width: 576px) and (max-width: 992px) {
  .card-img-top { height: 350px !important; }
}

/* ------------------ Filtres (barres) ------------------ */
.card .form-label{font-weight:700}
#filter_reset{white-space:nowrap}
.filters-row,.filters-bar{display:flex; gap:.5rem; flex-wrap:wrap}

/* ------------------ Mobile utilities ------------------ */
@media (max-width: 576px) {
  .table .btn, .card .btn { min-width:auto; padding:.45rem .6rem; font-size:.9rem; }
  .filters-row,.filters-bar{display:grid; grid-template-columns:1fr; gap:.5rem}
  .input-search { max-width: 100%; }
  .orders-actions{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
  .pagination { flex-wrap:wrap; gap:.25rem }
  .page-link { padding:.35rem .55rem; font-size:.875rem; }
}

/* ------------------ Table responsive (fallback simple) ------------------ */
.table-responsive-sm {
  width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius:.5rem;
}

/* ------------------ Table “cards” mobile (option premium) ------------------ */
@media (max-width: 576px) {
  .table-mobile thead { display: none; }
  .table-mobile tbody tr {
    display: block; background:#fff; margin-bottom:.75rem; border-radius:.5rem;
    box-shadow:0 1px 6px rgba(0,0,0,.05); overflow:hidden;
  }
  .table-mobile tbody td {
    display:flex; align-items:center; justify-content:space-between; gap:.75rem;
    padding:.65rem .9rem; border:0; border-bottom:1px solid #f1f3f5;
  }
  .table-mobile tbody td:last-child { border-bottom:0; }
  .table-mobile tbody td::before {
    content: attr(data-label); font-weight:700; color:#667085;
  }
}

/* ------------------ Badges statut (Commandes) ------------------ */
.badge-status {
  display:inline-block; font-size:.75rem; font-weight:800; padding:.3rem .5rem;
  border-radius:.375rem; letter-spacing:.2px;
}
.badge-status.pending  { background:#fff3cd; color:#8a6d3b; }
.badge-status.done     { background:#e6ffed; color:#2e7d32; }
.badge-status.rejected { background:#fdecea; color:#b71c1c; }

/* ------------------ Accordéon Commandes (mobile only) ------------------ */
.orders-table .th-toggle,
.orders-table .td-toggle,
.orders-table .order-details { display:none !important; }

@media (max-width: 767.98px) {
  .orders-table .th-toggle,
  .orders-table .td-toggle {
    display: table-cell !important;
    width: 40px; vertical-align: middle; text-align:center;
  }
  .orders-table .order-details { display:none !important; }
  .orders-table .order-details.show { display:table-row !important; }

  .ord-toggle{
    width:34px;height:34px;border-radius:999px;border:2px solid #2f6feb;color:#2f6feb;background:#fff;
    display:inline-flex;align-items:center;justify-content:center;font-size:20px;line-height:1;font-weight:800;
  }
  .ord-toggle::before{ content:'+'; }
  .ord-toggle[aria-expanded="true"]{ border-color:#dc3545;color:#dc3545; }
  .ord-toggle[aria-expanded="true"]::before{ content:'−'; }

  .order-box{
    background:#fff;border:1px solid #eceff3;border-left:4px solid #5b9cff;border-radius:.6rem;
    padding:.9rem 1rem; box-shadow:0 1px 6px rgba(0,0,0,.04);
  }
  .order-box .row-item{ display:flex; gap:.75rem; padding:.35rem 0; }
  .order-box .row-item .label{ min-width:110px; color:#667085; font-weight:700; }
  .order-box .row-item .value{ font-weight:600; }
  .order-box .note{ white-space:pre-wrap; word-break:break-word; }
  .orders-actions{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-top:.5rem; }
}

/* ------------------ Divers existant (compat) ------------------ */
.container h2 { font-weight: 700; }
.toast { box-shadow: 0 10px 30px rgba(0,0,0,.15); }


.topbar, .admin-topbar {
  position: relative;      /* crée un contexte d'empilement */
  z-index: 1;           /* passe devant les cards/containers */
}

.notification-dropdown {
  position: relative;      /* conteneur du menu */
  z-index: 2001;           /* au-dessus du header lui-même */
}

.notif-menu {
  z-index: 2100;           /* au-dessus de tout le reste (sidebar, cards, etc.) */
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
}

/* optionnel: si tu veux que la topbar reste collée en haut en scroll */
@media (min-width: 0) {
  .topbar {
    position: sticky;     /* ou garde "relative" si tu ne veux pas sticky */
    top: 0;
  }
}

/* Conteneur topbar si besoin */
.topbar, .navbar { position: relative; z-index: 1000; }

/* Bouton “pill” du profil */
.btn-profile{
  display:flex; align-items:center; gap:.5rem;
  background:#fff; border:1px solid #e6e9f0; border-radius:9999px;
  padding:.45rem .75rem; font-weight:600;
  box-shadow:0 3px 10px rgba(0,0,0,.05);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s;
}
.btn-profile i{ font-size:1.15rem; line-height:1; }
.btn-profile:hover{
  transform: translateY(-1px);
  box-shadow:0 10px 22px rgba(0,0,0,.08);
  border-color:#cfd6e4;
}

/* Dropdown stylé + z-index sûr */
.profile-dropdown{
  min-width: 220px;
  border: 0; border-radius: 14px; padding: .35rem;
  z-index: 1100; /* au-dessus des autres overlays */
}
.profile-dropdown .dropdown-item{
  border-radius:8px; padding:.6rem .8rem; font-weight:500;
}
.profile-dropdown .dropdown-item:hover{
  background:#f2f6ff; color:#1f4fff;
}
.profile-dropdown .dropdown-divider{ margin:.4rem .5rem; }


/* Assure-toi que la topbar ne coupe rien qui dépasse */
.admin-topbar,
.topbar{
  overflow: visible;
}

/* Le dropdown "Profil" doit passer DEVANT la topbar sticky */
.profile-menu .dropdown-menu{
  position: absolute;           /* garde le calcul Popper */
  z-index: 1200;                /* > 1030 (navbar fixe Bootstrap) */
}

/* optionnel : bouton profil au-dessus aussi */
.btn-profile{ z-index: 1201; }

/* Pagination bootstrap – compact et homogène */
.pagination { gap: .35rem; }
.page-link{
  border-radius: .5rem !important;
  border:1px solid rgba(0,0,0,.08) !important;
  box-shadow: var(--shadow-in);
}
.page-item.active .page-link{
  background: var(--primary);
  color:#fff;
  border-color: var(--primary-600) !important;
}