@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700;800&display=swap');

/* ==========================================================================
   StockExpress — Thème "Clair & minimal" (sidebar claire)
   Références : Notion / Vercel light. Traits fins, blanc, un seul accent.
   Accent = bleu Glass Express #164194 ; rouge #be1622 pour le critique.
   Surcouche NiceAdmin, chargé APRÈS style.css. Mode sombre via html[data-theme="dark"].
   ========================================================================== */

:root {
  /* Accent (charte Glass Express) */
  --brand: #164194;
  --brand-600: #123a85;
  --brand-700: #0f3070;
  --brand-rgb: 22, 65, 148;
  --brand-soft: rgba(22, 65, 148, .08);
  --brand-tint: rgba(22, 65, 148, .12);

  /* Neutres (clair) */
  --bg: #fbfcfd;
  --surface: #ffffff;
  --surface-2: #f6f8fb;
  --text: #0b1526;
  --muted: #6b7688;
  --border: #eceff4;
  --border-strong: #e0e5ee;

  /* Sidebar (CLAIRE) */
  --sb-bg: #ffffff;
  --sb-fg: #465166;
  --sb-muted: #9aa4b6;
  --sb-hover: #f2f5fa;
  --sb-active-bg: var(--brand-soft);
  --sb-active-fg: var(--brand);

  /* Sémantique */
  --ok: #16a34a;
  --warn: #d97706;
  --danger: #be1622;   /* rouge Glass Express */
  --empty: #94a3b8;

  --r-lg: 14px;
  --r: 11px;
  --r-sm: 8px;
  --sh-sm: 0 1px 2px rgba(11, 21, 38, .04);
  --sh: 0 1px 2px rgba(11, 21, 38, .04);
  --sh-lg: 0 8px 30px rgba(11, 21, 38, .10);
  --stock-primary: var(--brand);
}

html[data-theme="dark"] {
  --bg: #0b0f17;
  --surface: #121824;
  --surface-2: #0f151f;
  --text: #e7ecf5;
  --muted: #93a1bf;
  --border: #1e2735;
  --border-strong: #2a3547;

  --sb-bg: #0f141d;
  --sb-fg: #b7c1d4;
  --sb-muted: #6b7789;
  --sb-hover: #161d29;
  --sb-active-bg: rgba(22, 65, 148, .22);
  --sb-active-fg: #8fb0ff;

  --brand-soft: rgba(120, 150, 220, .12);
  --sh-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --sh: 0 1px 2px rgba(0, 0, 0, .3);
  --sh-lg: 0 12px 34px rgba(0, 0, 0, .5);
}

/* ---- Base ---- */
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  background: var(--bg) !important;
  color: var(--text);
  font-size: .9rem;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -.006em;
}
h1, h2, h3, h4, h5, .card-title, .logo span, .pagetitle h1 { letter-spacing: -.025em; font-weight: 700; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-700); }
.stock-qty, .badge, .info-card h6, .table td, .table th, .product-card__meta { font-variant-numeric: tabular-nums; }

main#main.main { background: var(--bg); padding: 26px 32px; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, .3); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, .5); background-clip: content-box; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---- Titre de page ---- */
.pagetitle { margin-bottom: 22px; }
.pagetitle h1 { font-size: 1.5rem; font-weight: 800; color: var(--text); margin: 0; }
.pagetitle .breadcrumb, .pagetitle .breadcrumb a { color: var(--muted); }

/* ==========================================================================
   HEADER — blanc, trait fin
   ========================================================================== */
.header {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  height: 60px;
}
.logo span { color: var(--text) !important; font-weight: 800 !important; font-size: 1.02rem; }
.header .toggle-sidebar-btn { color: var(--muted); font-size: 1.35rem; }
.header .toggle-sidebar-btn:hover { color: var(--brand); }
.header-nav .nav-icon { color: var(--muted); font-size: 1.1rem; }
.header-nav .nav-icon:hover { color: var(--brand); }
.header-nav .nav-profile { color: var(--text) !important; font-weight: 600; }
.header-nav .nav-profile img { border: 1px solid var(--border-strong); }

