/* OGEEAT v2.5 — Composants Console
 * Référence : docs/superpowers/specs/2026-05-05-ogeeat-design-tokens-console.md
 */

/* ===== Typography utilities ===== */
.ogeeat-app .ogt-h1     { font: 600 24px/1.1 var(--ogt-font-sans); letter-spacing: -0.01em; margin: 0 0 12px; }
.ogeeat-app .ogt-h2     { font: 600 16px/1.3 var(--ogt-font-sans); margin: 0 0 8px; }
.ogeeat-app .ogt-h3     { font: 600 14px/1.3 var(--ogt-font-sans); margin: 0 0 6px; }
.ogeeat-app .ogt-body   { font: 400 13px/1.5 var(--ogt-font-sans); }
.ogeeat-app .ogt-label  { font: 600 11px/1 var(--ogt-font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ogt-ink-2); }
.ogeeat-app .ogt-meta   { font: 400 11px/1.4 var(--ogt-font-mono); color: var(--ogt-ink-3); }
.ogeeat-app .ogt-kpi    { font: 600 28px/1 var(--ogt-font-mono); letter-spacing: -0.02em; font-feature-settings: "tnum"; }
.ogeeat-app .ogt-kpi-lg { font: 600 38px/1 var(--ogt-font-mono); letter-spacing: -0.02em; font-feature-settings: "tnum"; }
.ogeeat-app .ogt-mono   { font-family: var(--ogt-font-mono); font-feature-settings: "tnum"; }

/* ===== Card ===== */
.ogeeat-app .ogt-card {
    background: var(--ogt-card);
    border: 1px solid var(--ogt-rule);
    border-radius: var(--ogt-radius-md);
}
.ogeeat-app .ogt-card__body { padding: 20px; }
.ogeeat-app .ogt-section-header {
    padding: 12px 18px;
    border-bottom: 1px solid var(--ogt-rule);
    display: flex; justify-content: space-between; align-items: center;
}

/* ===== Button ===== */
.ogeeat-app .ogt-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    font: 500 12px/1 var(--ogt-font-sans);
    border-radius: var(--ogt-radius);
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}
.ogeeat-app .ogt-btn-prim {
    background: var(--ogt-ink); color: #fff;
    border: 1px solid var(--ogt-ink);
}
.ogeeat-app .ogt-btn-prim:hover { background: #1c1c1c; }
.ogeeat-app .ogt-btn-ghost {
    background: var(--ogt-card); color: var(--ogt-ink);
    border: 1px solid var(--ogt-rule-2);
}
.ogeeat-app .ogt-btn-ghost:hover { background: var(--ogt-bg-2); }
.ogeeat-app .ogt-btn:disabled,
.ogeeat-app .ogt-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* ===== Chip ===== */
.ogeeat-app .ogt-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 7px;
    font: 500 11px/1 var(--ogt-font-mono);
    border-radius: var(--ogt-radius-sm);
}
.ogeeat-app .ogt-chip--ok    { background: var(--ogt-green-bg); color: var(--ogt-green); }
.ogeeat-app .ogt-chip--warn  { background: var(--ogt-amber-bg); color: var(--ogt-amber); }
.ogeeat-app .ogt-chip--err   { background: var(--ogt-red-bg);   color: var(--ogt-red); }
.ogeeat-app .ogt-chip--ai    { background: var(--ogt-orange-bg); color: var(--ogt-orange); }
.ogeeat-app .ogt-chip--mute  { background: var(--ogt-bg-2);     color: var(--ogt-ink-3); }

/* ===== Inputs ===== */
.ogeeat-app .ogt-input,
.ogeeat-app .ogt-select,
.ogeeat-app .ogt-textarea {
    font: 400 13px/1.4 var(--ogt-font-sans);
    padding: 7px 10px;
    border: 1px solid var(--ogt-rule-2);
    border-radius: var(--ogt-radius);
    background: var(--ogt-card);
    color: var(--ogt-ink);
    width: 100%;
    box-sizing: border-box;
}
.ogeeat-app .ogt-input:focus,
.ogeeat-app .ogt-select:focus,
.ogeeat-app .ogt-textarea:focus {
    outline: 2px solid var(--ogt-orange);
    outline-offset: -1px;
    border-color: var(--ogt-orange);
}
.ogeeat-app .ogt-input--mono { font-family: var(--ogt-font-mono); }

/* ===== Toggle ===== */
.ogeeat-app .ogt-toggle {
    display: inline-block;
    width: 32px; height: 18px;
    background: var(--ogt-rule-2);
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    transition: background .12s;
    border: 0;
    padding: 0;
}
.ogeeat-app .ogt-toggle[aria-checked="true"] { background: var(--ogt-orange); }
.ogeeat-app .ogt-toggle__thumb {
    position: absolute;
    top: 2px; left: 2px;
    width: 14px; height: 14px;
    background: #fff;
    border-radius: 999px;
    transition: left .12s;
}
.ogeeat-app .ogt-toggle[aria-checked="true"] .ogt-toggle__thumb { left: 16px; }

/* ===== Tabs ===== */
.ogeeat-app .ogt-tabs {
    display: flex; gap: 22px;
    border-bottom: 1px solid var(--ogt-rule);
    margin-bottom: 20px;
}
.ogeeat-app .ogt-tab {
    padding: 8px 0;
    font: 400 13px/1 var(--ogt-font-sans);
    color: var(--ogt-ink-2);
    border: 0; background: transparent;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
}
.ogeeat-app .ogt-tab:hover { color: var(--ogt-ink); }
.ogeeat-app .ogt-tab--active {
    color: var(--ogt-ink);
    border-bottom-color: var(--ogt-orange);
}

