/* ════════════════════════════════════════════════
   iManage — Print thermique (tickets, factures compactes)
   Module optionnel — à charger seulement par les apps qui impriment sur
   imprimante thermique (restauration, change, caisse, etc.).

   Usage :
       <link rel="stylesheet" href="iManage/css/imanage-print.css"/>

   Personnalisation par app (dans `css/app.css`, au niveau `:root`) :
       :root {
           --ticket-width:       80mm;   // largeur standard 80mm (défaut)
           --ticket-max-width:   80mm;   // largeur max en mode print
           --ticket-padding:     16px;   // padding .print_body en mode écran
           --ticket-padding-print: 8px;  // padding .print_body en mode print
           --ticket-logo-width:  50mm;   // taille du logo en mode print
           --ticket-max-height:  70vh;   // hauteur max scrollable en mode écran
           --ticket-z-index:     2000;   // niveau au-dessus des autres modals
       }

   Tailles types pour d'autres formats :
       · Ticket standard thermique : 80mm (défaut)
       · Ticket large thermique    : 112mm
       · Ticket portrait A6        : 105mm
       · Ticket compact mini       : 58mm

   Les apps déclarent les box concernés en ajoutant la classe .print_container
   sur le wrapper (ex: <div id="order_invoice" class="print_container">…</div>).
   Les rules @media print ciblent .print_container et .print_toolbar pour
   masquer le chrome et ne garder que le contenu imprimable.
   ════════════════════════════════════════════════ */

:root {
	--ticket-width:          80mm;
	--ticket-max-width:      80mm;
	--ticket-padding:        16px;
	--ticket-padding-print:  8px;
	--ticket-logo-width:     50mm;
	--ticket-max-height:     70vh;
	--ticket-z-index:        2000;
}

.print_container {
	width: var(--ticket-width);
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: var(--ticket-z-index);
	background: var(--bg-surface);
	border-radius: var(--radius-lg);
	border: var(--separator);
	overflow: hidden;
}

.print_toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	background: var(--bg-primary);
	border-bottom: 1px solid var(--border);
	font-weight: 600;
}

.print_body {
	padding: var(--ticket-padding);
	max-height: var(--ticket-max-height);
	overflow-y: auto;
}

.invoice_row    { height: 36px; }
.invoice_header { margin-bottom: 12px; }
.invoice_footer { margin-top: 12px; margin-bottom: 12px; }

.table-ticket {
	width: 100%;
	font-weight: bold;
}

.ticket_quantity {
	white-space: nowrap;
	width: 5%;
}

/* ════════════════════════════════════════════════
   @media print — un ticket affiché cache tout le reste
   Le sélecteur [style*="display: block"] cible les boxes visibles
   (ils sont display:none par défaut et montrés via JS).
   ════════════════════════════════════════════════ */
@media print {
	/* Quand un .print_container est visible, cacher page + navbar */
	body:has(.print_container[style*="display: block"]) #page,
	body:has(.print_container[style*="display: block"]) .navbar {
		display: none !important;
	}

	.print_container {
		position: static !important;
		transform: none !important;
		width: 100% !important;
		max-width: var(--ticket-max-width);
		border: none !important;
		margin: 0 !important;
		padding: 0 !important;
		background: #fff !important;
		z-index: auto !important;
	}

	.print_toolbar {
		display: none !important;
	}

	.print_body {
		max-height: none !important;
		overflow: visible !important;
		padding: var(--ticket-padding-print) !important;
	}

	.table-ticket {
		font-family: monospace;
		margin: 0 !important;
	}

	.invoice_header img {
		width: var(--ticket-logo-width) !important;
	}
}