/*
My custom Style
*/

.input_bold {
    font-weight: bold;
}



/* ---- Image pickers: Profile Image / Multiple Images --------------------
   The old markup used .profile-user-img / .img-circle, which this theme does
   not define, so a 1452x1318 placeholder was squashed into a bare 105x105 box
   sitting flush against the file input. Sizing and borders follow the theme's
   own variables; the one deliberate exception is the thumbnail backing, for
   the reason set out below. */

.img-picker .form-control { margin-block-end: .35rem; }
.img-picker .form-text,
.img-picker small.text-muted { display: block; font-size: .75rem; }

/* ---- Why these thumbnails do NOT follow the theme ----------------------
   A logo saved as a transparent PNG has no background of its own, so it is
   drawn straight onto whatever is behind it. Following the theme put a dark
   panel there in dark mode, and any logo with dark strokes simply vanished.

   So the backing is a fixed light panel in both modes. Nothing has to detect
   transparency: a photo is opaque and covers this completely, so it is only
   ever seen through the images that actually need it. */

/* single thumbnail (Profile Image) */
.profile-thumb {
    display: block;
    width: 104px;
    height: 104px;
    margin-block-start: .6rem;
    padding: 5px;
    object-fit: contain;              /* a logo is never cropped or stretched */
    background-color: #f4f5f7;        /* see the note above — deliberately not themed */
    border: 1px solid var(--input-border);
    border-radius: 10px;
}

/* thumbnail strip (Multiple Images) */
#preview-container,
#existing-preview-container { gap: 10px; margin-block-start: .6rem !important; }

.preview-wrapper {
    position: relative;
    margin: 0;
    line-height: 0;
}
.preview-wrapper img {
    width: 78px;
    height: 78px;
    object-fit: cover;
    background-color: #f4f5f7;        /* same reason as .profile-thumb above */
    border: 1px solid var(--input-border);
    border-radius: 8px;
}
.remove-btn {
    position: absolute;
    top: -7px;
    inset-inline-end: -7px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    font-size: 13px;
    line-height: 1;
    color: #fff;
    background: rgb(var(--danger-rgb));
    border: 2px solid var(--custom-white);
    border-radius: 50%;
    cursor: pointer;
}
.remove-btn:hover { filter: brightness(1.15); }
/* ---- Customer dashboard tiles -----------------------------------------
   The tiles used to be a bare `.border` box with no background. In dark mode
   that reads fine — the border is rgba(255,255,255,.1) against a navy page —
   but in light mode --default-border is #e7e7ef and the page behind it is
   rgb(228,227,239), so the outline was invisible and the whole row melted into
   the background while the cards under it were white. Giving the tile the same
   surface the theme gives a card fixes light mode and leaves dark mode exactly
   as it was, because --custom-white is the body colour there. */

.pdash-tile {
    height: 100%;
    padding: 1rem;
    background-color: var(--custom-white);
    border: 1px solid var(--default-border);
    border-radius: 0.5rem;
}

a.pdash-tile-link { display: block; height: 100%; }
a.pdash-tile-link:hover .pdash-tile {
    border-color: rgba(var(--primary-rgb), 0.4);
}

/* ---- Panel presence dot -------------------------------------------------
   Rendered by panel_presence_dot() and flipped live by panel-realtime.js.
   Grey is the resting state, so a page still reads correctly when the
   realtime server is down. */
.panel-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gray-4, #adb5bd);
    vertical-align: middle;
    margin-inline-end: 2px;
    flex-shrink: 0;
    transition: background-color .25s ease, box-shadow .25s ease;
}
.panel-dot.is-online {
    background: rgb(var(--success-rgb));
    box-shadow: 0 0 0 3px rgba(var(--success-rgb), .18);
}

/* ==== Floating conversation box (js/panel-chat.js) ======================
   Bottom-right on a desktop, full screen on a phone. Every colour is a
   theme variable, so light and dark both follow without a second palette. */
.pchat {
    position: fixed;
    inset-inline-end: 24px;
    inset-block-end: 24px;
    z-index: 1045;                 /* under Bootstrap modals (1055), over content */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    pointer-events: none;
}
.pchat > * { pointer-events: auto; }