/* ===== Table ===== */
.ogeeat-app .ogt-table-header {
    display: grid;
    padding: 8px 18px;
    background: var(--ogt-bg-2);
    border-bottom: 1px solid var(--ogt-rule);
    font: 500 10.5px/1 var(--ogt-font-mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ogt-ink-2);
}
.ogeeat-app .ogt-table-row {
    display: grid;
    padding: 10px 18px;
    border-bottom: 1px solid var(--ogt-rule);
    font: 400 12px/1.4 var(--ogt-font-mono);
    align-items: center;
    transition: background .08s;
}
.ogeeat-app .ogt-table-row:hover { background: var(--ogt-bg-2); }
.ogeeat-app .ogt-table-row__url {
    color: var(--ogt-blue);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ===== KPI Card ===== */
.ogeeat-app .ogt-kpi-card {
    background: var(--ogt-card);
    border: 1px solid var(--ogt-rule);
    border-radius: var(--ogt-radius-md);
    padding: 16px;
}
.ogeeat-app .ogt-kpi-card__value { display: flex; align-items: baseline; gap: 6px; margin-top: 10px; }
.ogeeat-app .ogt-kpi-card__suffix { font: 400 12px/1 var(--ogt-font-mono); color: var(--ogt-ink-3); }
.ogeeat-app .ogt-kpi-card__bar {
    margin-top: 10px;
    height: 3px;
    background: var(--ogt-rule);
    border-radius: 999px;
    overflow: hidden;
}
.ogeeat-app .ogt-kpi-card__bar > div { height: 100%; background: var(--ogt-green); transition: width .3s; }
.ogeeat-app .ogt-kpi-card__footer {
    display: flex; justify-content: space-between;
    margin-top: 8px;
    font: 400 11px/1 var(--ogt-font-mono);
}
.ogeeat-app .ogt-kpi-card__trend { color: var(--ogt-green); }
.ogeeat-app .ogt-kpi-card__sub   { color: var(--ogt-ink-3); }

/* ===== Notice ===== */
.ogeeat-app .ogt-notice {
    padding: 10px 14px;
    border-radius: var(--ogt-radius-md);
    font-size: 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.ogeeat-app .ogt-notice--warn { background: var(--ogt-amber-bg); border: 1px solid #d9770633; }
.ogeeat-app .ogt-notice--err  { background: var(--ogt-red-bg);   border: 1px solid #dc262633; }
.ogeeat-app .ogt-notice--ai   { background: var(--ogt-orange-bg);border: 1px solid #ea580c33; }
.ogeeat-app .ogt-notice--ok   { background: var(--ogt-green-bg); border: 1px solid #16a34a33; }
.ogeeat-app .ogt-notice code  {
    background: var(--ogt-card);
    padding: 1px 5px;
    border-radius: 3px;
    color: var(--ogt-orange);
    font-family: var(--ogt-font-mono);
}

/* ===== Breadcrumb / KBD ===== */
.ogeeat-app .ogt-breadcrumb {
    display: flex; align-items: center; gap: 8px;
    font: 400 12px/1 var(--ogt-font-mono);
    color: var(--ogt-ink-2);
}
.ogeeat-app .ogt-breadcrumb b { color: var(--ogt-ink); font-weight: 400; }
.ogeeat-app .ogt-kbd {
    font: 400 10px/1 var(--ogt-font-mono);
    padding: 1px 5px;
    border: 1px solid var(--ogt-rule-2);
    border-bottom-width: 2px;
    border-radius: 3px;
    color: var(--ogt-ink-2);
}

/* ===== Score Ring ===== */
.ogeeat-app .ogt-score-ring { display: inline-block; line-height: 0; }
.ogeeat-app .ogt-score-ring__track  { stroke: var(--ogt-rule); }
.ogeeat-app .ogt-score-ring__value--ok    { stroke: var(--ogt-green); }
.ogeeat-app .ogt-score-ring__value--warn  { stroke: var(--ogt-amber); }
.ogeeat-app .ogt-score-ring__value--err   { stroke: var(--ogt-red); }

/* ===== Layout helpers ===== */
.ogeeat-app .ogt-stack-2 > * + * { margin-top: 8px; }
.ogeeat-app .ogt-stack-3 > * + * { margin-top: 12px; }
.ogeeat-app .ogt-stack-4 > * + * { margin-top: 16px; }
.ogeeat-app .ogt-stack-6 > * + * { margin-top: 24px; }
.ogeeat-app .ogt-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ogeeat-app .ogt-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 960px) {
    .ogeeat-app .ogt-grid-2,
    .ogeeat-app .ogt-grid-4 { grid-template-columns: 1fr; }
}

/* ===== WP_List_Table integration ===== */
.ogeeat-app .wp-list-table {
    border: 1px solid var(--ogt-rule);
    border-radius: var(--ogt-radius-md);
    overflow: hidden;
    background: var(--ogt-card);
    border-collapse: separate;
    border-spacing: 0;
}
.ogeeat-app .wp-list-table thead th {
    background: var(--ogt-bg-2);
    border-bottom: 1px solid var(--ogt-rule);
    font: 500 10.5px/1 var(--ogt-font-mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ogt-ink-2);
    padding: 10px 12px;
}
.ogeeat-app .wp-list-table tbody td {
    border-bottom: 1px solid var(--ogt-rule);
    font: 400 12px/1.4 var(--ogt-font-mono);
    padding: 10px 12px;
}
.ogeeat-app .wp-list-table tbody tr:hover { background: var(--ogt-bg-2); }
.ogeeat-app .wp-list-table tbody tr:last-child td { border-bottom: 0; }