/* ==========================================================================
   order-card.css
   --------------------------------------------------------------------------
   Shared "order card" visual design — copied 1:1 from the card style used
   on list.html — so every screen that shows order cards (orders.html,
   admin.html, details.html) looks and feels the same. Colours are hard
   coded on purpose (instead of relying on each page's own CSS variables)
   so this file behaves the same no matter what --primary/--gray/etc. a
   host page has already defined.
   ========================================================================== */

.oc-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:10px;
  align-items:stretch;
}
@media (min-width:900px){
  .oc-list{gap:14px;}
}

/* A single order card ----------------------------------------------------*/
.oc-card{
  background:#FFFFFF;
  border:1px solid #E5E7EB;
  border-radius:14px;
  overflow:hidden;
  position:relative;
  -webkit-mask-image:-webkit-radial-gradient(circle, #fff 100%, #000 100%);
  mask-image:radial-gradient(circle, #fff 100%, #000 100%);
  clip-path:inset(0 round 14px);
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  text-decoration:none;
  color:inherit;
  display:block;
  cursor:pointer;
  transition:box-shadow .15s ease, transform .1s ease;
}
.oc-card:active{opacity:.9;}
.oc-card::after{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:#e9ecef;}

.oc-head{
  padding:14px 16px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  -webkit-user-select:none;
  user-select:none;
}
.oc-head-left{display:flex;gap:12px;align-items:flex-start;min-width:0;}
.oc-head-left > div:last-child{flex:1 1 auto;min-width:0;}
.oc-thumb{
  width:46px;height:46px;
  border-radius:9px;
  object-fit:cover;
  flex-shrink:0;
  background:#e9ecef;
}
.oc-thumb-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#adb5bd;
  font-size:16px;
}
.oc-id{font-size:12px;color:#6B7280;font-weight:600;}
.oc-name{
  font-size:15px;font-weight:700;margin-top:2px;color:#1F2937;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  word-break:break-word;
}
.oc-product-name{
  font-size:12.5px;color:#6c757d;margin-top:1px;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  word-break:break-word;
}
.oc-date{font-size:12px;color:#6B7280;margin-top:2px;}
/* Multi-item order card: the thumbnail/name/category fade-cycle through
   each item right inside the card (see card.js buildGroupCard). */
.oc-thumb-wrap{flex-shrink:0;transition:opacity .2s ease;}
.oc-name,.oc-product-name{transition:opacity .2s ease;}
.oc-item-index{font-size:10.5px;color:#4361ee;font-weight:700;margin-top:2px;}
.oc-right{
  text-align:right;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
}
.oc-total-label{font-size:9.5px;color:#6B7280;text-transform:uppercase;letter-spacing:.4px;font-weight:700;}
.oc-total{font-size:15px;font-weight:800;color:#4F46E5;}
.oc-profit-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:10.5px;
  font-weight:700;
  color:#059669;
  background:#D1FAE5;
  padding:2px 8px;
  border-radius:20px;
  margin-top:5px;
}
.oc-profit-chip i{font-size:9px;}
.oc-qty-note{
  font-size:10.5px;
  color:#6B7280;
  font-weight:600;
  margin-top:4px;
}
.oc-chevron{color:#6B7280;flex-shrink:0;margin-top:4px;font-size:13px;}

/* Detail block (used on details.html) --------------------------------- */
.oc-details-inner{padding:14px 16px;border-top:1px solid #E5E7EB;}
.oc-detail-row{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:6px 0;color:#6B7280;}
.oc-detail-row span:last-child{color:#1F2937;font-weight:600;text-align:right;max-width:65%;}
.oc-detail-row.oc-profit-row span:last-child{color:#059669;}

.oc-items-title{font-size:12px;font-weight:700;color:#6B7280;text-transform:uppercase;margin:14px 0 8px;}
.oc-items-title:first-child{margin-top:0;}
.oc-product-block{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding-bottom:12px;
  border-bottom:1px solid #E5E7EB;
  margin-bottom:8px;
}
.oc-product-block-img{
  width:64px;height:64px;
  border-radius:10px;
  object-fit:cover;
  flex-shrink:0;
  background:#e9ecef;
}
.oc-product-block-img-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#adb5bd;
  font-size:18px;
}
.oc-product-block-name{font-size:14px;font-weight:700;color:#1F2937;}
.oc-product-block-cat{font-size:12px;color:#6c757d;text-transform:capitalize;margin:2px 0 4px;}
.oc-product-block-desc{font-size:12.5px;color:#6c757d;line-height:1.5;}
.oc-product-block-meta{font-size:12px;color:#6B7280;margin-top:4px;font-weight:600;}

/* Edit / Delete action buttons ----------------------------------------- */
.oc-actions{
  display:flex;
  gap:8px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid #E5E7EB;
}
.oc-action-btn{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1.5px solid #e9ecef;
  background:#fff;
  border-radius:9px;
  padding:11px 0;
  font-size:13.5px;
  font-weight:700;
  cursor:pointer;
  transition:background .15s ease, opacity .15s ease;
}
.oc-action-btn.oc-edit{color:#4F46E5;border-color:#DCD9FB;}
.oc-action-btn.oc-edit:hover{background:#F5F4FF;}
.oc-action-btn.oc-delete{color:#DC2626;border-color:#F8D2D2;}
.oc-action-btn.oc-delete:hover{background:#FFF3F3;}
.oc-action-btn:active{opacity:.75;}
.oc-action-btn:disabled{opacity:.45;cursor:not-allowed;}

/* Uniform product grid — used on details.html when an order has more than
   one item, so every item card is the exact same size (no long/short
   mismatches) no matter how long its description is. */
.oc-product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:12px;
  margin:10px 0 16px;
  align-items:stretch;
}
.oc-product-card{
  border:1px solid #E5E7EB;
  border-radius:12px;
  padding:14px;
  background:#fff;
  display:flex;
  flex-direction:column;
  height:100%;
}
.oc-product-card .oc-product-block-img,
.oc-product-card .oc-product-block-img-placeholder{
  width:100%;height:120px;border-radius:10px;margin-bottom:10px;
}
.oc-product-card .oc-product-block-name{font-size:14px;}
.oc-product-card .oc-product-block-desc{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:1 1 auto;
}
.oc-product-card .oc-product-block-meta{margin-top:auto;padding-top:8px;border-top:1px dashed #E5E7EB;}

/* ==========================================================================
   Signed-in account card — shown just below the date-range picker on
   orders.html / list.html / profit.html so the currently signed-in user
   can see it's their own account (photo, name, email) that the page's
   orders belong to / are filtered by. Always the current Firebase Auth
   user only - never anyone else's account.
   ========================================================================== */
.oc-account-card{
  display:none;
  align-items:center;
  gap:12px;
  background:#F8FAFF;
  border:1px solid #E5E7EB;
  border-radius:12px;
  padding:10px 14px;
}
.oc-account-avatar-wrap{
  width:42px;height:42px;
  border-radius:50%;
  overflow:hidden;
  flex-shrink:0;
  background:#eef2ff;
  display:flex;
  align-items:center;
  justify-content:center;
}
.oc-account-avatar{width:100%;height:100%;object-fit:cover;display:block;}
.oc-account-avatar-placeholder{color:#4361ee;font-size:17px;}
.oc-account-info{min-width:0;flex:1 1 auto;}
.oc-account-name{
  font-size:13.5px;font-weight:700;color:#1F2937;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.oc-account-email{
  font-size:12px;color:#6B7280;margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.oc-account-badge{
  flex-shrink:0;
  font-size:10.5px;font-weight:700;color:#4361ee;
  background:#eef2ff;padding:5px 11px;border-radius:100px;
  white-space:nowrap;
}