/* Interface d'administration des nœuds — reprend les règles de la page du
   web service public d'ArmonyWeb (AwWebServicesRESTPublic/wwwroot/WSP/index.html,
   assets/css/markdown.css) : Bootstrap 5 par défaut, cartes blanches,
   badges de couleur, blocs de code clairs. */

:root {
  --ok: #49cc90;
  --info: #61affe;
  --danger: #f93e3e;
  --warn: #fca130;
  --muted: #6c757d;
  --accent: #007acc;
}

.container { max-width: 90%; }
@media (max-width: 576px) { .container { max-width: 100%; padding-left: 16px; padding-right: 16px; } }
.min-w-0 { min-width: 0; }

/* Loader d'ArmonyWeb */
.loader-container { display: flex; position: fixed; z-index: 9999; width: 100%; height: 100%; top: 0; left: 0;
  background: rgba(255, 255, 255, .8); justify-content: center; align-items: center; }
.loader { border: 16px solid #f3f3f3; border-top: 16px solid #3498db; border-radius: 50%; width: 120px; height: 120px;
  animation: spin 2s linear infinite; }
@keyframes spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }

/* Formulaire de connexion (landing d'ArmonyWeb) */
.connection-form { padding: 20px; background: #f9f9f9; border: 1px solid #ddd; border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .1); margin-bottom: 20px; }
.connection-form label { display: block; margin-bottom: 10px; font-weight: bold; }

/* Navigation : défile horizontalement sur téléphone plutôt que de passer à la ligne */
.app-nav { overflow-x: auto; }
.app-nav .nav { flex-wrap: nowrap; white-space: nowrap; }
@media (min-width: 768px) { .app-nav .nav { flex-wrap: wrap; row-gap: .25rem; } }
.app-nav .nav-link { padding: .4rem .8rem; }

/* Sections : cartes de la page publique */
.section { margin: 1rem 0 1.5rem; padding: 1.5rem; background: #fff; border: 1px solid #dee2e6;
  border-radius: .375rem; box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075); }
@media (max-width: 576px) { .section { padding: 1rem; } }
.section-title { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.section-title h5 { margin: 0; flex-grow: 1; }

/* Badges (couleurs des méthodes HTTP de la page publique) */
.badge-state { color: #fff; font-weight: 600; }
.badge-ok { background-color: var(--ok); }
.badge-info { background-color: var(--info); }
.badge-danger { background-color: var(--danger); }
.badge-warn { background-color: var(--warn); }
.badge-muted { background-color: var(--muted); }

/* Méthodes HTTP : mêmes couleurs que la page publique d'ArmonyWeb */
.badge-get { background-color: #49cc90; }
.badge-post { background-color: #61affe; }
.badge-put { background-color: #fca130; }
.badge-delete { background-color: #f93e3e; }
.badge-patch { background-color: #6c757d; }
.calls-table tbody tr { cursor: pointer; }

.table td, .table th { vertical-align: middle; }
.table .actions { white-space: nowrap; text-align: right; }
.table .reason { max-width: 32rem; font-size: .8rem; color: #842029; white-space: pre-wrap; word-break: break-word; }
.small-mono { font-family: SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; word-break: break-all; }

/* Cartes de nœud */
.node-card .meter { height: .55rem; }
.node-card .meter-label { display: flex; justify-content: space-between; font-size: .8rem; color: var(--muted); }
.node-card.offline { opacity: .75; border-color: var(--danger) !important; }
.stat { font-size: 1.6rem; font-weight: 600; line-height: 1.1; }

/* Journaux */
.log-view { background: #f5f5f5; color: #2d2d2d; border-radius: 5px; padding: 10px; font-family: 'Courier New', monospace;
  font-size: 13px; height: 60vh; overflow: auto; white-space: pre-wrap; word-break: break-word;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); }
.log-view .l-err { color: #b02a37; font-weight: bold; }
.log-view .l-warn { color: #9a6700; }
.log-view mark { background: yellow; padding: 0; }

/* Code et clés */
pre.code { background: #f5f5f5; color: #2d2d2d; padding: 10px; border-radius: 5px; font-family: 'Courier New', monospace;
  font-size: 13px; overflow-x: auto; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); white-space: pre; margin: 0; }
.copy-wrap { position: relative; }
.copy-wrap .btn-copy { position: absolute; top: 6px; right: 6px; }

/* Histogramme de consommation */
.chart svg { width: 100%; height: 180px; display: block; }
.chart rect.bar { fill: var(--info); }
.chart rect.bar:hover { fill: var(--accent); }
.chart text { font-size: 10px; fill: var(--muted); }

/* Essai : conversation */
.chat-log { height: 50vh; overflow: auto; background: #fafafa; border: 1px solid #dee2e6; border-radius: .375rem; padding: .75rem; }
.chat-msg { margin-bottom: .75rem; }
.chat-msg .who { font-size: .75rem; font-weight: 600; color: var(--muted); text-transform: uppercase; }
.chat-msg .body { white-space: pre-wrap; word-break: break-word; }
.chat-msg.user .body { background: #e7f1ff; border-radius: .375rem; padding: .5rem .75rem; display: inline-block; }
.chat-msg .reasoning { font-size: .85rem; color: var(--muted); border-left: 3px solid #dee2e6; padding-left: .5rem; white-space: pre-wrap; }

/* Markdown (assets/css/markdown.css d'ArmonyWeb) */
.markdown-content { font-family: Arial, sans-serif; line-height: 1.6; font-size: 15px; color: #333; }
.markdown-content h1 { font-size: 1.8rem; border-bottom: 1px solid #a9a9a959; padding-bottom: .2em; margin-bottom: .5em; }
.markdown-content h2 { font-size: 1.45rem; margin-top: 1.5em; border-bottom: 1px solid #ddd; padding-bottom: .2em; }
.markdown-content h3 { font-size: 1.2rem; margin-top: 1em; }
.markdown-content p { margin: 1em 0; color: #444; }
.markdown-content a { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent); }
.markdown-content ul, .markdown-content ol { margin-left: 1.2em; }
.markdown-content li { margin-bottom: .35em; }
.markdown-content pre { background: #f5f5f5; color: #2d2d2d; padding: 10px; border-radius: 5px; font-family: 'Courier New', monospace;
  font-size: 13px; overflow-x: auto; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); }
.markdown-content code { background: #f4f4f4; color: #d63384; padding: 2px 4px; border-radius: 4px; font-family: 'Courier New', monospace; font-size: 13px; }
.markdown-content pre code { background: none; color: inherit; padding: 0; }
.markdown-content blockquote { border-left: 4px solid var(--accent); background: #f1f8ff; padding: 10px 20px; margin: 1em 0; color: #555; }
.markdown-content blockquote p { margin: .3em 0; }
.markdown-content table { width: 100%; border-collapse: collapse; margin: 1em 0; display: block; overflow-x: auto; }
.markdown-content th { background: var(--accent); color: #fff; }
.markdown-content th, .markdown-content td { border: 1px solid #ddd; padding: 8px 10px; text-align: left; }
.markdown-content tr:nth-child(even) td { background: #f9f9f9; }