/* Aprovall Forms Watch — compléments au design system (tables filtrables, prompts, diffs, barres). */
.sr-defs { position: absolute; }
.mainnav { display: flex; gap: .15rem; flex: 1; justify-content: center; }
.mainnav a { padding: .45rem .8rem; border-radius: 10px; color: var(--text-2); font-weight: 500; font-size: .9rem; white-space: nowrap; }
.mainnav a:hover { background: var(--surface-3); text-decoration: none; color: var(--text); }
.mainnav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
@media (max-width: 900px) { .mainnav { order: 3; flex-basis: 100%; overflow-x: auto; justify-content: flex-start; } .topbar { flex-wrap: wrap; } }
form.inline { display: inline; }
.foot { max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 32px) 2rem; text-align: center; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.stats-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1100px) { .stats-6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .stats-6 { grid-template-columns: repeat(2, 1fr); } }
.stat.warn .v { color: var(--serious); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 1000px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.card { margin-bottom: 1rem; }
code { font-family: var(--mono); font-size: .82em; background: var(--surface-3); padding: .05rem .3rem; border-radius: 5px; }
.mono { font-family: var(--mono); font-size: .82em; }
.nowrap { white-space: nowrap; }
.ic { width: 12px; height: 12px; }

/* Barres (un seul hue, magnitude) */
.bars { display: grid; gap: .45rem; }
.bar-row { display: grid; grid-template-columns: minmax(120px, 34%) 1fr auto; gap: .6rem; align-items: center; font-size: .86rem; }
.bar-row .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.bar-row .track { height: 10px; background: var(--grid); border-radius: 4px; overflow: hidden; position: relative; }
.bar-row .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--series-1); border-radius: 0 4px 4px 0; min-width: 2px; transition: width .4s var(--ease); }
.bar-row .n { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 3ch; text-align: right; }
.bar-row:hover .fill { background: var(--accent-hover); }
.bars .empty { color: var(--text-3); font-size: .88rem; }

/* Filtres */
.filters { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.filters .qfield { display: flex; flex-direction: row; align-items: center; gap: .4rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 0 .6rem; min-width: 240px; flex: 1 1 240px; }
.filters .qfield svg { width: 15px; height: 15px; color: var(--text-3); flex: none; }
.filters .qfield input { border: 0; background: transparent; padding: .5rem 0; width: 100%; font: inherit; color: inherit; outline: none; box-shadow: none; }
.filters select { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: .45rem .6rem; font: inherit; font-size: .86rem; color: var(--text); max-width: 200px; }
.filters .check { display: inline-flex; flex-direction: row; align-items: center; gap: .35rem; font-size: .85rem; color: var(--text-2); }
.filters .check input { width: auto; margin: 0; }
.filters .count { margin-left: auto; }

/* Tables de données */
.table-card { padding: .5rem 1rem 1rem; }
table.data th[data-sort] { cursor: pointer; user-select: none; }
table.data th[data-sort]:hover { color: var(--accent); }
table.data th[data-sort].asc::after { content: " ↑"; } table.data th[data-sort].desc::after { content: " ↓"; }
table.data td a strong { font-weight: 600; }
table.data tr.row-sens td { background: var(--warn-soft); }
table.data td .sub { color: var(--text-3); font-size: .78rem; margin-top: .1rem; }
.pager { display: flex; gap: .5rem; align-items: center; justify-content: center; padding-top: .9rem; font-size: .86rem; color: var(--text-2); }
.pill.status-actif { color: var(--good); background: var(--good-soft); }
.pill.status-arrete, .pill.status-inactif { color: var(--warn); background: var(--warn-soft); }
.pill.status-supprime { color: var(--critical); background: var(--critical-soft); }
.pill.status-success { color: var(--good); background: var(--good-soft); } .pill.status-partial { color: var(--warn); background: var(--warn-soft); }
.pill.status-failed { color: var(--critical); background: var(--critical-soft); } .pill.status-running { color: var(--accent); background: var(--accent-soft); }
.pill.change-new { color: var(--good); background: var(--good-soft); } .pill.change-modified { color: var(--warn); background: var(--warn-soft); }
.pill.change-removed { color: var(--critical); background: var(--critical-soft); } .pill.change-reappeared { color: var(--accent); background: var(--accent-soft); }
.pill.cat-personal, .pill.cat-contact { color: var(--warn); background: var(--warn-soft); }
.pill.cat-sensitive, .pill.cat-identity { color: var(--critical); background: var(--critical-soft); }
.pill.cat-bank { color: var(--serious); background: var(--serious-soft); }
.pill.cat-upload { color: var(--text-2); background: var(--surface-3); }
.tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .6rem; }
.flags { display: flex; flex-wrap: wrap; gap: .25rem; }