.search-bar .search-form {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 5px 6px 5px 14px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.search-bar .search-form:focus-within { border-color: var(--brand); background: var(--surface); box-shadow: 0 0 0 3px var(--brand-soft); }
.search-bar .search-form input { background: transparent; color: var(--text); font-size: .88rem; }
.search-bar .search-form button i { color: var(--muted); }
.badge-number { background: var(--danger) !important; font-weight: 700; box-shadow: 0 0 0 2px var(--surface); }

/* ==========================================================================
   SIDEBAR — CLAIRE, trait fin
   ========================================================================== */
.sidebar {
  background: var(--sb-bg) !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: none !important;
  padding: 12px 0;
}
.sidebar-nav { padding: 0 8px; }
.sidebar-nav .nav-item { margin: 1px 0; }
.sidebar-nav .nav-heading {
  color: var(--sb-muted) !important;
  text-transform: uppercase; font-size: .66rem; letter-spacing: .1em; font-weight: 700;
  padding: 16px 14px 6px;
}
.sidebar-nav .nav-link {
  color: var(--sb-fg) !important;
  background: transparent !important;
  border-radius: 9px;
  margin: 1px 4px; padding: 9px 12px;
  font-weight: 550; font-size: .885rem;
  transition: background .13s ease, color .13s ease;
}
.sidebar-nav .nav-link i { color: var(--sb-muted); font-size: 1.02rem; transition: color .13s; }
.sidebar-nav .nav-link .bi-chevron-down { font-size: .68rem; }
.sidebar-nav .nav-link:hover { background: var(--sb-hover) !important; color: var(--text) !important; }
.sidebar-nav .nav-link:hover i { color: var(--brand); }
.sidebar-nav .nav-link:not(.collapsed) { color: var(--text) !important; background: var(--sb-hover) !important; }
.sidebar-nav .nav-link:not(.collapsed) i { color: var(--brand); }
.sidebar-nav .nav-link.active {
  background: var(--sb-active-bg) !important;
  color: var(--sb-active-fg) !important;
  font-weight: 700;
}
.sidebar-nav .nav-link.active i { color: var(--sb-active-fg); }

.sidebar-nav .nav-content { padding: 2px 0 6px; }
.sidebar-nav .nav-content a {
  color: var(--sb-fg) !important;
  border-radius: 8px; margin: 1px 6px 1px 8px; padding: 7px 12px 7px 32px;
  font-size: .84rem; font-weight: 500; position: relative;
  transition: background .13s ease, color .13s ease;
}
.sidebar-nav .nav-content a i { display: none; }
.sidebar-nav .nav-content a::before {
  content: ""; position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: var(--sb-muted);
}
.sidebar-nav .nav-content a:hover { color: var(--text) !important; background: var(--sb-hover); }
.sidebar-nav .nav-content a.active { color: var(--sb-active-fg) !important; font-weight: 600; }
.sidebar-nav .nav-content a.active::before { background: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

/* ==========================================================================
   CARTES — blanches, bordées, ombre quasi nulle
   ========================================================================== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh);
  color: var(--text);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.card:hover { border-color: var(--border-strong); }
.card-body { padding: 22px 24px; }
.card-title { color: var(--text); font-weight: 700; font-size: 1rem; padding-bottom: 4px; }
.card .card-title span { color: var(--muted); font-weight: 500; font-size: .82rem; }

.info-card .card-icon {
  background: var(--brand-soft); color: var(--brand);
  width: 50px; height: 50px; font-size: 1.35rem; border-radius: 12px;
}
.info-card.revenue-card .card-icon { background: rgba(22, 163, 74, .10); color: var(--ok); }
.info-card.customers-card .card-icon { background: rgba(217, 119, 6, .10); color: var(--warn); }
.info-card h6 { color: var(--text); font-weight: 800; font-size: 1.45rem; }

/* ==========================================================================
   BOUTONS — pleins pour le principal, "ghost" bordé pour le reste
   ========================================================================== */
.btn { border-radius: var(--r-sm); font-weight: 600; padding: .48rem .9rem; transition: all .13s ease; }
.btn-sm { border-radius: 7px; padding: .32rem .6rem; }
.btn-primary { background: var(--brand); border-color: var(--brand); }
.btn-primary:hover, .btn-primary:focus { background: var(--brand-600); border-color: var(--brand-600); }
.btn-outline-primary { color: var(--brand); border-color: var(--border-strong); background: var(--surface); }
.btn-outline-primary:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.btn-outline-secondary { color: var(--muted); border-color: var(--border-strong); background: var(--surface); }
.btn-outline-secondary:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.btn-success { background: var(--ok); border-color: var(--ok); }
.btn-outline-success { color: var(--ok); border-color: var(--border-strong); background: var(--surface); }
.btn-outline-success:hover { background: rgba(22, 163, 74, .1); border-color: var(--ok); color: var(--ok); }
.btn-outline-danger { color: var(--danger); border-color: var(--border-strong); background: var(--surface); }
.btn-outline-danger:hover { background: rgba(190, 22, 34, .08); border-color: var(--danger); color: var(--danger); }
.btn-warning { background: var(--warn); border-color: var(--warn); color: #fff; }
:focus-visible { outline: 3px solid var(--brand-soft); outline-offset: 1px; border-radius: 4px; }

/* ==========================================================================
   FORMULAIRES
   ========================================================================== */
.form-control, .form-select {
  border-radius: var(--r-sm); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); font-size: .88rem; padding: .48rem .75rem;
  transition: border-color .13s, box-shadow .13s;
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
  background: var(--surface); color: var(--text);
}
.form-control::placeholder { color: var(--muted); opacity: .7; }
.form-control-color { padding: .25rem; }
.input-group-text { background: var(--surface-2); border-color: var(--border-strong); color: var(--muted); }
.form-label { color: var(--text); font-weight: 600; font-size: .83rem; margin-bottom: .3rem; }
.form-text { color: var(--muted); }

/* ==========================================================================
   TABLEAUX — aérés, dividers fins
   ========================================================================== */
.table { color: var(--text); --bs-table-bg: transparent; margin-bottom: 0; }
.table > thead th {
  background: transparent; color: var(--muted);
  text-transform: uppercase; font-size: .69rem; letter-spacing: .05em; font-weight: 700;
  border-bottom: 1px solid var(--border-strong); padding: .65rem .85rem; white-space: nowrap;
}
.table > tbody > tr > td { padding: .68rem .85rem; vertical-align: middle; border-bottom: 1px solid var(--border); }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: var(--surface-2); color: var(--text); }
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: var(--brand-soft); }
.datatable-top, .datatable-bottom { padding: 12px 2px; color: var(--muted); }
.datatable-input, .datatable-selector { border-radius: var(--r-sm) !important; border: 1px solid var(--border-strong) !important; background: var(--surface); color: var(--text); }
.datatable-pagination a { border-radius: 7px !important; color: var(--text); }
.datatable-pagination .active a { background: var(--brand) !important; }

