/* =============================================================================
   TerraTrack - Dossier Client mobile (TD-025 Phase 3)
   =============================================================================
   Refined mobile dossier selectors. Keep this file scoped to #s-dossier so the
   legacy desktop dossier CSS remains untouched.
   ========================================================================= */

@media (max-width: 1023px) {
  #s-dossier .dc-client-layout {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Parent flex of identity must wrap so actions go below avatar+meta on mobile.
     Without this, .identity-actions stays right of .identity-meta and overlaps
     the client name on narrow viewports (bug observed 2026-05-28: nom client
     compressé en bandeau gauche, masqué par bouton Appeler). */
  #s-dossier .identity {
    flex-wrap: wrap !important;
    row-gap: 12px !important;
    column-gap: 12px !important;
    align-items: center !important;
  }

  #s-dossier .identity > .identity-avatar {
    flex: 0 0 auto !important;
  }

  #s-dossier .identity > .identity-meta {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  #s-dossier .identity .identity-name {
    font-size: 18px !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  #s-dossier .identity .identity-sub {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  /* Header quick actions: Appeler / Email / Nouvelle visite. Simulation stays
     available in the right-side quick actions card and global Simulation tab.
     flex: 1 1 100% so the actions row drops below avatar+meta. */
  #s-dossier .identity-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }

  #s-dossier .identity-actions #dc-open-budget-hero {
    display: none !important;
  }

  #s-dossier .identity-actions .btn {
    min-height: 48px !important;
    padding: 10px 6px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    touch-action: manipulation;
  }

  #s-dossier .identity-actions .btn svg,
  #s-dossier .identity-actions .btn i {
    flex-shrink: 0;
  }

  /* Real tab markup is .dc-tabs .tab, not .dc-tab. */
  #s-dossier .dc-tabs {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 6px !important;
    padding: 0 2px 8px !important;
    margin-bottom: 12px !important;
    border-bottom: 1px solid var(--tt-border, var(--bor));
  }

  #s-dossier .dc-tabs::-webkit-scrollbar {
    display: none;
  }

  #s-dossier .dc-tabs .tab {
    flex: 0 0 auto !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
    border: 1px solid var(--tt-border, var(--bor)) !important;
    border-radius: 999px !important;
    background: var(--tt-surface, var(--card)) !important;
    font-size: 13px !important;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  #s-dossier .dc-tabs .tab.is-active {
    background: var(--tt-accent-soft, var(--acc-dim)) !important;
    border-color: var(--tt-accent, var(--acc2)) !important;
  }

  /* Timeline: override the older scoped flex rules in dossier_client.css. */
  #s-dossier #dc-timeline .timeline {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding-left: 0 !important;
    border-left: none !important;
  }

  #s-dossier #dc-timeline .timeline-month-sep {
    display: block !important;
    margin: 8px 0 0;
    padding: 12px 4px 4px;
    border-top: 1px solid var(--tt-border, var(--bor));
    color: var(--tt-fg-3, var(--txt3));
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  #s-dossier #dc-timeline .timeline > .timeline-month-sep:first-child {
    margin-top: 0;
    padding-top: 4px;
    border-top: 0;
  }

  #s-dossier #dc-timeline .timeline .timeline-item.dc-visit-card {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    grid-template-areas:
      "dot title"
      "dot date"
      "dot body" !important;
    gap: 4px 12px !important;
    margin: 0 !important;
    padding: 14px !important;
    border: 1px solid var(--tt-border, var(--bor)) !important;
    border-left-width: 1px !important;
    border-radius: 12px !important;
    background: var(--tt-surface, var(--card));
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s;
  }

  #s-dossier #dc-timeline .timeline .timeline-item.dc-visit-card:active {
    transform: scale(0.99);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }

  #s-dossier #dc-timeline .timeline-item .timeline-dot {
    grid-area: dot;
    width: 10px !important;
    height: 10px !important;
    margin-top: 6px;
    border-radius: 50%;
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    flex-shrink: 0;
  }

  #s-dossier #dc-timeline .timeline-item .timeline-dot.is-success { background: #10b981; }
  #s-dossier #dc-timeline .timeline-item .timeline-dot.is-accent  { background: var(--tt-accent, var(--acc2)); }
  #s-dossier #dc-timeline .timeline-item .timeline-dot.is-warn    { background: #f59e0b; }
  #s-dossier #dc-timeline .timeline-item .timeline-dot.is-danger  { background: #ef4444; }

  #s-dossier #dc-timeline .timeline-item .timeline-date {
    grid-area: date;
    width: auto !important;
    margin: 0 !important;
    color: var(--tt-fg-3, var(--txt3)) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    font-variant-numeric: tabular-nums;
    text-transform: none !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  #s-dossier #dc-timeline .timeline-item .timeline-title {
    grid-area: title;
    width: auto !important;
    color: var(--tt-fg, var(--txt)) !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    line-height: 1.3;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  #s-dossier #dc-timeline .timeline-item .timeline-body {
    grid-area: body;
    width: auto !important;
    margin-top: 2px !important;
    color: var(--tt-fg-2, var(--txt2)) !important;
    font-size: 13px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  #s-dossier .dc-kpis,
  #s-dossier .stat-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  #s-dossier .dc-kpi,
  #s-dossier .stat-card {
    min-height: 70px;
    padding: 12px !important;
  }
}

@media (min-width: 1024px) {
  #s-dossier .timeline-month-sep {
    display: none !important;
  }
}