/* Gabarit visuel réutilisable pour les pages de fiche admin (fiches produit,
   puis fiches PRI en Phase 2) — repris fidèlement du style "General
   informations" du site Python actuel (mêmes noms de classes, pour pouvoir
   réutiliser ce fichier tel quel sur les futures pages PRI sans traduction). */

body {
    font-family: Arial, sans-serif;
    margin: 0;
    background: #f4f6fb;
    color: #1d2b3a;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
}

.card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
    margin-bottom: 20px;
    scroll-margin-top: 56px;
}

h1 { margin-top: 0; }
h2 { margin: 0 0 12px; font-size: 1.1rem; }

label {
    display: block;
    font-weight: 700;
    margin: 14px 0 6px;
    font-size: 0.85rem;
}

input, select, textarea {
    padding: 8px 10px;
    border: 1px solid #dfe6f0;
    border-radius: 6px;
    font: inherit;
    box-sizing: border-box;
    width: 100%;
}

.btn {
    background: #0a3d91;
    color: white;
    border: none;
    cursor: pointer;
    padding: 8px 14px;
    border-radius: 6px;
    font: inherit;
}
.btn.secondary { background: #5c738a; text-decoration: none; display: inline-flex; align-items: center; }
.btn.danger { background: #b42318; }

.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

.checkbox-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.checkbox-row input { width: auto; }

.hint { font-weight: 400; font-size: 0.8rem; color: #5c738a; margin: -2px 0 8px; }
.readonly-box { background: #f4f6fb; border-radius: 8px; padding: 10px 12px; font-size: 0.9rem; }
.readonly-inline { font-size: 0.8rem; color: #5c738a; margin-right: auto; }

/* Onglets de langue (FR/EN/RO) — voir admin-lang-switch.js */
.lang-buttons { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-height: 30px; margin-bottom: 8px; }
.lang-btn { border: none; border-radius: 6px; padding: 4px 10px; font-size: 0.75rem; font-weight: 700; cursor: pointer; color: white; background: #d68b85; }
.lang-btn.filled { background: #7e9bd6; }
.lang-btn.empty.active { background: #b42318; }
.lang-btn.filled.active { background: #0a3d91; }

/* Grille "General informations" : article + descriptions + images */
.pri-top-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 20px; align-items: start; }
.pri-col { display: flex; flex-direction: column; }
.pri-col label:first-child { margin-top: 0; }
.field-block { display: flex; flex-direction: column; margin-bottom: 16px; }
.field-block:last-child { margin-bottom: 0; }
.field-block.grow [data-lang-switch] { display: flex; flex-direction: column; }

/* Grille de champs scalaires (réf. interne, moule, poids, prix...) */
.pri-field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 16px; }
.pri-field-grid > div { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.pri-field-grid label { margin: 0; font-weight: 700; font-size: 0.8rem; white-space: nowrap; flex-shrink: 0; }
.pri-field-grid input, .pri-field-grid select { flex: 1; min-width: 0; }

.checkbox-inline-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; margin-top: 16px; }
.checkbox-inline { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.85rem; margin: 0; white-space: nowrap; }
.checkbox-inline input { width: auto; }

/* Miniatures d'images */
.image-grid-list { display: flex; flex-wrap: wrap; gap: 10px; max-height: 320px; overflow-y: auto; padding: 4px; border: 1px solid #dfe6f0; border-radius: 8px; }
.image-picker-item { position: relative; width: 84px; text-align: center; }
.image-picker-item .thumb { display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; background: #fff; border: 2px solid #dfe6f0; border-radius: 8px; overflow: hidden; margin: 0 auto; }
.image-picker-item .thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.image-picker-item .name { display: block; font-size: 0.6rem; font-weight: 400; text-align: center; color: #5c738a; margin-top: 4px; word-break: break-word; }
.image-picker-item.is-primary .thumb { border-color: #0a3d91; box-shadow: 0 0 0 2px rgba(10, 61, 145, 0.25); }
.image-picker-item .thumb-actions { display: flex; justify-content: center; gap: 4px; margin-top: 4px; }
.image-picker-item .thumb-actions button { font-size: 0.65rem; padding: 2px 5px; }

/* Pastille couleur à côté d'un select (voir admin-card-widgets.js) */
.picker-color-swatch { display: inline-block; width: 16px; height: 16px; border-radius: 3px; border: 1px solid #ccc; flex: none; vertical-align: middle; margin-left: 6px; }
.gradient-swatch { background: linear-gradient(90deg, #8b00ff, #0000ff, #00b300, #ffe000, #ff8c00, #ff0000); }

/* Sélecteur d'image existante (galerie modale) */
.picker-overlay { position: fixed; inset: 0; background: rgba(10, 20, 40, 0.4); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.picker-overlay[hidden] { display: none; }
.picker-panel { background: white; border-radius: 12px; padding: 16px; width: 480px; max-width: calc(100vw - 32px); max-height: 80vh; display: flex; flex-direction: column; gap: 10px; }
.picker-panel-header { display: flex; justify-content: space-between; align-items: center; }
.picker-close { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: #5c738a; line-height: 1; padding: 0 4px; }
.picker-list { overflow-y: auto; max-height: 60vh; }
.picker-search { flex: 1; }
.picker-panel-header input.picker-search { width: auto; }

/* Sélecteur "picker" (admin-picker-select.js) : trigger + liste d'items avec édition/suppression */
.picker-trigger { background: white; border: 1px solid #dfe6f0; border-radius: 6px; padding: 7px 8px; font-size: 0.85rem; cursor: pointer; text-align: left; width: 100%; }
.picker-item-row { display: flex; align-items: center; gap: 6px; }
.picker-item-row.is-selected { background: #e7edfb; border-radius: 6px; }
.picker-item { text-align: left; background: none; border: none; border-radius: 6px; padding: 8px 10px; cursor: pointer; font-size: 0.85rem; flex: 1; }
.picker-item:hover { background: #f4f6fb; }
.picker-item-label { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.picker-item-name { font-weight: 600; }
.picker-item-sub { font-size: 0.72rem; color: #5c738a; display: flex; align-items: center; gap: 4px; }
.icon-btn { border: none; background: none; cursor: pointer; font-size: 0.95rem; padding: 2px 6px; border-radius: 4px; flex: none; }
.icon-btn.edit { color: #5c738a; }
.icon-btn.delete { color: #b42318; }
.picker-add { border-top: 1px solid #eaeef3; padding-top: 10px; }
.picker-add-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.picker-add-form-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
.picker-add-form-actions .btn { flex: 1; }
.picker-add-form > button.btn, .picker-add-form > .picker-add-form-actions:only-child { grid-column: 1 / -1; }

/* Tableaux (réutilisable pour les lignes BOM/opérations/main d'œuvre en Phase 2) */
.table-scroll { overflow-x: auto; }
table { width: 100%; min-width: 720px; border-collapse: collapse; margin-top: 8px; }
th, td { padding: 6px 8px; border-bottom: 1px solid #eaeef3; text-align: left; font-size: 0.85rem; vertical-align: middle; }
td input, td select { padding: 5px 6px; font-size: 0.85rem; }
.actions-cell { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.actions-cell .btn { padding: 5px 8px; font-size: 0.78rem; }
.totals-row td { font-weight: 700; background: #f4f6fb; }

/* Barre latérale (liste des fiches, groupée par moule) — page PRI */
.pri-mgmt-shell { display: flex; align-items: flex-start; }
.pri-sidebar { width: 320px; flex: none; background: white; border-right: 1px solid #dfe6f0; height: 100vh; overflow-y: auto; padding: 16px; box-sizing: border-box; position: sticky; top: 0; }
.pri-sidebar h2 { font-size: 1rem; margin-top: 0; }
.pri-sidebar-search { margin-bottom: 8px; }
.pri-sidebar-group-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: #5c738a; margin: 14px 0 4px; font-weight: 700; }
.pri-sidebar-item-row { display: flex; align-items: center; gap: 2px; }
.pri-sidebar-item-row form { margin: 0; }
.pri-sidebar-item { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 6px; text-decoration: none; color: #1d2b3a; font-size: 0.85rem; flex: 1; min-width: 0; }
.pri-sidebar-item:hover { background: #f4f6fb; }
.pri-sidebar-item.is-active { background: #e7edfb; font-weight: 700; }
.pri-sidebar-item .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pri-badge { font-size: 0.68rem; font-weight: 700; border-radius: 10px; padding: 2px 7px; color: white; flex: none; }
.pri-badge.score-0 { background: #b42318; }
.pri-badge.score-1, .pri-badge.score-2 { background: #c98a1f; }
.pri-badge.score-3 { background: #5c738a; }
.pri-badge.score-4 { background: #1a7a45; }
.pri-dup-btn { background: none; border: none; color: #5c738a; cursor: pointer; font-size: 0.9rem; padding: 2px 6px; flex: none; }
.pri-dup-btn:hover { color: #0a3d91; }
.pri-delete-btn:hover { color: #b42318; }
.pri-new-fiche { border-top: 1px solid #eaeef3; margin-top: 16px; padding-top: 14px; }
.pri-mgmt-main { flex: 1; min-width: 0; }
.pri-empty-state { margin: 24px; text-align: center; color: #5c738a; padding: 48px 24px; }

/* Fiche PRI — en-tête, navigation de sections */
.top-links { margin-bottom: 8px; }
.pri-section-nav { position: sticky; top: 0; z-index: 50; background: white; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); padding: 8px 10px; margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 4px; }
.pri-section-nav a { color: #0a3d91; text-decoration: none; font-size: 0.78rem; font-weight: 700; padding: 6px 10px; border-radius: 6px; white-space: nowrap; }
.pri-section-nav a:hover { background: #f4f6fb; }
.dim-trigger { flex: 1; min-width: 0; background: white; border: 1px solid #dfe6f0; border-radius: 6px; padding: 7px 8px; font: inherit; text-align: left; cursor: pointer; color: #1d2b3a; }
.field-calc-btn { flex: none; background: white; border: 1px solid #dfe6f0; border-radius: 6px; padding: 6px 9px; font-size: 0.95rem; line-height: 1; cursor: pointer; }
.field-calc-btn:hover { background: #f4f6fb; }
.rebut-row td { background: #fdf3e3; font-weight: 700; }

/* Panneau flottant "Remarques" */
.pri-remarks-toggle { position: fixed; top: 50%; right: 0; transform: translateY(-50%); writing-mode: vertical-rl; background: #0a3d91; color: white; border: none; padding: 14px 8px; border-radius: 8px 0 0 8px; cursor: pointer; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em; z-index: 500; }
.pri-remarks-toggle:hover { background: #0c4bb0; }
.pri-remarks-panel { position: fixed; top: 0; right: 0; width: 360px; max-width: calc(100vw - 32px); height: 100vh; background: white; box-shadow: -6px 0 20px rgba(0,0,0,0.12); z-index: 501; padding: 16px; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; }
.pri-remarks-panel[hidden] { display: none; }
.pri-remarks-panel-header { display: flex; justify-content: space-between; align-items: center; }
.pri-remarks-toolbar { display: flex; gap: 6px; }
.pri-remarks-toolbar button { padding: 5px 10px; border: 1px solid #dfe6f0; border-radius: 4px; background: white; cursor: pointer; font-size: 0.85rem; }
.pri-remarks-toolbar button:hover { border-color: #0a3d91; }
.pri-remarks-editor { flex: 1; border: 1px solid #dfe6f0; border-radius: 6px; padding: 10px; overflow-y: auto; font-size: 0.85rem; line-height: 1.5; }
.pri-remarks-editor:focus { outline: 2px solid #0a3d91; outline-offset: -2px; }
.pri-remarks-editor ul, .pri-remarks-editor ol { margin: 0 0 0 20px; padding: 0; }

/* Graphique en secteurs (pie chart PRI) */
.pri-charts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 12px; }
.pri-chart-block { text-align: center; }
.pri-chart-block h3 { margin: 0 0 10px; font-size: 0.9rem; }
.pri-pie { width: 200px; height: 200px; }
.pri-chart-legend { list-style: none; padding: 0; margin: 12px 0 0; text-align: left; font-size: 0.78rem; display: inline-block; }
.pri-chart-legend li { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.pri-chart-legend .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; }

/* Totaux */
.grand-totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grand-total-box { border-radius: 12px; padding: 16px; }
.grand-total-box.standard { background: #e7edfb; }
.grand-total-box.marginal { background: #fdf3e3; }
.grand-total-box .value { font-size: 1.6rem; font-weight: 800; }

.add-row-form { display: flex; gap: 12px; margin-top: 12px; align-items: flex-end; flex-wrap: wrap; }
.add-row-form > div { flex: 1; min-width: 110px; }
.add-row-form .btn { flex: none; }

/* Récapitulatif PRI (admin/pri/summary.blade.php) — reprend la mise en
   page compacte de l'export PDF (pri_summary_pdf.html) : barres de coût et
   vignette à la MÊME taille en pixels que sur le PDF (60×60 / 330×12),
   seule la typographie est reprise à l'échelle déjà utilisée ailleurs sur
   ce site admin (le PDF vise le papier, pas l'écran). */
/* Bandeau plein-largeur en haut des pages PRI (voir _topbar.blade.php) —
   liens + sélecteurs d'usine/langue, tout sur une seule ligne. */
.pri-topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 16px; padding: 10px 20px; background: #102341; color: white; overflow-x: auto; }
.pri-topbar-links { display: flex; align-items: center; gap: 16px; white-space: nowrap; }
.pri-topbar-links a { color: white; text-decoration: none; font-size: 0.85rem; }
.pri-topbar-links a:hover { text-decoration: underline; }
.pri-topbar-controls { display: flex; align-items: center; gap: 18px; white-space: nowrap; }
.pri-topbar-label { color: #9fb3cf; font-size: 0.75rem; margin-right: 2px; }
.pri-topbar .admin-locale-link { color: #cfe0ff; }
.pri-topbar .admin-locale-link.is-active { background: #0a3d91; color: white; }
.pri-topbar .admin-locale-link:not(.is-active):hover { background: rgba(255,255,255,0.12); }

/* Sélecteur de langue d'affichage FR/EN/RO (pages PRI — voir SetAdminLocale)
   — distinct de .lang-btn (qui bascule les CHAMPS saisis trilingues, pas
   l'interface). */
.admin-locale-switch { display: inline-flex; align-items: center; gap: 4px; }
.admin-locale-link { display: inline-block; padding: 3px 8px; border-radius: 5px; font-size: 0.75rem; font-weight: 700; color: #5c738a; text-decoration: none; }
.admin-locale-link.is-active { background: #0a3d91; color: white; }
.admin-locale-link:not(.is-active):hover { background: #eef2f8; }

/* Menu déroulant "Exporter en PDF" — choix de la langue du document,
   indépendant de la langue actuellement affichée à l'écran. */
.pdf-lang-dropdown { position: relative; display: inline-block; }
/* z-index 60 : au-dessus de .pri-section-nav (z-index:50, position:sticky)
   — le menu s'ouvre juste sous le bouton "Exporter en PDF", dans la carte
   d'en-tête au-dessus de ce bandeau de navigation ; sans ce z-index plus
   élevé, le bandeau sticky masquait la dernière option (roumain) du menu. */
.pdf-lang-menu { position: absolute; top: 100%; left: 0; margin-top: 4px; background: white; border: 1px solid #dbe2ea; border-radius: 6px; box-shadow: 0 4px 14px rgba(10,61,145,0.12); min-width: 140px; z-index: 60; overflow: hidden; }
.pdf-lang-menu a { display: block; padding: 7px 12px; font-size: 0.82rem; color: #1d2b3a; text-decoration: none; }
.pdf-lang-menu a:hover { background: #eef2f8; }

.pri-summary-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.pri-summary-filter-form { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pri-summary-filter-form label { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; cursor: pointer; }
.pri-summary-filter-form label input { width: auto; }
.pri-summary-filter-form .btn { padding: 6px 14px; }
.cost-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 14px; font-size: 0.78rem; color: #5c738a; }
.cost-legend .legend-item { display: flex; align-items: center; gap: 5px; }
.cost-legend .swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex: none; }
.cost-legend.mat-legend { gap: 2px 8px; margin-top: 4px; font-size: 0.62rem; }
.cost-legend.mat-legend .swatch { width: 7px; height: 7px; }
.pri-summary-mold-header { background: #102341; color: white; font-weight: 700; font-size: 0.85rem; padding: 8px 12px; border-radius: 6px; margin: 20px 0 4px; }
.pri-summary-mold-header:first-of-type { margin-top: 12px; }
.product-block { padding: 14px 4px; border-bottom: 1px solid #eaeef3; }
.product-row { display: flex; align-items: flex-start; gap: 14px; }
.product-image { flex: 0 0 60px; width: 60px; height: 60px; border-radius: 6px; overflow: hidden; background: #f4f6fb; display: flex; align-items: center; justify-content: center; }
.product-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.product-info { flex: 1 1 auto; min-width: 0; }
.product-info .part-name { font-weight: 700; font-size: 0.88rem; color: #0a3d91; text-decoration: none; display: inline-block; margin-bottom: 3px; }
.product-info .material-name { font-weight: 700; display: block; font-size: 0.82rem; }
.product-info .hint-small { color: #5c738a; font-size: 0.72rem; line-height: 1.5; margin-top: 3px; }
.product-bars { flex: 0 0 330px; display: flex; flex-direction: column; gap: 5px; }
.product-bar-block .bar-caption { font-size: 0.66rem; color: #5c738a; line-height: 1.5; display: block; margin-bottom: 2px; }
.product-bar-block .cost-bar { width: 330px; height: 12px; display: flex; border-radius: 3px; overflow: hidden; }
.product-bar-block .cost-bar-seg { display: flex; align-items: center; justify-content: center; color: white; font-size: 0.62rem; font-weight: 700; overflow: hidden; white-space: nowrap; }
.product-tier-table { margin-top: 10px; width: 100%; border-collapse: collapse; }
.product-tier-table th, .product-tier-table td { padding: 4px 8px; font-size: 0.72rem; text-align: center; border-bottom: 1px solid #eaeef3; }
.product-tier-table th { background: #f4f6fb; font-weight: 700; }
.product-tier-table th:first-child, .product-tier-table td:first-child { text-align: left; }
.product-tier-table tr.ref-value-row td { font-weight: 700; }

/* Dashboard admin (/admin) — grille de cartes par bloc fonctionnel
   (Compte, PRI, Configuration, puis Devis/Offres et Espace client plus
   tard). Page web classique, pas un export PDF Dompdf : flexbox/grid sont
   ici sans risque, contrairement aux templates _fiche_pdf_*. */
.dashboard-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.dashboard-header h1 { margin: 0; }
.dashboard-connected-as { color: #5c738a; font-size: 0.85rem; margin: 0 0 16px; }
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 16px; }
.dashboard-card-wide { grid-column: 1 / -1; }
.dashboard-links { list-style: none; margin: 0; padding: 0; }
.dashboard-links li { margin-bottom: 8px; }
.dashboard-links a { color: #0a3d91; text-decoration: none; font-weight: 600; }
.dashboard-links a:hover { text-decoration: underline; }
.dashboard-links-columns { columns: 2; column-gap: 24px; }
.dashboard-logout-form { margin-top: 16px; }