/* Orders screen (orders.js): the list and one order. Tabs, chips and cards come
   from components.css and styles.css. Customers (customers.js) shares the list,
   toolbar and order-page pieces. */

.orders-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.orders-toolbar .page-tabs { margin: 0; }
.orders-toolbar .searchbox { min-width: min(100%, 280px); }
.orders-toolbar button.chip { border: 0; cursor: pointer; font-family: inherit; min-height: 32px; }
.order-link { font-weight: 600; }
.row-link { cursor: pointer; }
/* What the order waits on, under its status: "To ship", "Cash to collect". */
.order-todo { display: block; margin-top: 4px; font-size: var(--typo-body-sm); font-weight: 600; color: var(--primary); }
.load-more { text-align: center; margin: var(--space-4) 0; }

.order-head { align-items: flex-start; }
.order-head h2 { margin: 0; }
.order-head .order-chips { margin-top: var(--space-2); }
.order-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.order-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }

/* Where the order is and the one step it waits on (orders.js progressCard). */
.order-progress { display: grid; gap: var(--space-4); margin-bottom: var(--space-4); }
.order-progress > .notice { margin: 0; }

/* Placed → Processing → Shipped → Delivered. Each step draws the line back to
   the one before it, in the primary colour once the order has reached it. */
.order-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.order-steps li { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; text-align: center; }
.order-steps li + li::before { content: ''; position: absolute; top: 11px; inset-inline-end: 50%; width: 100%; height: 2px; background: var(--outline-variant); }
.order-steps li + li:is(.is-done, .is-current)::before { background: var(--primary); }
.step-dot { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
    background: var(--card); box-shadow: inset 0 0 0 2px var(--outline-variant); color: var(--on-primary); }
.is-done .step-dot { background: var(--primary); box-shadow: none; }
.is-current .step-dot { box-shadow: inset 0 0 0 2px var(--primary), 0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent); }
.is-current .step-dot::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); }
.step-label { font-size: var(--typo-label-lg); color: var(--on-surface-variant); }
.order-steps :is(.is-done, .is-current) .step-label { color: var(--on-surface); }
.is-current .step-label { font-weight: 700; }
.step-time { font-size: var(--typo-body-sm); color: var(--on-surface-variant); font-variant-numeric: tabular-nums; }

.next-step { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-3) var(--space-4); border-radius: var(--shape-md); background: var(--surface-container); }
.next-step.is-done { background: var(--st-success-bg); color: var(--st-success-fg); }
.next-text { flex: 1 1 280px; }
.next-text p { margin: 0; display: flex; gap: var(--space-2); align-items: center; font-size: var(--typo-body-lg); }
.next-text svg { flex: none; width: 18px; height: 18px; }
.next-label { display: block; margin-bottom: 2px; font-size: var(--typo-label-md); font-weight: 600; color: var(--primary); }
.next-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* More actions: the moves that aren't the next step, in a .menu panel. */
.order-more { position: relative; }
.order-more > summary { list-style: none; cursor: pointer; }
.order-more > summary::-webkit-details-marker { display: none; }
.order-more > summary svg { width: 18px; height: 18px; }
.order-more .menu-item.danger { color: var(--error); }
.order-more .menu-item:not(.danger) + .danger { border-top: 1px solid var(--outline-variant); }

.order-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.order-main, .order-side { display: grid; gap: var(--space-4); }
.order-layout .card h3, .customer-page .card h3 { margin: 0 0 var(--space-3); font-size: var(--typo-title-sm); }
.order-layout .card p { margin: 4px 0; }
.order-items-table .num, .order-totals dd { text-align: end; font-variant-numeric: tabular-nums; }
.order-totals { margin: var(--space-3) 0 0; display: grid; gap: 4px; }
.order-totals div { display: flex; justify-content: space-between; }
.order-totals dd { margin: 0; }
.order-totals .grand { font-weight: 600; border-top: 1px solid var(--outline-variant); padding-top: var(--space-2); }

/* One customer: the order page's single column, with four figures on top. */
.customer-page { display: grid; gap: var(--space-4); }
/* Customers → Messages (inbox.js): one card per message, unread ones marked. */
.messages { display: grid; gap: var(--space-3); }
.message { display: grid; gap: var(--space-2); }
.message.is-unread { border-inline-start: 3px solid var(--primary); }
.message-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.message h4 { margin: 0; font-size: var(--typo-title-sm); }
.message-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.message-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.customer-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-2); }
.customer-stats dt { color: var(--on-surface-variant); font-size: var(--typo-body-sm); }
.customer-stats dd { margin: 0; font-size: var(--typo-title-md); font-weight: 600; font-variant-numeric: tabular-nums; }

.note-form { display: flex; gap: var(--space-2); align-items: flex-end; margin-bottom: var(--space-3); }
.note-form .field { flex: 1; margin: 0; }
.note-form .btn { white-space: nowrap; }
/* The timeline: a dated rail, newest first. Each dot takes its event's tone;
   a note is a hollow dot over its text in a bubble. */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline-day { padding: var(--space-2) 0 var(--space-2); font-size: var(--typo-label-md); font-weight: 600; color: var(--on-surface-variant); }
.timeline-item { position: relative; display: grid; gap: 2px; padding-bottom: var(--space-3); padding-inline-start: 28px; }
.timeline-item::before { content: ''; position: absolute; z-index: 1; inset-inline-start: 4px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--outline); }
.timeline-item::after { content: ''; position: absolute; inset-inline-start: 8px; top: 16px; bottom: -6px; width: 2px; background: var(--outline-variant); }
.timeline-item:last-child::after { display: none; }
.timeline-item.tone-ok::before { background: var(--success); }
.timeline-item.tone-info::before { background: var(--info); }
.timeline-item.tone-warn::before { background: var(--warning); }
.timeline-item.tone-danger::before { background: var(--error); }
.timeline-item.tone-note::before { background: var(--card); box-shadow: inset 0 0 0 2px var(--outline); }
.timeline-item.tone-note .timeline-text { white-space: pre-wrap; background: var(--surface-container); border-radius: var(--shape-sm); padding: var(--space-2) var(--space-3); }

/* One column: who and where come before what was bought, the timeline last. */
@media (max-width: 991px) {
    .order-layout { grid-template-columns: minmax(0, 1fr); }
    .order-main, .order-side { display: contents; }
    .order-customer { order: 1; }
    .order-address { order: 2; }
    .order-items { order: 3; }
    .order-payment { order: 4; }
    .order-timeline { order: 5; }
}
/* Quantity and unit price under the item's name, shown on a phone only. */
.order-item-unit { display: none; }
/* Phone: the next step's buttons stack full width. The items keep every value:
   quantity and unit price move under the name as "2 × 890.00 EGP", so the
   name and the line total fit without breaking the amounts. */
@media (max-width: 640px) {
    .next-step { padding: var(--space-3); }
    .next-actions { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
    .order-more > summary { width: 100%; justify-content: center; }
    .order-more .menu { inset-inline: 0; }
    .order-items-table :is(th, td):is(:nth-child(2), :nth-child(3)) { display: none; }
    .order-item-unit { display: block; }
    .order-items-table .num { white-space: nowrap; }
}

/* Print: the order alone, as a packing slip or invoice. */
@media print {
    .topbar, .side-rail, .bottom-nav, .demo-banner, .back-link, .order-actions, .order-progress, .order-print, .note-form,
    #toast-container { display: none !important; }
    .order-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
    .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
}