/* Portail Smile Task 0.2 — pages hors tableau (connexion, Sécurité, Équipe, Jetons, Mot de passe)
   dans la forme Trello dark de l'application (public/assets/app/tokens.css : mêmes valeurs --tr-*). */
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/assets/fonts/PlusJakartaSans-Variable.woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}
:root {
    color-scheme: dark;
    /* Trello dark : même palette que l'application. */
    --tr-text: #b6c2cf; --tr-text-strong: #dee4ea; --tr-text-subtle: #9fadbc; --tr-link: #579dff;
    --tr-canvas: #1d2125; --tr-surface: #22272b; --tr-surface-raised: #282e33; --tr-overlay: #2c333a;
    --tr-border: rgb(166 197 226 / 16%); --tr-input-border: #738496; --tr-focus: #85b8ff;
    --tr-button-bg: rgb(161 189 217 / 8%); --tr-button-hover: rgb(166 197 226 / 16%); --tr-button-press: rgb(191 219 248 / 28%);
    --tr-primary: #579dff; --tr-primary-hover: #85b8ff; --tr-on-primary: #1d2125; --tr-selected: #1c2b41;
    --tr-danger-bg: #ae2e24; --tr-danger-hover: #c9372c;
    --tr-shadow: 0 1px 1px rgb(3 4 4 / 50%), 0 0 1px rgb(3 4 4 / 50%);
    --tr-overlay-shadow: 0 8px 12px rgb(3 4 4 / 36%), 0 0 1px rgb(3 4 4 / 50%);
    /* Anciens noms du portail, gardés comme alias. */
    --page: var(--tr-canvas); --bg: var(--tr-surface); --surface: var(--tr-overlay); --raised: #38414a;
    --ink: var(--tr-text-strong); --ink-2: var(--tr-text); --muted: var(--tr-text-subtle); --line: #38414a;
    --accent: var(--tr-primary); --accent-hover: var(--tr-primary-hover); --success: #4bce97; --warning: #f5cd47; --danger: #f87168;
    --radius: 4px; --radius-lg: 8px; --shadow: var(--tr-shadow);
    font: 14px/1.43 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--tr-text); background: var(--page);
    -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: var(--tr-link); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre { font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
h1 { margin: 0; color: var(--tr-text-strong); font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
h2 { margin: 0 0 12px; color: var(--tr-text-strong); font-size: 16px; font-weight: 700; }
h3 { margin: 18px 0 8px; color: var(--tr-text-subtle); font-size: 12px; font-weight: 700; }
:focus-visible { outline: 2px solid var(--tr-focus); outline-offset: 2px; }
::selection { background: #09326c; }

/* Barre du haut façon Trello : marque, onglets des pages, déconnexion. */
.op-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 16px; min-height: 48px; padding: 8px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)); padding-top: max(8px, env(safe-area-inset-top)); border-bottom: 1px solid var(--tr-border); background: var(--tr-canvas); }
.op-brand { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: var(--radius); color: var(--tr-text-strong); font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.op-brand:hover { background: var(--tr-button-hover); text-decoration: none; }
.op-brand-mark { display: block; width: 24px; height: 24px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--tr-border); }
.op-nav { display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.op-nav::-webkit-scrollbar { display: none; }
.op-nav a { position: relative; display: inline-flex; align-items: center; min-height: 32px; padding: 6px 10px; border-radius: var(--radius); color: var(--tr-text-subtle); font-weight: 600; white-space: nowrap; }
.op-nav a:hover { background: var(--tr-button-hover); color: var(--tr-text-strong); text-decoration: none; }
.op-nav a[aria-current] { background: var(--tr-selected); color: var(--tr-link); }
.op-logout { margin: 0; }
.op-main { max-width: 880px; margin: 0 auto; padding: 32px 16px calc(48px + env(safe-area-inset-bottom)); }

.op-card { padding: 20px 24px; border: 0; border-radius: var(--radius-lg); background: var(--tr-surface); box-shadow: var(--tr-shadow), inset 0 0 0 1px var(--tr-border); }
.op-card + .op-card { margin-top: 16px; }
.op-section-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 20px; }
.op-section-head h1 { font-size: 24px; }
.op-muted { margin: 0; color: var(--tr-text-subtle); }
.op-muted strong { color: var(--tr-text-strong); }
.op-small { font-size: 12px; }
.op-empty { padding: 24px; border: 1px dashed var(--line); border-radius: var(--radius-lg); color: var(--muted); text-align: center; background: var(--bg); }
.op-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: 24px; align-items: start; }
@media (max-width: 900px) { .op-columns { grid-template-columns: 1fr; } }
.op-button.op-jump { display: none; }
@media (max-width: 900px) { .op-button.op-jump { display: inline-flex; align-self: flex-start; } }
@media (max-width: 640px) {
    .op-bar { flex-wrap: wrap; row-gap: 6px; padding-bottom: 0; }
    .op-brand { flex: 1; }
    .op-nav { order: 3; flex-basis: calc(100% + 32px); margin: 0 -16px; padding: 0 12px 6px; }
    .op-main { padding-top: 20px; }
    .op-card { padding: 16px; }
}

