/* ImmoBoost Kanban — styles
   Mêmes jetons que l'extension (content/content.css §1) : le rouge signature,
   la chasse fixe, le bleu marine d'ImmoWeb pour le contenu. Un utilisateur qui
   passe de la page de résultats au tableau doit reconnaître la même main. */

:root {
    --font: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas,
            'Segoe UI Mono', 'Roboto Mono', monospace;
    --primary: #d81f2a;
    --primary-strong: #a3121b;
    --primary-line: #eeb2b6;
    --primary-tint: #fff6f6;
    --ink: #082479;
    --ink-soft: #63697d;
    --ink-faint: #8a90a2;
    --surface: #fff;
    --page: #f4f5f8;
    --muted-line: #d4d8e0;
    --radius: 4px;
    --radius-lg: 10px;
    --shadow: 0 2px 10px rgba(216, 31, 42, .18);
    --shadow-lg: 0 10px 30px rgba(10, 18, 45, .18);
}

* { box-sizing: border-box; }

/* ⚠️ À garder en tête de fichier.
   L'attribut `hidden` est appliqué par la feuille de style du navigateur
   (display: none), et TOUTE règle d'auteur qui pose un display la bat. Or
   .login et .panel sont en display: flex : les éléments étaient donc masqués
   côté JavaScript et bien visibles à l'écran — la boîte de connexion poussait
   le tableau une hauteur d'écran plus bas, et le panneau restait affiché en
   permanence. Constaté à l'usage.

   Le !important est ici la bonne réponse : `hidden` est une déclaration
   d'intention, il doit gagner contre la mise en page. */
[hidden] { display: none !important; }

body {
    margin: 0;
    background: var(--page);
    color: var(--ink);
    font-family: var(--font);
    font-size: 13px;
}

.wordmark {
    margin: 0;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--primary);
    font-weight: 700;
}

/* ---------- Connexion ---------- */

.login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}

.login__box {
    width: 340px;
    padding: 28px;
    background: var(--surface);
    border: 1.5px solid var(--primary-line);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.login__box h1 { margin: 6px 0 4px; font-size: 20px; }

/* Où l'on en est. Deux étapes, annoncées d'emblée : une connexion sans mot de
   passe surprend, et savoir qu'il en reste une évite d'abandonner en route. */
.login__step {
    margin: 0 0 18px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.login__intro {
    margin: 0 0 16px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink-soft);
}

/* Ce que le code fait, où il est parti, et quand s'inquiéter. Un encadré et
   pas un texte d'aide de plus : à l'étape 2 c'est LA chose à lire, et
   l'adresse doit pouvoir être relue pour être vérifiée. */
.callout {
    margin: 0 0 16px;
    padding: 10px 12px;
    background: var(--primary-tint);
    border: 1px solid var(--primary-line);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius);
}

.callout p { margin: 0; font-size: 12px; line-height: 1.45; }
.callout strong { word-break: break-all; }

.callout__hint {
    margin-top: 8px !important;
    font-size: 11px !important;
    color: var(--ink-soft);
}

/* Renvoyer et changer d'adresse : les deux issues de secours de l'étape 2,
   sur une même ligne parce qu'elles se lisent ensemble. */
/* wrap + nowrap : à eux deux, « Renvoyer le code (28 s) » et « Changer
   d'adresse » dépassent les 284 px utiles de la boîte, et sans ces deux
   règles la coupure tombait en plein milieu des mots. Ils passent l'un sous
   l'autre plutôt que de se briser. */
.login__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 4px 10px;
    margin-top: 12px;
}

/* 11 px et non 12 : en chasse fixe, les deux libellés à 12 px totalisent
   290 px pour 284 px utiles — ils tenaient donc sur deux lignes en
   permanence, alors qu'un point de moins les remet côte à côte. */
.login__actions .link { white-space: nowrap; font-size: 11px; }

