/* KARETA UI-r54 — client detail cards reference pass.
   Scope: order detail, chat detail, reviews, cars, notifications and client detail panels.
   Visual-only layer. No API/DB/route/business logic changes. */
:root{
  --r54-bg:#eef0f2;
  --r54-page:#ffffff;
  --r54-soft:#f4f4f5;
  --r54-soft-2:#fafafa;
  --r54-line:#e7e8eb;
  --r54-text:#090b10;
  --r54-muted:#6f747d;
  --r54-orange:#ffb000;
  --r54-orange-2:#ff9800;
  --r54-green:#22c55e;
  --r54-red:#ef4444;
  --r54-radius:16px;
  --r54-radius-lg:24px;
  --r54-shadow:0 16px 42px rgba(15,23,42,.08);
  --r54-shadow-soft:0 8px 24px rgba(15,23,42,.055);
}

/* Detail page shell */
body[data-role="client"] :where(.order-detail,.order-details,.order-view,.chat-detail,.chat-view,.review-detail,.car-detail,.vehicle-detail,.notification-detail,.notify-detail,.detail-page,.detail-card-wrap){
  min-width:0 !important;
  max-width:1120px !important;
  margin-inline:auto !important;
  color:var(--r54-text) !important;
}

/* Detail cards */
body[data-role="client"] :where(.order-detail-card,.order-info-card,.order-stage-card,.order-timeline-card,.chat-thread-card,.chat-panel,.review-card,.review-detail-card,.car-detail-card,.vehicle-card,.vehicle-detail-card,.notify-card,.notification-card,.detail-card,.info-card,.timeline-card,.attachment-card){
  min-width:0 !important;
  max-width:100% !important;
  border:1px solid var(--r54-line) !important;
  border-radius:var(--r54-radius) !important;
  background:#fff !important;
  box-shadow:var(--r54-shadow-soft) !important;
  overflow:hidden !important;
  padding:clamp(14px,2vw,20px) !important;
}

/* Detail title blocks */
body[data-role="client"] :where(.order-detail,.chat-detail,.review-detail,.car-detail,.notification-detail,.detail-page) :where(h1,.detail-title,.order-title,.chat-title,.vehicle-title){
  color:var(--r54-text) !important;
  font-size:clamp(26px,3.1vw,42px) !important;
  line-height:1.02 !important;
  font-weight:950 !important;
  letter-spacing:-.06em !important;
}
body[data-role="client"] :where(.order-detail,.chat-detail,.review-detail,.car-detail,.notification-detail,.detail-page) :where(.detail-sub,.order-sub,.chat-sub,.vehicle-sub,p,small){
  color:var(--r54-muted) !important;
  line-height:1.35 !important;
}

/* Order stages / timeline */
body[data-role="client"] :where(.order-timeline,.timeline,.stage-list,.repair-stages){
  display:grid !important;
  gap:10px !important;
}
body[data-role="client"] :where(.timeline-item,.stage-item,.repair-stage,.order-stage){
  position:relative !important;
  min-width:0 !important;
  border:1px solid var(--r54-line) !important;
  border-radius:14px !important;
  background:var(--r54-soft-2) !important;
  padding:12px 14px 12px 44px !important;
  overflow:hidden !important;
}
body[data-role="client"] :where(.timeline-item,.stage-item,.repair-stage,.order-stage)::before{
  content:'' !important;
  position:absolute !important;
  left:16px !important;
  top:16px !important;
  width:12px !important;
  height:12px !important;
  border-radius:50% !important;
  background:var(--r54-orange) !important;
  box-shadow:0 0 0 5px rgba(255,176,0,.16) !important;
}
body[data-role="client"] :where(.timeline-item.is-done,.stage-item.is-done,.repair-stage.is-done,.order-stage.is-done)::before{
  background:var(--r54-green) !important;
  box-shadow:0 0 0 5px rgba(34,197,94,.15) !important;
}

/* Chat thread */
body[data-role="client"] :where(.chat-thread,.messages-thread,.thread-body){
  display:grid !important;
  gap:10px !important;
  min-width:0 !important;
}
body[data-role="client"] :where(.chat-bubble,.message-bubble,.msg-bubble){
  width:fit-content !important;
  max-width:min(78%, 620px) !important;
  min-width:0 !important;
  border-radius:16px !important;
  padding:10px 13px !important;
  background:var(--r54-soft) !important;
  color:var(--r54-text) !important;
  box-shadow:none !important;
  overflow-wrap:anywhere !important;
}
body[data-role="client"] :where(.chat-bubble.is-me,.message-bubble.is-me,.msg-bubble.is-me,.mine){
  justify-self:end !important;
  background:#fff4cf !important;
  color:#15120a !important;
}
body[data-role="client"] :where(.chat-input,.message-input,.thread-input,.composer){
  min-width:0 !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:8px !important;
  align-items:end !important;
  border:1px solid var(--r54-line) !important;
  border-radius:16px !important;
  background:#fff !important;
  padding:8px !important;
}
body[data-role="client"] :where(.chat-input,.message-input,.thread-input,.composer) :where(input,textarea){
  min-height:42px !important;
  border:0 !important;
  background:var(--r54-soft) !important;
  border-radius:12px !important;
  padding:10px 12px !important;
}