.op-flash { margin: 0 0 16px; padding: 8px 12px; border-radius: var(--radius); background: #1c3329; color: #7ee2b8; font-weight: 500; box-shadow: inset 3px 0 0 #4bce97; }
.op-flash--error { background: #42221f; color: #fd9891; box-shadow: inset 3px 0 0 #f87168; }

.op-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.op-filters a { padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink-2); font-size: 14px; }
.op-filters a[aria-current] { border-color: var(--accent); color: var(--accent); }

.op-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.op-task-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg); color: var(--ink); }
.op-task-row:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); text-decoration: none; }
.op-task-main { display: flex; flex-direction: column; min-width: 0; }
.op-task-main strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.op-task-main small, .op-task-date { color: var(--muted); font-size: 13px; }
@media (max-width: 560px) { .op-task-row { grid-template-columns: minmax(0, 1fr) auto; } .op-task-date { display: none; } }

.op-status { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: var(--radius); background: var(--surface); color: var(--ink-2); font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.op-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.op-status--running { background: color-mix(in srgb, var(--accent) 11%, var(--bg)); color: var(--accent); }
.op-status--running::before { animation: op-pulse 1.4s ease-in-out infinite; }
.op-status--succeeded { background: color-mix(in srgb, var(--success) 11%, var(--bg)); color: var(--success); }
.op-status--failed, .op-status--lost { background: color-mix(in srgb, var(--danger) 10%, var(--bg)); color: var(--danger); }
.op-status--cancelled { color: var(--muted); }
@keyframes op-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .op-status--running::before { animation: none; } }

.op-form { display: flex; flex-direction: column; gap: 12px; }
.op-row { display: flex; flex-wrap: wrap; gap: 12px; }
.op-row > .op-field { flex: 1 1 140px; }
.op-row > .op-field--narrow { flex: 0 0 96px; }
/* Champs Trello : libellé 12 px gras, bordure #738496, focus bleu en 2 px. */
.op-field { display: flex; flex-direction: column; gap: 4px; color: var(--tr-text-subtle); font-size: 12px; font-weight: 700; }
.op-field em { font-style: normal; font-weight: 400; color: var(--tr-text-subtle); }
.op-field input, .op-field select, .op-field textarea { width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--tr-input-border); border-radius: var(--radius); background: var(--tr-surface); color: var(--tr-text-strong); font: inherit; font-size: 14px; font-weight: 400; transition: background-color .14s, border-color .14s, box-shadow .14s; }
.op-field input:hover:not(:focus), .op-field select:hover:not(:focus), .op-field textarea:hover:not(:focus) { background: var(--tr-overlay); }
.op-field input:focus, .op-field select:focus, .op-field textarea:focus { border-color: var(--tr-focus); outline: 0; box-shadow: inset 0 0 0 1px var(--tr-focus); }
.op-field textarea { resize: vertical; }
.op-field textarea[readonly] { font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--tr-text-strong); }
.op-button:focus-visible { outline: 2px solid var(--tr-focus); outline-offset: 1px; }

