/*
  FICHIER      : app/static/css/cockpit.css
  RÔLE         : Styles cockpit V1-like (Phase 59-B) — repassés sur les design tokens Chronostone
                 (Phase P0) : Montserrat, bleu #1A7ABF primaire, cartes douces, focus ring, texture
                 topo très subtile en header. Aligné sur le site public chronostone.fr.
  RESPONSABILITÉ : Mise en page cockpit (KPI, grille chantiers, rail travail). Aucune logique.
                   Scope : cockpit uniquement (n'affecte ni médiathèque ni DSC). Montserrat appliqué
                   sur les blocs racine du cockpit (héritage), pas globalement.
  SOURCES      : design-tokens.css (variables --cs-*).
  INTERDICTIONS : Pas d'emoji. Orange = dernier recours (absent du cockpit). Densité métier.
  STATUT       : P0 — actif. Cockpit aligné front.
*/

/* Montserrat scopé au cockpit (héritage par les enfants) */
.ck-header, .ck-kpi, .ck-resume, .ck-body, .ck-card-empty {
  font-family: var(--cs-font);
  color: var(--cs-text);
}

/* En-tête + texture topo très subtile */
.ck-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem;
  padding: .5rem 0 1rem; border-bottom: 1px solid var(--cs-border);
  background-image: var(--cs-topo); background-size: 220px; background-position: right top;
}
.ck-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; color: var(--cs-text); margin: 0; }
.ck-subtitle { font-size: .82rem; color: var(--cs-text-muted); }
.ck-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Boutons (pill, alignés front) */
.ck-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem;
  border-radius: var(--cs-r-pill); font-size: .82rem; font-weight: 600; line-height: 1;
  text-decoration: none; border: 1px solid var(--cs-border-strong); background: var(--cs-surface);
  color: var(--cs-text); white-space: nowrap;
  transition: background var(--cs-dur) var(--cs-ease-out),
              border-color var(--cs-dur) var(--cs-ease-out),
              transform var(--cs-dur-fast) var(--cs-ease-out); }
.ck-btn:hover { border-color: var(--cs-primary-light); background: var(--cs-primary-soft); }
.ck-btn:active { transform: scale(.97); }
.ck-btn--cta { background: var(--cs-primary); border-color: var(--cs-primary); color: var(--cs-on-primary); }
.ck-btn--cta:hover { background: var(--cs-primary-hover); border-color: var(--cs-primary-hover); }
.ck-btn--ghost { background: var(--cs-surface); }
.ck-btn--blue { color: var(--cs-primary); border-color: var(--cs-primary-light); background: var(--cs-primary-soft); }
.ck-btn--sm { padding: .32rem .6rem; font-size: .76rem; }
.ck-btn:focus-visible, .ck-search:focus-visible, .ck-card:focus-visible, .ck-row:focus-visible {
  outline: 2px solid var(--cs-primary); outline-offset: 2px; border-radius: var(--cs-r-sm); }

/* Bande KPI (chiffres bleus tabular, façon « bénéfices mesurables » du front) */
.ck-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px; background: var(--cs-border); border: 1px solid var(--cs-border);
  border-radius: var(--cs-r-lg); overflow: hidden; margin-bottom: 1.1rem; box-shadow: var(--cs-shadow-sm); }
.ck-kpi__cell { background: var(--cs-surface); padding: .8rem 1rem; }
.ck-kpi__val { font-size: 1.7rem; font-weight: 800; color: var(--cs-primary);
  line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ck-kpi__val--warn { color: var(--cs-warning); }
.ck-kpi__lbl { font-size: .62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--cs-text-faint); margin-top: 5px; }

/* Reprendre (bleu doux, plus orange) */
.ck-resume { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; background: var(--cs-primary-soft); border: 1px solid #cfe6fb;
  border-radius: var(--cs-r); padding: .65rem .95rem; margin-bottom: 1.1rem; }
.ck-resume__txt { font-size: .86rem; color: var(--cs-text); }
.ck-resume__act { display: flex; gap: .4rem; flex-wrap: wrap; }

/* Corps : grille chantiers + rail */
.ck-body { display: grid; grid-template-columns: 1fr 320px; gap: 1.1rem; align-items: start; }
.ck-section-head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .7rem; }
.ck-section-head h2 { font-size: 1rem; font-weight: 700; color: var(--cs-text); margin: 0; }
.ck-search { flex: 1; min-width: 180px; padding: .45rem .7rem; border: 1px solid var(--cs-border-strong);
  border-radius: var(--cs-r-sm); font-size: .85rem; font-family: inherit; background: var(--cs-surface);
  transition: border-color var(--cs-dur) var(--cs-ease-out); }
.ck-search:hover { border-color: var(--cs-primary-light); }
.ck-count { font-size: .76rem; color: var(--cs-text-muted); font-variant-numeric: tabular-nums; }

/* Cartes chantier (propres, pas énormes) */
.ck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .8rem; }
.ck-card { display: flex; background: var(--cs-surface); border: 1px solid var(--cs-border);
  border-radius: var(--cs-r); overflow: hidden; text-decoration: none; box-shadow: var(--cs-shadow-sm);
  transition: box-shadow var(--cs-dur) var(--cs-ease-out), transform var(--cs-dur) var(--cs-ease-out),
              border-color var(--cs-dur) var(--cs-ease-out); }
