/**
 * BoxCart — Today Dashboard Widget
 *
 * Loaded ONLY on the WP Dashboard screen (index.php). Self-contained — does
 * not depend on boxcart-admin.css being loaded, because the main admin CSS
 * is gated to BoxCart pages only.
 *
 * @package BoxCart
 */

/* ==========================================================================
   Tokens (scoped to widget — duplicated from boxcart-admin.css so this file
   is standalone and doesn't pull in the whole admin stylesheet on every
   WP Dashboard load).
   ========================================================================== */

.boxcart-dashwidget {
    --bcw-primary: #2D7D5F;
    --bcw-primary-light: #E8F5F0;
    --bcw-primary-dark: #1B4D3A;
    --bcw-text: #1E1E1E;
    --bcw-text-muted: #50575E;
    --bcw-text-faint: #787C82;
    --bcw-border: #DCDCDE;
    --bcw-border-light: #F0F0F1;
    --bcw-bg-soft: #F6F7F7;

    --bcw-warning: #C4922E;
    --bcw-warning-light: #FEF8E8;
    --bcw-info: #4B7CC4;
    --bcw-info-light: #EDF3FD;
    --bcw-success: #3D8B6E;
    --bcw-success-light: #E8F5F0;
    --bcw-neutral: #50575E;
    --bcw-neutral-light: #F0F0F1;

    --bcw-radius-sm: 3px;
    --bcw-radius-md: 6px;
    --bcw-radius-pill: 9999px;

    --bcw-space-1: 4px;
    --bcw-space-2: 8px;
    --bcw-space-3: 12px;
    --bcw-space-4: 16px;

    color: var(--bcw-text);
    font-size: 13px;
    line-height: 1.45;
}

/* WP wraps widget output in an outer div with .inside padding — we don't
   need extra padding ourselves, but we DO want to extend a touch to the
   inside container's edges for the headline strip. */

/* ==========================================================================
   Headline strip
   ========================================================================== */

.boxcart-dashwidget__headline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bcw-space-3) var(--bcw-space-4);
    padding: var(--bcw-space-3) var(--bcw-space-4);
    background: var(--bcw-primary-light);
    border-radius: var(--bcw-radius-md);
    margin-bottom: var(--bcw-space-4);
}

/* Each stat grows to fill, but wraps to its own line once it can no longer
   keep a sensible minimum width. This keeps the headline readable in the
   narrow dashboard column without any fixed-column overflow. */
.boxcart-dashwidget__stat {
    display: flex;
    flex-direction: column;
    flex: 1 1 90px;
    min-width: 0;
}

.boxcart-dashwidget__stat-value {
    font-size: 20px;
    font-weight: 600;
    color: var(--bcw-primary-dark);
    line-height: 1.1;
    white-space: nowrap;
}

.boxcart-dashwidget__stat-value .boxcart-price {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

/* "inc. VAT" after the revenue figure: small, so the number leads. */
.boxcart-dashwidget__stat-suffix {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.7;
}

.boxcart-dashwidget__stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--bcw-primary-dark);
    opacity: 0.7;
    margin-top: 2px;
    line-height: 1.3;
}

/* ==========================================================================
   Today's collection list
   ========================================================================== */

.boxcart-dashwidget__list {
    list-style: none;
    margin: 0 0 var(--bcw-space-4) 0;
    padding: 0;
}

.boxcart-dashwidget__item {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--bcw-border-light);
}

.boxcart-dashwidget__item:last-child {
    border-bottom: none;
}

/* Two-line row: time + status on top, customer + item count below. This fits
   the narrow dashboard column at any width with no column overflow. */
.boxcart-dashwidget__item-link {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "time badge"
        "name items";
    align-items: center;
    column-gap: var(--bcw-space-3);
    row-gap: 2px;
    padding: var(--bcw-space-3) var(--bcw-space-1);
    text-decoration: none;
    color: var(--bcw-text);
    border-radius: var(--bcw-radius-sm);
    transition: background 120ms ease;
}

.boxcart-dashwidget__item-link:hover,
.boxcart-dashwidget__item-link:focus {
    background: var(--bcw-bg-soft);
    color: var(--bcw-text);
    box-shadow: none;
    outline: none;
}

.boxcart-dashwidget__item-link:focus-visible {
    outline: 2px solid var(--bcw-primary);
    outline-offset: 1px;
}

.boxcart-dashwidget__time {
    grid-area: time;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 13px;
    color: var(--bcw-text);
    white-space: nowrap;
}

