/* sailing-manager: entries.css */

:root {
    --sm-entries-primary:  #0073aa;
    --sm-entries-border:   #ddd;
    --sm-entries-bg:       #fff;
    --sm-entries-hover:    #f9f9f9;
    --sm-entries-confirmed:       #e8f5e9;
    --sm-entries-payment-pending: #fff8e1;
    --sm-entries-docs-review:     #e3f2fd;
    --sm-entries-pending:         #fafafa;
    --sm-entries-waitlist:        #f3e5f5;
}

/* =========================================================================
   Wrap
   ========================================================================= */

.sm-entries-wrap {
    overflow-x: auto;
    margin: 16px 0;
    font-family: inherit;
}

.sm-entries-empty {
    color: #888;
    font-style: italic;
}

/* =========================================================================
   Table
   ========================================================================= */

.sm-entries-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
    background: var(--sm-entries-bg);
    border: 1px solid var(--sm-entries-border);
    border-radius: 6px;
    overflow: hidden;
}

.sm-entries-table thead tr {
    background: #f5f5f5;
}

.sm-entries-table th {
    padding: 10px 12px;
    text-align: left;
    font-weight: 700;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #555;
    border-bottom: 2px solid var(--sm-entries-border);
    white-space: nowrap;
}

.sm-entries-th--num {
    width: 40px;
    text-align: center;
}

.sm-entries-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--sm-entries-border);
    vertical-align: middle;
}

.sm-entries-table tbody tr:last-child td {
    border-bottom: none;
}

.sm-entries-table tbody tr:hover {
    background: var(--sm-entries-hover);
}

.sm-entries-td--num {
    text-align: center;
    color: #888;
    font-weight: 600;
    font-size: .88rem;
}

.sm-entries-td--sail {
    font-weight: 600;
    white-space: nowrap;
}

/* =========================================================================
   Row status colours
   ========================================================================= */

.sm-entries-row--confirmed {
    background: var(--sm-entries-confirmed);
}

.sm-entries-row--confirmed:hover {
    background: #dcedc8;
}

.sm-entries-row--payment_pending {
    background: var(--sm-entries-payment-pending);
}

.sm-entries-row--payment_pending:hover {
    background: #fff3cd;
}

.sm-entries-row--docs_review {
    background: var(--sm-entries-docs-review);
}

.sm-entries-row--docs_review:hover {
    background: #bbdefb;
}

.sm-entries-row--waitlist {
    background: var(--sm-entries-waitlist);
}

.sm-entries-row--waitlist:hover {
    background: #e1bee7;
}

/* =========================================================================
   Flag
   ========================================================================= */

.sm-entries-flag {
    font-size: 1.15em;
    vertical-align: middle;
    line-height: 1;
}

/* =========================================================================
   Status badges
   ========================================================================= */

.sm-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}

.sm-badge--confirmed {
    background: #c8e6c9;
    color: #1b5e20;
}

.sm-badge--payment_pending {
    background: #fff9c4;
    color: #f57f17;
}

.sm-badge--docs_review {
    background: #bbdefb;
    color: #0d47a1;
}

.sm-badge--pending {
    background: #f5f5f5;
    color: #555;
    border: 1px solid #ddd;
}

.sm-badge--waitlist {
    background: #e1bee7;
    color: #6a1b9a;
}

.sm-badge--rejected {
    background: #ffcdd2;
    color: #b71c1c;
}

.sm-badge--cancelled {
    background: #eceff1;
    color: #607d8b;
}

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 640px) {
    .sm-entries-table th,
    .sm-entries-table td {
        padding: 7px 8px;
        font-size: .88rem;
    }

    /* Hide crew column on small screens */
    .sm-entries-table th:nth-child(5),
    .sm-entries-table td:nth-child(5) {
        display: none;
    }
}