/* --- launcher --- */
.pchat-launcher {
    position: relative;
    width: 54px;
    height: 54px;
    border: 0;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(var(--primary-rgb), .45);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}
.pchat-launcher:hover { transform: translateY(-2px); }
.pchat.is-ping .pchat-launcher { animation: pchat-ping 1.4s ease-in-out 2; }
@keyframes pchat-ping {
    0%, 100% { box-shadow: 0 6px 20px rgba(var(--primary-rgb), .45); }
    50%      { box-shadow: 0 6px 28px 8px rgba(var(--primary-rgb), .35); transform: scale(1.06); }
}

.pchat-badge {
    position: absolute;
    top: -2px;
    inset-inline-end: -2px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: rgb(var(--danger-rgb));
    border: 2px solid var(--custom-white);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
}

/* --- panel --- */
.pchat-panel {
    width: 360px;
    max-width: calc(100vw - 32px);
    height: 480px;
    max-height: calc(100vh - 120px);
    display: none;
    flex-direction: column;
    overflow: hidden;
    background: var(--custom-white);
    border: 1px solid var(--default-border);
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
}
.pchat.is-open .pchat-panel { display: flex; }

.pchat-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-block-end: 1px solid var(--default-border);
    background: var(--primary-color);
    color: #fff;
    flex-shrink: 0;
}
.pchat-title {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pchat-icon {
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .85);
    font-size: 15px;
    line-height: 1;
    padding: 4px;
    border-radius: 6px;
    cursor: pointer;
}
.pchat-icon:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.pchat-head .panel-dot { background: rgba(255, 255, 255, .45); }
.pchat-head .panel-dot.is-online { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .3); }

/* --- conversation list (staff only) --- */
.pchat-convs { flex: 1; overflow-y: auto; display: block; }
.pchat.in-thread .pchat-convs,
.pchat.is-single .pchat-convs { display: none; }

.pchat-conv {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 0;
    border-block-end: 1px solid var(--default-border);
    background: transparent;
    color: var(--default-text-color);
    text-align: start;
    cursor: pointer;
}
.pchat-conv:hover { background: rgba(var(--primary-rgb), .06); }
.pchat-conv.is-unread { background: rgba(var(--primary-rgb), .08); }
.pchat-conv.is-unread .pchat-conv-name { font-weight: 700; }
.pchat-conv-name { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pchat-conv-count {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
    background: rgb(var(--danger-rgb)); color: #fff;
    font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
}

/* --- messages --- */
.pchat-body { flex: 1; overflow-y: auto; padding: 14px; display: none; }
.pchat.in-thread .pchat-body,
.pchat.is-single .pchat-body { display: block; }

.pchat-row { display: flex; margin-block-end: 10px; }
.pchat-row.is-mine   { justify-content: flex-end; }
.pchat-row.is-theirs { justify-content: flex-start; }

.pchat-bubble {
    max-width: 78%;
    padding: 8px 12px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.45;
    word-break: break-word;
}
.pchat-row.is-mine .pchat-bubble {
    background: var(--primary-color);
    color: #fff;
    border-end-end-radius: 4px;
}
.pchat-row.is-theirs .pchat-bubble {
    background: rgb(var(--light-rgb));
    color: var(--default-text-color);
    border-end-start-radius: 4px;
}
.pchat-who  { font-size: 11px; font-weight: 700; opacity: .75; margin-block-end: 2px; }
.pchat-time { font-size: 10px; opacity: .6; margin-block-start: 3px; text-align: end; }

.pchat-empty {
    height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: var(--text-muted);
    font-size: 13px; text-align: center; padding: 20px;
}
.pchat-empty span { font-size: 11px; opacity: .8; }

/* --- composer --- */
.pchat-foot {
    display: none;
    gap: 8px;
    padding: 10px 12px;
    border-block-start: 1px solid var(--default-border);
    flex-shrink: 0;
}
.pchat.in-thread .pchat-foot,
.pchat.is-single .pchat-foot { display: flex; }

.pchat-input {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    font-size: 13px;
    color: var(--default-text-color);
    background: var(--form-control-bg);
    border: 1px solid var(--input-border);
    border-radius: 20px;
    outline: none;
}
.pchat-input:focus { border-color: var(--primary-color); }
.pchat-send {
    width: 38px; height: 38px; flex-shrink: 0;
    border: 0; border-radius: 50%;
    background: var(--primary-color); color: #fff;
    font-size: 15px; cursor: pointer;
}

/* --- full screen: the phone default, and the expand button anywhere --- */
.pchat.is-full {
    inset: 0;
    inset-inline-end: 0;
    inset-block-end: 0;
    gap: 0;
}
.pchat.is-full .pchat-panel {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border: 0;
    border-radius: 0;
}
.pchat.is-full .pchat-launcher { display: none; }

@media (max-width: 767px) {
    .pchat { inset-inline-end: 16px; inset-block-end: 16px; }
    .pchat-launcher { width: 50px; height: 50px; font-size: 20px; }
}

/* Unread count on the header envelope. The theme's .pulse-danger dot stays for
   the "something is waiting" glance; this carries the actual number. */
.header-link { position: relative; }
.header-count {
    position: absolute;
    top: 2px;
    inset-inline-end: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: rgb(var(--danger-rgb));
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/* .panel-dot and .pchat-badge both set `display`, which beats the [hidden]
   attribute from the UA stylesheet — so hiding them from JavaScript needs
   saying out loud. Without this the header dot never disappears. */
.pchat [hidden],
.panel-dot[hidden],
.header-count[hidden] { display: none !important; }

/* A waiting message earns a little weight on the launcher. */
.pchat.has-unread .pchat-launcher { box-shadow: 0 6px 22px rgba(var(--danger-rgb), .45); }

/* Bootstrap 5.2 has no .min-w-0, and a flex child will not shrink below its
   content width without it — so .text-truncate beside a dot does nothing. */
.min-w-0 { min-width: 0 !important; }

/* ---- "Did we help you?" — the farewell over the conversation ------------ */
.pchat-leave {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 28px 24px;
    text-align: center;
    background: var(--custom-white);
}
.pchat-panel { position: relative; }          /* the overlay above anchors to this */
.pchat-leave[hidden] { display: none !important; }

.pchat-leave-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--default-text-color);
}
.pchat-leave-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-block-end: 18px;
}

.pchat-leave-rate { display: flex; gap: 14px; margin-block-end: 24px; }
.pchat-rate {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--default-text-color);
    background: rgb(var(--light-rgb));
    border: 1px solid var(--default-border);
    border-radius: 50%;
    cursor: pointer;
    transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.pchat-rate:hover { transform: translateY(-2px); }
.pchat-rate.is-picked {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.pchat-leave-actions {
    display: flex;
    gap: 10px;
    width: 100%;
    max-width: 320px;
}
.pchat-leave-back,
.pchat-leave-go {
    flex: 1;
    padding: 11px 8px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 24px;
    cursor: pointer;
    border: 1px solid transparent;
}
.pchat-leave-back {
    color: var(--primary-color);
    background: rgba(var(--primary-rgb), .10);
}
.pchat-leave-go {
    color: rgb(var(--danger-rgb));
    background: rgba(var(--danger-rgb), .10);
}
.pchat-leave-back:hover { background: rgba(var(--primary-rgb), .18); }
.pchat-leave-go:hover   { background: rgba(var(--danger-rgb), .18); }

.pchat-leave-note {
    margin-block-start: 16px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-muted);
    max-width: 300px;
}

/* The composer is meaningless while the farewell is up. */
.pchat.is-leaving .pchat-foot { display: none; }

/* A note in the thread that nobody typed. */
.pchat-system {
    margin: 10px 0;
    padding: 6px 10px;
    font-size: 11px;
    text-align: center;
    color: var(--text-muted);
    background: rgb(var(--light-rgb));
    border-radius: 10px;
}

/* Rating shown on a closure mark. */
.pchat-mood { font-weight: 600; }
.pchat-mood.is-up   { color: rgb(var(--success-rgb)); }
.pchat-mood.is-down { color: rgb(var(--danger-rgb)); }

/* ---- Chat attachments --------------------------------------------------- */
.pchat-clip {
    width: 36px; height: 36px; flex-shrink: 0;
    border: 0; border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font-size: 16px; cursor: pointer;
}
.pchat-clip:hover { background: rgba(var(--primary-rgb), .10); color: var(--primary-color); }