.boxcart-dashwidget__name {
    grid-area: name;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.boxcart-dashwidget__items {
    grid-area: items;
    justify-self: end;
    font-size: 12px;
    color: var(--bcw-text-muted);
    white-space: nowrap;
}

/* ==========================================================================
   Status badge (per-row)
   ========================================================================== */

.boxcart-dashwidget__badge {
    grid-area: badge;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--bcw-radius-pill);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    background: var(--bcw-neutral-light);
    color: var(--bcw-neutral);
}

.boxcart-dashwidget__badge--pending {
    background: var(--bcw-warning-light);
    color: var(--bcw-warning);
}

.boxcart-dashwidget__badge--processing {
    background: var(--bcw-info-light);
    color: var(--bcw-info);
}

.boxcart-dashwidget__badge--ready {
    background: var(--bcw-primary-light);
    color: var(--bcw-primary);
}

.boxcart-dashwidget__badge--completed {
    background: var(--bcw-neutral-light);
    color: var(--bcw-text-muted);
}

/* ==========================================================================
   Empty state (no collections today)
   ========================================================================== */

.boxcart-dashwidget__empty {
    text-align: center;
    padding: var(--bcw-space-4) var(--bcw-space-3);
    margin-bottom: var(--bcw-space-4);
    background: var(--bcw-bg-soft);
    border-radius: var(--bcw-radius-md);
}

.boxcart-dashwidget__empty-emoji {
    font-size: 28px;
    line-height: 1;
    display: block;
    margin-bottom: var(--bcw-space-2);
}

.boxcart-dashwidget__empty-text {
    margin: 0;
    color: var(--bcw-text-muted);
    font-size: 13px;
}

/* ==========================================================================
   Footer (week summary + view-all link)
   ========================================================================== */

.boxcart-dashwidget__footer {
    border-top: 1px solid var(--bcw-border-light);
    padding-top: var(--bcw-space-3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--bcw-space-2);
}

.boxcart-dashwidget__week {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--bcw-space-2);
    min-width: 0;
}

.boxcart-dashwidget__week-summary {
    font-size: 12px;
    color: var(--bcw-text-muted);
    font-weight: 500;
}

.boxcart-dashwidget__pills {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.boxcart-dashwidget__pill {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: var(--bcw-radius-pill);
    font-size: 11px;
    font-weight: 500;
    background: var(--bcw-neutral-light);
    color: var(--bcw-text-muted);
    white-space: nowrap;
}

.boxcart-dashwidget__pill--pending {
    background: var(--bcw-warning-light);
    color: var(--bcw-warning);
}

.boxcart-dashwidget__pill--ready {
    background: var(--bcw-primary-light);
    color: var(--bcw-primary);
}

.boxcart-dashwidget__pill--completed {
    background: var(--bcw-neutral-light);
    color: var(--bcw-text-muted);
}

.boxcart-dashwidget__view-all {
    font-size: 12px;
    font-weight: 600;
    color: var(--bcw-primary);
    text-decoration: none;
    white-space: nowrap;
}

.boxcart-dashwidget__view-all:hover,
.boxcart-dashwidget__view-all:focus {
    color: var(--bcw-primary-dark);
    text-decoration: underline;
}

/* ==========================================================================
   First-run state (zero orders ever)
   ========================================================================== */

.boxcart-dashwidget__firstrun {
    text-align: center;
    padding: var(--bcw-space-4) var(--bcw-space-3) var(--bcw-space-3);
}

.boxcart-dashwidget__firstrun-emoji {
    font-size: 36px;
    line-height: 1;
    display: block;
    margin-bottom: var(--bcw-space-3);
}

.boxcart-dashwidget__firstrun-title {
    margin: 0 0 var(--bcw-space-2) 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--bcw-text);
}

.boxcart-dashwidget__firstrun-text {
    margin: 0 0 var(--bcw-space-3) 0;
    color: var(--bcw-text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.boxcart-dashwidget__firstrun-links {
    margin: 0;
    font-size: 12px;
    color: var(--bcw-text-faint);
}

.boxcart-dashwidget__firstrun-links a {
    color: var(--bcw-primary);
    text-decoration: none;
    font-weight: 500;
}

.boxcart-dashwidget__firstrun-links a:hover,
.boxcart-dashwidget__firstrun-links a:focus {
    color: var(--bcw-primary-dark);
    text-decoration: underline;
}

/* ==========================================================================
   Responsive
   The headline (flex-wrap) and the rows (two-line grid areas) are fluid and
   reflow at any container width, so the dashboard widget reads cleanly whether
   it sits in the wide or narrow dashboard column. No fixed-column breakpoints
   are needed. The footer just stacks if it runs out of room.
   ========================================================================== */

@media (max-width: 480px) {
    .boxcart-dashwidget__footer {
        flex-direction: column;
        align-items: stretch;
    }
}