/* Le bouton « renvoyer » passe l'essentiel de sa vie en attente : sans cet
   état, un lien souligné qui ne réagit pas au clic se lit comme une panne. */
.link:disabled {
    color: var(--ink-faint);
    text-decoration: none;
    cursor: default;
}

label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--ink-soft);
}

input, textarea {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--muted-line);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 13px;
    color: var(--ink);
    background: var(--surface);
}

input:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(216, 31, 42, .14);
}

.btn {
    width: 100%;
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--primary);
    color: #fff;
    border: 0;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.btn:hover { background: var(--primary-strong); }
.btn:disabled { opacity: .55; cursor: default; }

.message { margin: 14px 0 0; font-size: 12px; font-weight: 700; }
.message:empty { display: none; }
.message[data-tone="error"] { color: #b4530a; }
.hint { margin: 14px 0 0; font-size: 11px; line-height: 1.5; color: var(--ink-faint); }

/* ---------- En-tête ---------- */

.top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: var(--surface);
    border-bottom: 1px solid var(--muted-line);
}

.top__right { display: flex; align-items: center; gap: 14px; }
.who { font-size: 12px; color: var(--ink-soft); }

.link {
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: 12px;
    color: var(--ink-soft);
    text-decoration: underline;
    cursor: pointer;
}

/* :not(:disabled) — un bouton désactivé matche quand même :hover, et le
   « renvoyer le code (28 s) » virait au rouge sous le curseur en promettant
   un clic qui ne se produit pas. */
.link:not(:disabled):hover { color: var(--primary); }

/* ---------- Colonnes ----------
   Cinq colonnes figées. Elles défilent horizontalement plutôt que de se
   comprimer : une carte illisible ne sert à rien. */

.columns {
    display: grid;
    /* Les cinq colonnes sont figées : on les nomme explicitement plutôt que de
       les laisser couler. Un tableau dont la dernière colonne sort de l'écran
       oblige à faire défiler pour savoir ce qui est clôturé — c'est perdre
       l'intérêt même d'un Kanban, qui est de tout voir d'un coup.
       Le minmax garde le défilement quand l'écran est vraiment trop étroit. */
    grid-template-columns: repeat(5, minmax(190px, 1fr));
    gap: 12px;
    padding: 18px 20px 28px;
    overflow-x: auto;
    align-items: start;
    min-height: calc(100vh - 56px);
}

.col {
    background: var(--surface);
    border: 1px solid var(--muted-line);
    border-top: 3px solid var(--col-color);
    border-radius: var(--radius-lg);
    padding: 12px;
    transition: background .15s ease, border-color .15s ease;
}

/* La colonne visée pendant un glisser se teinte : sans ce retour, on lâche
   la carte sans savoir où elle va tomber. */
.col--over {
    background: var(--primary-tint);
    border-color: var(--primary);
}

.col__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.col__head h2 {
    flex: 1 1 auto;
    margin: 0;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.col__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--col-color);
}

.col__count {
    font-size: 11px;
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
}

.col__list { display: flex; flex-direction: column; gap: 10px; min-height: 60px; }

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

.card {
    background: var(--surface);
    border: 1px solid var(--muted-line);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: grab;
    transition: box-shadow .15s ease, transform .15s ease;
}

.card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.card--dragging { opacity: .45; cursor: grabbing; }

