/* ===========================================
   app-tabs.css
   Tab Cards Container, Order Cards, Tab Date Separators,
   and Refresh Button Animation
   Split from app.css for maintainability.
   =========================================== */

/* ============================================
   Tab Cards Container - for Receipts/Shipments/Requests tabs
   Uses page's outer scrollbar (no internal scroll)
   ============================================ */
.tab-cards-container {
    display: block;
    padding-bottom: 1rem;
}

/* Cards inside the container need spacing */
.tab-cards-container > *:not(:last-child) {
    margin-bottom: 1rem;
}

/* ============================================
   Order Cards - By Order tab in TaskProject
   ============================================ */
.order-card .card-header {
    padding-bottom: 0.5rem;
}

.order-card-progress .progress {
    height: 8px;
}

/* ============================================
   Tab Date Separators - Timeline feel for cards
   ============================================ */
.tab-date-separator {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 1rem 0 0.75rem 0;
}

.tab-date-separator:first-child {
    margin-top: 0.25rem;
}

.tab-date-separator::before,
.tab-date-separator::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--fd-border-default);
}

.tab-date-separator::before {
    margin-right: 0.75rem;
}

.tab-date-separator::after {
    margin-left: 0.75rem;
}

.tab-date-text {
    background: var(--fd-gray-100);
    color: var(--fd-text-muted);
    padding: 0.2rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ============================================
   Refresh Button Animation
   ============================================ */
.spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}