/* ============================================================
   Smart Inventory — Guides PDF par rôle (Sprint 2)
   Vue HTML imprimable. Architecture extensible : ajout futur
   d'un export PDF serveur sans toucher le contenu.
   ============================================================ */

.rg-shell { display:grid; grid-template-columns: 280px 1fr; gap:24px; align-items:flex-start; }

.rg-sidebar { position:sticky; top:16px; background:var(--bg-secondary, #fff); border:1px solid var(--border-color, #e2e5ed);
              border-radius:14px; padding:16px; box-shadow:0 4px 18px rgba(15,17,23,.05); }
.rg-sidebar h3 { font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted,#6b7280);
                 margin:0 0 12px 0; }
.rg-role-list { display:flex; flex-direction:column; gap:6px; }
.rg-role-list .rg-role-btn { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px;
                              border:1px solid transparent; background:transparent; color:var(--text-primary,#1a1d23);
                              cursor:pointer; text-align:left; font-size:13.5px; transition: all .15s ease; }
.rg-role-list .rg-role-btn:hover { background:rgba(8,145,178,.06); }
.rg-role-list .rg-role-btn.active { background:linear-gradient(135deg, rgba(124,58,237,.08), rgba(8,145,178,.08));
                                     border-color:rgba(124,58,237,.25); color:#7c3aed; font-weight:600; }
.rg-role-list .rg-role-btn .rg-role-icon { width:32px; height:32px; border-radius:8px; display:grid; place-items:center;
                                            background:rgba(8,145,178,.1); color:#0891b2; flex-shrink:0; font-size:14px; }
.rg-role-list .rg-role-btn.active .rg-role-icon { background:rgba(124,58,237,.16); color:#7c3aed; }

.rg-actions { margin-top:16px; padding-top:12px; border-top:1px dashed var(--border-color,#e2e5ed);
              display:flex; flex-direction:column; gap:8px; }

.rg-content { background:var(--bg-secondary,#fff); border:1px solid var(--border-color,#e2e5ed);
              border-radius:14px; padding:32px 36px; box-shadow:0 6px 24px rgba(15,17,23,.06); }

.rg-hero { display:flex; align-items:flex-start; gap:18px; padding-bottom:22px; margin-bottom:24px;
           border-bottom:1px solid var(--border-color,#e2e5ed); }
.rg-hero-icon { width:64px; height:64px; border-radius:14px; display:grid; place-items:center;
                font-size:26px; color:#fff; flex-shrink:0; }
.rg-hero h1 { font-size:26px; margin:0 0 6px 0; letter-spacing:-.02em; }
.rg-hero .rg-hero-sub { font-size:14px; color:var(--text-muted,#6b7280); margin:0 0 8px 0; }
.rg-hero .rg-hero-meta { font-size:11.5px; color:var(--text-muted,#9ca3af); letter-spacing:.04em; text-transform:uppercase; }

.rg-section { margin:28px 0; }
.rg-section h2 { font-size:18px; margin:0 0 14px 0; padding-bottom:8px;
                 border-bottom:2px solid rgba(8,145,178,.18); color:#0891b2;
                 display:flex; align-items:center; gap:10px; }
.rg-section h3 { font-size:15px; margin:18px 0 10px 0; color:var(--text-primary,#1a1d23); }
.rg-section p { font-size:13.5px; line-height:1.65; color:var(--text-primary,#1a1d23); margin:0 0 10px 0; }

/* Workflow visual blocks */
.rg-workflow { display:flex; gap:8px; flex-wrap:wrap; align-items:stretch; margin:14px 0 18px; }
.rg-step { flex:1 1 140px; background:linear-gradient(135deg, #f8fafc, #f1f5f9); border:1px solid #e2e8f0;
           border-radius:12px; padding:12px 14px; position:relative; }
.rg-step .rg-step-num { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
                         border-radius:50%; background:#0891b2; color:#fff; font-weight:700; font-size:12px;
                         margin-bottom:8px; }
.rg-step h4 { font-size:13px; margin:0 0 4px 0; color:#0f172a; }
.rg-step p { font-size:11.5px; color:#475569; margin:0; line-height:1.5; }
.rg-step + .rg-step::before { content:'›'; position:absolute; left:-12px; top:50%; transform:translateY(-50%);
                                color:#cbd5e1; font-size:18px; font-weight:700; }

/* UI mock blocks (lightweight schematic) */
.rg-ui-mock { background:#0f172a; border-radius:12px; padding:14px; margin:12px 0; color:#e2e8f0; }
.rg-ui-mock .rg-ui-bar { display:flex; align-items:center; gap:6px; padding-bottom:10px;
                         border-bottom:1px solid #1e293b; margin-bottom:10px; font-size:11px; color:#94a3b8; }
.rg-ui-mock .rg-ui-bar .dot { width:10px; height:10px; border-radius:50%; background:#475569; }
.rg-ui-mock .rg-ui-bar .dot.r { background:#ef4444; }
.rg-ui-mock .rg-ui-bar .dot.y { background:#fbbf24; }
.rg-ui-mock .rg-ui-bar .dot.g { background:#22c55e; }
.rg-ui-mock .rg-ui-body { font-size:12px; line-height:1.7; }
.rg-ui-mock .rg-ui-chip { display:inline-block; padding:3px 8px; border-radius:6px; background:rgba(56,189,248,.16);
                          color:#7dd3fc; font-size:11px; margin:2px 4px 2px 0; }

/* Alert boxes */
.rg-alert { display:flex; gap:12px; padding:12px 14px; border-radius:10px; margin:12px 0; align-items:flex-start;
            border-left:4px solid; font-size:13px; line-height:1.55; }
.rg-alert.info { background:rgba(8,145,178,.06); border-color:#0891b2; color:#075985; }
.rg-alert.warn { background:rgba(245,158,11,.07); border-color:#f59e0b; color:#92400e; }
.rg-alert.danger { background:rgba(239,68,68,.06); border-color:#ef4444; color:#991b1b; }
.rg-alert.good { background:rgba(16,185,129,.06); border-color:#10b981; color:#065f46; }
.rg-alert i { font-size:16px; flex-shrink:0; margin-top:2px; }
.rg-alert strong { display:block; margin-bottom:3px; }

/* Best practices */
.rg-best { background:linear-gradient(135deg, rgba(16,185,129,.04), rgba(8,145,178,.04));
           border:1px solid rgba(16,185,129,.2); border-radius:12px; padding:14px 16px; margin:14px 0; }
.rg-best h3 { color:#065f46; margin-top:0; display:flex; align-items:center; gap:8px; }
.rg-best ul { margin:6px 0 0 22px; padding:0; }
.rg-best li { font-size:13px; line-height:1.7; color:#064e3b; }

/* Tables */
.rg-table { width:100%; border-collapse:collapse; font-size:12.5px; margin:12px 0; }
.rg-table th, .rg-table td { text-align:left; padding:8px 10px; border-bottom:1px solid #e2e5ed; vertical-align:top; }
.rg-table th { background:#f8fafc; font-weight:600; color:#475569; font-size:11.5px;
                text-transform:uppercase; letter-spacing:.04em; }
.rg-table td code { background:#f1f5f9; padding:2px 6px; border-radius:4px; font-size:11.5px; color:#7c3aed; }

/* Footer */
.rg-footer { margin-top:30px; padding-top:18px; border-top:1px solid var(--border-color,#e2e5ed);
             font-size:11px; color:var(--text-muted,#9ca3af); display:flex; justify-content:space-between; align-items:center; }

/* Responsive */
@media (max-width: 900px) {
    .rg-shell { grid-template-columns: 1fr; }
    .rg-sidebar { position:static; }
    .rg-content { padding:20px 18px; }
    .rg-step { flex:1 1 100%; }
    .rg-step + .rg-step::before { content:'↓'; left:50%; top:-10px; transform:translateX(-50%); }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
    @page { size: A4; margin: 14mm 12mm 16mm 12mm; }

    body { background:#fff !important; color:#000 !important; font-size:11pt !important; }
    .sidebar, .top-bar, .help-fab, .recon-banner, #preloader, .modal-overlay,
    .rg-sidebar, .rg-actions, #toast-container, .breadcrumb, .help-tooltip { display:none !important; }

    .rg-shell { display:block !important; }
    .rg-content { box-shadow:none !important; border:none !important; padding:0 !important; max-width:100% !important; }

    .rg-hero { page-break-after: avoid; border-bottom:2px solid #000 !important; padding-bottom:12px !important; margin-bottom:18px !important; }
    .rg-hero h1 { font-size:22pt !important; color:#000 !important; }
    .rg-hero-icon { background:#000 !important; }
    .rg-section { page-break-inside: avoid; margin:16px 0 !important; }
    .rg-section h2 { font-size:14pt !important; color:#000 !important; border-bottom:1.5pt solid #000 !important;
                     page-break-after: avoid; }
    .rg-section h3 { font-size:12pt !important; color:#000 !important; page-break-after: avoid; }

    .rg-workflow { page-break-inside: avoid; }
    .rg-step { break-inside:avoid; background:#f8fafc !important; }
    .rg-step .rg-step-num { background:#000 !important; }
    .rg-step + .rg-step::before { color:#000 !important; }

    .rg-ui-mock { background:#f1f5f9 !important; color:#000 !important; border:1px solid #cbd5e1 !important;
                  page-break-inside: avoid; }
    .rg-ui-mock .rg-ui-bar { color:#475569 !important; border-bottom-color:#cbd5e1 !important; }
    .rg-ui-mock .rg-ui-chip { background:#e0f2fe !important; color:#075985 !important; }

    .rg-alert { page-break-inside: avoid; background:#f9fafb !important;
                border:1pt solid #d1d5db !important; border-left-width:3pt !important; }
    .rg-alert.warn { border-color:#f59e0b !important; }
    .rg-alert.danger { border-color:#dc2626 !important; }
    .rg-alert.info { border-color:#0891b2 !important; }
    .rg-alert.good { border-color:#059669 !important; }

    .rg-best { page-break-inside: avoid; background:#f0fdf4 !important; border-color:#a7f3d0 !important; }

    .rg-table { font-size:10pt !important; page-break-inside: auto; }
    .rg-table th { background:#f1f5f9 !important; color:#000 !important; }

    .rg-print-banner { display:block !important; text-align:center; font-size:9pt; color:#64748b;
                       border-bottom:1px solid #cbd5e1; padding-bottom:8pt; margin-bottom:12pt; }

    a[href]:after { content:""; } /* avoid URL repetition */
}

.rg-print-banner { display:none; }