.card__photo { display: block; width: 100%; height: 96px; object-fit: cover; background: var(--muted-line); }
.card__body { padding: 10px; }
.card__price { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.card__title { margin-top: 3px; font-size: 12px; line-height: 1.35; color: var(--ink-soft); }
.card__sub, .card__meta { margin-top: 3px; font-size: 11px; color: var(--ink-faint); }

/* Le contact sur la carte : c'est un CRM, le numéro doit être là où l'on décide
   d'appeler, pas à un clic de distance. Séparé du reste par un filet — ce n'est
   plus une description du bien mais une prise sur quelqu'un. */
.card__contact {
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px dashed var(--muted-line);
}

.card__agency {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card__contact a {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    font-size: 11px;
    color: var(--ink-soft);
    text-decoration: none;
}

/* La troncature ne peut pas vivre sur le conteneur flex : elle se pose sur la
   boîte qui porte le texte, et min-width: 0 est ce qui autorise cette boîte à
   devenir plus étroite que son contenu. Sans lui, une adresse e-mail longue
   élargit la carte et déborde la colonne. */
.card__contact span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card__contact a:hover { color: var(--primary); }

/* ---------- Fiche de l'annonce (modale) ---------- */

/* ⚠️ Le même piège qu'avec [hidden], en tête de ce fichier, et par le même
   mécanisme : `dialog:not([open]) { display: none }` vient de la feuille du
   NAVIGATEUR, qu'une règle d'auteur bat toujours. Un `.panel { display: flex }`
   nu laisserait donc la fiche affichée en permanence sous le tableau, ouverte ou
   non. Le display ne se pose QUE sur [open] — et nulle part ailleurs. */
.panel {
    width: 560px;
    max-width: calc(100vw - 32px);
    max-height: min(84vh, 760px);
    /* Aucun remplissage propre, et des sections qui la couvrent entièrement :
       c'est ce qui rend « la cible du clic EST le <dialog> » équivalent à « on a
       cliqué à côté », pour le repli de fermeture d'app.js. */
    padding: 0;
    border: 0;
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-lg);
}

.panel[open] { display: flex; flex-direction: column; }

/* Le fond sombre. Il vient du navigateur : rien à monter, rien à démonter, et il
   couvre tout l'écran sans qu'aucun élément ne soit ajouté à la page. */
.panel::backdrop {
    background: rgba(6, 14, 36, .66);
    backdrop-filter: blur(2px);
}

/* Animation d'ENTRÉE seulement. Animer la sortie demanderait de faire transiter
   `display` et `overlay` en allow-discrete, c'est-à-dire de retenir la fiche à
   l'écran après sa fermeture : exactement la propriété qu'on protège plus haut.
   Une disparition instantanée ne coûte rien, une fiche coincée visible, si. */
@media (prefers-reduced-motion: no-preference) {
    .panel[open] {
        opacity: 1;
        transform: none;
        transition: opacity .16s ease, transform .16s ease;
    }

    .panel[open]::backdrop {
        opacity: 1;
        transition: opacity .16s ease;
    }

    @starting-style {
        .panel[open] { opacity: 0; transform: translateY(8px); }
        .panel[open]::backdrop { opacity: 0; }
    }
}

.panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 16px;
    border-bottom: 1px solid var(--muted-line);
}

.panel__ident { min-width: 0; }
.panel__head h2 { margin: 0; font-size: 14px; line-height: 1.35; }
.panel__sub { margin: 5px 0 0; font-size: 11px; color: var(--ink-faint); }
.panel__link { display: inline-block; margin-top: 8px; font-size: 11px; color: var(--primary); }

.panel__close {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid transparent;
    border-radius: 50%;
    font-family: inherit;
    font-size: 14px;
    line-height: 1;
    color: var(--ink-faint);
    cursor: pointer;
}

.panel__close:hover {
    background: var(--primary-tint);
    border-color: var(--primary-line);
    color: var(--primary);
}

/* ---------- Contact ---------- */

.contact {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 12px 16px;
    background: var(--primary-tint);
    border-bottom: 1px solid var(--muted-line);
}

.contact__agency {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
}

.contact__logo { width: 24px; height: 24px; object-fit: contain; }

.contact__row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    /* Un numéro se recopie autant qu'il se clique : rien ici n'est draggable,
       contrairement à la carte du tableau, donc la sélection marche. */
    user-select: text;
}

.contact__row a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--primary-line); }
.contact__row a:hover { color: var(--primary); border-bottom-color: var(--primary); }