/* Prompts */
table.prompts td.prompt-cell { min-width: 420px; max-width: 640px; }
pre.prompt { font-family: var(--mono); font-size: .78rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: .7rem .85rem; margin: 0; max-height: 260px; overflow: auto; }
.card pre.prompt { max-height: 70vh; }
.history { margin-top: 1rem; } .history summary { cursor: pointer; color: var(--text-2); font-size: .9rem; } .history .prev { margin-top: .8rem; }

/* Diff */
ul.diff { list-style: none; margin: 0; padding: 0; font-size: .8rem; display: grid; gap: .15rem; }
ul.diff .k { font-family: var(--mono); color: var(--text-3); margin-right: .3rem; }
ul.diff del { color: var(--critical); text-decoration: line-through; opacity: .8; } ul.diff ins { color: var(--good); text-decoration: none; font-weight: 600; }

/* Fiche */
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: .35rem .9rem; margin: 0; font-size: .88rem; }
dl.kv dt { color: var(--text-3); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; padding-top: .15rem; }
dl.kv dd { margin: 0; min-width: 0; word-break: break-word; }
ul.plain { list-style: none; margin: 0; padding: 0; }
.run-summary { font-size: .9rem; } .run-summary .big { font-size: 1.4rem; font-weight: 650; letter-spacing: -.02em; }
.run-summary dl { display: grid; grid-auto-flow: column; grid-template-rows: auto auto; grid-auto-columns: 1fr; gap: .1rem .75rem; margin: .75rem 0 0; } .run-summary dt { font-size: .7rem; text-transform: uppercase; color: var(--text-3); letter-spacing: .06em; font-weight: 600; } .run-summary dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
ul.changes { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; font-size: .86rem; }
ul.changes li { display: flex; gap: .6rem; align-items: baseline; } ul.changes li .when { color: var(--text-3); font-size: .76rem; white-space: nowrap; min-width: 9ch; }
.banner.info { background: var(--info-soft); color: var(--text-2); margin: 0 0 1rem; max-width: none; } .banner svg { width: 16px; height: 16px; flex: none; }
.banner.err { background: var(--critical-soft); color: var(--critical); margin: 0 0 1rem; max-width: none; }
.banner.ok { background: var(--good-soft); color: var(--good); margin: 0 0 1rem; max-width: none; }
.login-card .btn.okta { display: flex; justify-content: center; }
.login-card input { width: 100%; padding: .6rem .75rem; border: 1px solid var(--border-strong); border-radius: 10px; font: inherit; background: var(--surface); color: var(--text); margin-top: .35rem; }
.login-card label { font-size: .85rem; font-weight: 500; color: var(--text-2); }

/* Connexion par jeton */
.login-card.wide { width: min(560px, 100%); }
.login-card textarea { width: 100%; padding: .6rem .75rem; border: 1px solid var(--border-strong); border-radius: 10px; font: inherit; font-family: var(--mono); font-size: .78rem; background: var(--surface); color: var(--text); margin-top: .35rem; resize: vertical; }
.login-card .howto { margin-top: 1.25rem; border: 1px solid var(--border); border-radius: var(--r-md); padding: .8rem 1rem; background: var(--surface-2); font-size: .88rem; }
.login-card .howto summary { cursor: pointer; color: var(--text-2); }
.login-card .howto ol { padding-left: 1.2rem; margin: .6rem 0; display: grid; gap: .45rem; }
.login-card .howto .bookmarklet { display: inline-flex; margin-left: .35rem; cursor: grab; border-style: dashed; }
.login-card .howto textarea.code { font-size: .68rem; margin-top: .4rem; }
.login-card .status { margin: 0 0 1rem; }