/* Visit queue — shared styles for local visit list component */

.vq-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: #f8f9fa;
}
.vq-header-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color, #2c5530);
}
.vq-header-count {
    font-size: 13px;
    color: var(--text-secondary, #5a6c7d);
}
.vq-upload-all {
    font-size: 14px;
    padding: 8px 16px;
    border: 1px solid var(--primary-color, #2c5530);
    border-radius: 6px;
    background: var(--primary-color, #2c5530);
    color: white;
    cursor: pointer;
    min-height: 44px;
}

.vq-list {
    padding: 0 8px 4px;
}

/*
    Visit item — flex-wrap layout. Info and buttons share one row when
    there's room; buttons wrap below naturally when there isn't.
    No media query needed — flex-wrap handles all widths.
*/
.vq-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    gap: 8px;
}
.vq-item:last-child { border-bottom: none; }

.vq-item.vq-compact { padding: 6px 0; }

/* Info section — grows to fill, sets a min-width so buttons wrap before text crushes */
.vq-info {
    flex: 1 1 150px;
    min-width: 0;
}
.vq-info .vq-pool {
    font-weight: 600;
}
.vq-info .vq-date {
    font-size: 13px;
    color: var(--text-secondary, #5a6c7d);
}

/* Status badge — inline with info */
.vq-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    margin-right: 6px;
}
.vq-status-draft    { background: #fff3e0; color: #e65100; }
.vq-status-complete { background: #e3f2fd; color: #1565c0; }
.vq-status-uploaded { background: #e8f5e9; color: #2e7d32; }
.vq-status-edited   { background: #fff8e1; color: #b86d00; }

/* Action buttons — won't shrink, wrap to next line when needed */
.vq-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    align-items: center;
    margin-left: auto;
}

.vq-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    min-width: 48px;
    min-height: 48px;
    padding: 8px 14px;
    border: 1px solid var(--primary-color, #2c5530);
    border-radius: 6px;
    background: white;
    color: var(--primary-color, #2c5530);
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
}
.vq-btn:active { background: var(--primary-light, #e8f5e9); }
.vq-btn.vq-upload { background: var(--primary-color, #2c5530); color: white; }
.vq-btn.vq-delete { border-color: var(--danger-color, #e74c3c); color: var(--danger-color, #e74c3c); }
.vq-btn.vq-delete:active { background: var(--danger-color, #e74c3c); color: white; }

/* Sync status messages */
.vq-status-msg {
    padding: 8px 12px;
    font-size: 13px;
    border-radius: 4px;
    margin: 4px 8px;
}
.vq-msg-success { background: #e8f5e9; color: #2e7d32; }
.vq-msg-info    { background: #e3f2fd; color: #1565c0; }
.vq-msg-warning { background: #fff3e0; color: #e65100; }
.vq-msg-error   { background: #fbe9e7; color: #c62828; }
.vq-status-msg i { margin-right: 6px; }