/* Design professionnel et sobre */
:root{
  --bg:#fafafa; /* gray-50 */
  --bg-soft:#ffffff; /* white */
  --fg:#1f2937; /* gray-800 */
  --muted:#6b7280; /* gray-500 */
  --primary:#3b82f6; /* blue-500 */
  --primary-hover:#2563eb; /* blue-600 */
  --danger:#ef4444; /* red-500 */
  --success:#10b981; /* emerald-500 */
  --card:#ffffff;
  --border:#e5e7eb; /* gray-200 */
  --shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";min-height:100%}

.container{max-width:1200px;margin:0 auto;padding:24px}
.header{display:flex;align-items:center;gap:16px;margin-bottom:32px;padding:20px 0;border-bottom:1px solid var(--border)}
.logo{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--primary-hover));box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;color:white;font-weight:bold;font-size:18px}
.title{font-weight:700;font-size:24px;color:var(--fg)}
.subtitle{color:var(--muted);font-size:16px;margin-top:2px}

.grid{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}

.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:24px;box-shadow:var(--shadow);transition:box-shadow 0.2s ease}
.card:hover{box-shadow:var(--shadow-lg)}
.card .title{font-size:20px;margin-bottom:16px;font-weight:600;color:var(--fg)}
.card .meta{color:var(--muted);font-size:14px}
.card .code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;color:var(--primary);background:#f8fafc;padding:8px;border-radius:6px;border:1px solid var(--border)}

label{display:block;margin-bottom:8px;color:var(--fg);font-size:14px;font-weight:500}
input[type="text"], input[type="email"], input[type="file"], input[type="password"], textarea, select{width:100%;padding:12px 16px;border-radius:8px;border:1px solid var(--border);background:var(--bg-soft);color:var(--fg);font-size:14px;transition:border-color 0.2s ease, box-shadow 0.2s ease;box-sizing:border-box;font-family:inherit}
input:focus, textarea:focus, select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(59, 130, 246, 0.1)}
textarea{min-height:100px;resize:vertical}
select{cursor:pointer}

button{appearance:none;border:0;border-radius:8px;padding:12px 20px;background:var(--primary);color:white;font-weight:600;cursor:pointer;font-size:14px;transition:background-color 0.2s ease, transform 0.1s ease;box-shadow:var(--shadow)}
button:hover{background:var(--primary-hover);transform:translateY(-1px)}
button.secondary{background:transparent;border:1px solid var(--border);color:var(--fg)}
button.secondary:hover{background:var(--bg);border-color:var(--primary)}
button:disabled{opacity:.5;cursor:not-allowed;transform:none}

.row{display:flex;gap:10px;align-items:flex-end}
.row > *{flex:1}

.ok{color:var(--success);font-weight:500}
.error{color:var(--danger);font-weight:500}

/* Styles pour les alertes */
.alert{padding:12px 16px;border-radius:8px;margin-bottom:16px}
.alert.success{background:#f0fdf4;border:1px solid #bbf7d0;color:#166534}
.alert.error{background:#fef2f2;border:1px solid #fecaca;color:#dc2626}
.alert.info{background:#eff6ff;border:1px solid #bfdbfe;color:#1d4ed8}

/* Styles pour les tables */
table{width:100%;border-collapse:collapse;margin-top:16px}
th, td{padding:12px;text-align:left;border-bottom:1px solid var(--border)}
th{background:var(--bg);font-weight:600;color:var(--fg)}
tr:hover{background:var(--bg)}

/* Styles pour les modales */
.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:1000}
.modal.show{display:flex;align-items:center;justify-content:center}
.modal-content{background:var(--card);border-radius:12px;padding:24px;max-width:95%;width:95%;box-shadow:var(--shadow-lg)}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.modal-title{font-size:18px;font-weight:600}
.modal-close{background:none;border:none;font-size:24px;cursor:pointer;color:var(--muted)}
.modal-close:hover{color:var(--fg)}

/* Styles spécifiques pour le modal Bootstrap */
#barcodeModal .modal-dialog {
    max-width: 95% !important;
    width: 95% !important;
    margin: 1.75rem auto !important;
}
#barcodeModal .modal-content {
    width: 100% !important;
}