/* DevisVox — Cockpit — styles.css
   Toutes les règles scopées par #cockpit-mobile-page
*/

#cockpit-mobile-page {
  --ck-accent:  #FF6B00;
  --ck-success: #10B981;
  --ck-text:    #0F172A;
  --ck-text2:   #475569;
  --ck-text3:   #94A3B8;
  --ck-border:  #E2E8F0;
  --ck-bg:      #F9FAFB;
  --ck-r-sm:    14px;
  --ck-r-md:    18px;
  --ck-tr:      .18s ease;
  --ck-sh:      0 1px 4px rgba(0,0,0,.07);

  display: flex; flex-direction: column; height: 100%;
  background: var(--ck-bg); overflow-y: auto;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
  color: var(--ck-text);
}
#cockpit-mobile-page::-webkit-scrollbar { display: none; }

#cockpit-mobile-page .ck2-hdr   { display: flex; align-items: flex-start; justify-content: space-between; padding: 10px 20px 8px; flex-shrink: 0; }
#cockpit-mobile-page .ck2-title { font-size: 21px; font-weight: 800; color: var(--ck-text); letter-spacing: -0.3px; line-height: 1.1; }

/* ── KPI Principal ───────────────────────────────────────────── */
#cockpit-mobile-page .ck2-kpi {
  margin: 12px 16px;
  background: linear-gradient(135deg, #FF9F43 0%, #F97316 55%, #EA580C 100%);
  border-radius: var(--ck-r-md); padding: 18px 20px;
  color: #fff; flex-shrink: 0;
}
#cockpit-mobile-page .ck2-kpi-lbl     { font-size: 11px; font-weight: 700; opacity: .85; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
#cockpit-mobile-page .ck2-kpi-val     { font-size: 34px; font-weight: 900; letter-spacing: -1.5px; line-height: 1; margin-bottom: 10px; }
#cockpit-mobile-page .ck2-kpi-obj-row { display: flex; justify-content: space-between; font-size: 12px; opacity: .85; margin-bottom: 8px; }
#cockpit-mobile-page .ck2-kpi-pct     { font-weight: 800; }
#cockpit-mobile-page .ck2-kpi-bar     { height: 6px; background: rgba(255,255,255,.3); border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
#cockpit-mobile-page .ck2-kpi-fill    { height: 100%; background: #fff; border-radius: 3px; }
#cockpit-mobile-page .ck2-kpi-foot    { font-size: 11px; opacity: .7; }

/* ── Grille 2×2 ──────────────────────────────────────────────── */
#cockpit-mobile-page .ck2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 0 16px; flex: 1; }
#cockpit-mobile-page .ck2-card { background: #fff; border-radius: var(--ck-r-sm); padding: 12px 12px 10px; border: 1px solid var(--ck-border); box-shadow: var(--ck-sh); display: flex; flex-direction: column; justify-content: center; }
#cockpit-mobile-page .ck2-card-hdr  { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; }
#cockpit-mobile-page .ck2-card-hdr span { font-size: 12px; font-weight: 700; color: var(--ck-text2); }
#cockpit-mobile-page .ck2-card-val  { font-size: 26px; font-weight: 900; color: var(--ck-text); letter-spacing: -1px; line-height: 1; margin-bottom: 3px; }
#cockpit-mobile-page .ck2-card-sub  { font-size: 12px; font-weight: 500; color: var(--ck-text2); }

/* ── Bouton IA ───────────────────────────────────────────────── */
#cockpit-mobile-page .ck2-ia-btn {
  width: calc(100% - 32px); margin: 12px 16px 0;
  padding: 16px 20px; border-radius: var(--ck-r-md);
  background: #0F172A; color: #fff; border: none;
  font-size: 15px; font-weight: 700; cursor: pointer;
  font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: opacity var(--ck-tr);
}
#cockpit-mobile-page .ck2-ia-btn:active { opacity: .85; }

/* ── Conseils ────────────────────────────────────────────────── */
#cockpit-mobile-page .ck2-conseils { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
#cockpit-mobile-page .ck2-tip      { background: #fff; border-radius: var(--ck-r-sm); padding: 14px; display: flex; align-items: flex-start; gap: 12px; box-shadow: var(--ck-sh); border: 1px solid var(--ck-border); }
#cockpit-mobile-page .ck2-tip-icon { font-size: 22px; flex-shrink: 0; }
#cockpit-mobile-page .ck2-tip-title{ font-size: 13px; font-weight: 700; color: var(--ck-text); margin-bottom: 4px; }
#cockpit-mobile-page .ck2-tip-body { font-size: 12px; color: var(--ck-text2); line-height: 1.5; }