.contact__none { flex: 1 1 100%; margin: 0; font-size: 11px; line-height: 1.5; color: var(--ink-faint); }

/* Le nom noté prend la tête, l'agence reste lisible en dessous : c'est elle qui
   dit d'où vient l'annonce. La fiche a la place ; la tuile, non. */
.contact__agency-orig {
    flex: 1 1 100%;
    font-size: 10px;
    font-weight: 400;
    color: var(--ink-faint);
}

/* « Cette valeur est la vôtre, pas celle d'ImmoWeb. » Le détail est dans
   l'info-bulle, qui porte aussi ce que le site dit à la place — c'est ce qui
   garde l'original atteignable sans une seconde interface.

   inline-block et pas seulement flex : .card__agency n'est pas un conteneur
   flexible, et une pastille laissée en inline n'a ni largeur ni hauteur. */
.contact__mine {
    display: inline-block;
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    margin-left: 5px;
    border-radius: 50%;
    vertical-align: middle;
    background: var(--primary);
}

/* Frère de .contact, jamais enfant : voir le commentaire d'index.html. */
.contact-edit {
    padding: 10px 16px 14px;
    border-bottom: 1px solid var(--muted-line);
}

.contact-edit__fields { margin-top: 10px; }

/* .btn est en pleine largeur par défaut — proportionné à un bouton de connexion,
   pas à un « Enregistrer » sous trois champs. */
.contact-edit .btn { width: auto; }

/* Une seule règle pour toutes les icônes : tracées, en currentColor, jamais un
   emoji — celui-ci ignorerait la couleur qu'on lui demande (même raison que dans
   l'extension, content.css). */
.icon {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--primary);
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 16px; }

.chip {
    padding: 5px 10px;
    background: var(--surface);
    border: 1.5px solid var(--muted-line);
    border-radius: 999px;
    font-family: inherit;
    font-size: 11px;
    color: var(--ink-soft);
    cursor: pointer;
}

.chip:hover { border-color: var(--chip-color); }

.chip--on {
    background: var(--chip-color);
    border-color: var(--chip-color);
    color: #fff;
    font-weight: 700;
}

/* min-height: 0 — sans lui, un élément flexible refuse de descendre sous la
   hauteur de son contenu : la liste des notes pousse la fiche au lieu de
   défiler, et le champ de saisie sort par le bas. */
.notes { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 16px 12px; }

.note {
    padding: 10px 0;
    border-bottom: 1px dashed var(--muted-line);
}

.note__time {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10px;
    color: var(--ink-faint);
}

.note__text { margin-top: 5px; font-size: 12px; line-height: 1.5; white-space: pre-wrap; }

.note__delete {
    background: none;
    border: 0;
    font-size: 11px;
    color: var(--ink-faint);
    cursor: pointer;
}

.note__delete:hover { color: var(--primary); }
.empty { font-size: 12px; color: var(--ink-faint); }

.composer { padding: 12px 16px 16px; border-top: 1px solid var(--muted-line); }
.composer textarea { min-height: 62px; resize: vertical; }

/* ---------- Pense-bête ---------- */

/* Le display reste au navigateur : [popover]:not(:popover-open) est masqué par
   sa feuille, et le montrer ou le cacher est un appel de méthode, pas une classe.
   Il reste en revanche à défaire l'`inset: 0` que cette même feuille pose sur
   tout popover — sinon le pense-bête est centré au milieu de l'écran. */
.toast {
    position: fixed;
    inset: auto;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    margin: 0;
    padding: 10px 16px;
    background: var(--ink);
    color: #fff;
    border: 0;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 12px;
    box-shadow: var(--shadow-lg);
}

@media (max-width: 720px) {
    .columns { grid-auto-columns: 82vw; }
    .panel { width: calc(100vw - 16px); max-width: none; max-height: 90vh; }
}