/**
 * INZC Report Modal
 *
 * Styles for the reusable report component:
 *   - Gear icon trigger on message bubbles
 *   - Gear dropdown (single "Report" action)
 *   - Report modal body content (preview block, form fields)
 *
 * The modal overlay / dialog chrome is handled by inzc-modals.css.
 * This file only covers report-specific interior styles.
 *
 * @package    Micro-Influencer Marketplace
 * @subpackage Components CSS
 * @version    1.0.0
 */

/* ========================================
   1. GEAR ICON WRAPPER
   ======================================== */

/* Position wrapper as flex sibling of .inzc-message-content */
.inzc-message-gear-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    align-self: center;
    flex-shrink: 0;
}

/* ========================================
   2. GEAR ICON BUTTON
   ======================================== */

.inzc-message-gear-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--inzc-radius-sm);
    color: var(--inzc-text-tertiary);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--inzc-transition-fast),
        background-color var(--inzc-transition-fast),
        color var(--inzc-transition-fast);
}

/* Show on hover of the parent message item */
.inzc-message-item:hover .inzc-message-gear-btn,
.inzc-message-item:focus-within .inzc-message-gear-btn {
    opacity: 1;
}

/* Keep visible when the dropdown is open */
.inzc-message-gear-wrapper.inzc-gear-open .inzc-message-gear-btn {
    opacity: 1;
    background-color: var(--inzc-bg-tertiary);
    color: var(--inzc-text-primary);
}

.inzc-message-gear-btn:hover,
.inzc-message-gear-btn:focus-visible {
    opacity: 1;
    background-color: var(--inzc-bg-tertiary);
    color: var(--inzc-text-primary);
    outline: none;
}

/* ========================================
   3. GEAR DROPDOWN
   ======================================== */

.inzc-report-gear-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 140px;
    background-color: var(--inzc-bg-primary);
    border: 1px solid var(--inzc-border-light);
    border-radius: var(--inzc-radius-md);
    box-shadow: var(--inzc-shadow-lg);
    z-index: var(--inzc-z-dropdown);
    overflow: hidden;
}

/* Received messages: align dropdown to the left of the gear button */
.inzc-message-received .inzc-report-gear-dropdown {
    right: auto;
    left: 0;
}

.inzc-report-gear-dropdown[hidden] {
    display: none;
}

.inzc-report-gear-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-2);
    width: 100%;
    padding: var(--inzc-spacing-2) var(--inzc-spacing-3);
    border: none;
    background: none;
    font-size: var(--inzc-font-size-sm);
    color: var(--inzc-danger);
    cursor: pointer;
    text-align: left;
    transition: background-color var(--inzc-transition-fast);
    white-space: nowrap;
}

.inzc-report-gear-dropdown-item:hover {
    background-color: var(--inzc-danger-lighter);
}

/* ========================================
   4. REPORT MODAL – PREVIEW SECTION
   ======================================== */

.inzc-report-preview-section {
    margin-bottom: var(--inzc-spacing-4);
}

.inzc-report-preview-label {
    font-size: var(--inzc-font-size-sm);
    color: var(--inzc-text-secondary);
    margin-top: 0;
    margin-bottom: var(--inzc-spacing-2);
}

.inzc-report-preview-block {
    background-color: var(--inzc-bg-secondary);
    border: 1px solid var(--inzc-border-light);
    border-left: 3px solid var(--inzc-danger);
    border-radius: var(--inzc-radius-md);
    padding: var(--inzc-spacing-3);
    font-size: var(--inzc-font-size-sm);
    color: var(--inzc-text-primary);
    max-height: 80px;
    overflow: hidden;
    white-space: pre-wrap;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* ========================================
   5. CHAR COUNTER
   ======================================== */

.inzc-report-char-count {
    display: block;
    text-align: right;
    font-size: var(--inzc-font-size-xs);
    color: var(--inzc-text-tertiary);
    margin-top: var(--inzc-spacing-1);
}

/* ========================================
   6. SUBMIT BUTTON STATE
   ======================================== */

#reportSubmitBtn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ========================================
   6b. FIELD ERROR STATE (used by JS validation)
   ======================================== */

/* Applied transiently (2 s) when a required field is empty on submit */
#reportModal .inzc-input-error,
#reportModal .inzc-input-error:focus {
    border-color: var(--inzc-danger) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
    outline: none;
}

/* ========================================
   7. GLASS REPORT BUTTON (campaign-details)
   ======================================== */

/* Follows same spacing convention as save+share */
.inzc-btn-glass-save+.inzc-btn-glass-report,
.inzc-btn-glass+.inzc-btn-glass-report {
    margin-left: var(--inzc-spacing-3);
}

/* Subtle danger tint on hover */
.inzc-btn-glass-report:hover {
    background: var(--inzc-danger-lighter);
    border-color: var(--inzc-danger-light);
    color: var(--inzc-danger);
}

/* ========================================
   8. DARK MODE OVERRIDES
   ======================================== */

[data-inzc-theme="dark"] .inzc-report-gear-dropdown {
    background-color: var(--inzc-bg-primary);
    border-color: var(--inzc-border-light);
}

[data-inzc-theme="dark"] .inzc-report-gear-dropdown-item:hover {
    background-color: rgba(239, 68, 68, 0.15);
}

[data-inzc-theme="dark"] .inzc-report-preview-block {
    background-color: var(--inzc-bg-secondary);
}

/* ========================================
   9. PROFILE CORNER ACTIONS
   ======================================== */

/* Absolute cluster in the top-right of profile header cards.
   display is set to inline-flex by .inzc-brand-only / .inzc-influencer-only
   rules in inzc-dashboard-layout.css — this block only sets position + alignment. */
.inzc-profile-corner-btns {
    position: absolute;
    top: var(--inzc-spacing-4);
    right: var(--inzc-spacing-4);
    align-items: center;
    gap: var(--inzc-spacing-2);
}

/* Bookmark lives inside the corner wrapper — override its standalone absolute positioning. */
.inzc-profile-corner-btns .inzc-btn-bookmark-profile {
    position: static;
    display: flex;
}

/* Three-dot menu wrapper: relative so dropdown can anchor to it */
.inzc-profile-menu-wrapper {
    position: relative;
}

/* Three-dot trigger — bare icon, no visual button chrome */
.inzc-profile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    color: var(--inzc-text-tertiary);
    cursor: pointer;
    transition: color var(--inzc-transition-fast);
}

.inzc-profile-menu-btn:hover {
    color: var(--inzc-text-secondary);
}

/* Dropdown opens below aligned to the right edge of the three-dot button */
.inzc-profile-menu-wrapper .inzc-report-gear-dropdown {
    right: 0;
    left: auto;
}

[data-inzc-theme="dark"] .inzc-profile-menu-btn {
    color: var(--inzc-text-tertiary);
}

[data-inzc-theme="dark"] .inzc-profile-menu-btn:hover {
    color: var(--inzc-text-secondary);
}