/* ==========================================================================
   Panoplie Imprimerie — Application de gestion — styles partagés
   ========================================================================== */

:root {
  --pp-navy: #0f2540;
  --pp-navy-light: #16345a;
  --pp-orange: #e8621c;
  --pp-orange-light: #ffb27a;
  --pp-paper: #f5f6f8;
}

html, body { height: 100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--pp-paper);
}
.font-serif-title { font-family: 'Playfair Display', Georgia, serif; }

/* ---------------- App shell layout ---------------- */
#app-shell { display: flex; min-height: 100vh; }

#app-sidebar {
  background-color: var(--pp-navy);
  color: #e2e8f0;
  width: 17rem;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease;
}
#app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

@media (max-width: 1023px) {
  #app-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 50;
    transform: translateX(-100%);
    width: 82vw; max-width: 300px;
  }
  #app-sidebar.open { transform: translateX(0); }
  #app-sidebar-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 40;
  }
  #app-sidebar-backdrop.open { display: block; }
}

.nav-link {
  display: flex; align-items: center; gap: .65rem;
  padding: .6rem 1.15rem; font-size: .9rem; border-left: 3px solid transparent;
  color: #cbd5e1; transition: all .15s ease;
}
.nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-link.active { background: rgba(232,98,28,.15); border-left-color: var(--pp-orange); color: #fff; font-weight: 600; }
.nav-link i { width: 1.15rem; text-align: center; }

/* ---------------- Cards / tables ---------------- */
.card { background: #fff; border-radius: .85rem; border: 1px solid #e5e7eb; }
.kpi-card { background: #fff; border-radius: .85rem; border: 1px solid #e5e7eb; padding: 1.1rem 1.25rem; }

table.data-table { border-collapse: collapse; width: 100%; font-size: .875rem; }
table.data-table th, table.data-table td { padding: .6rem .85rem; border-bottom: 1px solid #eef0f2; text-align: left; }
table.data-table thead th { background: #f8fafc; color: #334155; font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; position: sticky; top: 0; }
table.data-table tbody tr:hover { background: #fafaf9; }

.badge { display: inline-flex; align-items: center; gap:.25rem; padding: .15rem .6rem; border-radius: 9999px; font-size: .72rem; font-weight: 600; white-space: nowrap; }
.badge-gray { background:#e5e7eb; color:#374151; }
.badge-blue { background:#dbeafe; color:#1e40af; }
.badge-amber { background:#fef3c7; color:#92400e; }
.badge-green { background:#dcfce7; color:#166534; }
.badge-red { background:#fee2e2; color:#991b1b; }
.badge-purple { background:#ede9fe; color:#5b21b6; }
.badge-orange { background:#ffe4d1; color:#9a3412; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; font-weight:600; font-size:.85rem; padding:.55rem 1.1rem; border-radius:.55rem; transition:.15s; cursor: pointer; border: 1px solid transparent; }
.btn-primary { background: var(--pp-orange); color:#fff; }
.btn-primary:hover { background: #c04e12; }
.btn-secondary { background:#fff; color: var(--pp-navy); border-color:#d7dce3; }
.btn-secondary:hover { background:#f3f4f6; }
.btn-navy { background: var(--pp-navy); color:#fff; }
.btn-navy:hover { background: var(--pp-navy-light); }
.btn-danger { background:#fee2e2; color:#991b1b; }
.btn-danger:hover { background:#fecaca; }
.btn-sm { padding:.35rem .7rem; font-size:.78rem; }
.btn:disabled { opacity:.5; cursor: not-allowed; }

input[type=text], input[type=number], input[type=email], input[type=tel], input[type=date], input[type=datetime-local], input[type=password], select, textarea {
  border: 1px solid #d7dce3; border-radius: .5rem; padding: .55rem .75rem; font-size: .875rem; width: 100%; background: #fff;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--pp-orange); box-shadow: 0 0 0 3px rgba(232,98,28,.15); }
label.field-label { font-size: .78rem; font-weight: 600; color: #475569; margin-bottom: .3rem; display:block; }

/* ---------------- Modal ---------------- */
.modal-overlay { position: fixed; inset:0; background: rgba(15,37,64,.55); display:flex; align-items:center; justify-content:center; z-index:100; padding:1rem; }
.modal-box { background:#fff; border-radius: .9rem; max-width: 640px; width:100%; max-height: 90vh; overflow-y:auto; }

/* ---------------- Toast ---------------- */
#toast-container { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 200; display:flex; flex-direction:column; gap:.5rem; }
.toast { background: var(--pp-navy); color:#fff; padding:.75rem 1.1rem; border-radius:.6rem; font-size:.85rem; box-shadow: 0 8px 20px rgba(0,0,0,.2); display:flex; align-items:center; gap:.6rem; min-width: 220px; animation: toast-in .2s ease; }
.toast.success { background:#166534; }
.toast.error { background:#991b1b; }
.toast.warning { background:#92400e; }
@keyframes toast-in { from { opacity:0; transform: translateY(8px);} to {opacity:1; transform:none;} }

/* ---------------- POS grid ---------------- */
.pos-product-btn { background:#fff; border:1px solid #e5e7eb; border-radius:.7rem; padding:.85rem .6rem; text-align:center; transition:.12s; cursor:pointer; }
.pos-product-btn:hover { border-color: var(--pp-orange); box-shadow: 0 2px 10px rgba(232,98,28,.15); }
.pos-product-btn:active { transform: scale(.97); }

/* ---------------- Kanban ---------------- */
.kanban-board { display:flex; gap:1rem; overflow-x:auto; padding-bottom: 1rem; }
.kanban-column { background:#f1f2f4; border-radius:.85rem; min-width: 260px; width:260px; flex-shrink:0; display:flex; flex-direction:column; max-height: 74vh; }
.kanban-column-header { padding: .85rem 1rem .5rem; font-weight:700; font-size:.85rem; color:#334155; display:flex; justify-content:space-between; align-items:center; }
.kanban-list { padding: 0 .6rem .6rem; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:.55rem; }
.kanban-card { background:#fff; border-radius:.6rem; padding:.7rem .8rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); border-left: 4px solid #94a3b8; cursor: grab; font-size:.82rem; }
.kanban-card.dragging { opacity: .4; }
.kanban-card.late { border-left-color:#dc2626; background:#fff5f5; }
.kanban-column.drop-active { outline: 2px dashed var(--pp-orange); outline-offset: -4px; }

/* ---------------- Chat assistant ---------------- */
.chat-bubble-bot { background:#eef2f7; color:#1e293b; border-radius: .9rem .9rem .9rem .2rem; padding:.7rem 1rem; max-width: 85%; font-size:.88rem; }
.chat-bubble-user { background: var(--pp-orange); color:#fff; border-radius: .9rem .9rem .2rem .9rem; padding:.7rem 1rem; max-width: 85%; font-size:.88rem; margin-left:auto; }

/* ---------------- Login ---------------- */
.login-card { transition: .15s; cursor:pointer; }
.login-card:hover { border-color: var(--pp-orange); box-shadow: 0 6px 18px rgba(232,98,28,.18); transform: translateY(-2px); }

@media print {
  #app-sidebar, #app-topbar, .no-print { display:none !important; }
  #app-main { margin:0 !important; }
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }