/* Portail client Système Contexte IA — complète contexte.css (même design system). */

.portal-main { padding: 36px 0 60px; min-height: calc(100vh - 140px); }
.portal-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.portal-head h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.portal-head p { margin-top: 6px; }
.sc-nav .nav-user { font-family: var(--mono); font-size: .74rem; color: var(--muted-2); }
.sc-nav .nav-user b { color: var(--ink); font-weight: 600; }

/* Connexion */
.auth-wrap { max-width: 440px; margin: 40px auto; }
.auth-card { border: 1px solid var(--border); background: var(--panel); border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow-lift); }
.auth-card h1 { font-size: 1.6rem; margin-bottom: 6px; }
.auth-card .lead { font-size: .95rem; margin-bottom: 22px; }
.auth-card .btn { width: 100%; }
.auth-foot { text-align: center; margin-top: 16px; }

/* Pastilles de statut */
.pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .02em; border-radius: 999px; padding: 4px 10px; border: 1px solid var(--border); background: var(--bg-soft); color: var(--muted); white-space: nowrap; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--muted-2); }
.pill.ok { color: var(--green); background: var(--green-soft); border-color: rgba(14,138,80,.25); }
.pill.ok::before { background: var(--green); }
.pill.erreur { color: var(--red); background: var(--red-soft); border-color: rgba(214,53,92,.25); }
.pill.erreur::before { background: var(--red); }
.pill.a_configurer::before { background: #E8A317; }

/* Badges d'action (lecture / écriture / exécution / suppression) */
.act { font-family: var(--mono); font-size: .66rem; border-radius: 6px; padding: 2px 7px; border: 1px solid var(--border); background: var(--bg-soft); color: var(--muted); white-space: nowrap; }
.act.lecture { color: var(--blue-dark); background: var(--blue-soft); border-color: rgba(81,162,255,.3); }
.act.ecriture { color: #8A5A00; background: rgba(232,163,23,.12); border-color: rgba(232,163,23,.35); }
.act.execution { color: #6B21A8; background: rgba(107,33,168,.1); border-color: rgba(107,33,168,.3); }
.act.suppression { color: var(--red); background: var(--red-soft); border-color: rgba(214,53,92,.3); }
.act.systeme { color: var(--muted); }

/* Onboarding — cartes connecteur */
.connector-card { border: 1px solid var(--border); background: var(--panel); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; box-shadow: var(--shadow-soft); }
.connector-card.ok { border-color: rgba(14,138,80,.35); }
.cc-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.cc-head .tc-logo { flex: none; width: 42px; height: 42px; border-radius: 11px; background: var(--bg-soft); border: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: .7rem; color: var(--blue-dark); font-weight: 600; }
.cc-head .tc-logo img { width: 26px; height: 26px; object-fit: contain; }
.cc-head h2 { font-size: 1.15rem; margin: 0; }
.cc-head .cc-cat { font-family: var(--mono); font-size: .66rem; color: var(--muted-2); display: block; }
.cc-head .pill { margin-left: auto; }
.cc-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cc-reasons span { font-family: var(--mono); font-size: .68rem; color: var(--blue-dark); background: var(--blue-soft); border-radius: 999px; padding: 3px 9px; }
.cc-desc { font-size: .92rem; margin-bottom: 14px; }
.cc-steps { margin: 0 0 16px 0; padding-left: 20px; font-size: .86rem; color: var(--muted); }
.cc-steps li { margin-bottom: 4px; }
.cc-steps code, .mono-inline { font-family: var(--mono); font-size: .78rem; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; color: var(--ink); word-break: break-all; }
.cc-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.cc-result { margin-top: 14px; }
.tool-line.err { border-color: rgba(214,53,92,.35); background: rgba(214,53,92,.06); }
.tool-line.err .check { display: inline; color: var(--red); }
.tool-line .tl-label { white-space: normal; }
details.cc-more summary { cursor: pointer; font-size: .86rem; color: var(--blue-dark); font-weight: 600; margin-bottom: 8px; }
.google-accounts { display: grid; gap: 8px; margin: 12px 0; }
.google-accounts .tool-line { width: 100%; }
.unsupported { border: 1px dashed var(--border); border-radius: var(--radius); padding: 18px 22px; background: var(--bg-soft); margin-bottom: 20px; }
.unsupported h3 { font-size: 1rem; margin-bottom: 6px; }
.unsupported ul { padding-left: 18px; font-size: .88rem; color: var(--muted); }
.add-row { display: flex; flex-wrap: wrap; gap: 8px; }
.add-row button { font-family: var(--font); cursor: pointer; }

/* Dashboard */
.dash-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; margin-top: 24px; align-items: start; }
@media (max-width: 960px) { .dash-grid { grid-template-columns: 1fr; } }
.card { border: 1px solid var(--border); background: var(--panel); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow-soft); margin-bottom: 20px; }
.card h2 { font-size: 1.1rem; margin-bottom: 4px; }
.card .card-sub { font-size: .84rem; color: var(--muted-2); margin-bottom: 14px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.stats-row { margin-top: 0; }
.stat .num.small { font-size: 1.2rem; }

.chart-wrap { position: relative; }
.chart-legend { display: flex; gap: 16px; font-size: .78rem; color: var(--muted); margin-bottom: 8px; }
.chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.chart svg { width: 100%; height: 170px; display: block; overflow: visible; }
.chart .bar { transition: opacity .15s; }
.chart .bar-hit:hover ~ .bar, .chart g:hover .bar { opacity: .85; }
.chart text { font-family: var(--mono); font-size: 10px; fill: var(--muted-2); }
.chart line.grid { stroke: var(--border-soft); stroke-width: 1; }
.chart-tip { position: absolute; pointer-events: none; background: var(--ink); color: #fff; font-family: var(--mono); font-size: .7rem; padding: 6px 9px; border-radius: 8px; transform: translate(-50%, -110%); white-space: nowrap; display: none; z-index: 5; }

.conn-list { display: grid; gap: 8px; }
.conn-row { display: flex; align-items: center; gap: 12px; border: 1px solid var(--border-soft); border-radius: 12px; padding: 10px 12px; }
.conn-row .tc-logo { flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--bg-soft); border: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: .62rem; color: var(--blue-dark); font-weight: 600; }
.conn-row .tc-logo img { width: 20px; height: 20px; object-fit: contain; }
.conn-row .cr-main { flex: 1; min-width: 0; }
.conn-row .cr-name { font-weight: 600; font-size: .92rem; }
.conn-row .cr-detail { font-size: .76rem; color: var(--muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.night { background: var(--night); border: 1px solid var(--night-border); border-radius: var(--radius); padding: 18px 20px; color: var(--night-muted); font-size: .88rem; box-shadow: var(--shadow-lift); }
.night h2 { color: var(--night-ink); font-size: 1.05rem; margin-bottom: 8px; }
.night p { color: var(--night-muted); }
.night .url { font-family: var(--mono); font-size: .8rem; color: #8FC1FF; background: rgba(255,255,255,.04); border: 1px solid var(--night-border); border-radius: 10px; padding: 10px 12px; margin: 10px 0; word-break: break-all; display: flex; align-items: center; gap: 10px; }
.night .url button { margin-left: auto; }
.night ol { padding-left: 18px; margin: 8px 0; }
.night ol li { margin-bottom: 4px; }
.night .btn-ghost { background: transparent; border-color: var(--night-border); color: var(--night-ink); }
.night .btn-ghost:hover { border-color: var(--blue-line); }
.night a { color: #8FC1FF; }
.night code { font-family: var(--mono); font-size: .76rem; color: #C6D3EE; }

.filters-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; align-items: center; }
.filters-row input, .filters-row select { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 8px 11px; font-family: var(--font); font-size: .86rem; color: var(--ink); }
.filters-row input:focus, .filters-row select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.filters-row .spacer { flex: 1; }

.table-wrap { overflow-x: auto; }
table.audit { width: 100%; border-collapse: collapse; font-size: .82rem; }
table.audit th { text-align: left; font-family: var(--mono); font-size: .66rem; font-weight: 500; letter-spacing: .04em; color: var(--muted-2); padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.audit td { padding: 9px 10px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
table.audit tr:hover td { background: var(--bg-soft); }
table.audit .ts { font-family: var(--mono); font-size: .72rem; color: var(--muted); white-space: nowrap; }
table.audit .tool { font-family: var(--mono); font-size: .74rem; color: var(--ink); }
table.audit .summary { color: var(--muted); max-width: 420px; }
table.audit .summary .args { font-family: var(--mono); font-size: .68rem; color: var(--muted-2); white-space: pre-wrap; word-break: break-word; margin-top: 4px; display: none; }
table.audit tr.open .summary .args { display: block; }
table.audit .status-ok { color: var(--green); font-weight: 600; }
table.audit .status-erreur { color: var(--red); font-weight: 600; }
table.audit .src { white-space: nowrap; }
table.audit .src small { display: block; color: var(--muted-2); font-family: var(--mono); font-size: .64rem; }
.pager { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-family: var(--mono); font-size: .74rem; color: var(--muted-2); }
.empty { color: var(--muted-2); font-size: .86rem; padding: 14px 0; text-align: center; }

table.mini { width: 100%; border-collapse: collapse; font-size: .82rem; }
table.mini td, table.mini th { padding: 6px 8px; border-bottom: 1px solid var(--border-soft); text-align: left; }
table.mini th { font-family: var(--mono); font-size: .64rem; color: var(--muted-2); font-weight: 500; }
table.mini td.n { font-family: var(--mono); text-align: right; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.inline-form input, .inline-form select { flex: 1; min-width: 140px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; font-family: var(--font); font-size: .86rem; }
.btn-danger { color: var(--red); border-color: rgba(214,53,92,.3); }
.btn-xs { padding: 6px 12px; font-size: .78rem; }
.token-reveal { margin-top: 12px; }
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 14px; font-size: .8rem; }
.tools-grid div { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--border-soft); }
.tools-grid .tool { font-family: var(--mono); font-size: .72rem; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spin { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--border); border-top-color: var(--blue); border-radius: 999px; animation: spin .7s linear infinite; vertical-align: -2px; }

/* Colonnes de grille : ne jamais dépasser le viewport à cause d'un texte insécable */
.dash-grid > div, .intake-layout > div, .card, .night { min-width: 0; }
table.audit .summary, .conn-row .cr-detail, .tool-line .tl-label { word-break: break-word; overflow-wrap: anywhere; }
.night .url span, .cc-result .tl-label { overflow-wrap: anywhere; }
.conn-list, .conn-row, .conn-row .cr-main { min-width: 0; }
.conn-row .cr-detail { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Le journal déborde horizontalement dans .table-wrap (barre de scroll) au lieu de s'écraser */
table.audit { min-width: 1100px; }
table.audit .summary { min-width: 300px; }
table.audit td.ts { min-width: 90px; }
.table-wrap { scrollbar-width: thin; }