/* Salmon Color Utilities */
:root {
    --salmon: #FA8072;
    --salmon-dark: #E9695A;
    --salmon-light: #FFA49A;
}

.page-title{
    padding: 0px !important;;
}

/* Text */
.text-salmon { color: #FA8072 !important; }
.text-salmon-dark { color: #E9695A !important; }

/* Background */
.bg-salmon { background-color: #FA8072 !important; }
.bg-salmon-light { background-color: #FFA49A !important; }

/* Buttons */
.btn-salmon {
    color: #fff;
    background-color: #FA8072;
    border-color: #FA8072;
}
.btn-salmon:hover,
.btn-salmon:focus {
    color: #fff;
    background-color: #E9695A;
    border-color: #E9695A;
}
.btn-salmon:active,
.btn-salmon.active {
    color: #fff;
    background-color: #D85A4B;
    border-color: #D85A4B;
}
.btn-salmon:disabled,
.btn-salmon.disabled {
    color: #fff;
    background-color: #FA8072;
    border-color: #FA8072;
    opacity: 0.65;
}

/* Outline Button */
.btn-outline-salmon {
    color: #FA8072;
    border-color: #FA8072;
    background-color: transparent;
}
.btn-outline-salmon:hover,
.btn-outline-salmon:focus {
    color: #fff;
    background-color: #FA8072;
    border-color: #FA8072;
}
.btn-outline-salmon:active,
.btn-outline-salmon.active {
    color: #fff;
    background-color: #E9695A;
    border-color: #E9695A;
}

/* Badge */
.badge-salmon {
    color: #fff;
    background-color: #FA8072;
}
.badge-salmon[href]:hover,
.badge-salmon[href]:focus {
    color: #fff;
    background-color: #E9695A;
}

/* Alert */
.alert-salmon {
    color: #7D302A;
    background-color: #FEE5E2;
    border-color: #FDD9D5;
}
.alert-salmon .alert-link {
    color: #5C231F;
}

/* Border */
.border-salmon { border-color: #FA8072 !important; }

.border-light{
    border-color: #aaa !important;
}

/* File manager layout: a card whose body is constrained to the viewport so
   only the file list scrolls. The toolbar sticks to the top of that scroll. */
.fm-card-body { padding: 0; }

/* Create-Map modal: lightweight self-contained overlay (mirrors the Bulk
   Actions modal pattern from image_map_pro_editor.tpl). We deliberately
   do NOT use Bootstrap's .modal / .modal-backdrop classes -- the admin
   theme renders those as a fully-opaque black overlay, which is jarring.
   The translucent backdrop here matches the rest of the admin's modals. */
.fm-modal-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.55);
    z-index: 100000; display: none;
}
.fm-modal-backdrop.show { display: flex; align-items: center; justify-content: center; }
.fm-modal {
    background: #fff; border-radius: 6px; box-shadow: 0 8px 28px rgba(0,0,0,0.3);
    width: 640px; max-width: 90vw; max-height: 80vh; display: flex; flex-direction: column;
    overflow: hidden;
}
.fm-modal-header {
    padding: 12px 16px; border-bottom: 1px solid #eef0f2;
    display: flex; align-items: center; justify-content: space-between;
    background: #f8f9fa; font-weight: 600;
}
.fm-modal-close {
    cursor: pointer; padding: 4px 10px; border: 0; background: transparent;
    font-size: 18px; line-height: 1; color: #555;
}
.fm-modal-body {
    padding: 14px 16px; overflow-y: auto; flex: 1; font-size: 13px; line-height: 1.4;
}
.fm-modal-footer {
    padding: 10px 16px; border-top: 1px solid #eef0f2; background: #fafbfc;
    display: flex; justify-content: flex-end; gap: 6px;
}
.fm-modal-footer button {
    padding: 7px 14px; border-radius: 3px; border: 1px solid #c9ced3; cursor: pointer;
    background: #fff; color: #333; font-size: 13px;
}
.fm-modal-footer button:disabled { opacity: 0.5; cursor: not-allowed; }
.fm-modal-footer button.primary { background: #2c6fbb; color: #fff; border-color: #2c6fbb; }
/* Two-up choice cards inside the body. */
.fm-create-map-choices { display: flex; gap: 12px; flex-wrap: wrap; }
.fm-create-map-choice {
    flex: 1 1 240px; min-width: 220px;
    background: #fff; border: 1px solid #d8dde1; border-radius: 5px;
    padding: 16px; cursor: pointer; text-align: left;
    display: flex; flex-direction: column; gap: 6px;
    font-family: inherit; font-size: 13px; color: #333;
    transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.fm-create-map-choice:hover:not(:disabled) {
    border-color: #2c6fbb; background: #f4f8fd;
    box-shadow: 0 2px 8px rgba(44,111,187,0.10);
}
.fm-create-map-choice:disabled { opacity: 0.55; cursor: not-allowed; }
.fm-create-map-choice .fm-choice-icon { font-size: 22px; color: #2c6fbb; }
.fm-create-map-choice.ai .fm-choice-icon { color: #2a8a2a; }
.fm-create-map-choice .fm-choice-title { font-weight: 600; font-size: 14px; color: #222; }
.fm-create-map-choice .fm-choice-desc { color: #666; font-size: 12px; }
.fm-create-map-status { font-size: 13px; padding: 8px 10px; border-radius: 3px; min-height: 18px; margin-top: 12px; }
.fm-create-map-status.info  { background: #f1f6fc; color: #1a4f8e; }
.fm-create-map-status.error { background: #fbf0f0; color: #7a1f1f; }
.fm-create-map-status.ok    { background: #f1faf1; color: #1f5f1f; }
.fm-scroll {
    max-height: calc(100vh - 280px);
    min-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    /* `position: relative` so the drop overlay (.fm-drop-overlay) can be
       absolutely positioned to cover the scroll viewport when a drag
       enters the file list. */
    position: relative;
}

/* ---- Drag & drop file upload -------------------------------------
   Drop zone == .fm-scroll (the file list area). When a drag enters,
   `.fm-drag-active` is added and the overlay becomes visible. The JS
   tracks dragenter/dragleave with a counter to avoid the overlay
   flickering as the cursor crosses child rows. */
.fm-drop-overlay {
    position: absolute; inset: 0;
    display: none; pointer-events: none;
    background: rgba(44, 111, 187, 0.08);
    border: 2px dashed #2c6fbb;
    border-radius: 4px;
    z-index: 6;
    align-items: center; justify-content: center;
    color: #1a4f8e; font-size: 16px; font-weight: 600;
    text-align: center;
}
.fm-drop-overlay .fm-drop-overlay-msg {
    background: rgba(255,255,255,0.95);
    padding: 14px 22px; border-radius: 6px;
    box-shadow: 0 4px 16px rgba(44,111,187,0.18);
}
.fm-drop-overlay .fm-drop-overlay-msg i { font-size: 22px; margin-right: 6px; }
.fm-drop-overlay .fm-drop-overlay-target {
    display: block; font-size: 12px; font-weight: normal;
    color: #555; margin-top: 4px;
}
.fm-scroll.fm-drag-active .fm-drop-overlay {
    display: flex;
}
/* Per-row highlight: when dragging files over a folder row, that row
   becomes the upload target (blue tinted background + left border).
   Mutually exclusive with the regular .selected highlight in practice
   since drag-over is transient. */
.fm-list tbody tr.fm-drop-target {
    background: #fff7e0 !important;
    box-shadow: inset 4px 0 0 0 #d49314;
}
.fm-toolbar-sticky {
    position: sticky; top: 0; z-index: 5;
    background: #fff;
    padding: 10px 12px;
    border-bottom: 1px solid #e5e7ec;
}
.fm-toolbar-sticky .btn { margin-right: 4px; }

/* Toolbar button affordance: outlined+dimmed when disabled, solid filled
   when enabled. This is the inverse of Bootstrap's default `btn-outline-*`
   behavior (which is just slightly dimmed when disabled), and makes "this
   action is available right now" read at a glance. The non-outline buttons
   in the toolbar (e.g. New Folder, Upload using `btn-primary`) are already
   solid and unaffected by these rules.
   Coverage: every `btn-outline-*` color that the toolbar actually uses
   today (secondary, danger, success, info). Add more if a new color is
   introduced. */
.fm-toolbar-sticky .btn-outline-secondary:not(:disabled),
.fm-toolbar-sticky .btn-outline-secondary:not(:disabled):focus {
    background-color: #6c757d; color: #fff; border-color: #6c757d;
}
.fm-toolbar-sticky .btn-outline-secondary:not(:disabled):hover {
    background-color: #5a6268; border-color: #545b62; color: #fff;
}
.fm-toolbar-sticky .btn-outline-danger:not(:disabled),
.fm-toolbar-sticky .btn-outline-danger:not(:disabled):focus {
    background-color: #b53a3a; color: #fff; border-color: #b53a3a;
}
.fm-toolbar-sticky .btn-outline-danger:not(:disabled):hover {
    background-color: #962e2e; border-color: #962e2e; color: #fff;
}
.fm-toolbar-sticky .btn-outline-success:not(:disabled),
.fm-toolbar-sticky .btn-outline-success:not(:disabled):focus {
    background-color: #2a8a2a; color: #fff; border-color: #2a8a2a;
}
.fm-toolbar-sticky .btn-outline-success:not(:disabled):hover {
    background-color: #226c22; border-color: #226c22; color: #fff;
}
.fm-toolbar-sticky .btn-outline-info:not(:disabled),
.fm-toolbar-sticky .btn-outline-info:not(:disabled):focus {
    background-color: #2c8eb1; color: #fff; border-color: #2c8eb1;
}
.fm-toolbar-sticky .btn-outline-info:not(:disabled):hover {
    background-color: #237390; border-color: #237390; color: #fff;
}

/* Disabled outline buttons: explicit transparent fill + stronger opacity
   dim than the Bootstrap default (0.65). Cursor stays not-allowed for the
   usual hint. */
.fm-toolbar-sticky .btn-outline-secondary:disabled,
.fm-toolbar-sticky .btn-outline-danger:disabled,
.fm-toolbar-sticky .btn-outline-success:disabled,
.fm-toolbar-sticky .btn-outline-info:disabled {
    background-color: transparent !important;
    opacity: 0.42;
    cursor: not-allowed;
}
.fm-breadcrumb {
    padding: 6px 12px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
    background: #fafbfc;
}
.fm-breadcrumb a { cursor: pointer; color: #2c6fbb; text-decoration: none; }
.fm-breadcrumb a:hover { text-decoration: underline; }
/* Move (drag-to-move + the Move modal's folder list). A breadcrumb folder
   highlights like a folder row while rows are dragged over it. */
.fm-list tbody tr[draggable="true"] { cursor: grab; }
.fm-breadcrumb a.fm-drop-target { background: #fff7e0; box-shadow: inset 0 -2px 0 0 #d49314; border-radius: 2px; }
.fm-move-list { width: 100%; }
.fm-move-list tbody tr[data-fm-move-path] { cursor: pointer; }
.fm-move-list tbody tr.fm-move-disabled { cursor: not-allowed; }
.fm-status { padding: 6px 12px; font-size: 12px; min-height: 18px; border-bottom: 1px solid #f0f0f0; }
.fm-status.ok { background: #e6f5e6; color: #2a6a2a; }
.fm-status.err { background: #f7e1e1; color: #8b1a1a; }
.fm-list { width: 100%; border-collapse: collapse; }
.fm-list th, .fm-list td { border-bottom: 1px solid #eef0f2; padding: 8px 12px; text-align: left; font-size: 13px; vertical-align: middle; }
.fm-list thead th { background: #f8f9fa; font-weight: 600; position: sticky; top: 0; z-index: 4; }
/* Sortable column headers. Clicking sorts the loaded list client-side; the
   active column shows an up/down caret. Folders stay pinned to the top
   regardless of column or direction (see gallery_filemanager.js). */
.fm-list thead th.fm-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.fm-list thead th.fm-sortable:hover { background: #eef1f4; }
.fm-list thead th .fm-sort-caret { font-size: 10px; margin-left: 4px; color: #2c6fbb; visibility: hidden; }
.fm-list thead th.fm-sort-asc  .fm-sort-caret,
.fm-list thead th.fm-sort-desc .fm-sort-caret { visibility: visible; }
.fm-list thead th.fm-sort-asc  .fm-sort-caret::before { content: "\25B2"; }
.fm-list thead th.fm-sort-desc .fm-sort-caret::before { content: "\25BC"; }
.fm-list tr { cursor: pointer; }
.fm-list tbody tr:hover { background: #f5f7fa; }
/* Selection beats hover via specificity + !important. The blue left-border
   gives a clear, unambiguous "this is the active row" cue. */
.fm-list tbody tr.selected,
.fm-list tbody tr.selected:hover {
    background: #d6eaff !important;
    box-shadow: inset 4px 0 0 0 #2c6fbb;
    color: #1a4f8e;
}
.fm-list tbody tr.selected td .text-muted { color: #1a4f8e !important; }
.fm-list .fm-icon { width: 40px; padding: 4px 6px; }
.fm-list .fm-icon i { font-size: 18px; }
/* Per-row image thumbnail. Replaces the generic image icon with a tiny
   preview of the actual file. Browsers handle loading="lazy" natively
   so off-screen rows don't bandwidth-bomb when scrolling a deep folder.
   If the image fails to load, the JS onerror handler swaps it back to
   the icon so the row still has a visual indicator. */
.fm-list .fm-thumb {
    display: block;
    width: 32px; height: 32px;
    object-fit: cover;
    border: 1px solid #d8dde1;
    border-radius: 3px;
    background: #f4f5f7;
}
.fm-list tbody tr.fm-row-hidden .fm-thumb { opacity: 0.55; }
.badge-imap   { background: #2a6a2a; color: #fff; }

/* Hidden-item badges + dimmed rows.
   Four states (server-driven via item.hidden_state):
     hidden        -- solid red, row dimmed (currently hidden, no end)
     hidden_until  -- red+clock, row dimmed (currently hidden, will auto-show)
     will_hide     -- yellow+clock, row NOT dimmed (currently visible, will hide)
     window        -- red, row dimmed (currently hidden, both endpoints set)
   The clock icon comes from the existing icomoon set bundled with the
   admin theme. */
.badge-hidden        { background: #b53a3a; color: #fff; }
.badge-hidden-until  { background: #b53a3a; color: #fff; }
.badge-will-hide     { background: #d49314; color: #2c2c2c; }
.badge-hidden-window { background: #b53a3a; color: #fff; }
.fm-list tbody tr.fm-row-hidden td > * { opacity: 0.55; }
/* Banner shown across the top of the file list when current folder OR an
   ancestor is currently hidden. Mirrors the .fm-status "err" coloring. */
.fm-hidden-banner {
    padding: 8px 12px; font-size: 13px;
    background: #fff7e0; color: #6b4a0d;
    border-bottom: 1px solid #f0e0a0;
    display: none;
}
.fm-hidden-banner.show { display: block; }
.fm-hidden-banner i { margin-right: 6px; color: #d49314; }
.fm-hidden-banner a {
    color: #2c6fbb; cursor: pointer; text-decoration: underline; margin-left: 8px;
}

/* Filter input row sits below the toolbar buttons inside the sticky
   header. Layout: input grows to fill, count label + clear button on
   the right. The clear button only appears when the filter has text. */
.fm-filter-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px 8px 12px;
    border-bottom: 1px solid #f0f0f0;
    background: #fafbfc;
}
.fm-filter-row label {
    font-size: 12px; color: #666; margin: 0; flex-shrink: 0;
}
.fm-filter-row input[type="text"] {
    flex: 1; min-width: 0;
    border: 1px solid #d8dde1; border-radius: 3px;
    padding: 5px 9px; font-size: 13px;
    background: #fff;
}
.fm-filter-row input[type="text"]:focus {
    outline: 0; border-color: #2c6fbb;
    box-shadow: 0 0 0 2px rgba(44,111,187,0.15);
}
.fm-filter-count {
    font-size: 12px; color: #888; flex-shrink: 0;
    min-width: 90px; text-align: right;
}
.fm-filter-clear {
    background: transparent; border: 0; cursor: pointer;
    color: #888; font-size: 16px; line-height: 1; padding: 2px 6px;
}
.fm-filter-clear:hover { color: #b53a3a; }
.fm-list tbody tr.fm-empty-msg { cursor: default; }
.fm-list tbody tr.fm-empty-msg:hover { background: transparent; }

/* ---- Right-click context menu ----
   Floating <ul> appended to <body> by the JS. Visible only when the user
   right-clicks on a row in the file table. */
.fm-context-menu {
    position: absolute;
    z-index: 100050;
    display: none;
    min-width: 220px; max-width: 360px;
    margin: 0; padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 1px solid #d8dde1;
    border-radius: 4px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.18);
    font-size: 13px;
}
.fm-context-menu.show { display: block; }
.fm-context-menu .fm-ctx-item {
    display: flex; align-items: center;
    padding: 6px 14px;
    cursor: pointer; color: #333;
    white-space: nowrap;
}
.fm-context-menu .fm-ctx-item i { width: 16px; text-align: center; }
.fm-context-menu .fm-ctx-item:hover { background: #f1f6fc; color: #1a4f8e; }
.fm-context-menu .fm-ctx-item.disabled {
    color: #aab2bb; cursor: not-allowed;
    pointer-events: none;
}
.fm-context-menu .fm-ctx-divider {
    height: 1px; margin: 4px 0;
    background: #eef0f2;
    list-style: none;
}

/* ---- AI Bulk Progress modal ----
   Custom progress modal opened when the user fires the AI Image Map
   generator on a multi-selection. Per-row status icons, plus an overall
   determinate progress bar at the top. */
.fm-ai-bulk-progress-wrap {
    margin-bottom: 12px;
    padding: 10px 12px;
    background: #f8f9fa;
    border: 1px solid #eef0f2;
    border-radius: 4px;
}
.fm-ai-bulk-progress-stats {
    font-size: 13px; color: #333;
    margin-bottom: 6px;
    display: flex; align-items: baseline;
}
.fm-ai-bulk-progress-bar-track {
    height: 10px;
    background: #e6eaef;
    border-radius: 5px;
    overflow: hidden;
}
.fm-ai-bulk-progress-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #2c6fbb 0%, #4d92dd 100%);
    transition: width 240ms ease-out;
}
.fm-ai-bulk-progress-bar-fill.done {
    background: linear-gradient(90deg, #2a8a2a 0%, #3eaa3e 100%);
}

.fm-ai-bulk-list {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.fm-ai-bulk-list tr { border-bottom: 1px solid #f0f0f0; }
.fm-ai-bulk-list td {
    padding: 6px 8px;
    vertical-align: middle;
}
.fm-ai-bulk-list .status-cell {
    width: 28px; text-align: center;
}
.fm-ai-bulk-list .status-cell i { font-size: 16px; }
.fm-ai-bulk-list .name-cell .name { font-weight: 600; color: #222; }
.fm-ai-bulk-list .name-cell .folder {
    font-size: 11px; line-height: 1.3;
}
.fm-ai-bulk-list .info-cell { width: 180px; text-align: right; }

/* Pending dot: small gray circle. */
.fm-ai-pending-dot {
    display: inline-block;
    width: 10px; height: 10px;
    background: #c9ced3;
    border-radius: 50%;
}
/* Spinning "working" icon. icon-spinner3 is from the bundled icomoon set. */
@keyframes fm-ai-spin-kf {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.fm-ai-spin {
    display: inline-block;
    color: #2c6fbb;
    animation: fm-ai-spin-kf 1.1s linear infinite;
}

/* ---- Activity Feed slide-out panel ----
   Anchored to the right edge of the viewport. Slides in over the FM with
   a translucent backdrop. Self-contained CSS (no Bootstrap modal classes)
   to match the rest of the FM-bespoke widgets. */
.fm-activity-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.35);
    z-index: 99999; display: none;
}
.fm-activity-backdrop.show { display: block; }
.fm-activity-panel {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 380px; max-width: 95vw;
    background: #fff; box-shadow: -4px 0 20px rgba(0,0,0,0.18);
    z-index: 100000; display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform 200ms ease-out;
}
.fm-activity-panel.open { transform: translateX(0); }
/* Bootstrap undo-confirm modals launched from inside the panel need to stack
   above the panel (z-index: 100000) and the panel's translucent backdrop
   (99999). Bootstrap's defaults are 1050/1040, which would leave the modal
   visually on top by DOM order but receiving no clicks (the panel backdrop
   intercepts them).
   The modal rule needs !important because Bootstrap's `.modal { z-index: 1050 }`
   loads after this file at equal (0,1,0) specificity and would otherwise win
   on cascade order. The backdrop rule beats Bootstrap on specificity alone
   because `.modal-backdrop.fm-batch-undo-backdrop` is (0,2,0). */
.fm-batch-undo-modal { z-index: 100200 !important; }
.modal-backdrop.fm-batch-undo-backdrop { z-index: 100150; }
.fm-activity-panel-header {
    padding: 14px 16px; border-bottom: 1px solid #e5e7ec;
    display: flex; align-items: center; justify-content: space-between;
    background: #f8f9fa; flex-shrink: 0;
}
.fm-activity-panel-header h5 { margin: 0; font-size: 15px; font-weight: 600; color: #222; }
.fm-activity-panel-header h5 i { margin-right: 6px; color: #2c6fbb; }
.fm-activity-panel-close {
    cursor: pointer; padding: 4px 10px; border: 0; background: transparent;
    font-size: 22px; line-height: 1; color: #555;
}
/* Compact date-filter row pinned between the header and the body. Tight
 * padding + small font keeps it from competing visually with the entry list. */
.fm-activity-filter-row {
    padding: 6px 12px; border-bottom: 1px solid #e5e7ec;
    background: #fcfcfd; flex-shrink: 0;
    display: flex; align-items: center; gap: 6px;
}
.fm-activity-filter-row input,
.fm-activity-filter-row .k-datepicker {
    flex: 1; max-width: 160px; font-size: 12px;
}
.fm-activity-filter-row .k-datepicker .k-input-inner { height: 26px; padding: 2px 6px; font-size: 12px; }
.fm-activity-filter-row .k-datepicker .k-input-button { padding: 0 6px; }
.fm-activity-date-clear {
    cursor: pointer; border: 0; background: transparent;
    font-size: 18px; line-height: 1; color: #888; padding: 0 4px;
}
.fm-activity-date-clear:hover { color: #b53a3a; }
.fm-activity-panel-body { flex: 1; overflow-y: auto; padding: 0; }
.fm-activity-panel-empty {
    padding: 32px 18px; text-align: center; color: #888; font-size: 13px;
}
/* Infinite-scroll sentinel sits at the bottom of the entry list. When the
 * scroll handler triggers a "load older" fetch, .fm-activity-loading-more
 * fills the sentinel; on completion it's cleared. The sentinel itself has no
 * height when empty so it doesn't show as a blank gap. */
.fm-activity-sentinel { min-height: 0; }
.fm-activity-loading-more {
    padding: 14px 18px; text-align: center; color: #888; font-size: 12px;
}
.fm-activity-panel-footer {
    padding: 8px 12px; border-top: 1px solid #e5e7ec; background: #fafbfc;
    display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;
    font-size: 12px; color: #777;
}
.fm-activity-panel-footer button {
    padding: 5px 10px; border-radius: 3px; border: 1px solid #c9ced3; cursor: pointer;
    background: #fff; color: #333; font-size: 12px;
}
/* One activity entry. Action category drives the left-border color. */
.fm-activity-entry {
    padding: 12px 14px; border-bottom: 1px solid #eef0f2;
    display: grid; grid-template-columns: 22px 1fr auto; gap: 8px;
    align-items: start; font-size: 13px; line-height: 1.35;
    border-left: 3px solid transparent;
}
.fm-activity-entry .icn { color: #555; font-size: 16px; padding-top: 1px; }
.fm-activity-entry .body { min-width: 0; word-break: break-word; }
.fm-activity-entry .summary { color: #222; font-weight: 500; }
.fm-activity-entry .meta { color: #888; font-size: 11px; margin-top: 2px; }
.fm-activity-entry .meta b { color: #444; font-weight: 600; }
.fm-activity-entry .undo-btn {
    cursor: pointer; padding: 4px 10px; border-radius: 3px;
    border: 1px solid #c9ced3; background: #fff; color: #2c6fbb;
    font-size: 11px; font-weight: 600;
}
.fm-activity-entry .undo-btn:hover:not(:disabled) {
    background: #2c6fbb; color: #fff; border-color: #2c6fbb;
}
.fm-activity-entry .undo-btn:disabled {
    opacity: 0.5; cursor: not-allowed;
}
.fm-activity-entry.undone { opacity: 0.6; }
.fm-activity-entry.undone .summary { text-decoration: line-through; }
.fm-activity-entry .undone-badge {
    display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 8px;
    background: #6c757d; color: #fff; font-size: 10px; font-weight: 600;
    text-decoration: none;
}
/* Per-action-type left-border accent. */
.fm-activity-entry[data-action="create_folder"] { border-left-color: #2a8a2a; }
.fm-activity-entry[data-action="rename"]        { border-left-color: #2c8eb1; }
.fm-activity-entry[data-action="delete"]        { border-left-color: #b53a3a; }
.fm-activity-entry[data-action="move"]          { border-left-color: #d49314; }
.fm-activity-entry[data-action="upload"]        { border-left-color: #2a8a2a; }
.fm-activity-entry[data-action="add_map"],
.fm-activity-entry[data-action="ai_map"]        { border-left-color: #6f42c1; }
.fm-activity-entry[data-action="remove_map"]    { border-left-color: #b53a3a; }
.fm-activity-entry[data-action="save_image_map"]{ border-left-color: #6f42c1; }
.fm-activity-entry[data-action="hide"],
.fm-activity-entry[data-action="hide_bulk"],
.fm-activity-entry[data-action="set_schedule"]  { border-left-color: #6c757d; }
.fm-activity-entry[data-action="unhide"],
.fm-activity-entry[data-action="unhide_bulk"]   { border-left-color: #2c6fbb; }