/* Système de design partagé — admin BLB Immobilier. Simple : variables +
   quelques classes réutilisées telles quelles par tous les templates. */

:root {
    --color-bg: #f6f7f9;
    --color-surface: #fff;
    --color-border: #e5e7eb;
    --color-border-subtle: #f0f1f3;
    --color-text: #1a1d23;
    --color-text-muted: #6b7280;
    --color-text-faint: #9ca3af;

    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-primary-bg: #eff6ff;

    --color-success: #16a34a;
    --color-success-bg: #ecfdf5;
    --color-success-text: #15803d;

    --color-danger: #dc2626;
    --color-danger-bg: #fef2f2;
    --color-danger-text: #b91c1c;

    --color-warning: #d97706;
    --color-warning-bg: #fffbeb;
    --color-warning-text: #92400e;

    --color-neutral-bg: #f3f4f6;
    --color-neutral-text: #4b5563;

    --radius: 8px;
    --radius-sm: 6px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-bg);
}

h1, h2, h3 { font-weight: 600; letter-spacing: -.01em; margin: 0 0 .5rem; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.05rem; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

table { border-collapse: collapse; }

input, button, select, textarea { font-family: inherit; font-size: inherit; }

code, pre { font-family: ui-monospace, "SF Mono", Consolas, monospace; }

.muted { color: var(--color-text-muted); }
.faint { color: var(--color-text-faint); }
.mono { font-family: ui-monospace, "SF Mono", Consolas, monospace; }

/* --- Layout --------------------------------------------------------- */

/* Pleine largeur : l'admin manipule des tableaux denses (Tiers : 8 colonnes
   + actions) — un conteneur borné à 1100px écrasait la colonne Actions. */
.page { max-width: none; margin: 0 auto; padding: 0 1.5rem 3rem; }
.page-narrow { max-width: 420px; margin: 8vh auto; padding: 0 1.25rem; }
.page-medium { max-width: 640px; margin: 6vh auto; padding: 0 1.25rem; }

.topbar {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 10;
}
.topbar-inner {
    max-width: none;
    margin: 0 auto;
    padding: .7rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.brand { font-weight: 700; color: var(--color-text); font-size: .95rem; }
.topbar nav { display: flex; gap: .15rem; align-items: center; flex-wrap: wrap; }
.topbar nav a {
    color: var(--color-text-muted);
    padding: .4rem .65rem;
    border-radius: var(--radius-sm);
    font-size: .86rem;
    font-weight: 500;
    transition: background .12s, color .12s;
}
.topbar nav a:hover { background: var(--color-neutral-bg); color: var(--color-text); text-decoration: none; }
.topbar nav a.active { background: var(--color-primary-bg); color: var(--color-primary); }
.topbar .user { font-size: .82rem; color: var(--color-text-muted); }

.row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: .4rem; }

/* --- Cartes / tuiles -------------------------------------------------- */

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.1rem;
    /* Sans ça, une carte utilisée comme enfant flex (ex. flex:2 dans le
       rapport Test IA) ne peut jamais rétrécir sous la largeur intrinsèque de
       son contenu (comportement par défaut des flex items) : un mot ou une
       chaîne insécable dans une réponse IA pousse alors toute la carte plus
       large que l'espace qui lui est alloué, avant même que le overflow:auto
       d'un enfant n'ait la moindre chance de s'appliquer. Sans effet en
       dehors d'un contexte flex/grid. */
    min-width: 0;
}