/* ==========================================================================
   BADGES / ALERTES / MODALES / DROPDOWNS
   ========================================================================== */
.badge { font-weight: 600; padding: .36em .58em; border-radius: 6px; }
.badge.bg-primary { background: var(--brand) !important; }
.badge.bg-success { background: var(--ok) !important; }
.badge.bg-danger { background: var(--danger) !important; }
.badge.bg-secondary { background: var(--muted) !important; }
.badge.bg-info { background: #2f80ed !important; }

.alert { border-radius: var(--r); border: 1px solid var(--border); padding: .8rem 1rem; }
.alert-success { background: rgba(22, 163, 74, .08); color: #15803d; border-color: rgba(22, 163, 74, .25); }
.alert-danger { background: rgba(190, 22, 34, .07); color: #a3121e; border-color: rgba(190, 22, 34, .25); }
.alert-info { background: var(--brand-soft); color: var(--brand-700); border-color: var(--brand-tint); }
.alert-warning { background: rgba(217, 119, 6, .09); color: #b45309; border-color: rgba(217, 119, 6, .25); }

.modal-content { border-radius: var(--r-lg); border: 1px solid var(--border); box-shadow: var(--sh-lg); background: var(--surface); color: var(--text); }
.modal-header, .modal-footer { border-color: var(--border); padding: 1rem 1.25rem; }
.modal-title { font-weight: 700; }
.dropdown-menu { border-radius: var(--r); border: 1px solid var(--border); box-shadow: var(--sh-lg); background: var(--surface); padding: 6px; }
.dropdown-item { color: var(--text); border-radius: 7px; padding: .48rem .7rem; }
.dropdown-item:hover { background: var(--surface-2); color: var(--brand); }
.dropdown-header { color: var(--muted); }

footer.footer { background: transparent; color: var(--muted); border-top: 1px solid var(--border); font-size: .84rem; padding: 18px 32px; }

/* ==========================================================================
   GRILLE PRODUITS + SIGNATURE STATUT (version claire)
   ========================================================================== */
.stock-toolbar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
.stock-toolbar .stock-search { max-width: 360px; flex: 1 1 240px; }

.stock-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 1rem; }

.product-card {
  display: flex; flex-direction: column; height: 100%;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); box-shadow: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.product-card:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); border-color: var(--border-strong); }

.product-card__imgwrap { position: relative; aspect-ratio: 4/3; background: var(--surface-2); overflow: hidden; border-bottom: 1px solid var(--border); }
.product-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: .6rem; background: var(--surface-2); z-index: 1; }
.product-card__noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.3rem; color: var(--border-strong); }

