/*
 * SaloCart V4.3.3 — Order updates dialog + seller activity CSS fix
 * Loaded last. It intentionally owns the Order updates modal and the
 * Seller Recent order updates list so both remain stable even when an
 * older dashboard stylesheet is cached by a browser or installed PWA.
 */

/* ===== Order detail / Order updates dialog ===== */
.order-updates-sheet{
  width:min(100%,760px);
  min-width:0;
  max-height:min(92dvh,760px);
  overflow:hidden;
}
.order-updates-sheet .sheet-head{
  align-items:flex-start;
  padding:17px 20px 13px;
  background:color-mix(in srgb,var(--sc-surface,#fff) 94%,transparent);
}
.order-updates-sheet .sheet-head>div{min-width:0}
.order-updates-sheet .sheet-head h2{
  overflow:hidden;
  color:var(--sc-ink,#10251c);
  font-family:var(--font-display,Sora,system-ui,sans-serif);
  font-size:1.05rem;
  font-weight:800;
  letter-spacing:-.04em;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.order-updates-sheet .sheet-head p{
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.order-updates-sheet .sheet-body{
  display:grid;
  gap:14px;
  min-width:0;
  overflow-x:hidden;
  overscroll-behavior:contain;
  padding:18px 20px calc(24px + env(safe-area-inset-bottom));
}
.order-updates-sheet .order-detail-top{
  display:grid!important;
  grid-template-columns:74px minmax(0,1fr);
  align-items:center;
  gap:13px;
  min-width:0;
  padding:13px;
  border:1px solid var(--sc-line,#e5ece7);
  border-radius:19px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--sc-mint,#eaf9f1) 52%,var(--sc-surface,#fff)),var(--sc-surface,#fff));
}
.order-updates-sheet .order-detail-top>div:first-child{
  display:grid;
  place-items:center;
  width:74px;
  height:74px;
  overflow:hidden;
  border-radius:16px;
  background:var(--sc-surface-alt,#f4f8f5);
  color:var(--sc-green,#087a57);
  font-size:1.45rem;
}
.order-updates-sheet .order-detail-top img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.order-updates-sheet .order-detail-top>div:last-child{min-width:0}
.order-updates-sheet .order-detail-top h3{
  overflow:hidden;
  margin:0;
  color:var(--sc-ink,#10251c);
  font-family:var(--font-display,Sora,system-ui,sans-serif);
  font-size:.96rem;
  font-weight:790;
  letter-spacing:-.035em;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.order-updates-sheet .order-detail-top p{
  display:-webkit-box;
  overflow:hidden;
  margin:4px 0 6px;
  color:var(--sc-muted,#65736c);
  font-size:.67rem;
  line-height:1.45;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.order-updates-sheet .order-detail-top strong{
  display:block;
  color:var(--sc-green,#087a57);
  font-family:var(--font-display,Sora,system-ui,sans-serif);
  font-size:1.03rem;
  font-weight:800;
  letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;
}
.order-updates-sheet .order-detail-top small{
  display:block;
  margin-top:2px;
  color:var(--sc-muted,#65736c);
  font-size:.59rem;
  line-height:1.4;
}
.order-updates-sheet .cash-pickup-notice,
.order-updates-sheet .notice-card{
  min-width:0;
  margin:0!important;
  border-radius:18px;
}
.order-updates-sheet .cash-pickup-notice{
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:13px;
  border:1px solid color-mix(in srgb,var(--sc-green,#087a57) 26%,var(--sc-line,#e5ece7));
  background:color-mix(in srgb,var(--sc-mint,#eaf9f1) 72%,var(--sc-surface,#fff));
}
.order-updates-sheet .cash-pickup-notice>i{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  flex:0 0 36px;
  border-radius:12px;
  background:var(--sc-green,#087a57);
  color:#fff;
  font-size:.95rem;
}
.order-updates-sheet .cash-pickup-notice>div{min-width:0}
.order-updates-sheet .cash-pickup-notice strong{color:var(--sc-ink,#10251c);font-family:var(--font-display,Sora,system-ui,sans-serif);font-size:.78rem}
.order-updates-sheet .cash-pickup-notice p{margin:3px 0 0;color:var(--sc-muted,#65736c);font-size:.64rem;line-height:1.5}
.order-updates-sheet .cash-pickup-notice .btn-sc{min-height:38px;font-size:.66rem}

/* Full timeline card: no clipping, clear timestamp hierarchy, safe long text. */
.order-updates-sheet .order-timeline{
  position:relative;
  min-width:0;
  margin:0;
  padding:15px;
  border:1px solid var(--sc-line,#e5ece7);
  border-radius:20px;
  background:var(--sc-surface,#fff);
  overflow:hidden;
}
.order-updates-sheet .order-timeline>h3{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0 0 13px;
  color:var(--sc-ink,#10251c);
  font-family:var(--font-display,Sora,system-ui,sans-serif);
  font-size:.84rem;
  font-weight:790;
  letter-spacing:-.03em;
}
.order-updates-sheet .order-timeline>h3::before{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  content:"\F4E1";
  border-radius:10px;
  background:var(--sc-blue-soft,#eaf4ff);
  color:var(--sc-blue,#2d72bf);
  font-family:"bootstrap-icons";
  font-size:.78rem;
}
.order-updates-sheet .timeline-row{
  position:relative;
  display:grid!important;
  grid-template-columns:30px minmax(0,1fr);
  align-items:flex-start;
  gap:10px;
  min-width:0;
  padding:0 0 15px;
}
.order-updates-sheet .timeline-row:last-child{padding-bottom:0}
.order-updates-sheet .timeline-row>span{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border:2px solid var(--sc-surface,#fff);
  border-radius:50%;
  background:var(--sc-mint,#eaf9f1);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--sc-green,#087a57) 18%,transparent);
  color:var(--sc-green,#087a57);
  font-size:.72rem;
}
.order-updates-sheet .timeline-row:not(:last-child)>span::after{
  position:absolute;
  top:29px;
  left:13px;
  width:2px;
  height:calc(100% + 1px);
  content:"";
  background:color-mix(in srgb,var(--sc-green,#087a57) 18%,var(--sc-line,#e5ece7));
}
.order-updates-sheet .timeline-row>div{min-width:0;padding:2px 0 0}
.order-updates-sheet .timeline-row strong{
  display:block;
  overflow-wrap:anywhere;
  color:var(--sc-ink,#10251c);
  font-size:.72rem;
  font-weight:780;
  line-height:1.35;
}
.order-updates-sheet .timeline-row p{
  overflow-wrap:anywhere;
  margin:3px 0 0;
  color:var(--sc-muted,#65736c);
  font-size:.64rem;
  line-height:1.52;
}
.order-updates-sheet .timeline-row small{
  display:block;
  margin-top:5px;
  color:var(--sc-muted,#65736c);
  font-size:.56rem;
  font-variant-numeric:tabular-nums;
  line-height:1.35;
}
.order-updates-sheet .order-timeline>.text-secondary{
  margin:0;
  padding:13px;
  border:1px dashed var(--sc-line,#e5ece7);
  border-radius:13px;
  color:var(--sc-muted,#65736c)!important;
  font-size:.67rem;
}

/* ===== Seller dashboard: Recent order updates ===== */
.seller-dashboard .seller-orders-section{
  position:relative;
  display:block;
  clear:both;
  min-width:0;
  overflow:hidden;
}
.seller-dashboard .seller-orders-section .seller-section-head{
  align-items:center;
  min-width:0;
  padding-bottom:12px;
  border-bottom:1px solid var(--sc-line,#e5ece7);
}
.seller-dashboard .seller-orders-section .seller-section-head>div{min-width:0}
.seller-dashboard .seller-orders-section .seller-section-head h2{font-size:1.06rem}
.seller-dashboard .seller-orders-section .seller-order-list{
  display:grid!important;
  gap:9px;
  min-width:0;
  margin-top:2px;
}
.seller-dashboard .seller-orders-section .seller-order-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto 18px;
  align-items:center;
  gap:12px;
  width:100%;
  min-width:0;
  min-height:66px;
  padding:11px 12px;
  border:1px solid var(--sc-line,#e5ece7);
  border-radius:16px;
  background:var(--sc-surface-alt,#f8fbf9);
  color:var(--sc-ink,#10251c);
  text-align:left;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.seller-dashboard .seller-orders-section .seller-order-row:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--sc-green,#087a57) 32%,var(--sc-line,#e5ece7));
  background:var(--sc-surface,#fff);
  box-shadow:var(--sc-shadow-xs,0 8px 22px rgba(10,50,38,.06));
}
.seller-dashboard .seller-orders-section .seller-order-row:focus-visible{
  outline:3px solid color-mix(in srgb,var(--sc-green,#087a57) 28%,transparent);
  outline-offset:2px;
}
.seller-dashboard .seller-orders-section .seller-order-person{
  display:flex!important;
  align-items:center;
  gap:10px;
  min-width:0;
}
.seller-dashboard .seller-orders-section .seller-order-avatar{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  flex:0 0 36px;
  border-radius:13px;
  background:linear-gradient(135deg,var(--sc-green,#087a57),#4da979);
  color:#fff;
  font-family:var(--font-display,Sora,system-ui,sans-serif);
  font-size:.76rem;
  font-weight:800;
}
.seller-dashboard .seller-orders-section .seller-order-person>div{min-width:0}
.seller-dashboard .seller-orders-section .seller-order-person strong,
.seller-dashboard .seller-orders-section .seller-order-person small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.seller-dashboard .seller-orders-section .seller-order-person strong{
  color:var(--sc-ink,#10251c);
  font-family:var(--font-display,Sora,system-ui,sans-serif);
  font-size:.72rem;
  font-weight:760;
}
.seller-dashboard .seller-orders-section .seller-order-person small{
  margin-top:2px;
  color:var(--sc-muted,#65736c);
  font-size:.58rem;
  font-weight:620;
}
.seller-dashboard .seller-orders-section .seller-order-summary{
  display:grid;
  justify-items:end;
  gap:4px;
  min-width:0;
}
.seller-dashboard .seller-orders-section .seller-order-summary>strong{
  color:var(--sc-green,#087a57);
  font-family:var(--font-display,Sora,system-ui,sans-serif);
  font-size:.73rem;
  font-weight:790;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.seller-dashboard .seller-orders-section .seller-order-summary .status-pill,
.seller-dashboard .seller-orders-section .seller-order-summary [class*="status"]{
  max-width:118px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.seller-dashboard .seller-orders-section .seller-order-row>i{
  color:var(--sc-line-strong,#9eafa5);
  font-size:.72rem;
}

html[data-theme="dark"] .order-updates-sheet .sheet-head{background:color-mix(in srgb,var(--sc-surface,#17271f) 92%,transparent)}
html[data-theme="dark"] .order-updates-sheet .order-detail-top{background:linear-gradient(145deg,color-mix(in srgb,var(--sc-green,#087a57) 19%,var(--sc-surface,#17271f)),var(--sc-surface,#17271f))}
html[data-theme="dark"] .order-updates-sheet .order-detail-top>div:first-child{background:var(--sc-surface-alt,#1e3329)}
html[data-theme="dark"] .order-updates-sheet .cash-pickup-notice{background:color-mix(in srgb,var(--sc-green,#087a57) 18%,var(--sc-surface,#17271f))}
html[data-theme="dark"] .seller-dashboard .seller-orders-section .seller-order-row{background:var(--sc-surface-alt,#1e3329)}
html[data-theme="dark"] .seller-dashboard .seller-orders-section .seller-order-row:hover{background:var(--sc-surface,#17271f)}

@media (min-width:768px){
  .modal-backdrop-sc:has(.order-updates-sheet){align-items:center;padding:24px}
  .order-updates-sheet{border-radius:25px;box-shadow:0 22px 70px rgba(2,22,14,.28)}
  .order-updates-sheet .sheet-head{border-radius:25px 25px 0 0}
}

@media (max-width:767.98px){
  .order-updates-sheet{max-height:calc(94dvh - env(safe-area-inset-top));border-radius:24px 24px 0 0}
  .order-updates-sheet .sheet-head{padding:15px 15px 11px}
  .order-updates-sheet .sheet-head h2{font-size:.98rem}
  .order-updates-sheet .sheet-body{gap:12px;padding:14px 14px calc(18px + env(safe-area-inset-bottom))}
  .order-updates-sheet .order-detail-top{grid-template-columns:62px minmax(0,1fr);gap:10px;padding:11px;border-radius:16px}
  .order-updates-sheet .order-detail-top>div:first-child{width:62px;height:62px;border-radius:14px}
  .order-updates-sheet .order-detail-top h3{font-size:.82rem}
  .order-updates-sheet .order-detail-top p{font-size:.61rem}
  .order-updates-sheet .order-detail-top strong{font-size:.94rem}
  .order-updates-sheet .order-timeline{padding:13px;border-radius:17px}
  .order-updates-sheet .order-timeline>h3{font-size:.78rem;margin-bottom:11px}
  .order-updates-sheet .timeline-row{grid-template-columns:27px minmax(0,1fr);gap:9px;padding-bottom:13px}
  .order-updates-sheet .timeline-row>span{width:27px;height:27px;font-size:.66rem}
  .order-updates-sheet .timeline-row:not(:last-child)>span::after{top:26px;left:12px}
  .order-updates-sheet .timeline-row strong{font-size:.68rem}
  .order-updates-sheet .timeline-row p{font-size:.6rem}
  .seller-dashboard .seller-orders-section{padding:13px;border-radius:19px}
  .seller-dashboard .seller-orders-section .seller-section-head{align-items:flex-start;gap:9px;padding-bottom:10px;margin-bottom:10px}
  .seller-dashboard .seller-orders-section .seller-section-head p{font-size:.63rem;line-height:1.45}
  .seller-dashboard .seller-orders-section .seller-refresh-button{min-height:31px;padding:0 8px;font-size:.58rem}
  .seller-dashboard .seller-orders-section .seller-order-list{gap:8px}
  .seller-dashboard .seller-orders-section .seller-order-row{grid-template-columns:minmax(0,1fr) auto 14px;gap:8px;min-height:61px;padding:9px 10px;border-radius:14px}
  .seller-dashboard .seller-orders-section .seller-order-person{gap:8px}
  .seller-dashboard .seller-orders-section .seller-order-avatar{width:32px;height:32px;flex-basis:32px;border-radius:11px;font-size:.68rem}
  .seller-dashboard .seller-orders-section .seller-order-person strong{font-size:.67rem}
  .seller-dashboard .seller-orders-section .seller-order-person small{font-size:.54rem}
  .seller-dashboard .seller-orders-section .seller-order-summary>strong{font-size:.66rem}
  .seller-dashboard .seller-orders-section .seller-order-summary [class*="status"]{max-width:86px;font-size:.48rem}
}

@media (max-width:380px){
  .seller-dashboard .seller-orders-section .seller-section-head{flex-direction:column}
  .seller-dashboard .seller-orders-section .seller-refresh-button{width:100%;justify-content:center}
  .seller-dashboard .seller-orders-section .seller-order-row{grid-template-columns:minmax(0,1fr) auto 12px;gap:6px}
  .seller-dashboard .seller-orders-section .seller-order-summary [class*="status"]{display:none}
}

@media (prefers-reduced-motion:reduce){
  .seller-dashboard .seller-orders-section .seller-order-row{transition:none!important}
}