/* FM HelpDesk — site styles */

/* ── Status badges: animated shimmer + uniform width ─────────────────────── */

/* Shimmer animation — defined once, shared by every animated status badge. */
@keyframes fm-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

/* Uniform width helper — fixed (not min-) width so every status badge is the
   same size regardless of label length; longer labels clip with an ellipsis.
   "Waiting for User" is the longest label, so the width is set to fit it. */
.fm-badge-wide {
    width: 130px;
    display: inline-block;
    text-align: center;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Per-status colour: 5-stop dark→mid→light→mid→dark gradient at 200% size,
   slid horizontally by fm-shimmer. Each rule changes only the five hex stops
   and the text colour. !important overrides Bootstrap's .badge defaults. */
.fm-badge-open             { background: linear-gradient(90deg, #145a30, #1a6e3c, #6fcf97, #1a6e3c, #145a30) !important; background-size: 200% auto !important; animation: fm-shimmer 2.5s linear infinite !important; color: #fff !important; }
.fm-badge-in-progress      { background: linear-gradient(90deg, #013B7D, #1E4E79, #6a9fc0, #1E4E79, #013B7D) !important; background-size: 200% auto !important; animation: fm-shimmer 2.5s linear infinite !important; color: #fff !important; }
.fm-badge-paused           { background: linear-gradient(90deg, #4b2e83, #6f42c1, #b79fe6, #6f42c1, #4b2e83) !important; background-size: 200% auto !important; animation: fm-shimmer 2.5s linear infinite !important; color: #fff !important; }
.fm-badge-waiting-for-user { background: linear-gradient(90deg, #c06a1a, #F28C28, #f9c98a, #F28C28, #c06a1a) !important; background-size: 200% auto !important; animation: fm-shimmer 2.5s linear infinite !important; color: #212529 !important; }
.fm-badge-resolved         { background: linear-gradient(90deg, #0f6e4f, #14a06f, #7fe3c3, #14a06f, #0f6e4f) !important; background-size: 200% auto !important; animation: fm-shimmer 2.5s linear infinite !important; color: #fff !important; }
/* closed is terminal/inert — flat grey, no animation. */
.fm-badge-closed           { background-color: #6c757d !important; color: #fff !important; }

/* Comment thread */
.fmhd-comment-public {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 12px 16px;
    border-radius: 6px;
}

/* Description block */
.fmhd-description { white-space: pre-wrap; line-height: 1.6; }

/* Image uploader / dropzone */
.fmhd-dropzone {
    border: 2px dashed #dee2e6;
    border-radius: 6px;
    padding: 1.5rem;
    text-align: center;
    color: #6c757d;
    cursor: pointer;
    transition: border-color .2s, background-color .2s;
}
.fmhd-dropzone:hover,
.fmhd-dropzone.fmhd-drag-over {
    border-color: #0d6efd;
    background-color: #f0f5ff;
}

/* Upload preview tiles */
.fmhd-img-preview {
    position: relative;
    width: 120px;
    height: 90px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #dee2e6;
}
.fmhd-img-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fmhd-img-spinner {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}
.fmhd-img-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    background: rgba(0,0,0,.6);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fmhd-img-remove:hover { background: rgba(200,0,0,.8); }

/* Ticket image gallery (detail view) */
.fmhd-ticket-thumb {
    width: 120px;
    height: 90px;
    object-fit: cover;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    display: block;
}