.product-card__body { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.product-card__title { font-size: .96rem; font-weight: 700; margin: 0; color: var(--text); line-height: 1.25; }
.product-card__meta { font-size: .8rem; color: var(--muted); margin: 0; display: flex; align-items: center; gap: .3rem; }
.product-card__footer { margin-top: auto; padding-top: .7rem; }

/* Signature : pastille blanche + point coloré (lisible en clair) */
.stock-badge {
  position: absolute; top: .55rem; left: .55rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .68rem; font-weight: 700; line-height: 1;
  padding: .34rem .55rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border-strong);
  box-shadow: var(--sh-sm);
}
.stock-badge::before { content: ""; width: .48rem; height: .48rem; border-radius: 50%; background: currentColor; }
.stock-badge--ok { color: var(--ok); }
.stock-badge--warn { color: var(--warn); }
.stock-badge--danger { color: var(--danger); }
.stock-badge--empty { color: var(--empty); }

.stock-qty { font-weight: 800; }
.stock-qty--ok { color: var(--ok); }
.stock-qty--warn { color: var(--warn); }
.stock-qty--danger { color: var(--danger); }
.stock-qty--empty { color: var(--empty); }

.stock-empty-state { text-align: center; padding: 3.5rem 1rem; color: var(--muted); }
.stock-empty-state i { font-size: 2.7rem; opacity: .3; }

@media (max-width: 575px) {
  main#main.main { padding: 16px 12px; }
  .stock-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; }
  .pagetitle h1 { font-size: 1.3rem; }
}

/* ==========================================================================
   PAGES CONNEXION / INSCRIPTION
   ========================================================================== */
.section.register, .section.login { background: var(--bg); }
.section.register .card, .section.login .card { box-shadow: var(--sh-lg); border: 1px solid var(--border); border-radius: var(--r-lg); }
.section.register .logo span, .section.login .logo span { color: var(--brand) !important; }

/* ==========================================================================
   MODE SOMBRE — ajustements NiceAdmin
   ========================================================================== */
html[data-theme="dark"] body { background: var(--bg) !important; }
html[data-theme="dark"] .header { background: var(--surface) !important; border-bottom-color: var(--border); }
html[data-theme="dark"] .sidebar { background: var(--sb-bg) !important; border-right-color: var(--border) !important; }
html[data-theme="dark"] .logo span { color: #eaf0ff !important; }
html[data-theme="dark"] .header-nav .nav-profile { color: var(--text) !important; }
html[data-theme="dark"] .card, html[data-theme="dark"] .modal-content, html[data-theme="dark"] .dropdown-menu { background: var(--surface); }
html[data-theme="dark"] .search-bar .search-form, html[data-theme="dark"] .input-group-text { background: var(--surface-2); }
html[data-theme="dark"] .product-card__img, html[data-theme="dark"] .product-card__imgwrap { background: var(--surface-2); }
html[data-theme="dark"] .stock-badge { background: var(--surface); border-color: var(--border-strong); }
html[data-theme="dark"] a { color: #8fb0ff; }

/* Bouton bascule thème */
#themeToggle i { font-size: 1.15rem; }

/* ==========================================================================
   IMPRESSION — liste de stock propre
   ========================================================================== */
.stock-print { display: none; }
.stock-print__head h2 { font-size: 16pt; margin: 0 0 2px; }
.stock-print__head p { font-size: 10pt; color: #444; margin: 0 0 12px; }
.stock-print table { width: 100%; border-collapse: collapse; }
.stock-print th, .stock-print td { border: 1px solid #999; padding: 5px 8px; font-size: 10pt; text-align: left; }
.stock-print th { background: #eee; text-transform: uppercase; font-size: 8pt; letter-spacing: .04em; }
.stock-print .num { text-align: right; }

@media print {
  #header, #sidebar, .footer, .back-to-top, .stock-toolbar,
  .alert-dismissible .btn-close { display: none !important; }
  .stock-grid, .stock-empty-state { display: none !important; }
  .stock-print { display: block !important; }
  main#main.main { margin: 0 !important; padding: 0 !important; }
  body { background: #fff !important; }
  .pagetitle { display: none; }
  a[href]::after { content: ""; }
}