.stat-tile {
    flex: 1;
    min-width: 160px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1rem 1.1rem;
    color: inherit;
    display: block;
    transition: box-shadow .12s, border-color .12s;
}
a.stat-tile:hover { box-shadow: var(--shadow); border-color: #d7dae0; text-decoration: none; }
.stat-tile .value { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; }
.stat-tile .label { color: var(--color-text-muted); font-size: .85rem; margin-top: .1rem; }

.stat-tiles { display: flex; gap: .9rem; flex-wrap: wrap; margin: 1rem 0 1.5rem; }

/* Jauges du tableau de bord (couverture parsing, disque, RAM). */
.meter {
    height: 8px;
    border-radius: 4px;
    background: var(--color-neutral-bg);
    border: 1px solid var(--color-border-subtle);
    overflow: hidden;
    min-width: 120px;
}
.meter > span { display: block; height: 100%; background: var(--color-primary); }
.meter > span.ok { background: var(--color-success); }
.meter > span.warn { background: var(--color-warning); }
.meter > span.bad { background: var(--color-danger); }
.dash-cards { display: flex; gap: .9rem; flex-wrap: wrap; align-items: stretch; }
.dash-card {
    flex: 1;
    min-width: 300px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1rem 1.1rem;
}
.dash-card h3 { margin: 0 0 .6rem; font-size: .85rem; }
.dash-card .ligne { display: flex; align-items: center; gap: .6rem; margin: .35rem 0; font-size: .8rem; }
.dash-card .ligne .lib { width: 9.5rem; flex: none; color: var(--color-text-muted); }
.dash-card .ligne .meter { flex: 1; }
.dash-card .ligne .val { flex: none; min-width: 8.5rem; text-align: right; font-variant-numeric: tabular-nums; }

/* --- Tableaux ----------------------------------------------------------- */

.table-wrap { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.table { width: 100%; font-size: .87rem; }
.table th {
    text-align: left;
    padding: .65rem .8rem;
    background: var(--color-neutral-bg);
    color: var(--color-neutral-text);
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-bottom: 1px solid var(--color-border);
}
.table td { padding: .6rem .8rem; border-bottom: 1px solid var(--color-border-subtle); vertical-align: middle; }
/* Colonne Actions (onglet Tiers) : contenu empilé qui se replie DANS la
   cellule — .table-wrap est en overflow:hidden, tout débordement est tronqué. */
.table td.cell-actions { min-width: 240px; max-width: 320px; }
.cell-actions .actions-line { display: flex; flex-wrap: wrap; gap: .3rem .35rem; align-items: center; margin-top: .35rem; }
.cell-actions .actions-line:first-child { margin-top: 0; }
.cell-actions .dossier-path {
    display: block;
    margin-top: .35rem;
    padding: .3rem .45rem;
    background: var(--color-neutral-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: .72rem;
    user-select: all;
    white-space: normal;
    word-break: break-all;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #fafbfc; }
.table .empty { padding: 1.5rem; text-align: center; color: var(--color-text-muted); }

/* --- Badges --------------------------------------------------------- */

.badge {
    display: inline-block;
    padding: .18rem .55rem;
    border-radius: var(--radius-pill);
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
}
.badge-neutral { background: var(--color-neutral-bg); color: var(--color-neutral-text); }
.badge-success { background: var(--color-success-bg); color: var(--color-success-text); }
.badge-danger { background: var(--color-danger-bg); color: var(--color-danger-text); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.badge-primary { background: var(--color-primary-bg); color: var(--color-primary); }

/* --- Boutons ---------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .85rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s, border-color .12s, box-shadow .12s, opacity .12s;
    text-decoration: none;
    line-height: 1.3;
}
.btn:hover { background: var(--color-neutral-bg); text-decoration: none; }
.btn:disabled, .btn[disabled] { cursor: not-allowed; opacity: .5; }
.btn-sm { padding: .25rem .6rem; font-size: .76rem; }

.btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }

.btn-success { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.btn-success:hover { filter: brightness(.92); }

.btn-danger { background: var(--color-danger-bg); border-color: #fecaca; color: var(--color-danger-text); }
.btn-danger:hover { background: #fde3e3; }

.btn-quiet { background: var(--color-surface); }

/* --- Formulaires -------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .8rem; }
.field label { font-size: .85rem; font-weight: 500; }
.input {
    padding: .5rem .65rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    width: 100%;
}
.input:focus { outline: 2px solid var(--color-primary-bg); border-color: var(--color-primary); }
.search-form { display: flex; gap: .5rem; align-items: center; }
.search-form .input { width: auto; min-width: 220px; }

/* --- Messages flash --------------------------------------------------- */

.flash { padding: .6rem .85rem; border-radius: var(--radius-sm); margin-bottom: .8rem; font-size: .88rem; }
.flash-success { background: var(--color-success-bg); color: var(--color-success-text); }
.flash-danger { background: var(--color-danger-bg); color: var(--color-danger-text); }
.flash-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.flash-info { background: var(--color-primary-bg); color: var(--color-primary); }

/* --- Pagination --------------------------------------------------------- */

.pagination { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; font-size: .85rem; }

/* --- Divers --------------------------------------------------------- */

.log-box {
    background: #1a1d23;
    color: #e8e8e8;
    padding: 1rem;
    border-radius: var(--radius);
    font-size: .75rem;
    line-height: 1.5;
    overflow: auto;
    max-height: 65vh;
    white-space: pre-wrap;
    word-break: break-word;
}

.markdown-answer {
    font-size: .85rem;
    line-height: 1.55;
    max-height: 50vh;
    overflow: auto;
    overflow-wrap: anywhere;
}
.markdown-answer > :first-child { margin-top: 0; }
.markdown-answer > :last-child { margin-bottom: 0; }
.markdown-answer h1, .markdown-answer h2, .markdown-answer h3 {
    font-size: 1em;
    margin: .9em 0 .3em;
}
.markdown-answer p { margin: 0 0 .6em; }
.markdown-answer ul, .markdown-answer ol { margin: 0 0 .6em; padding-left: 1.3em; }
.markdown-answer li { margin: .15em 0; }
.markdown-answer strong { font-weight: 600; }
.markdown-answer hr { border: none; border-top: 1px solid var(--color-border); margin: .8em 0; }
.markdown-answer code {
    background: var(--color-surface-alt, rgba(127, 127, 127, .15));
    padding: .1em .3em;
    border-radius: 3px;
    font-size: .9em;
}
.markdown-answer pre {
    max-width: 100%;
    overflow-x: auto;
    padding: .6em .8em;
    background: var(--color-surface-alt, rgba(127, 127, 127, .1));
    border-radius: var(--radius-sm);
}
.markdown-answer pre code { background: none; padding: 0; }
.markdown-answer table { max-width: 100%; display: block; overflow-x: auto; }

.mail-row.unread { font-weight: 600; }
.mail-row .preview { font-weight: 400; color: var(--color-text-muted); font-size: .8rem; margin-top: .1rem; }

.mail-frame {
    width: 100%;
    height: 65vh;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    resize: vertical;
    background: #fff;
}

/* --- Simulation de l'add-in Outlook (onglet Mails) -------------------- */

.mail-with-addin { display: flex; gap: 1rem; align-items: flex-start; }
.mail-with-addin .mail-main { flex: 1; min-width: 0; }

.addin-sim { width: 340px; flex-shrink: 0; position: sticky; top: 1rem; }
.addin-sim-note { font-size: .75rem; margin: 0 0 .4rem; }

/* Reproduction visuelle du volet de taskpane d'Outlook. */
.outlook-pane {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.outlook-pane-titlebar {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .7rem;
    background: #f3f4f6;
    border-bottom: 1px solid var(--color-border);
    font-size: .8rem;
    font-weight: 600;
}
.outlook-pane-titlebar img { width: 16px; height: 16px; }
.outlook-pane-frame {
    width: 100%;
    /* Presque toute la hauteur de la fenêtre : la note ET la réponse
       proposée doivent se lire sans faire défiler le panneau. */
    height: calc(100vh - 8rem);
    min-height: 520px;
    border: 0;
    display: block;
    background: #fff;
}

@media (max-width: 1100px) {
    .mail-with-addin { flex-direction: column; }
    .addin-sim { width: 100%; position: static; }
}