/* ============================================================
   StockPièce — palette CARTEX CENTER
   Bleu marine (cadre du logo), rouge vif (CAR), noir/gris (TEX/CENTER)
   ============================================================ */
:root {
  --bg: #F1F3F6;
  --panel: #FFFFFF;
  --ink: #1A1A1A;
  --steel: #1F3D5C;       /* bleu marine du logo — boutons secondaires, liens, badges */
  --steel-dark: #13263B;  /* bleu marine plus foncé — en-tête, cadre proche du logo */
  --accent: #C8202B;      /* rouge du logo (CAR) — actions principales, onglet actif */
  --accent-dark: #9E1920; /* rouge plus foncé — survol */
  --success: #1B8A5A;     /* vert — état "en stock", séparé de la charte marque (sémantique, pas décoratif) */
  --success-bg: #E7F5EE;
  --danger: #7A2436;      /* bordeaux — suppression, volontairement distinct du rouge de marque pour ne pas les confondre */
  --danger-bg: #F5E7EA;
  --muted: #6B7280;       /* gris — assorti au "CENTER" du logo */
  --border: #E2E5E8;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); font-family: 'Inter', sans-serif; color: var(--ink); }
#root { max-width: 1180px; margin: 24px auto; background: var(--bg); border-radius: 14px; overflow: hidden; border: 1px solid var(--border); min-height: 80vh; }

.header { background: var(--steel-dark); color: #fff; padding: 14px 22px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo-wrap { background: #fff; border-radius: 6px; padding: 5px 10px; display: flex; align-items: center; }
.brand-logo { height: 24px; width: auto; display: block; }
.brand-icon { background: var(--accent); width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.brand-title { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 19px; letter-spacing: .03em; text-transform: uppercase; }
.brand-sub { font-size: 11px; color: #9FB3C8; margin-top: -2px; }
.user-chip { display: flex; align-items: center; gap: 8px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: #33507099; display: flex; align-items: center; justify-content: center; }
.logout-btn { background: none; border: none; color: #C7D4E0; cursor: pointer; font-size: 18px; }

.tabs { display: flex; gap: 4px; padding: 10px 18px 0; background: var(--panel); border-bottom: 1px solid var(--border); }
.tab { display: flex; align-items: center; gap: 7px; background: none; border: none; cursor: pointer; padding: 10px 14px; font-weight: 600; font-size: 13.5px; color: var(--muted); border-bottom: 2.5px solid transparent; font-family: 'Inter', sans-serif; text-decoration: none; }
.tab.active { color: var(--steel); border-bottom-color: var(--accent); }

.content { padding: 22px; }

.badge { display: inline-block; font-weight: 600; font-size: 11px; letter-spacing: .03em; padding: 3px 9px; border-radius: 5px; text-transform: uppercase; white-space: nowrap; }
.badge-steel { background: #EAF0F7; color: var(--steel); }
.badge-accent { background: #FBE3E5; color: var(--accent-dark); }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-muted { background: #EEF0F1; color: var(--muted); }

.btn { display: inline-flex; align-items: center; gap: 7px; border-radius: 7px; padding: 9px 16px; font-weight: 600; font-size: 13.5px; cursor: pointer; border: 1.5px solid transparent; font-family: 'Inter', sans-serif; text-decoration: none; }
.btn-sm { padding: 6px 10px; font-size: 12.5px; }
.btn-steel { background: var(--steel); color: #fff; border-color: var(--steel); }
.btn-accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-ghost { background: transparent; color: var(--steel); border-color: var(--border); }
.btn-danger { background: #fff; color: var(--danger); border-color: var(--danger); }
.btn-subtle { background: #EEF1F3; color: var(--ink); border-color: #EEF1F3; }
.btn:hover { filter: brightness(0.94); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.field { display: block; margin-bottom: 12px; }
.field-label { font-weight: 600; font-size: 12px; color: var(--muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .04em; }
.field-hint { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
input[type=text], input[type=password], input[type=number], input[type=email], input[type=time], select, textarea, .input {
  width: 100%; box-sizing: border-box; border: 1.5px solid var(--border); border-radius: 7px; padding: 9px 11px;
  font-family: 'Inter', sans-serif; font-size: 14px; color: var(--ink); outline: none; background: #fff;
}
input:focus, select:focus, textarea:focus { border-color: var(--steel); }
input[readonly] { background: #F7F8F9; }

.search-wrap { position: relative; margin-bottom: 18px; }
.search-wrap input { padding-left: 36px; font-size: 14.5px; }
.search-icon { position: absolute; left: 12px; top: 12px; color: var(--muted); }

.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.card { text-align: left; background: var(--panel); border: 1.5px solid var(--border); border-radius: 10px; padding: 16px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; }
.card-title { font-weight: 600; font-size: 14.5px; }
.card-ref { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--muted); }

.modal-overlay { position: fixed; inset: 0; background: rgba(19,38,59,0.6); display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px; z-index: 100; overflow-y: auto; }
.modal { background: var(--panel); border-radius: 12px; width: 100%; box-shadow: 0 24px 60px rgba(0,0,0,0.35); }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1.5px solid var(--border); }
.modal-title { font-family: 'Oswald', sans-serif; font-size: 18px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.modal-close { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 20px; }
.modal-body { padding: 22px; }

.section-title { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .03em; margin: 14px 0 10px; }
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 22px; }
.info-box { border: 1.5px solid var(--border); border-radius: 8px; padding: 10px 12px; background: #FAFBFB; }
.info-box.accent { background: #FCEDEE; }
.info-label { font-size: 10.5px; color: var(--muted); text-transform: uppercase; font-weight: 700; letter-spacing: .03em; margin-bottom: 3px; }
.info-value { font-weight: 600; font-size: 14.5px; }
.locked { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-style: italic; font-size: 12.5px; }

.tree-box { border: 1.5px solid var(--border); border-radius: 10px; padding: 6px 14px; }
.tree-brand { display: flex; align-items: center; gap: 8px; padding: 10px 0; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 15px; border-top: 1px solid transparent; }
.tree-dash { width: 16px; height: 2px; background: var(--steel); display: inline-block; }
.tree-groups { border-top: 1px solid var(--border); }
.tree-group { border-bottom: 1px solid var(--border); }
.tree-group-btn { width: 100%; display: flex; align-items: center; gap: 9px; padding: 10px 0 10px 18px; background: none; border: none; cursor: pointer; text-align: left; }
.tree-toggle { width: 17px; height: 17px; border-radius: 4px; background: var(--steel); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; }
.tree-toggle.match { background: var(--success); }
.tree-group-name { font-weight: 600; font-size: 14px; }
.tree-group-period { font-size: 12.5px; color: var(--muted); }
.tree-mots { padding: 2px 0 12px 46px; display: flex; flex-direction: column; gap: 4px; }
.tree-mot { display: flex; align-items: center; gap: 10px; font-size: 13.5px; padding: 4px 8px; border-radius: 6px; }
.tree-mot.match { background: var(--success-bg); color: var(--success); }
.tree-mot .mot-name { min-width: 130px; font-weight: 500; }
.tree-mot .mot-period { color: var(--muted); }
.tree-mot .mot-spec { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; background: #F0F2F4; color: #4A535C; padding: 2px 7px; border-radius: 4px; margin-left: auto; }
.match-banner { display: flex; align-items: center; gap: 8px; background: var(--success-bg); color: var(--success); padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-weight: 600; font-size: 13.5px; }
.nomatch-banner { display: flex; align-items: center; gap: 8px; background: var(--danger-bg); color: var(--danger); padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-weight: 600; font-size: 13.5px; }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { padding: 10px 12px; font-weight: 700; color: var(--muted); font-size: 11.5px; text-transform: uppercase; text-align: left; background: #F7F8F9; }
td { padding: 10px 12px; border-top: 1px solid var(--border); }
.table-wrap { background: var(--panel); border-radius: 10px; border: 1px solid var(--border); overflow: hidden; }

.veh-group-editor { border: 1.5px solid var(--border); border-radius: 9px; padding: 14px; margin-bottom: 12px; }
.veh-group-row { display: grid; grid-template-columns: .6fr 1fr 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.veh-mot-row { display: grid; grid-template-columns: 1.3fr 1.3fr .7fr .7fr auto; gap: 6px; margin-bottom: 6px; align-items: center; }
.icon-btn { background: none; border: none; cursor: pointer; padding: 4px; }

.login-wrap { min-height: 560px; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-box { width: 380px; }
.login-logo { display: flex; flex-direction: column; align-items: center; margin-bottom: 26px; }
.login-logo img { height: 64px; width: auto; margin-bottom: 14px; }
.login-icon { background: var(--accent); width: 46px; height: 46px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; font-size: 24px; }
.login-panel { background: var(--panel); border-radius: 12px; border: 1px solid var(--border); padding: 22px; }
.login-switch { display: flex; gap: 6px; margin-bottom: 18px; }
.login-switch button { flex: 1; padding: 8px 0; border-radius: 7px; border: none; cursor: pointer; font-weight: 600; font-size: 13px; background: #EEF1F3; color: var(--muted); }
.login-switch button.active { background: var(--steel); color: #fff; }
.error-text { color: var(--danger); font-size: 12.5px; margin-bottom: 10px; font-weight: 600; }
.demo-hint { font-size: 11.5px; color: var(--muted); margin-top: 14px; line-height: 1.5; }

.user-row { background: var(--panel); border: 1.5px solid var(--border); border-radius: 10px; padding: 14px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.perm-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; margin-bottom: 8px; }
.ip-tag { font-family: 'IBM Plex Mono', monospace; font-size: 12px; background: #EEF1F3; border-radius: 5px; padding: 2px 8px; display: inline-flex; align-items: center; gap: 6px; }

.toast { position: fixed; top: 18px; right: 18px; background: var(--steel-dark); color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; z-index: 200; }

/* ---------- Pagination (voir resources/views/vendor/pagination/tailwind.blade.php) ---------- */
.pager { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.pager { margin-top: 4px; }
.pager-info { font-size: 12.5px; color: var(--muted); flex: 1 1 100%; order: -1; text-align: center; }
.pager-off { opacity: .45; cursor: default; }
.pager-num { min-width: 36px; justify-content: center; }
.pager-gap { color: var(--muted); padding: 0 2px; }
.row-wrap { flex-wrap: wrap; }
.search-wrap { min-width: 0; }

/* Tableaux : sur grand écran rien ne change ; la mise en cartes est dans le bloc téléphone ci-dessous. */
td.cell-img { width: 44px; }

/* ============================================================
   TÉLÉPHONE / PETIT ÉCRAN (jusqu'à 760 px de large)
   Principes : jamais de défilement horizontal de la PAGE (c'est ce qui
   faisait "dézoomer" le navigateur), tableaux transformés en cartes,
   formulaires en une colonne, fenêtres (modals) en plein écran, boutons
   assez grands pour le doigt, champs à 16 px pour éviter le zoom
   automatique d'iOS quand on touche un champ.
   Les !important sont nécessaires : beaucoup de mises en page de colonnes
   sont écrites en style="" directement dans les vues.
   ============================================================ */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }

@media (max-width: 760px) {
  #root { margin: 0; border: 0; border-radius: 0; min-height: 100vh; }
  .content { padding: 12px; }

  /* En-tête compact : logo + titre, puis compte et icônes sur la même ligne */
  .header { padding: 10px 12px; flex-wrap: wrap; gap: 8px; }
  .brand { gap: 8px; min-width: 0; }
  .brand-title { font-size: 16px; }
  .brand-sub { display: none; }
  .user-role { display: none; }
  .user-chip .avatar { width: 26px; height: 26px; }

  /* Onglets : une seule ligne qui défile avec le doigt (au lieu de déborder) */
  .tabs { overflow-x: auto; white-space: nowrap; padding: 6px 6px 0; gap: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex-shrink: 0; padding: 10px 12px; font-size: 13px; }

  /* Champs et boutons confortables au doigt */
  input[type=text], input[type=password], input[type=number], input[type=email], input[type=time], input[type=date], select, textarea, .input { font-size: 16px; }
  .btn { min-height: 40px; justify-content: center; }
  .btn-sm { min-height: 36px; }
  .icon-btn { padding: 8px 10px; font-size: 16px; }

  /* Colonnes écrites en style="grid-template-columns:..." -> une seule colonne */
  .content div[style*="grid-template-columns"]:not(.info-grid):not(.veh-group-row):not(.veh-mot-row):not(.grid-cards),
  .modal div[style*="grid-template-columns"]:not(.info-grid):not(.veh-group-row):not(.veh-mot-row) { grid-template-columns: 1fr !important; }
  .info-grid { grid-template-columns: 1fr 1fr; }
  .veh-group-row, .veh-mot-row { grid-template-columns: 1fr 1fr; }
  .grid-cards { grid-template-columns: 1fr; }

  /* Rangées de boutons/étiquettes (sans champ de saisie) : passent à la ligne */
  .content div[style*="display:flex"]:not(:has(input)):not(:has(select)):not(:has(textarea)),
  .modal div[style*="display:flex"]:not(:has(input)):not(:has(select)):not(:has(textarea)) { flex-wrap: wrap; }
  .modal-body > div[style*="justify-content:flex-end"] { justify-content: stretch !important; }
  .modal-body > div[style*="justify-content:flex-end"] .btn { flex: 1 1 auto; }
  .search-wrap { flex: 1 1 100% !important; }
  .row-wrap > .btn { flex: 1 1 auto; }

  /* Fenêtres (modals) en plein écran, en-tête collé en haut */
  .modal-overlay { padding: 0; align-items: stretch; }
  .modal { max-width: 100% !important; border-radius: 0; min-height: 100%; box-shadow: none; }
  .modal-header { position: sticky; top: 0; background: var(--panel); z-index: 2; padding: 14px 14px; }
  .modal-title { font-size: 16px; }
  .modal-body { padding: 14px; }

  /* Tableaux "stack" -> une carte par ligne, libellé de colonne à gauche de chaque valeur */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack thead { display: none; }
  table.stack tr { padding: 10px 12px; border-top: 1px solid var(--border); }
  table.stack tr:first-child { border-top: 0; }
  table.stack td { border: 0; padding: 4px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: right; word-break: break-word; }
  table.stack td[data-label]::before { content: attr(data-label); flex-shrink: 0; max-width: 45%; font-weight: 700; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; text-align: left; }
  table.stack td[colspan] { display: block; text-align: center; }
  table.stack td.cell-img { width: auto; justify-content: flex-start; }
  table.stack td.cell-actions { justify-content: flex-end; padding-top: 8px; }
  table.stack select { max-width: 60%; }
  /* Tableaux larges non convertis (ex: lignes d'un document dans un aperçu) : défilement DANS leur cadre */
  .table-wrap table:not(.stack) { min-width: 560px; }

  /* Lignes de la liste Utilisateurs */
  .user-row { flex-direction: column; align-items: stretch; gap: 10px; }

  /* Arbre des véhicules compatibles (Catalogue) */
  .tree-group-btn { padding-left: 6px; flex-wrap: wrap; }
  .tree-mots { padding-left: 22px; }
  .tree-mot { flex-wrap: wrap; gap: 6px; }
  .tree-mot .mot-name { min-width: 0; }
  .tree-mot .mot-spec { margin-left: 0; }

  /* Connexion */
  .login-wrap { min-height: 0; padding: 16px 12px; }
  .login-box { width: 100%; }

  /* Notification "toast" sur toute la largeur */
  .toast { left: 12px; right: 12px; top: 12px; text-align: center; }

  /* Pagination */
  .pager { gap: 6px; }
  .pager-num { min-width: 34px; }
}

/* ---------- Catalogue par catégorie : sections repliables ---------- */
.cat-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.cat-summary { font-size: 13px; color: var(--muted); }
.cat-section { background: var(--panel); border: 1.5px solid var(--border); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.cat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cat-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; background: none; border: 0; cursor: pointer; text-align: left; font-family: inherit; font-size: 16px; font-weight: 700; color: var(--steel-dark); }
.cat-chevron { width: 18px; height: 18px; flex: none; color: var(--steel); transition: transform .15s; }
.cat-section.closed .cat-chevron { transform: rotate(-90deg); }
.cat-more { background: none; border: 0; cursor: pointer; color: var(--steel); font-weight: 600; font-size: 13px; min-height: 44px; padding: 0 16px; font-family: inherit; white-space: nowrap; }
.cat-more:hover { text-decoration: underline; }
.cat-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; padding: 2px 16px 16px; }
.cat-row .card { background: #F7F9FB; }
.cat-section .pager { padding: 0 16px 16px; }
@media (max-width: 760px) {
  .cat-toggle { padding: 0 12px; font-size: 15px; }
  .cat-more { padding: 0 12px; font-size: 12.5px; }
  .cat-row { display: flex; overflow-x: auto; gap: 10px; padding: 2px 12px 14px; scroll-snap-type: x proximity; }
  .cat-row > .card { flex: 0 0 220px; scroll-snap-align: start; }
  .cat-row.all { display: grid; grid-template-columns: 1fr; overflow: visible; }
  .cat-row.all > .card { flex: none; }
  .cat-section .pager { padding: 0 12px 14px; }
}

.cat-icon { flex: none; display: block; }

/* Photo de catégorie avec l'habillage Cartex : cadre bleu marine, léger voile en bas, petit coin rouge */
.cat-photo { position: relative; display: block; flex: none; border-radius: 10px; overflow: hidden; background: #E8EDF2; box-shadow: 0 0 0 2px var(--steel); }
.cat-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-photo::after { content: ""; position: absolute; inset: auto 0 0 0; height: 30%; background: linear-gradient(to top, rgba(19,38,59,.55), rgba(19,38,59,0)); }
.cat-photo::before { content: ""; position: absolute; top: 0; right: 0; z-index: 2; border-style: solid; border-width: 0 calc(var(--s, 36px) * .34) calc(var(--s, 36px) * .34) 0; border-color: transparent var(--accent) transparent transparent; }

/* Puces de sous-catégories dans une section du catalogue */
.sub-chips { display: flex; gap: 8px; flex-wrap: wrap; padding: 2px 16px 12px; }
.sub-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--border); background: #fff; color: var(--steel-dark); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.sub-chip span { font-weight: 500; opacity: .75; }
.sub-chip:hover { border-color: var(--steel); }
.sub-chip.on { background: var(--steel-dark); border-color: var(--steel-dark); color: #fff; }
@media (max-width: 760px) {
  .sub-chips { flex-wrap: nowrap; overflow-x: auto; padding: 2px 12px 10px; }
  .sub-chip { flex: none; min-height: 40px; }
}

/* ---------- Catégories : barre d'actions groupées (marge) ---------- */
.bulk-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #EAF0F7; border: 1.5px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; position: sticky; top: 8px; z-index: 20; }
.bulk-count { font-weight: 700; font-size: 13px; color: var(--steel-dark); margin-right: 4px; }
.bulk-input { width: 110px; padding: 6px 10px; }
.bulk-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--steel-dark); cursor: pointer; }
@media (max-width: 760px) { .bulk-input { width: 90px; } .bulk-bar { top: 4px; } }