/* Boutons Trello : fond translucide, primaire bleu, danger rouge plein, discret transparent. */
.op-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 6px 12px; border: 0; border-radius: var(--radius); background: var(--tr-button-bg); color: var(--tr-text); font: inherit; font-weight: 600; line-height: 20px; white-space: nowrap; cursor: pointer; transition: background-color .14s, color .14s, transform .14s; }
.op-button:hover { background: var(--tr-button-hover); color: var(--tr-text-strong); text-decoration: none; }
.op-button:active { background: var(--tr-button-press); transform: scale(.98); }
.op-button--primary { background: var(--tr-primary); color: var(--tr-on-primary); }
.op-button--primary:hover { background: var(--tr-primary-hover); color: var(--tr-on-primary); }
.op-button--primary:active { background: #9dc4ff; }
.op-button--danger { background: var(--tr-danger-bg); color: #fff; }
.op-button--danger:hover { background: var(--tr-danger-hover); color: #fff; }
.op-button--ghost { background: transparent; color: var(--tr-text-subtle); }
.op-button--ghost:hover { background: var(--tr-button-hover); }
@media (pointer: coarse) { .op-button { min-height: 44px; } .op-field input, .op-field select { min-height: 44px; font-size: 16px; } }
.op-actions { display: flex; gap: 8px; margin-top: 6px; }
.op-actions form { margin: 0; }

.op-task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; color: var(--muted); font-size: 13.5px; }
.op-prompt, .op-summary, .op-diffstat { margin: 0; padding: 12px 14px; overflow-x: auto; border-radius: var(--radius); background: var(--surface); white-space: pre-wrap; word-break: break-word; }
.op-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 16px; margin: 0; }
.op-facts dt { color: var(--muted); font-size: 12.5px; }
.op-facts dd { margin: 0; font-size: 14px; word-break: break-word; }
.op-log { max-height: 520px; margin: 0; padding: 10px 14px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #000; color: #d8dde8; list-style: none; font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; }
.op-log:empty { display: none; }
.op-log-agent { color: #ffffff; }
.op-log-tool { color: #8fb4ff; }
.op-log-err { color: #ff9b91; }
.op-log-info { color: #9aa3b5; font-style: italic; }
.op-run-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.op-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.op-grid > .op-card { margin-top: 0; }
.op-machine-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.op-machine-head h2 { margin: 0; }
.op-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #738496; }
.op-machine[data-online="true"] .op-dot { background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 18%, transparent); }
.op-repos { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); list-style: none; font-size: 13.5px; }
.op-repos small { color: var(--muted); }
.op-repos li[data-synced="false"] small { color: var(--warning); }

.op-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg); }
.op-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.op-table th, .op-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.op-table thead th { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.op-table tr[data-synced="false"] td:nth-child(n+2) { color: var(--warning); }

/* Connexion façon Trello : carte centrée sur un fond sobre, marque au-dessus du formulaire. */
.op-login { position: relative; display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); overflow: hidden; background: radial-gradient(120% 70% at 50% 0%, #1c2b41 0%, var(--tr-canvas) 60%); }
.op-login-card { position: relative; display: flex; flex-direction: column; gap: 16px; width: min(400px, 100%); padding: 32px 40px; border-radius: var(--radius-lg); background: var(--tr-surface); box-shadow: var(--tr-overlay-shadow), inset 0 0 0 1px var(--tr-border); }
.op-login-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0 0 8px; text-align: center; }
.op-login-brand img { display: block; width: 48px; height: 48px; border-radius: 12px; box-shadow: 0 0 0 1px var(--tr-border), 0 6px 16px rgb(3 4 4 / 40%); }
.op-login-brand strong { color: var(--tr-text-strong); font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.op-login-form h1 { color: var(--tr-text-strong); font-size: 16px; font-weight: 600; text-align: center; }
.op-login-form > .op-muted { margin-top: -10px; font-size: 13px; text-align: center; }
.op-login-form > .op-flash { margin: 0; }
.op-login-form > .op-button--primary, .op-passkey-login > .op-button { width: 100%; min-height: 40px; }
.op-login-form > .op-small { align-self: center; }
/* 0.2.1 : liens sous les boutons (mot de passe oublié, retour à la connexion) et bouton-lien pleine largeur. */
.op-login-link { align-self: center; color: var(--tr-link); font-size: 13px; text-decoration: none; }
.op-login-link:hover, .op-login-link:focus-visible { text-decoration: underline; }
.op-login-form > a.op-button--primary { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.op-login-foot { margin: 8px 0 0; padding-top: 16px; border-top: 1px solid var(--tr-border); color: var(--tr-text-subtle); font-size: 12px; text-align: center; }
@media (max-width: 480px) {
    .op-login { place-items: start center; padding-top: max(48px, env(safe-area-inset-top)); background: var(--tr-canvas); }
    .op-login-card { padding: 24px 4px; background: transparent; box-shadow: none; }
}

/* Modes et approbations : propositions des machines (semi-auto), choix du mode de la tâche et de la machine. */
.op-status--pending_approval { background: color-mix(in srgb, var(--warning) 12%, var(--bg)); color: var(--warning); }
.op-approvals { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; padding: 14px; border: 1px solid color-mix(in srgb, var(--warning) 35%, var(--line)); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--warning) 5%, var(--bg)); }
.op-approvals h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font-size: 15px; }
.op-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--warning); color: #000; font-size: 12.5px; }
.op-approval { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.op-approval--page { margin-top: 8px; border-color: color-mix(in srgb, var(--warning) 40%, var(--line)); background: color-mix(in srgb, var(--warning) 5%, var(--bg)); }
.op-approval-text { display: flex; flex: 1 1 260px; flex-direction: column; min-width: 0; }
.op-approval-text small { color: var(--muted); font-size: 13px; }
.op-approval-text a { color: var(--ink); }
.op-approval-actions { display: flex; gap: 8px; }
.op-approval-actions form { margin: 0; }
.op-segmented { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; gap: 4px; padding: 4px; border-radius: var(--radius); background: var(--surface); }
.op-segmented label, .op-segmented button { position: relative; display: flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 6px; white-space: nowrap; border: 0; border-radius: calc(var(--radius) - 3px); background: transparent; color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.op-segmented input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.op-segmented label:has(input:checked), .op-segmented button[aria-pressed="true"] { background: var(--raised); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.op-segmented label:has(input:focus-visible), .op-segmented button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.op-segmented--small button { min-height: 30px; font-size: 13px; }
.op-modes { margin: 0; padding: 0; border: 0; }
.op-modes legend { margin-bottom: 4px; padding: 0; }
.op-modes small { font-weight: 400; }
.op-machine-mode { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.op-machine-mode .op-segmented { flex: 1; }
.op-launch { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.op-launch select { min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink); font: inherit; }
.op-actions { flex-wrap: wrap; }

/* Sécurité : connexion par code Authenticator ou Face ID, page Sécurité (QR code, appareils). */
.op-login-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.op-passkey-login { display: flex; flex-direction: column; gap: 12px; }
.op-passkey-login > .op-flash { margin: 0; }
.op-or { display: flex; align-items: center; gap: 12px; color: var(--tr-text-subtle); font-size: 12px; }
.op-or::before, .op-or::after { content: ''; flex: 1; height: 1px; background: var(--tr-border); }
.op-field .op-code { font-size: 20px; font-weight: 600; letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.op-security { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.op-security h2, .op-security h3 { margin: 0; }
.op-security form { margin: 0; }
.op-security > .op-flash { margin: 0; }
.op-security-state { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 4px 10px; border-radius: var(--radius); background: var(--tr-button-bg); color: var(--tr-text); font-size: 13px; }
.op-security-state[data-active="true"] { background: #1c3329; color: #baf3db; }
.op-security-state[data-active="true"] .op-dot { background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 18%, transparent); }
.op-inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; width: 100%; }
.op-inline-form .op-field { flex: 1 1 220px; }
.op-inline-form > .op-button { min-height: 40px; }
@media (pointer: coarse) { .op-inline-form > .op-button { min-height: 44px; } }
.op-totp-qr { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.op-totp-qr svg { width: min(220px, 100%); height: auto; padding: 10px; border-radius: var(--radius-lg); background: #fff; }
.op-totp-qr:not(.is-ready) figcaption::before { content: "QR code indisponible sans JavaScript : utilise la clé manuelle. "; }
.op-totp-key { padding: 2px 6px; border-radius: var(--radius); background: var(--tr-overlay); color: var(--tr-text-strong); letter-spacing: .08em; font-weight: 600; word-break: break-all; }
.op-passkeys { display: flex; flex-direction: column; width: 100%; margin: 0; padding: 0; list-style: none; }
.op-passkeys li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--tr-border); }
.op-passkeys li:last-child { border-bottom: 0; padding-bottom: 0; }
.op-passkey-text strong { color: var(--tr-text-strong); font-weight: 600; }
.op-passkey-text { display: flex; flex-direction: column; min-width: 0; }
.op-passkey-text small { color: var(--tr-text-subtle); font-size: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }