/* Files redesign — Manager layout (Settings → Organization → Files)
   Source of truth: docs/prototypes/files-manager/PROTOTYPE_files_b_dialogs.html */

.files-manager .fm-card
{
    display: flex;
    /* fill the viewport below the portal chrome even when the folder is sparse —
       the details drawer is pinned to the card's height and must not compress */
    min-height: max(540px, calc(100svh - 230px));
    overflow: hidden;
    position: relative;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(24, 28, 50, .06);
}

/* ====== folder tree ====== */
.files-manager .fm-tree
{
    width: 230px;
    flex: none;
    border-right: 1px solid #eff2f5;
    padding: 16px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.files-manager .fm-tree-label
{
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #a1a5b7;
    padding: 4px 12px 8px;
}

.files-manager .fm-node
{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 500;
    color: #5e6278;
    cursor: pointer;
    border: 1.5px solid transparent;
}

.files-manager .fm-node .fm-node-icon
{
    width: 17px;
    text-align: center;
    color: #a1a5b7;
    font-size: 13px;
    flex: none;
}

.files-manager .fm-node:hover { background: #f3f4f7; }
.files-manager .fm-node.active { background: #f1faff; color: #009ef7; font-weight: 600; }
.files-manager .fm-node.active .fm-node-icon { color: #009ef7; }

.files-manager .fm-node .fm-node-name
{
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.files-manager .fm-node .fm-node-count
{
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    color: #a1a5b7;
    background: #f3f4f7;
    border-radius: 6px;
    padding: 2px 7px;
    flex: none;
}

.files-manager .fm-node.active .fm-node-count { background: #d9f1fe; color: #009ef7; }
.files-manager .fm-node.droptarget { border-color: #009ef7; background: #f1faff; }

.files-manager .fm-caret
{
    width: 14px;
    flex: none;
    text-align: center;
    color: #a1a5b7;
    font-size: 10px;
    cursor: pointer;
}
.files-manager .fm-caret:hover { color: #009ef7; }
.files-manager .fm-caret-spacer { cursor: default; }

.files-manager .fm-sep { height: 1px; background: #eff2f5; margin: 10px 8px; }

/* ====== content pane ====== */
.files-manager .fm-pane
{
    flex: 1;
    min-width: 0;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.files-manager .fm-pane-head
{
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 14px;
}

.files-manager .fm-pane-title { font-size: 16.5px; font-weight: 700; color: #181c32; }
.files-manager .fm-pane-sub { font-size: 12px; color: #a1a5b7; }

.files-manager .fm-search
{
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f3f4f7;
    border-radius: 9px;
    padding: 7px 11px;
    color: #a1a5b7;
}

.files-manager .fm-search input
{
    border: 0;
    background: transparent;
    outline: none;
    font-size: 13px;
    width: 140px;
    color: #181c32;
}

/* ====== global search ====== */
.files-manager .fm-scope-chip
{
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border: 1px solid #e4e6ef;
    border-radius: 9px;
    font-size: 11.5px;
    font-weight: 600;
    color: #7e8299;
    cursor: pointer;
    white-space: nowrap;
    transition: color .12s, border-color .12s, background .12s;
}

.files-manager .fm-scope-chip:hover { border-color: #d6d9e3; color: #5e6278; }
.files-manager .fm-scope-chip.on { background: #f1faff; border-color: #009ef7; color: #009ef7; }

/* ====== folder actions (pane header) ====== */
.files-manager .fm-folder-acts
{
    display: flex;
    align-items: center;
    gap: 4px;
}

.files-manager .fm-folder-act
{
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    color: #a1a5b7;
    font-size: 12.5px;
    cursor: pointer;
    transition: color .12s, background .12s;
}

.files-manager .fm-folder-act:hover { background: #f3f4f7; color: #5e6278; }
.files-manager .fm-folder-act-danger:hover { background: #fff5f8; color: #f1416c; }

.files-manager .fm-folder-rename-input
{
    border: 1px solid #009ef7;
    border-radius: 7px;
    padding: 4px 9px;
    font-size: 15px;
    font-weight: 700;
    color: #181c32;
    outline: none;
    max-width: 260px;
}

.files-manager .fm-tile-loc
{
    font-size: 11px;
    color: #a1a5b7;
    margin-top: 4px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.files-manager .fm-tile-loc:hover { color: #009ef7; }

.files-manager .fm-ficon.folder { background: #fff8dd; color: #f6c000; }

/* ====== dropzone strip ====== */
.files-manager .fm-strip
{
    border: 1.5px dashed #e4e6ef;
    border-radius: 11px;
    background: #fafbfc;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 14px;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

.files-manager .fm-strip.fm-strip-hot { border-color: #009ef7; background: #f1faff; }
.files-manager .fm-strip-cloud { font-size: 20px; color: #009ef7; }
.files-manager .fm-strip-text { font-size: 13px; color: #5e6278; }
.files-manager .fm-strip-text b { color: #181c32; }
.files-manager .fm-strip-dest { color: #009ef7; font-weight: 700; }
.files-manager .fm-flownote { display: block; font-size: 11.5px; color: #a1a5b7; margin-top: 2px; }

/* ====== upload tray ====== */
.files-manager .fm-tray
{
    border: 1.5px solid #e4e6ef;
    border-radius: 11px;
    margin-bottom: 14px;
    overflow: hidden;
    background: #ffffff;
}

.files-manager .fm-tray-header
{
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    background: #fafbfc;
    border-bottom: 1px solid #eff2f5;
    font-size: 12.5px;
    font-weight: 700;
    color: #181c32;
}

.files-manager .fm-tray-header i { color: #009ef7; }
.files-manager .fm-tray-title { flex: 1; }

.files-manager .fm-tray-done
{
    color: #009ef7;
    font-weight: 700;
    font-size: 12.5px;
    cursor: pointer;
}

.files-manager .fm-tray-row
{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-bottom: 1px solid #eff2f5;
}

.files-manager .fm-tray-row:last-child { border-bottom: 0; }
.files-manager .fm-tray-row .fm-ficon { width: 34px; height: 34px; font-size: 14px; margin: 0; flex: none; }

.files-manager .fm-tray-name { flex: 1; min-width: 0; }
.files-manager .fm-tray-name-line { display: flex; align-items: baseline; gap: 2px; }

.files-manager .fm-tray-name-edit
{
    border: 1px solid transparent;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: #181c32;
    border-radius: 7px;
    padding: 4px 8px;
    outline: none;
    min-width: 0;
    flex: 1;
    max-width: 320px;
}

.files-manager .fm-tray-name-edit:hover { border-color: #e4e6ef; }
.files-manager .fm-tray-name-edit:focus { border-color: #009ef7; background: #fff; }
.files-manager .fm-ext-suffix { font-size: 12px; font-weight: 600; color: #a1a5b7; flex: none; }
.files-manager .fm-tray-sub { font-size: 11px; color: #a1a5b7; margin-top: 1px; padding-left: 8px; }
.files-manager .fm-tray-row.failed .fm-tray-sub { color: #f1416c; font-weight: 600; }

.files-manager .fm-row-bar
{
    height: 4px;
    border-radius: 99px;
    background: #eff2f5;
    margin: 6px 8px 0;
    overflow: hidden;
}

.files-manager .fm-row-bar-fill
{
    height: 100%;
    width: 0%;
    background: #009ef7;
    border-radius: 99px;
    transition: width .25s linear;
}

.files-manager .fm-tray-row.done .fm-row-bar-fill { background: #50cd89; }
.files-manager .fm-tray-row.failed .fm-row-bar-fill { background: #f1416c; }

.files-manager .fm-pubpill
{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1.5px solid #e4e6ef;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: #a1a5b7;
    cursor: pointer;
    white-space: nowrap;
    flex: none;
}

.files-manager .fm-pubpill.on { color: #50cd89; border-color: #50cd89; background: #e8fff3; }

.files-manager .fm-linkbtn
{
    color: #a1a5b7;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 7px;
    flex: none;
}

.files-manager .fm-linkbtn:hover { color: #009ef7; background: #f1faff; }

.files-manager .fm-tray-status
{
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    font-size: 14px;
    color: #009ef7;
}

.files-manager .fm-tray-row.done .fm-tray-status { color: #50cd89; }
.files-manager .fm-tray-row.failed .fm-tray-status { color: #f1416c; }

.files-manager .fm-cancelbtn
{
    color: #a1a5b7;
    cursor: pointer;
    font-size: 12px;
    padding: 4px 6px;
    border-radius: 6px;
}

.files-manager .fm-cancelbtn:hover { color: #f1416c; background: #fff5f8; }

/* ====== ghost tiles (in-flight uploads) ====== */
.files-manager .fm-tile.fm-ghost
{
    pointer-events: none;
    opacity: .9;
    border-style: dashed;
}

.files-manager .fm-ghost-bar
{
    height: 4px;
    border-radius: 99px;
    background: #eff2f5;
    margin-top: 8px;
    overflow: hidden;
}

.files-manager .fm-ghost-bar-fill
{
    height: 100%;
    width: 0%;
    background: #009ef7;
    border-radius: 99px;
    transition: width .25s linear;
}

/* ====== tile grid ====== */
.files-manager .fm-grid { flex: 1; align-content: start; }

.files-manager .fm-grid.fm-grid-tiles
{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.files-manager .fm-tile
{
    border: 1.5px solid #eff2f5;
    border-radius: 12px;
    padding: 14px 12px 12px;
    text-align: center;
    cursor: pointer;
    position: relative;
    background: #ffffff;
    transition: box-shadow .12s, border-color .12s;
}

.files-manager .fm-tile:hover
{
    border-color: #e4e6ef;
    box-shadow: 0 4px 14px rgba(24, 28, 50, .07);
}

.files-manager .fm-tile.selected { border-color: #009ef7; background: #f1faff; }
.files-manager .fm-tile.open { border-color: #009ef7; }
.files-manager .fm-tile.dragging { opacity: .45; }

.files-manager .fm-ficon
{
    width: 44px;
    height: 44px;
    margin: 0 auto 9px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex: none;
}

.files-manager .fm-ficon.audio  { background: #f1faff; color: #009ef7; }
.files-manager .fm-ficon.image  { background: #e8fff3; color: #50cd89; }
.files-manager .fm-ficon.pdf    { background: #fff5f8; color: #f1416c; }
.files-manager .fm-ficon.doc    { background: #f8f5ff; color: #7239ea; }
.files-manager .fm-ficon.sched  { background: #f8f5ff; color: #7239ea; }

.files-manager .fm-tile-name
{
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    color: #181c32;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 2.6em;
    word-break: break-word;
}

.files-manager .fm-tile-sub { font-size: 11px; color: #a1a5b7; margin-top: 4px; }

.files-manager .fm-pub-dot
{
    position: absolute;
    top: 9px;
    right: 9px;
    color: #50cd89;
    font-size: 11px;
}

/* ====== record modal ====== */
.files-manager-record .fm-rec-zone, .fm-record-modal .fm-rec-zone { text-align: center; padding: 8px 0 4px; }

.fm-record-modal .fm-rec-btn
{
    width: 86px;
    height: 86px;
    margin: 0 auto;
    border-radius: 50%;
    background: #fff5f8;
    color: #f1416c;
    font-size: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .1s;
}

.fm-record-modal .fm-rec-btn:hover { transform: scale(1.04); }

.fm-record-modal .fm-rec-btn.recording
{
    background: #f1416c;
    color: #ffffff;
    animation: fm-rec-pulse 1.2s infinite;
}

.fm-record-modal .fm-rec-btn.done { background: #f1faff; color: #009ef7; font-size: 22px; }

@keyframes fm-rec-pulse
{
    0%   { box-shadow: 0 0 0 0 rgba(241, 65, 108, .35); }
    100% { box-shadow: 0 0 0 18px rgba(241, 65, 108, 0); }
}

.fm-record-modal .fm-rec-timer { font-size: 24px; font-weight: 700; margin-top: 12px; color: #181c32; }
.fm-record-modal .fm-rec-state { font-size: 12px; color: #a1a5b7; margin-top: 3px; min-height: 16px; }
.fm-record-modal .fm-rec-hint { font-size: 11px; color: #a1a5b7; margin-top: 12px; }
.fm-record-modal .fm-rec-hint i { margin-right: 4px; font-size: 10px; }

.fm-record-modal .fm-rec-player
{
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 14px auto 0;
}

.fm-record-modal .fm-rec-player-label
{
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #a1a5b7;
}

.fm-record-modal .fm-rec-play
{
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #009ef7;
    color: #ffffff;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.fm-record-modal .fm-rec-destnote { font-size: 12px; color: #a1a5b7; margin-top: 8px; }
.fm-record-modal .fm-fld { margin-bottom: 14px; }

.fm-record-modal .fm-fld-label
{
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #a1a5b7;
    margin-bottom: 6px;
}

.fm-record-modal .fm-drawer-name-edit
{
    width: 100%;
    border: 1px solid #e4e6ef;
    border-radius: 9px;
    padding: 8px 11px;
    font-size: 13px;
    font-weight: 600;
    color: #181c32;
    outline: none;
}

.fm-record-modal .fm-pubpill
{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1.5px solid #e4e6ef;
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #a1a5b7;
    cursor: pointer;
}

.fm-record-modal .fm-pubpill.on { color: #50cd89; border-color: #50cd89; background: #e8fff3; }

.fm-record-modal .fm-rec-src { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; }

.fm-record-modal .fm-srcpill
{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1.5px solid #e4e6ef;
    border-radius: 99px;
    padding: 8px 16px;
    font-size: 12.5px;
    font-weight: 600;
    color: #5e6278;
    cursor: pointer;
}

.fm-record-modal .fm-srcpill:hover { border-color: #009ef7; color: #009ef7; }
.fm-record-modal .fm-srcpill.active { background: #f1faff; border-color: #009ef7; color: #009ef7; }

.fm-record-modal .fm-rec-btn.calling
{
    background: #009ef7;
    color: #ffffff;
    animation: fm-call-pulse 1.2s infinite;
}

@keyframes fm-call-pulse
{
    0%   { box-shadow: 0 0 0 0 rgba(0, 158, 247, .35); }
    100% { box-shadow: 0 0 0 18px rgba(0, 158, 247, 0); }
}

.fm-record-modal .fm-device-fld { text-align: left; margin-bottom: 16px; }
.fm-record-modal .fm-device-selector { width: 100%; }
.fm-record-modal .fm-device-selector .dropdown-widget { width: 100%; }

/* integrated portal player — circle play button (CSCirclePlayButton → top-nav
   player) used for the drawer preview, current greeting, and device takes */
.fm-play-circle
{
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #009ef7;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .12s, transform .12s;
    box-shadow: 0 6px 16px rgba(0, 158, 247, .3);
}

.fm-play-circle:hover { background: #0091e0; transform: scale(1.05); }

/* the button renders two inline spans (icon + optional text) — baseline alignment
   and inherited line-height push the glyph off-center; flex-center both and
   collapse the empty text span */
.fm-play-circle { padding: 0; }
.fm-play-circle > span
{
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.fm-play-circle > span:empty { display: none; }

/* the portal's global .player_button i rule draws its OWN grey ring (3px border +
   radius + 1.5em size) around the glyph — kill it so this is one solid blue disc
   with a clean white triangle, in every play/pause state */
.fm-play-circle i,
.fm-play-circle .pause
{
    color: #ffffff;
    font-size: 17px;
    border: 0;
    padding: 0;
    border-radius: 0;
    line-height: 1;
    display: block;
}

/* drawer "Replace file" — invisible native file input stretched over the button so
   a real click opens the system picker directly (browser gesture intact) */
.files-manager .fm-replace-native { position: relative; overflow: hidden; }
.files-manager .fm-replace-native .fm-replace-input,
.files-manager .fm-replace-native .fm-replace-input form,
.files-manager .fm-replace-native .fm-replace-input input[type="file"]
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.fm-record-modal .fm-rec-player audio { max-width: 280px; }

.fm-record-modal .fm-drawer-move
{
    width: 100%;
    border: 1px solid #e4e6ef;
    border-radius: 9px;
    padding: 8px 11px;
    font-size: 13px;
    color: #181c32;
    background: #ffffff;
    outline: none;
}

.files-manager .fm-strip-record
{
    margin-left: auto;
    flex: none;
    background: #f3f4f7;
    color: #5e6278;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 600;
    padding: 8px 14px;
    cursor: pointer;
    white-space: nowrap;
}

.files-manager .fm-strip-record:hover { background: #e4e6ef; color: #181c32; }

/* ====== multi-select ====== */
.files-manager .fm-check
{
    position: absolute;
    top: 8px;
    left: 8px;
    width: 17px;
    height: 17px;
    border: 1.5px solid #e4e6ef;
    border-radius: 5px;
    background: #ffffff;
    color: transparent;
    font-size: 10px;
    line-height: 15px;
    text-align: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity .1s;
    z-index: 2;
}

.files-manager .fm-tile:hover .fm-check,
.files-manager .fm-tile.selected .fm-check,
.files-manager .fm-grid.has-sel .fm-check { opacity: 1; }

.files-manager .fm-tile.selected .fm-check
{
    background: #009ef7;
    border-color: #009ef7;
    color: #ffffff;
}

/* the glyph itself — framework rules color <i> elements directly, which beats the
   inherited white above and leaves the check grey */
.files-manager .fm-tile.selected .fm-check i { color: #ffffff; }

.files-manager .fm-selpill
{
    /* fixed to the VIEWPORT so move/delete stay reachable however far the grid is
       scrolled; below the details drawer (95) so it never covers its actions */
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #1e1e2d;
    color: #ffffff;
    border-radius: 99px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px 7px 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
    z-index: 90;
    white-space: nowrap;
}

.files-manager .fm-selpill-count { font-size: 12.5px; font-weight: 700; margin-right: 8px; }

.files-manager .fm-selpill-btn
{
    background: rgba(255, 255, 255, .08);
    color: #d8dae5;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 13px;
    cursor: pointer;
}

.files-manager .fm-selpill-btn:hover { background: rgba(255, 255, 255, .18); color: #ffffff; }
.files-manager .fm-selpill-clear { background: transparent; padding: 7px 10px; }

.files-manager .fm-node.fm-pick-target
{
    border-color: #009ef7;
    background: #f1faff;
    animation: fm-pick-pulse 1.4s infinite;
}

@keyframes fm-pick-pulse
{
    0%   { box-shadow: 0 0 0 0 rgba(0, 158, 247, .25); }
    100% { box-shadow: 0 0 0 8px rgba(0, 158, 247, 0); }
}

.files-manager .fm-empty
{
    grid-column: 1 / -1;
    text-align: center;
    color: #a1a5b7;
    padding: 50px 20px;
    font-size: 13px;
}

.files-manager .fm-empty i
{
    font-size: 34px;
    display: block;
    margin-bottom: 12px;
    color: #e4e6ef;
}

/* ====== details drawer ====== */
.files-manager .fm-drawer
{
    /* fixed to the VIEWPORT, not the card — full available height like a right
       side nav, so opening details after scrolling never lands off-screen. Starts
       BELOW the fixed portal header and stacks UNDER it (header z ~97), so the
       top-nav audio player and its dropdown controls are never covered. The
       header is its own stacking context, so this is the only way to keep the
       player on top. Modals (1040+) still stack above everything. */
    position: fixed;
    top: 65px;
    right: 0;
    bottom: 0;
    width: 300px;
    background: #ffffff;
    border-left: 1px solid #eff2f5;
    box-shadow: -14px 0 34px rgba(24, 28, 50, .16);
    transform: translateX(105%);
    transition: transform .18s ease;
    z-index: 95;
    display: flex;
    flex-direction: column;
}

.files-manager .fm-drawer.open { transform: none; }

.files-manager .fm-drawer-head
{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid #eff2f5;
    font-size: 13px;
    font-weight: 700;
    color: #181c32;
}

.files-manager .fm-drawer-head i { color: #a1a5b7; }

.files-manager .fm-drawer-close
{
    margin-left: auto;
    color: #a1a5b7;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    text-align: center;
    line-height: 30px;
}

.files-manager .fm-drawer-close:hover { background: #f3f4f7; color: #181c32; }

.files-manager .fm-drawer-body { padding: 16px; overflow: auto; flex: 1; }

.files-manager .fm-drawer-preview
{
    background: #f3f4f7;
    border-radius: 12px;
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    color: #a1a5b7;
    font-size: 30px;
    padding: 12px;
}

.files-manager .fm-drawer-img { max-width: 100%; max-height: 160px; border-radius: 8px; }

.files-manager .fm-drawer-rerecord
{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #f3f4f7;
    color: #5e6278;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 600;
    padding: 9px 8px;
    cursor: pointer;
    margin: -4px 0 14px;
}

.files-manager .fm-drawer-rerecord:hover { background: #f1faff; color: #009ef7; }

.files-manager .fm-fld { margin-bottom: 14px; }

.files-manager .fm-fld-label
{
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #a1a5b7;
    margin-bottom: 6px;
}

.files-manager .fm-drawer-name-line { display: flex; align-items: baseline; gap: 2px; }

.files-manager .fm-drawer-name-edit
{
    flex: 1;
    min-width: 0;
    border: 1px solid #e4e6ef;
    border-radius: 9px;
    padding: 8px 11px;
    font-size: 13px;
    font-weight: 600;
    color: #181c32;
    outline: none;
}

.files-manager .fm-drawer-name-edit:focus { border-color: #009ef7; }
.files-manager .fm-drawer-name-text { font-size: 13px; font-weight: 600; color: #181c32; word-break: break-word; }

.files-manager .fm-pubpill-wide { width: 100%; justify-content: center; display: flex; }

.files-manager .fm-linkrow { display: flex; gap: 6px; margin-top: 8px; }

.files-manager .fm-linkrow input
{
    flex: 1;
    min-width: 0;
    border: 1px solid #e4e6ef;
    border-radius: 8px;
    font-size: 11px;
    padding: 7px 9px;
    color: #5e6278;
    background: #f3f4f7;
    outline: none;
}

.files-manager .fm-linkcopy
{
    background: #f1faff;
    color: #009ef7;
    border-radius: 8px;
    width: 32px;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
    flex: none;
}

.files-manager .fm-drawer-move
{
    width: 100%;
    border: 1px solid #e4e6ef;
    border-radius: 9px;
    padding: 8px 11px;
    font-size: 13px;
    color: #181c32;
    background: #ffffff;
    outline: none;
}

.files-manager .fm-meta-list { font-size: 12px; color: #5e6278; margin-top: 4px; }

.files-manager .fm-meta-row
{
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px dashed #eff2f5;
}

.files-manager .fm-meta-row:last-child { border-bottom: 0; }
.files-manager .fm-meta-key { color: #a1a5b7; }
.files-manager .fm-meta-value { font-weight: 600; color: #181c32; text-align: right; }

.files-manager .fm-drawer-acts
{
    display: flex;
    gap: 8px;
    padding: 13px 16px;
    border-top: 1px solid #eff2f5;
}

.files-manager .fm-drawer-act
{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #f3f4f7;
    color: #5e6278;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 600;
    padding: 9px 8px;
    cursor: pointer;
    text-decoration: none;
}

.files-manager .fm-drawer-act:hover { background: #e4e6ef; color: #181c32; text-decoration: none; }
.files-manager .fm-drawer-act-danger { background: #fff5f8; color: #f1416c; }
.files-manager .fm-drawer-act-danger:hover { background: #ffe2ea; color: #f1416c; }

/* ====== scheduled rows ====== */
.files-manager .fm-schedrow
{
    display: flex;
    align-items: center;
    gap: 13px;
    border: 1.5px solid #eff2f5;
    border-radius: 12px;
    padding: 13px 16px;
    margin-bottom: 10px;
    cursor: pointer;
}

.files-manager .fm-schedrow:hover
{
    border-color: #e4e6ef;
    box-shadow: 0 4px 14px rgba(24, 28, 50, .07);
}

.files-manager .fm-schedrow .fm-ficon { width: 38px; height: 38px; font-size: 16px; margin: 0; flex: none; }
.files-manager .fm-schedrow-namewrap { min-width: 0; }
.files-manager .fm-schedrow-name { font-size: 13.5px; font-weight: 600; color: #181c32; }
.files-manager .fm-schedrow-sub { font-size: 11.5px; color: #a1a5b7; margin-top: 2px; }

.files-manager .fm-add-schedule
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f3f4f7;
    color: #5e6278;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 16px;
    cursor: pointer;
    margin-top: 4px;
}

.files-manager .fm-add-schedule:hover { background: #e4e6ef; color: #181c32; }

/* ====== new folder (tree) ====== */
.files-manager .fm-newfolder
{
    margin-top: auto;
    border: 1.5px dashed #e4e6ef;
    border-radius: 9px;
    color: #a1a5b7;
    font-size: 12.5px;
    font-weight: 600;
    padding: 9px;
    text-align: center;
    cursor: pointer;
}

.files-manager .fm-newfolder:hover { color: #009ef7; border-color: #009ef7; background: #f1faff; }

.files-manager .fm-newfolder-input
{
    margin-top: auto;
    border: 1.5px solid #009ef7;
    border-radius: 8px;
    font-size: 13px;
    padding: 7px 10px;
    outline: none;
    width: 100%;
}

/* below lg the tree is a Keenthemes off-canvas (KTOffcanvas slides it in via the
   burger in the pane head); it leaves the flex flow, so the pane gets full width */
@media (max-width: 991.98px)
{
    .files-manager .fm-tree
    {
        background: #ffffff;
        border-right: 0;
        overflow-y: auto;
        padding: 16px 12px;
    }

    /* the mobile portal header is shorter */
    .files-manager .fm-drawer { top: 55px; }
}

@media (max-width: 700px)
{
    .files-manager .fm-pane { padding: 14px 12px; }
    .files-manager .fm-pane-head { flex-wrap: wrap; row-gap: 8px; }
    .files-manager .fm-search { margin-left: 0; flex: 1 1 auto; }
    .files-manager .fm-search input { width: 100%; }
    .files-manager .fm-drawer { width: 100%; }
}

/* ============================================================================
   Scheduled-file content editor (CSSettingsApp_CSFileSchedule)
   Source of truth: docs/prototypes/files-manager/PROTOTYPE_schedule_content.html
   Scoped under .fsched-editor; loaded globally because the editor also opens
   from the FileSelector pencil button on arbitrary pages.
   ============================================================================ */

.fsched-editor .fsched-lock-note
{
    font-size: 11.5px;
    color: #a1a5b7;
    background: #f3f4f7;
    border-radius: 8px;
    padding: 7px 11px;
    margin-top: 4px;
}

.fsched-editor .fsched-lock-icon { margin-right: 6px; font-size: 10px; }

.fsched-editor .fsched-stackhead
{
    display: flex;
    align-items: center;
    margin: 14px 0 10px;
}

.fsched-editor .fsched-stacklab
{
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #a1a5b7;
}

/* ====== cards ====== */
.fsched-editor .fsched-card
{
    border: 1.5px solid #eff2f5;
    border-radius: 12px;
    margin-bottom: 10px;
    background: #ffffff;
}

.fsched-editor .fsched-card:hover { border-color: #e4e6ef; }
.fsched-editor .fsched-card.fsched-open { border-color: #009ef7; box-shadow: 0 6px 18px rgba(0, 158, 247, .10); }
.fsched-editor .fsched-card.fsched-isdefault { background: #fbfcff; }

.fsched-editor .fsched-crow
{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
}

.fsched-editor .fsched-ord
{
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 8px;
    background: #f3f4f7;
    color: #a1a5b7;
    font-size: 11.5px;
    font-weight: 800;
    display: grid;
    place-items: center;
}

.fsched-editor .fsched-isdefault .fsched-ord { background: #f8f5ff; color: #7239ea; }

.fsched-editor .fsched-who { min-width: 0; }
.fsched-editor .fsched-title-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fsched-editor .fsched-title { font-size: 13.5px; font-weight: 700; color: #181c32; }
.fsched-editor .fsched-sub { display: block; font-size: 11.5px; color: #a1a5b7; margin-top: 2px; }

.fsched-editor .fsched-sumwrap
{
    margin-left: auto;
    max-width: 46%;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    cursor: default;
}

.fsched-editor .fsched-chev { color: #a1a5b7; font-size: 11px; width: 14px; text-align: center; flex: none; }

.fsched-editor .fsched-cbody { border-top: 1px solid #eff2f5; padding: 14px; }

/* ====== summary chips ====== */
.fsched-editor .fsched-sum
{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    padding: 4px 10px 4px 5px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.fsched-editor .fsched-sum-file { background: #f1faff; color: #1879ae; }
.fsched-editor .fsched-sum-tts { background: #fff8dd; color: #9c7700; font-weight: 500; font-style: italic; }
.fsched-editor .fsched-sum-inherit { background: #f3f4f7; color: #a1a5b7; padding: 4px 10px; font-weight: 500; }
.fsched-editor .fsched-sum-none { background: #fff5f8; color: #f1416c; padding: 4px 10px; }
.fsched-editor .fsched-sum-txt { overflow: hidden; text-overflow: ellipsis; }
.fsched-editor .fsched-sum-icon { font-size: 10px; }

.fsched-editor .fsched-bktag
{
    font-size: 9.5px;
    font-weight: 700;
    color: #a1a5b7;
    background: #f3f4f7;
    border-radius: 5px;
    padding: 2px 6px;
    white-space: nowrap;
    flex: none;
}

/* the circle play button inside chips and tier-3 lines */
.fsched-editor .fsched-miniplay { flex: none; }
.fsched-editor .fsched-miniplay i,
.fsched-editor .fsched-miniplay .material-icons { font-size: 18px; }

/* ====== priority ladder ====== */
.fsched-editor .fsched-tier
{
    border: 1.5px solid #eff2f5;
    border-radius: 10px;
    padding: 11px 12px;
    margin-bottom: 9px;
    background: #ffffff;
}

.fsched-editor .fsched-tier:last-child { margin-bottom: 0; }
.fsched-editor .fsched-tier.fsched-plays { border-color: #50cd89; background: #fcfffd; }
.fsched-editor .fsched-defref { border-style: dashed; background: #f3f4f7; }
.fsched-editor .fsched-defref.fsched-plays { border-style: solid; background: #fcfffd; }

.fsched-editor .fsched-thead { display: flex; align-items: center; gap: 9px; }

.fsched-editor .fsched-tnum
{
    width: 20px;
    height: 20px;
    flex: none;
    border-radius: 6px;
    background: #f3f4f7;
    color: #a1a5b7;
    font-size: 10.5px;
    font-weight: 800;
    display: grid;
    place-items: center;
}

.fsched-editor .fsched-plays .fsched-tnum { background: #50cd89; color: #ffffff; }

.fsched-editor .fsched-tlab
{
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #5e6278;
}

.fsched-editor .fsched-tstatus { margin-left: auto; display: flex; align-items: center; }
.fsched-editor .fsched-twhy { font-size: 11px; color: #a1a5b7; text-align: right; }

.fsched-editor .fsched-playsbadge
{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .07em;
    color: #ffffff;
    background: #50cd89;
    border-radius: 6px;
    padding: 3px 8px;
    white-space: nowrap;
}

.fsched-editor .fsched-playsbadge i { font-size: 8px; }

/* skipped tiers read dimmed at rest — the "not playing" cue — but lift the
   dim on hover/focus so the file dropdown and TTS text stay fully readable
   while interacting (opacity on an ancestor cannot be undone on a child) */
.fsched-editor .fsched-tier:not(.fsched-plays) .fsched-filerow,
.fsched-editor .fsched-tier:not(.fsched-plays) .fsched-texthost
{
    opacity: .55;
    transition: opacity .12s ease;
}

.fsched-editor .fsched-tier:not(.fsched-plays) .fsched-filerow:hover,
.fsched-editor .fsched-tier:not(.fsched-plays) .fsched-filerow:focus-within,
.fsched-editor .fsched-tier:not(.fsched-plays) .fsched-texthost:hover,
.fsched-editor .fsched-tier:not(.fsched-plays) .fsched-texthost:focus-within
{
    opacity: 1;
}

.fsched-editor .fsched-fileplay
{
    flex: none;
    display: grid;
    place-items: center;
    min-width: 34px;
}
.fsched-editor .fsched-fileplay:empty { display: none; }
.fsched-editor .fsched-tierplay i,
.fsched-editor .fsched-tierplay .material-icons { font-size: 22px; }

.fsched-editor .fsched-filerow
{
    display: flex;
    gap: 7px;
    align-items: flex-start;
    margin-top: 10px;
}

.fsched-editor .fsched-filefield { flex: 1; min-width: 0; }
.fsched-editor .fsched-texthost { margin-top: 10px; }

.fsched-editor .fsched-fclear
{
    flex: none;
    border: 1px solid #e4e6ef;
    background: #ffffff;
    border-radius: 9px;
    color: #a1a5b7;
    width: 38px;
    min-height: 38px;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 12px;
}

.fsched-editor .fsched-fclear:hover { color: #f1416c; border-color: #f1416c; background: #fff5f8; }

/* tier 3 — default reference line */
.fsched-editor .fsched-defline
{
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 12.5px;
    color: #5e6278;
}

.fsched-editor .fsched-defbrief { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }

/* empty-default warning */
.fsched-editor .fsched-nonewarn
{
    border: 1.5px dashed #f5b9c9;
    border-radius: 10px;
    background: #fff5f8;
    color: #f1416c;
    font-size: 12px;
    font-weight: 600;
    padding: 10px 12px;
}

.fsched-editor .fsched-warn-icon { margin-right: 6px; font-size: 11px; }

@media (max-width: 700px)
{
    .fsched-editor .fsched-sumwrap { display: none; }
    .fsched-editor .fsched-crow { padding: 11px 12px; }
}

/* PLAYING NOW badge (issue 04) */
.fsched-editor .fsched-badges { margin-left: 8px; }
.fsched-editor .fsched-nowbadge
{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    color: #50cd89;
    background: #e8fff3;
    border-radius: 6px;
    padding: 3px 8px;
    white-space: nowrap;
    vertical-align: middle;
}
.fsched-editor .fsched-nowbadge-dot { font-size: 7px; }

/* Test-a-time panel (issue 05) */
.fsched-editor .fsched-testbtn
{
    margin-left: auto;
    border: 1.5px solid #e4e6ef;
    background: #ffffff;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 700;
    color: #5e6278;
    padding: 5px 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.fsched-editor .fsched-testbtn:hover { border-color: #7239ea; color: #7239ea; }
.fsched-editor .fsched-testbtn.fsched-on { background: #f8f5ff; border-color: #7239ea; color: #7239ea; }
.fsched-editor .fsched-testbtn-icon { font-size: 11px; margin-right: 5px; }

.fsched-editor .fsched-testpanel
{
    border: 1.5px solid #ddd0f5;
    border-radius: 12px;
    background: #fcfbff;
    padding: 14px 16px;
    margin-bottom: 12px;
    display: flex;
    gap: 18px;
    align-items: stretch;
    position: relative;
}

.fsched-editor .fsched-test-close
{
    position: absolute;
    top: 8px;
    right: 8px;
    color: #a1a5b7;
    cursor: pointer;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    font-size: 11px;
}
.fsched-editor .fsched-test-close:hover { background: #f8f5ff; color: #7239ea; }

.fsched-editor .fsched-test-ctrl { width: 250px; flex: none; }
.fsched-editor .fsched-test-lab
{
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #7239ea;
    margin-bottom: 8px;
}
.fsched-editor .fsched-test-date { font-size: 12.5px; }
.fsched-editor .fsched-test-time { margin-top: 10px; display: block; }
.fsched-editor .fsched-test-time input { font-size: 12.5px; width: 100%; }
.fsched-editor .fsched-test-now
{
    margin-top: 10px;
    color: #7239ea;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.fsched-editor .fsched-test-now-icon { font-size: 10px; margin-right: 4px; }
.fsched-editor .fsched-test-tz { font-size: 10.5px; color: #a1a5b7; margin-top: 8px; }

.fsched-editor .fsched-test-out
{
    flex: 1;
    min-width: 0;
    border-left: 1px dashed #ddd0f5;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}
.fsched-editor .fsched-test-when { font-size: 11.5px; color: #a1a5b7; font-weight: 600; }
.fsched-editor .fsched-test-hear { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fsched-editor .fsched-test-pp { flex: none; }
.fsched-editor .fsched-test-what { min-width: 0; }
.fsched-editor .fsched-test-what-title
{
    font-size: 14px;
    font-weight: 700;
    color: #181c32;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fsched-editor .fsched-test-what-sub { font-size: 11px; color: #a1a5b7; }
.fsched-editor .fsched-test-via
{
    font-size: 11.5px;
    color: #5e6278;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.fsched-editor .fsched-winchip
{
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    color: #7239ea;
    background: #f8f5ff;
    border-radius: 7px;
    padding: 3px 9px;
    white-space: nowrap;
}

/* AT TESTED TIME badge + card outline */
.fsched-editor .fsched-card.fsched-tested { border-color: #7239ea; }
.fsched-editor .fsched-testedbadge
{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    color: #7239ea;
    background: #f8f5ff;
    border-radius: 6px;
    padding: 3px 8px;
    white-space: nowrap;
    vertical-align: middle;
    margin-left: 5px;
}
.fsched-editor .fsched-testedbadge-icon { font-size: 9px; }

@media (max-width: 700px)
{
    .fsched-editor .fsched-testpanel { flex-direction: column; }
    .fsched-editor .fsched-test-ctrl { width: 100%; }
    .fsched-editor .fsched-test-out { border-left: 0; padding-left: 0; border-top: 1px dashed #ddd0f5; padding-top: 12px; }
}

/* scheduled rows: which schedule the file runs off of */
.files-manager .fm-schedrow-win
{
    margin-left: auto;
    flex: none;
    font-size: 11.5px;
    font-weight: 700;
    color: #7239ea;
    background: #f8f5ff;
    padding: 4px 10px;
    border-radius: 7px;
    white-space: nowrap;
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 700px)
{
    .files-manager .fm-schedrow-win { display: none; }
}

/* lock-note link to the selected schedule's own edit page */
.fsched-editor .fsched-sched-link
{
    margin-left: 8px;
    font-weight: 700;
    color: #009ef7;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}
.fsched-editor .fsched-sched-link:hover { color: #0095e8; text-decoration: underline; }
.fsched-editor .fsched-sched-link-icon { font-size: 9px; margin-left: 4px; }

/* ============================================================================
   Hold Music files editor (HoldMusic_FilesEditor) — prototype-C pane: a pane bar
   ("In this playlist" + Stream + Add music) over EditableSelector-style rows.
   REAL portal palette (#6993FF Metronic-7 — see memory project_portal_color_scheme).
   Source of truth: docs/prototypes/holdmusic-settings/PROTOTYPE_holdmusic_settings.html
   ============================================================================ */

/* the editor is a self-contained card; inside the detail page the pane swaps the
   border for the portal card shadow */
.hm-files-editor
{
    background: #ffffff;
    border: 1px solid #ebedf3;
    border-radius: 6px;
    overflow: hidden;
}
.hm-detail .hm-files-editor { border: 0; box-shadow: 0 0 30px rgba(82, 63, 105, .05); }

.hm-fe-panebar
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 13px 18px;
    border-bottom: 1px solid #ebedf3;
}
.hm-fe-panetitle { font-size: 13.5px; font-weight: 600; color: #181C32; }
.hm-fe-paneacts { display: flex; gap: 8px; }
.hm-fe-paneacts .btn { font-size: 12px; font-weight: 600; border-radius: 6px; padding: 8px 14px; }

.hm-files-editor .hm-fe-empty
{
    border: 1.5px dashed #E4E6EF;
    border-radius: 6px;
    text-align: center;
    color: #B5B5C3;
    padding: 26px 20px;
    font-size: 13px;
    margin: 14px 18px;
}

/* ---- EditableSelector-style rows (block wrapper: main line + volume line) ---- */
.hm-fe-srow { border-bottom: 1px solid #ebedf3; background: #ffffff; }
.hm-fe-srow:last-child { border-bottom: 0; }

.hm-fe-srowmain
{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    min-height: 58px;
}

.hm-fe-sord { width: 16px; text-align: center; font-size: 11px; font-weight: 600; color: #B5B5C3; flex: none; }

.hm-fe-sym
{
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: #E1E9FF;
    color: #6993FF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex: none;
}
.hm-fe-streamrow .hm-fe-sym { background: #fff4de; color: #FFA800; }

.hm-fe-sinfo { flex: 1; min-width: 0; }
.hm-fe-stitle
{
    font-size: 13px;
    font-weight: 500;
    color: #3F4254;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hm-fe-ssub { font-size: 11.5px; color: #B5B5C3; margin-top: 1px; }

/* per-row preview play button (CSCirclePlayButton) — one clean solid brand disc.
   The portal's global .player_button i rule draws its OWN grey ring (3px border +
   1.5em size) around the glyph — kill it so the button is a modern filled circle. */
.hm-fe-srowmain .hm-fe-play
{
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    margin: 0;
    flex: 0 0 auto;
    border-radius: 50% !important;
    background: #6993FF !important;
    color: #ffffff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0;
    box-shadow: 0 4px 10px rgba(105, 147, 255, .35);
    transition: transform .1s ease, background .12s ease;
}
.hm-fe-srowmain .hm-fe-play:hover { background: #4A7DFF !important; transform: scale(1.06); }
.hm-fe-srowmain .hm-fe-play > span
{
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin: 0 !important;
}
/* collapse the widget's empty text-label span */
.hm-fe-srowmain .hm-fe-play > span:empty { display: none; }
.hm-fe-srowmain .hm-fe-play i
{
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    color: #ffffff !important;
    font-size: 13px !important;
    line-height: 1 !important;
    width: auto !important;
    height: auto !important;
    display: block;
}
/* optically centre the FA play triangle */
.hm-fe-srowmain .hm-fe-play i.fa-play { margin-left: 2px !important; }

/* circle option buttons (volume / reorder / remove) */
.hm-fe-sacts { display: flex; align-items: center; gap: 2px; flex: none; }
.hm-fe-sact
{
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: #B5B5C3;
    cursor: pointer;
    font-size: 11px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hm-fe-sact:hover:not(:disabled) { background: #f3f6f9; color: #6993FF; }
.hm-fe-sact:disabled { color: #ebedf3; cursor: default; }
.hm-fe-sact.on { background: #E1E9FF; color: #6993FF; }
.hm-fe-sact-del:hover:not(:disabled) { background: #FFE2E5; color: #F64E60; }

/* per-track volume: hidden second line, toggled by the row's volume button */
.hm-fe-volline
{
    display: none;
    align-items: center;
    gap: 12px;
    padding: 0 18px 12px 86px;
}
.hm-fe-volline.open { display: flex; }
.hm-fe-volline .Wt-slider { margin: 0; }
/* native range slider — fully branded track + thumb (system default clashes) */
.hm-fe-volline input[type="range"]
{
    -webkit-appearance: none;
    appearance: none;
    width: 260px;
    max-width: 55vw;
    height: 22px;
    background: transparent;
    outline: none;
    cursor: pointer;
    margin: 0;
}
.hm-fe-volline input[type="range"]::-webkit-slider-runnable-track
{
    height: 6px;
    border-radius: 99px;
    background: #E1E9FF;
}
.hm-fe-volline input[type="range"]::-webkit-slider-thumb
{
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #6993FF;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 4px rgba(105, 147, 255, .45);
    margin-top: -5px;
}
.hm-fe-volline input[type="range"]::-moz-range-track
{
    height: 6px;
    border-radius: 99px;
    background: #E1E9FF;
}
.hm-fe-volline input[type="range"]::-moz-range-thumb
{
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #6993FF;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 4px rgba(105, 147, 255, .45);
}
.hm-fe-vollabel
{
    font-size: 11px;
    font-weight: 700;
    color: #5e6278;
    min-width: 64px;
    text-align: left;
    white-space: nowrap;
}

/* hold-music SELECTOR preview button (SelectorField, gated to source generic_getHoldMusicList).
   The field becomes a flex row: selector grows, play button sits to its right. Scoped by the
   .cs-hm-preview-field class which is only added to hold-music selector fields. */
.cs-hm-preview-field { display: flex; align-items: center; gap: 8px; }
.cs-hm-preview-field > *:first-child { flex: 1 1 auto; min-width: 0; }
.cs-hm-preview-field > .cs-hm-preview-play
{
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #f1faff;
    color: #009ef7;
    cursor: pointer;
    font-size: 14px;
}
.cs-hm-preview-field > .cs-hm-preview-play:hover { background: #d9f1fe; }

/* call-flow SELECTOR open-in-builder button (SelectorField, gated to source generic_getCallFlows).
   Same flex-row treatment as the hold-music preview button above. */
.cs-cf-link-field { display: flex; align-items: center; gap: 8px; }
.cs-cf-link-field > *:first-child { flex: 1 1 auto; min-width: 0; }
.cs-cf-link-field > .cs-cf-link-btn
{
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #f1faff;
    color: #009ef7;
    cursor: pointer;
    font-size: 14px;
}
.cs-cf-link-field > .cs-cf-link-btn:hover { background: #d9f1fe; }

/* explicit "Add" affordance on each picker tile (only rendered in picker mode) */
.files-manager .fm-tile-add
{
    margin-top: 9px;
    width: 100%;
    border: 0;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    padding: 6px;
    cursor: pointer;
    background: #009ef7;
    color: #ffffff;
}
.files-manager .fm-tile-add:hover { background: #0095e8; }

/* already added to the playlist — green "Added" state, no longer a primary call to action.
   The .fm-tile-add-done rules win over the base .fm-tile-add (equal specificity, later in file). */
.files-manager .fm-tile-add.fm-tile-add-done,
.files-manager .fm-tile-add.fm-tile-add-done:hover
{
    background: #e8fff3;
    color: #47be7d;
    cursor: default;
}
.files-manager .fm-tile-add.fm-tile-add-done::before { content: "\2713 "; font-weight: 700; }
/* the whole tile reads as "in the list" once added */
.hm-picker-modal .fm-tile.fm-tile-pickable:has(.fm-tile-add-done) { border-color: #47be7d; }

/* ---- audio picker modal (opened from "Add music from library"). The FileManager's
   .fm-card fills the viewport on its own page; bound it to a comfortable modal height
   and let the grid/tree scroll internally. A wide modal has room for the folder tree,
   so it is shown normally (no inline collapse hack). ---- */
.hm-picker-modal .fm-tile-pickable { cursor: pointer; }
.hm-picker-modal .fm-tile-pickable:hover { border-color: #009ef7; }
.hm-picker-modal .files-manager .fm-card
{
    min-height: 380px;
    height: 62vh;
    max-height: 620px;
    box-shadow: none;
}
.hm-picker-modal .files-manager .fm-pane { overflow: hidden; }
.hm-picker-modal .files-manager .fm-grid { overflow-y: auto; }
.hm-picker-modal .files-manager .fm-tree { overflow-y: auto; }

/* ---- QuickEdit "Advanced hold music playlist options" accordion (wizard §1) ---- */
.hm-qe-accordion
{
    border: 1px solid #eff2f5;
    border-radius: 10px;
    margin-top: 8px;
    overflow: hidden;
}
.hm-qe-acc-header
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #5e6278;
    background: #fafbfc;
    user-select: none;
}
.hm-qe-acc-header:hover { color: #009ef7; }
.hm-qe-acc-chevron { font-size: 11px; color: #a1a5b7; transition: transform .15s; }
.hm-qe-accordion.open .hm-qe-acc-chevron { transform: rotate(180deg); }
.hm-qe-acc-body { display: none; padding: 4px 14px 12px; }
.hm-qe-accordion.open .hm-qe-acc-body { display: block; }

/* ============================================================================
   Hold Music detail page redesign (HoldMusic_DetailPage, prototype C "tabbed
   studio"): header card (icon + renameable name DataWidget + chips + Preview)
   + Tracks|Playback|Sharing tabs; each settings tab is a restyled DataWidget.
   REAL portal palette (#6993FF Metronic-7).
   Source of truth: docs/prototypes/holdmusic-settings/PROTOTYPE_holdmusic_settings.html
   ============================================================================ */

/* ---- header card ---- */
.hm-dt-head
{
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0 0 30px rgba(82, 63, 105, .05);
    padding: 20px 22px 0;
    margin-bottom: 18px;
}
.hm-dt-hrow
{
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 16px;
}
.hm-dt-hico
{
    width: 56px;
    height: 56px;
    border-radius: 10px;
    background: #E1E9FF;
    color: #6993FF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex: none;
}
.hm-dt-htxt { flex: 1; min-width: 240px; }

/* the name is a chrome-stripped one-field DataWidget; view mode = the page title */
.hm-dt-namerow { display: flex; align-items: center; gap: 9px; }
/* the DataWidget root carries a col-* class (width:100%) — shrink-wrap it so the
   rename pencil sits right beside the name, not at the far edge of the row */
.hm-dt-namewidget { padding: 0 !important; margin: 0 !important; flex: 0 1 auto; min-width: 0; width: auto !important; }
.hm-dt-namewidget .card { background: transparent; border: 0; box-shadow: none; margin: 0; }
.hm-dt-namewidget .card-body { padding: 0 !important; }
.hm-dt-namewidget .card-footer { background: transparent; border: 0; padding: 8px 0 0 !important; }
.hm-dt-namefield { font-size: 17px; font-weight: 600; color: #181C32; }
/* the edit input gets a real, title-sized box — the shrink-wrapped widget otherwise
   leaves it at the browser's tiny default text-input width */
.hm-dt-namefield input.form-control
{
    width: 360px;
    max-width: 70vw;
    font-size: 16px;
    font-weight: 600;
    padding: 8px 12px;
    height: auto;
    border-radius: 6px;
}
.hm-dt-namepen { color: #B5B5C3; font-size: 12px; cursor: pointer; padding: 6px 2px; }
.hm-dt-namepen:hover { color: #6993FF; }

/* summary chips — click jumps to the owning tab */
.hm-dt-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
.hm-dt-chip
{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 500;
    color: #5e6278;
    background: #f3f6f9;
    border-radius: 999px;
    padding: 4px 11px;
    cursor: pointer;
}
.hm-dt-chip i { font-size: 9.5px; color: #B5B5C3; }
.hm-dt-chip:hover { background: #E1E9FF; color: #6993FF; }
.hm-dt-chip:hover i { color: #6993FF; }

.hm-dt-previewbtn
{
    background: #E1E9FF;
    color: #6993FF;
    border: 0;
    border-radius: 6px;
    font-weight: 600;
    font-size: 12.5px;
    padding: 9px 16px;
    flex: none;
}
.hm-dt-previewbtn:hover { background: #d3e0ff; color: #6993FF; }
.hm-dt-previewbtn i { margin-right: 5px; }
.hm-dt-previewbtn:disabled,
.hm-dt-previewbtn.disabled { opacity: .5; cursor: default; background: #E1E9FF; }

/* ---- tab strip ---- */
.hm-dt-tabs { display: flex; gap: 24px; border-top: 1px solid #ebedf3; }
.hm-dt-tab
{
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 2px;
    font-size: 12.5px;
    font-weight: 600;
    color: #B5B5C3;
    cursor: pointer;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -1px;
}
.hm-dt-tab:hover { color: #5e6278; }
.hm-dt-tab.on { color: #6993FF; border-bottom-color: #6993FF; }
.hm-dt-tabcnt { font-size: 10.5px; background: #f3f6f9; border-radius: 6px; padding: 1px 6px; color: #B5B5C3; }
.hm-dt-tab.on .hm-dt-tabcnt { background: #E1E9FF; color: #6993FF; }

/* ---- panes (CSS-class hiding — never Wt-hidden at first render) ---- */
.hm-dt-pane-off { display: none; }
.hm-dt-panewidget { padding: 0 !important; }
.hm-dt-panewidget .card { border-radius: 6px; box-shadow: 0 0 30px rgba(82, 63, 105, .05); border: 0; }

/* described setting rows inside the Playback/Sharing DataWidgets */
.hm-dt-setrow
{
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 2px;
    border-bottom: 1px solid #ebedf3;
}
.hm-dt-setrow:last-child { border-bottom: 0; }
.hm-dt-settxt { flex: 1; min-width: 0; }
.hm-dt-settitle { font-size: 13px; font-weight: 600; color: #3F4254; }
.hm-dt-setdesc { font-size: 11.5px; color: #B5B5C3; margin-top: 2px; line-height: 1.5; }
/* fixed control column so the volume slider gets a real track width (ionRangeSlider
   measures its container) — toggles just sit right-aligned inside the same column */
.hm-dt-setctl { flex: 0 0 320px; max-width: 320px; display: flex; justify-content: flex-end; align-items: center; min-width: 0; }
.hm-dt-setctl .avidbit-selector { min-width: 240px; }
/* slider rows grow into a wide, normal-looking track: widen the column and stretch
   the whole widget chain (DataField → SliderBar → .irs) to fill it */
.hm-dt-setctl:has(.irs) { flex: 1 1 320px; max-width: 460px; }
.hm-dt-setctl:has(.irs) > * { width: 100%; }
.hm-dt-setctl .irs { width: 100%; }
.hm-dt-setctl input.form-control[type="text"] { width: 100%; }
@media (max-width: 640px)
{
    .hm-dt-setrow { flex-direction: column; align-items: flex-start; gap: 8px; }
    .hm-dt-setctl { justify-content: flex-start; flex: 0 0 auto; max-width: 100%; width: 100%; }
}

/* ---- stream modal fields ---- */
.hm-sm-fld { margin-bottom: 14px; }
.hm-sm-label { font-size: 12px; font-weight: 500; color: #3F4254; margin-bottom: 6px; }
.hm-stream-modal .hm-sm-input
{
    width: 100%;
    border: 1px solid #E4E6EF;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
    outline: none;
    background: #ffffff;
    color: #181C32;
}
.hm-stream-modal .hm-sm-input:focus { border-color: #6993FF; }
.hm-sm-hint { font-size: 11.5px; color: #B5B5C3; line-height: 1.5; }
.hm-stream-modal .modal-dialog { max-width: 460px; }

/* file-details drawer: "Used by" accordion (loaded on open, count on the toggle) */
.fm-usage { margin-top: 6px; }
.fm-usage-toggle { display: flex; align-items: center; gap: 9px; padding: 10px 12px; background: #f7f9fc; border: 1px solid #eef1f6; border-radius: 10px; cursor: pointer; user-select: none; font-size: 12.5px; font-weight: 700; color: #3f4254; transition: background .12s, border-color .12s; }
.fm-usage-toggle:hover { background: #eef3f8; border-color: #e3e8ef; }
.fm-usage-lead { color: #7239ea; font-size: 13px; width: 16px; text-align: center; }
.fm-usage-count { font-size: 10.5px; font-weight: 700; background: #ece2ff; color: #7239ea; border-radius: 9px; padding: 1px 7px; }
.fm-usage-caret { margin-left: auto; color: #a1a5b7; font-size: 11px; transition: transform .15s ease; }
.fm-usage.open .fm-usage-toggle { background: #eef3f8; border-color: #e3e8ef; border-radius: 10px 10px 0 0; }
.fm-usage.open .fm-usage-caret { transform: rotate(90deg); }
.fm-usage-content { border: 1px solid #eef1f6; border-top: 0; border-radius: 0 0 10px 10px; padding: 2px 12px 8px; background: #fff; animation: fmUsageDrop .14s ease; }
@keyframes fmUsageDrop { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.fm-usage-content .usedby { box-shadow: none; margin: 0; padding: 6px 0 0; background: transparent; border-radius: 0; }
.fm-usage-content .usedby-head { display: none; }
.fm-usage-content .usedby-empty { color: #888; font-style: italic; font-size: 13px; padding: 4px 0; }

/* AI-managed opt-in: banner (shown when on), nudge tip (after a generation), toggle glow */
.fsched-editor .fsched-ai-banner
{
    display: flex;
    align-items: flex-start;
    border: 1px solid #c7d3ff;
    border-radius: 10px;
    background: #eef2ff;
    color: #3b4a8c;
    font-size: 12px;
    line-height: 1.45;
    padding: 9px 12px;
    margin-top: 6px;
}
.fsched-editor .fsched-ai-banner-icon { margin-right: 8px; margin-top: 1px; font-size: 12px; color: #6993FF; }

.fsched-editor .fsched-ai-tip
{
    display: flex;
    align-items: flex-start;
    border: 1px solid #ffe2a8;
    border-radius: 10px;
    background: #fff8e8;
    color: #8a6d1f;
    font-size: 12px;
    line-height: 1.45;
    padding: 9px 12px;
    margin-top: 6px;
}
.fsched-editor .fsched-ai-tip-icon { margin-right: 8px; margin-top: 1px; font-size: 12px; color: #e0a800; }

/* post-generation nudge triangle sitting next to the Generate button */
.fsched-editor .ai-greeting-autoupdate-nudge { cursor: help; font-size: 14px; align-self: center; }

/* glow that draws the eye to the toggle right after a generation */
.fsched-editor .fsched-ai-highlight
{
    border-radius: 10px;
    box-shadow: 0 0 0 3px rgba(105, 147, 255, 0.35);
    animation: fschedAiPulse 1.6s ease-in-out 3;
}
@keyframes fschedAiPulse
{
    0%   { box-shadow: 0 0 0 0 rgba(105, 147, 255, 0.45); }
    50%  { box-shadow: 0 0 0 5px rgba(105, 147, 255, 0.15); }
    100% { box-shadow: 0 0 0 0 rgba(105, 147, 255, 0.0); }
}

/* neutral helper line under the "This schedule is for voicemail" toggle */
.fsched-editor .fsched-vm-help
{
    display: flex;
    align-items: flex-start;
    color: #a1a5b7;
    font-size: 11.5px;
    line-height: 1.45;
    margin-top: 4px;
}
.fsched-editor .fsched-vm-help-icon { margin-right: 8px; margin-top: 1px; font-size: 12px; color: #6993FF; }