/* Reviews */
body[data-role="client"] :where(.reviews-list,.review-list){
  display:grid !important;
  gap:12px !important;
}
body[data-role="client"] :where(.review-card,.review-row){
  display:grid !important;
  gap:8px !important;
}
body[data-role="client"] :where(.rating,.stars,.review-stars){
  color:var(--r54-orange) !important;
  letter-spacing:1px !important;
  font-weight:900 !important;
}

/* Cars / garage */
body[data-role="client"] :where(.garage-list,.cars-list,.vehicles-list){
  display:grid !important;
  gap:12px !important;
}
body[data-role="client"] :where(.car-card,.vehicle-card,.garage-card){
  display:grid !important;
  grid-template-columns:72px minmax(0,1fr) auto !important;
  gap:14px !important;
  align-items:center !important;
}
body[data-role="client"] :where(.car-card,.vehicle-card,.garage-card) :where(.car-thumb,.vehicle-thumb,img){
  width:72px !important;
  height:72px !important;
  border-radius:16px !important;
  background:#25272d !important;
  object-fit:cover !important;
}

/* Notifications */
body[data-role="client"] :where(.notifications-list,.notify-list){
  display:grid !important;
  gap:10px !important;
}
body[data-role="client"] :where(.notify-row,.notification-row,.notification-card){
  display:grid !important;
  grid-template-columns:42px minmax(0,1fr) auto !important;
  gap:12px !important;
  align-items:center !important;
  min-height:64px !important;
}
body[data-role="client"] :where(.notify-icon,.notification-icon){
  width:42px !important;
  height:42px !important;
  border-radius:12px !important;
  background:#fff4cf !important;
  color:var(--r54-orange-2) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* Attachments / media */
body[data-role="client"] :where(.attachments,.attach-list,.media-list){
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:10px !important;
}
body[data-role="client"] :where(.attachment-card,.attach-card,.media-card){
  min-height:90px !important;
  border-radius:14px !important;
  background:var(--r54-soft) !important;
  border:1px solid var(--r54-line) !important;
  overflow:hidden !important;
}

/* Buttons / action bars */
body[data-role="client"] :where(.detail-actions,.order-actions,.chat-actions,.review-actions,.vehicle-actions,.notify-actions){
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  align-items:center !important;
}
body[data-role="client"] :where(.detail-actions,.order-actions,.chat-actions,.review-actions,.vehicle-actions,.notify-actions) :where(button,.btn,.action-btn){
  min-height:40px !important;
  border-radius:12px !important;
  padding:0 14px !important;
  font-weight:850 !important;
  min-width:0 !important;
  overflow-wrap:anywhere !important;
}

/* Tablet/wide layout */
@media (min-width:768px){
  body[data-role="client"] :where(.detail-layout,.order-detail-layout,.chat-detail-layout,.vehicle-detail-layout){
    display:grid !important;
    grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr) !important;
    gap:16px !important;
    align-items:start !important;
  }
  body[data-role="client"] :where(.attachments,.attach-list,.media-list){
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  body[data-role="client"] :where(.reviews-list,.garage-list,.cars-list,.vehicles-list,.notifications-list){
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media (min-width:1024px){
  body[data-role="client"] :where(.detail-layout,.order-detail-layout,.chat-detail-layout,.vehicle-detail-layout){
    grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr) !important;
    gap:20px !important;
  }
  body[data-role="client"] :where(.attachments,.attach-list,.media-list){
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
}

/* Phone safety */
@media (max-width:767px){
  body[data-role="client"] :where(.chat-bubble,.message-bubble,.msg-bubble){
    max-width:88% !important;
  }
  body[data-role="client"] :where(.car-card,.vehicle-card,.garage-card){
    grid-template-columns:58px minmax(0,1fr) auto !important;
  }
  body[data-role="client"] :where(.car-card,.vehicle-card,.garage-card) :where(.car-thumb,.vehicle-thumb,img){
    width:58px !important;
    height:58px !important;
  }
  body[data-role="client"] :where(.attachments,.attach-list,.media-list){
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* Hard text-overlap guards */
body[data-role="client"] :where(.order-detail,.chat-detail,.review-detail,.car-detail,.vehicle-detail,.notification-detail,.detail-card,.order-card,.chat-card,.review-card,.car-card,.notify-card) :where(h1,h2,h3,h4,p,span,small,b,strong,button,label,div){
  min-width:0 !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
}