/* Tailored Social Moderation - Front End */

/* ---- Buttons ---- */
.tsm-btn {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #fff;
    color: #333;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.4;
    transition: background 0.2s, color 0.2s;
}
.tsm-btn-report  { border-color: #e05252; color: #e05252; }
.tsm-btn-report:hover { background: #e05252; color: #fff; }
.tsm-btn-block   { border-color: #d08000; color: #d08000; }
.tsm-btn-block:hover  { background: #d08000; color: #fff; }
.tsm-btn-unblock { border-color: #888; color: #888; }
.tsm-btn-cancel  { border-color: #aaa; color: #555; }
.tsm-btn-upload  { background: #1a73e8; border-color: #1a73e8; color: #fff; font-weight: 600; padding: 8px 18px; }
.tsm-btn-upload:hover { background: #1558b0; border-color: #1558b0; color: #fff; }

/* ---- Report/Block wrap ---- */
.tsm-report-wrap {
    display: inline-block;
    position: relative;
    margin-left: 8px;
}

/* ---- Modal ---- */
.tsm-modal {
    position: absolute;
    z-index: 9999;
    top: 36px;
    left: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    padding: 16px;
    min-width: 280px;
}
.tsm-modal h3 { margin: 0 0 12px; font-size: 15px; }
.tsm-modal select,
.tsm-modal textarea {
    width: 100%;
    margin-bottom: 10px;
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
}
.tsm-modal-actions {
    display: flex;
    gap: 8px;
}
.tsm-report-feedback {
    margin-top: 8px;
    font-size: 13px;
    color: #2a7a2a;
}
.tsm-report-feedback.error { color: #c00; }

/* ---- Badges ---- */
.tsm-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 4px;
}
.tsm-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #fff;
}
.tsm-badge-id_verified         { background: #1a73e8; }
.tsm-badge-dbs_verified        { background: #188038; }
.tsm-badge-insurance_confirmed { background: #e37400; }
.tsm-badge-refs_confirmed      { background: #7c4dff; }

/* ---- Upload form ---- */
.tsm-upload-form { max-width: 600px; }

.tsm-upload-tip {
    background: #f0f4ff;
    border-left: 3px solid #1a73e8;
    padding: 10px 14px;
    border-radius: 0 4px 4px 0;
    font-size: 13px;
    color: #333;
    margin-bottom: 20px;
}

/* Progress bar */
.tsm-progress-wrap {
    margin-bottom: 24px;
}
.tsm-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}
.tsm-progress-pct { color: #1a73e8; }
.tsm-progress-bar {
    width: 100%;
    height: 10px;
    background: #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
}
.tsm-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #1a73e8, #34a853);
    border-radius: 10px;
    transition: width 0.4s ease;
    min-width: 4px;
}
.tsm-progress-note {
    font-size: 12px;
    color: #856404;
    margin: 6px 0 0;
}

.tsm-upload-section {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 16px;
}
.tsm-upload-section h4 { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tsm-section-desc {
    font-size: 13px;
    color: #555;
    margin: 0 0 14px;
    line-height: 1.6;
}
.tsm-optional { font-size: 12px; color: #888; font-weight: normal; font-style: normal; }
.tsm-upload-section input[type="file"],
.tsm-upload-section input[type="date"],
.tsm-upload-section textarea,
.tsm-upload-section select {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
}
.tsm-badge-status { font-size: 12px; font-weight: normal; padding: 2px 8px; border-radius: 10px; }
.tsm-badge-status.approved { background: #d4edda; color: #155724; }
.tsm-badge-status.pending  { background: #fff3cd; color: #856404; }
.tsm-upload-feedback { margin-top: 10px; color: #2a7a2a; font-size: 13px; }
.tsm-upload-feedback.error { color: #c00; }