/* files chosen but not sent yet */
.pchat-tray {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 8px 12px 0;
    flex-shrink: 0;
}
.pchat-tray[hidden] { display: none !important; }
.pchat-chip {
    display: inline-flex; align-items: center; gap: 6px;
    max-width: 100%;
    padding: 4px 6px 4px 9px;
    font-size: 11px;
    color: var(--default-text-color);
    background: rgb(var(--light-rgb));
    border: 1px solid var(--default-border);
    border-radius: 14px;
}
.pchat-chip.is-busy { opacity: .6; }
.pchat-chip.is-bad  { border-color: rgb(var(--danger-rgb)); color: rgb(var(--danger-rgb)); }
.pchat-chip-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pchat-chip-why  { font-size: 10px; opacity: .85; }
.pchat-chip-x {
    border: 0; background: transparent; cursor: pointer;
    color: inherit; font-size: 14px; line-height: 1; padding: 0 2px;
}
.pchat-chip.is-busy .fe-loader { animation: pchat-spin 1s linear infinite; }
@keyframes pchat-spin { to { transform: rotate(360deg); } }

/* sent, inside a bubble */
.pchat-atts { display: flex; flex-direction: column; gap: 6px; margin-block-start: 6px; }

.pchat-att-img { display: block; line-height: 0; }
.pchat-att-img img {
    max-width: 100%;
    max-height: 220px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .25);
    object-fit: cover;
}
.pchat-row.is-theirs .pchat-att-img img { border-color: var(--default-border); }

.pchat-att-file {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    font-size: 12px;
    text-decoration: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, .18);
    color: inherit;
}
.pchat-row.is-theirs .pchat-att-file {
    background: var(--custom-white);
    border: 1px solid var(--default-border);
}
.pchat-att-file:hover { filter: brightness(1.08); }
.pchat-att-file .fe { font-size: 17px; flex-shrink: 0; }
.pchat-att-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pchat-att-size { font-size: 10px; opacity: .75; flex-shrink: 0; }

/* Offline but waiting — says why the row is there when there is no dot. */
.pchat-conv-why {
    font-size: 10px;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
 * Sidebar icons: one size for all of them.
 *
 * The menu draws from four icon fonts at once — Themify (ti-), Remix (ri-),
 * Feather (fe-), FontAwesome (fab fa-) and a stray simple-line (icon-people).
 * Each has its own optical size and baseline, so the collapsed rail looked
 * ragged: some glyphs large, some small, none lining up with each other or
 * with the toggle above them.
 *
 * Fixing it per icon would mean editing every menu row in the database and
 * redoing it whenever one is added. Sizing the container instead makes every
 * font land in the same box, whatever it is.
 * ------------------------------------------------------------------------ */
.app-sidebar .side-menu__icon {
    width: 1.5rem;
    height: 1.5rem;
    min-width: 1.5rem;
    font-size: 1.125rem;
    line-height: 1;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    /* Glyphs sit on their own baseline; centring the box is not enough to make
       them agree, so let flex place them and drop the font's own offset. */
    vertical-align: middle;
    text-align: center;
}

/* FontAwesome renders noticeably heavier than the line icons around it, so it
   is nudged down a touch rather than left shouting. */
.app-sidebar .side-menu__icon.fab,
.app-sidebar .side-menu__icon.fa,
.app-sidebar .side-menu__icon.fas {
    font-size: 1.0625rem;
}

/* Collapsed rail: centre the whole item so the icons form a straight column
   under the toggle instead of drifting with each label's width.
   The theme marks the collapsed state with data-toggled="close" on <html> —
   the icon-overlay / icon-click names guessed at first are from a different
   build of this template and matched nothing here. */
html[data-toggled="close"] .app-sidebar .side-menu__item {
    justify-content: center;
    padding-inline: .5rem;
}
html[data-toggled="close"] .app-sidebar .side-menu__icon {
    margin-inline-end: 0 !important;
}

/* Footer "Developed by" logo: the dark-text artwork disappears on the dark
   theme, so the footer carries both and shows the one that fits. */
.ornate-credit-dark { display: none; }
html[data-theme-mode="dark"] .ornate-credit-light { display: none; }
html[data-theme-mode="dark"] .ornate-credit-dark { display: inline; }