.ck-card:hover { transform: translateY(-2px); box-shadow: var(--cs-shadow); border-color: #d3e3f3; }
.ck-card__accent { width: 3px; background: var(--cs-primary); flex-shrink: 0; }
.ck-card__body { padding: .75rem .85rem; display: flex; flex-direction: column; gap: .22rem; flex: 1; }
.ck-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; }
.ck-card__name { font-weight: 700; color: var(--cs-text); font-size: .92rem; }
.ck-card__code { font-size: .66rem; color: var(--cs-text-muted); background: var(--cs-surface-2);
  border: 1px solid var(--cs-border); border-radius: var(--cs-r-sm); padding: .06rem .35rem;
  font-variant-numeric: tabular-nums; }
.ck-card__client { font-size: .76rem; color: var(--cs-text-muted); }
.ck-card__stats { font-size: .78rem; color: var(--cs-text-muted); margin-top: .25rem; font-variant-numeric: tabular-nums; }
.ck-card__stats strong { color: var(--cs-text); }
.ck-sep { color: var(--cs-border-strong); }

/* Rail listes de travail */
.ck-rail { display: flex; flex-direction: column; gap: .8rem; }
.ck-panel { background: var(--cs-surface); border: 1px solid var(--cs-border);
  border-radius: var(--cs-r); padding: .7rem .85rem; box-shadow: var(--cs-shadow-sm); }
.ck-panel__title { font-size: .64rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--cs-primary); margin-bottom: .45rem; } /* eyebrow bleu (front) */
.ck-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .38rem 0; border-top: 1px solid var(--cs-surface-2); text-decoration: none;
  transition: background var(--cs-dur-fast) var(--cs-ease-out); border-radius: var(--cs-r-sm); }
.ck-row:hover { background: var(--cs-primary-soft); }
.ck-row:first-of-type { border-top: none; }
.ck-row__main { display: flex; flex-direction: column; min-width: 0; padding-left: .1rem; }
.ck-row__title { font-size: .82rem; font-weight: 600; color: var(--cs-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-row__sub { font-size: .72rem; color: var(--cs-text-muted); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; font-variant-numeric: tabular-nums; }

/* Badges sobres (aucun orange) */
.ck-badge { font-size: .64rem; font-weight: 700; padding: .14rem .5rem; border-radius: var(--cs-r-pill);
  white-space: nowrap; flex-shrink: 0; }
.ck-badge--3d   { background: #e9f9f1; color: var(--cs-success); border: 1px solid #b9ecd5; }
.ck-badge--warn { background: var(--cs-warning-soft); color: var(--cs-warning); border: 1px solid #fde68a; }
.ck-badge--draft{ background: var(--cs-surface-2); color: #475569; border: 1px solid var(--cs-border); }
.ck-badge--run  { background: var(--cs-primary-soft); color: var(--cs-primary); border: 1px solid #cfe6fb; }
.ck-badge--done { background: var(--cs-primary-soft); color: var(--cs-primary); border: 1px solid #cfe6fb; }

.ck-empty { font-size: .8rem; color: var(--cs-text-muted); padding: .35rem 0; margin: 0; }

.ck-card-empty { background: var(--cs-surface); border: 1px solid var(--cs-border);
  border-radius: var(--cs-r-lg); padding: 1.6rem; max-width: 520px; box-shadow: var(--cs-shadow-sm);
  background-image: var(--cs-topo); background-size: 220px; background-position: right bottom; }
.ck-card-empty__title { font-weight: 800; color: var(--cs-text); margin-bottom: .4rem; }
.ck-card-empty p { color: var(--cs-text-muted); font-size: .88rem; margin: 0 0 1rem; }

@media (max-width: 1000px) { .ck-body { grid-template-columns: 1fr; } }

/* ── P0-bis : cockpit image-led (photos chantier, logo, héro) ─────────────── */
.ck-brand { display: flex; align-items: center; gap: .7rem; }
.ck-logo { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; }

/* Bannière héro : photo de chantier réelle + dégradé sombre + texte clair */
.ck-hero {
  position: relative; border-radius: var(--cs-r-lg); overflow: hidden;
  background-size: cover; background-position: center; min-height: 200px;
  display: flex; align-items: flex-end; margin-bottom: 1.1rem; box-shadow: var(--cs-shadow);
}
.ck-hero--plain { background: var(--cs-primary-soft); background-image: var(--cs-topo); background-size: 220px; }
.ck-hero__body { padding: 1.1rem 1.3rem; color: #fff; max-width: 680px; }
.ck-hero--plain .ck-hero__body { color: var(--cs-text); }
.ck-hero__eyebrow { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  color: var(--cs-primary-light); }
.ck-hero--plain .ck-hero__eyebrow { color: var(--cs-primary); }
.ck-hero__title { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; margin-top: .15rem; }
.ck-hero__meta { font-size: .82rem; opacity: .9; margin-top: .2rem; font-variant-numeric: tabular-nums; }
.ck-hero__act { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .8rem; }
.ck-btn--onhero { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.32); color: #fff;
  backdrop-filter: blur(4px); }
.ck-btn--onhero:hover { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.5); }

/* Cartes chantier : photo de couverture en haut */
.ck-card { flex-direction: column; }
.ck-card__cover { position: relative; height: 116px; background: var(--cs-surface-2);
  background-image: var(--cs-topo); background-size: 160px; display: block; overflow: hidden; }
.ck-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--cs-dur-slow) var(--cs-ease-out); }
.ck-card:hover .ck-card__cover img { transform: scale(1.04); }
.ck-card__cover--ph img { display: none; }
.ck-card__badge { position: absolute; top: .5rem; right: .5rem; box-shadow: var(--cs-shadow-sm); }

/* Vignettes du rail */
.ck-thumb { width: 38px; height: 30px; border-radius: var(--cs-r-sm); object-fit: cover;
  flex-shrink: 0; background: var(--cs-surface-2); }
.ck-thumb--ph { display: inline-block; background-image: var(--cs-topo); background-size: 80px; }