/*
 * Queue Manager theme: queue board, controls and customer dialog.
 * Matches the Queue Settings dashboard (teal palette, Inter UI, dual-tone icons).
 * Load after the page's inline styles and css/dl.css.
 */

/* ---------- Board header ---------- */
.fq-qm-card .card-header { gap: 1rem; flex-wrap: wrap; }
.fq-qm-title { display: flex; align-items: center; gap: 1rem; min-width: 0; flex: 1; }
.fq-qm-title h6 { font-size: 1rem; color: #2f3a4a !important; white-space: nowrap; }
#qPBContainer.progress { height: 8px; width: 160px !important; margin-left: 0 !important; border-radius: 999px; background: #e3f3f0; overflow: hidden; }
#qPB.progress-bar { font-size: 0; background: #22847a; border-radius: 999px; }
.fq-qm-capacity { font-size: .8rem; color: #6b7780; white-space: nowrap; }
.fq-qm-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .8rem; color: #4f5b63; }
.fq-qm-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.fq-qm-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
#creditsDropDown { display: inline-flex; align-items: center; gap: .4rem; color: #4f5b63; }
#creditsDropDown #phSMSCredits { font-size: 1.15em !important; font-weight: 700; color: #2f3a4a; }

/* ---------- Queue board: one column per operator ---------- */
.umGrid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem; justify-content: flex-start; }
.umGridItem.operatorGridItem {
    background: #fff; border: 1px solid #e3e7ea !important; border-radius: 12px;
    box-shadow: 0 1px 3px rgba(47, 58, 74, .06); padding: .75rem; margin: 0; min-width: 210px; max-width: 280px; flex: 1 1 210px;
}
.umGridItem.operatorGridItem > div:first-child .lead {
    font-size: .95rem; font-weight: 700; color: #2f3a4a; text-align: left !important;
    padding-bottom: .6rem; margin-bottom: .6rem; border-bottom: 1px solid #eef1f3;
}

/* customer card: white card with a status stripe on the left */
.umGridItem:not(.operatorGridItem) {
    background: #fff; border: 1px solid #e3e7ea; border-left: 4px solid #9aa4ab; border-radius: 10px;
    padding: .5rem .6rem; margin: .4rem 0; transition: box-shadow .15s, transform .15s; cursor: pointer;
}
.umGridItem:not(.operatorGridItem):hover { box-shadow: 0 .4rem 1rem rgba(47, 58, 74, .1); transform: translateY(-1px); }
.umGridItem a { color: #4f5b63; font-family: inherit; display: block; }
.umGridItem a:hover { text-decoration: none; }
.umGridItem .row { margin: 0; flex-wrap: nowrap; }
.umGridItem .col { padding: 0 .25rem; }
.umGridItem .badge { display: block; margin-top: .25rem; font-size: .7rem; font-weight: 600; color: #6b7780; background: #f5f7f8; border-radius: 999px; padding: .15rem .4rem; }
.umGridItem span[style*="font-size:1.5em"] { font-size: 1.35em !important; font-weight: 700; color: #2f3a4a; font-variant-numeric: tabular-nums; }

/* statuses */
.umGridItem.waiting  { border-left-color: #9aa4ab; }   /* neutral: the zones carry the traffic-light colours */
.umGridItem.assigned { border-left-color: #2a9d8f; background: #f8fafa; }
.umGridItem.serving  { border-left-color: #2f3a4a; background: #d5ebe7; }

/* zones within a column, as traffic lights: front = green, middle = amber, back = red (muted to suit the theme) */
.bordertop, .bordermid, .borderbottom { margin: .4rem 0; padding: .35rem .5rem .1rem; border-radius: 10px; border-left-width: 4px !important; }
.bordertop    { background: #eaf5ec; border: 1px solid #c3e2ca; border-left-color: #2f8a4c !important; }
.bordermid    { background: #fcf5e6; border: 1px solid #efd9a8; border-left-color: #d08a12 !important; }
.borderbottom { background: #fbeeee; border: 1px solid #ecc9c9; border-left-color: #c0504d !important; }
.bordertop::before, .bordermid::before, .borderbottom::before {
    display: flex; align-items: center; gap: .35rem; font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .1rem .1rem .2rem;
}
.bordertop::before    { content: '\25CF  Near the front'; color: #2f7a4a; }
.bordermid::before    { content: '\25CF  Middle'; color: #9a6510; }
.borderbottom::before { content: '\25CF  Further back'; color: #a33f3c; }

/* movement highlights */
@keyframes movednewanimation   { from { background-color: #ccebe7; } }
@keyframes movedupwaiting      { from { background-color: #ccebe7; } }
@keyframes moveddownanimation  { from { background-color: #f8ecd9; } }
.movedup, .moveddown, .movednew { border-width: 1px; }

/* ---------- Customer dialog ---------- */
.fq-cust-head { display: flex; align-items: center; gap: 1rem; background: #f5f7f8; border-radius: 12px; padding: .9rem 1rem; margin-bottom: 1rem; }
.fq-cust-token { min-width: 64px; text-align: center; }
.fq-cust-token span:first-child { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6b7780; }
.fq-cust-token #customerToken { font-size: 2rem; font-weight: 700; color: #2f3a4a; line-height: 1.1; }
.fq-cust-info { display: flex; flex-direction: column; gap: .15rem; font-size: .9rem; color: #4f5b63; }
.fq-cust-info strong { color: #2f3a4a; }
.fq-cust-section { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6b7780; margin: .25rem 0 .5rem; }
.fq-cust-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: 1rem; }
.fq-cust-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; margin: 0 !important; font-weight: 600; border-radius: 8px; padding: .45rem .5rem; }
.fq-cust-actions .btn .ph-duotone { font-size: 1.1rem; vertical-align: 0; }
.fq-cust-actions .btn.disabled, .fq-cust-actions .btn:disabled { opacity: .45; }
.fq-cust-history { border: 1px solid #eef1f3; border-radius: 10px; padding: .75rem; max-height: 260px; overflow-y: auto; }
@media (max-width: 576px) { .fq-cust-actions { grid-template-columns: repeat(2, 1fr); } }

/* generic polish for the older dialogs */
.fq-modal .modal-body h1 { font-size: 1.35rem; font-weight: 700; color: #2f3a4a; }
.fq-modal .modal-body h3 { font-size: 1.1rem; }
.fq-modal .modal-body img.img { max-width: 140px !important; opacity: 1 !important; }
.fq-modal .modal-dialog.modal-lg, .fq-modal .modal-dialog.modal-xl { max-width: 900px; }

/* ---------- Drag and drop ---------- */
.umGridItem.waiting, .umGridItem.assigned { cursor: grab; }
.fq-dragging, .fq-dragging * { cursor: grabbing !important; }
.fq-drag-ghost { opacity: .35; border-style: dashed !important; }
.fq-drag-chosen { box-shadow: 0 .6rem 1.4rem rgba(47, 58, 74, .18); }
.fq-drag-active { transform: rotate(1deg); }
.fq-dragging .bordertop, .fq-dragging .bordermid, .fq-dragging .borderbottom { outline: 1px dashed rgba(47, 58, 74, .25); outline-offset: 2px; }
.fq-qm-hint { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; color: #6b7780; }

/* ---------- Now serving panel ---------- */
.fq-serving-list { display: flex; flex-wrap: wrap; gap: 1rem; }
.fq-serving-slot { width: 220px; }
.fq-serving-op { display: flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6b7780; margin-bottom: .35rem; }
.fq-serving-op .ph-duotone { font-size: 1rem; color: #22847a; }
.fq-serving-slot .umGridItem { margin: 0; }
.fq-serving-empty { display: flex; align-items: center; gap: .5rem; color: #6b7780; font-size: .9rem; }
.fq-serving-empty .ph-duotone { font-size: 1.3rem; color: #8fd3ca; }
.fq-col-empty { color: #6b7780; font-size: .85rem; padding: .5rem .25rem; }

/* ---------- Serve next ---------- */
.fq-serving-card .card-header { gap: 1rem; flex-wrap: wrap; }
.fq-serve-next { display: flex; align-items: center; gap: .75rem; margin-left: auto; flex-wrap: wrap; }
.fq-serve-next .btn { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; border-radius: 8px; padding: .4rem .9rem; white-space: nowrap; }
.fq-serve-next .btn .ph-duotone { font-size: 1.15rem; vertical-align: 0; }
.fq-serve-next .btn:disabled { opacity: .5; cursor: not-allowed; }
.fq-serve-next-note { font-size: .85rem; color: #6b7780; }
.fq-serve-next-note strong { color: #2f3a4a; }

/* ---------- Customer dialog details ---------- */
#customerModal .modal-dialog { max-width: 560px; }
.fq-cust-status { display: inline-flex; align-items: center; font-size: .72rem; font-weight: 700; border-radius: 999px; padding: .2rem .6rem; margin-left: .35rem; vertical-align: middle; }
.fq-cust-status:empty { display: none; }
.fq-st-waiting  { background: #eff1f3; color: #4f5b63; }
.fq-st-assigned { background: #e3f3f0; color: #22847a; }
.fq-st-serving  { background: #2f3a4a; color: #fff; }
.fq-cust-head { align-items: stretch; }
.fq-cust-token { display: flex; flex-direction: column; justify-content: center; border-right: 1px solid #e3e7ea; padding-right: 1rem; }
.fq-cust-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: .55rem 1rem; }
.fq-cust-grid > div { display: flex; flex-direction: column; min-width: 0; }
.fq-cust-grid span { font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6b7780; }
.fq-cust-grid strong { font-size: .9rem; color: #2f3a4a; font-weight: 600; overflow-wrap: anywhere; }
.fq-cust-grid strong span { font-size: inherit; font-weight: inherit; letter-spacing: 0; text-transform: none; color: inherit; }
.fq-cust-zone-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .4rem; vertical-align: 1px; }
.fq-cust-hints:empty { display: none; }
.fq-cust-hint { display: flex; gap: .5rem; align-items: flex-start; background: #f5f7f8; border-radius: 10px; padding: .6rem .75rem; font-size: .85rem; color: #4f5b63; margin-bottom: 1rem; }
.fq-cust-hint .ph-duotone { font-size: 1.1rem; color: #22847a; margin-top: .05rem; }
.fq-history { list-style: none; margin: 0; padding: 0; }
.fq-history li { position: relative; display: flex; gap: .75rem; padding: 0 0 .65rem 1.1rem; font-size: .85rem; }
.fq-history li::before { content: ''; position: absolute; left: 0; top: .4rem; width: 8px; height: 8px; border-radius: 50%; background: #8fd3ca; }
.fq-history li::after { content: ''; position: absolute; left: 3.5px; top: 1rem; bottom: 0; width: 1px; background: #e3e7ea; }
.fq-history li:last-child::after { display: none; }
.fq-history li:first-child::before { background: #22847a; }
.fq-history-time { color: #6b7780; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 4.2rem; }
.fq-history-text { color: #2f3a4a; }
@media (max-width: 576px) { .fq-cust-head { flex-direction: column; } .fq-cust-token { border-right: 0; padding-right: 0; } }

/* ---------- Other portals ---------- */
.fq-portals { text-align: left; }
.fq-portals-head { margin-bottom: .75rem; }
.fq-portals-title { font-weight: 700; color: #2f3a4a; font-size: 1rem; }
.fq-portals-sub { font-size: .85rem; color: #6b7780; }
.fq-portal { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .85rem; padding: .75rem; border: 1px solid #e3e7ea; border-radius: 12px; margin-bottom: .6rem; background: #fff; }
.fq-portal:hover { border-color: #b9dcd7; }
.fq-portal-icon { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; background: #e3f3f0; color: #22847a; display: inline-flex; align-items: center; justify-content: center; }
.fq-portal-icon .ph-duotone { font-size: 1.4rem; vertical-align: 0; }
.fq-portal-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fq-portal-text strong { color: #2f3a4a; font-size: .95rem; }
.fq-portal-text span { color: #6b7780; font-size: .82rem; line-height: 1.4; }
.fq-portal-actions { display: flex; gap: .4rem; width: 100%; padding-left: calc(42px + .85rem); }   /* buttons sit under the text */
.fq-portal-actions .btn { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; border-radius: 8px; white-space: nowrap; }
.fq-portal-actions .btn .ph-duotone { font-size: 1rem; vertical-align: 0; }
@media (max-width: 400px) { .fq-portal-actions { padding-left: 0; } }

/* ---------- Board layout: one full-width lane per operator, customers fill left to right ---------- */
.umGrid { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.umGridItem.operatorGridItem { max-width: none; width: 100%; flex: 0 0 auto; }
.bordertop, .bordermid, .borderbottom {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .5rem; align-items: start;
    padding: .4rem .6rem .6rem;
}
.bordertop::before, .bordermid::before, .borderbottom::before { grid-column: 1 / -1; }   /* zone label spans the row */
.bordertop > .umGridItem, .bordermid > .umGridItem, .borderbottom > .umGridItem { margin: 0; }
@media (max-width: 576px) {
    .bordertop, .bordermid, .borderbottom { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ---------- Drop areas for empty lanes ---------- */
.fq-lane-drop { min-height: 64px; border: 1px dashed #cfd6db; border-radius: 10px; padding: .5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .5rem; align-items: start; }
.fq-lane-drop:empty::before { content: attr(data-empty); grid-column: 1 / -1; align-self: center; text-align: center; color: #6b7780; font-size: .85rem; }
.fq-lane-drop > .umGridItem { margin: 0; }
.fq-dragging .fq-lane-drop { border-color: #22847a; background: #f6f8f9; }
.fq-lane-off { opacity: .7; }
.fq-dragging .fq-lane-off .fq-lane-drop { border-color: #ecc9c9; background: #fbf5f5; }

/* ---------- Live stats ---------- */
.fq-live-banner { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; background: #f6f8f9; border: 1px solid #c4e3de; border-radius: 12px; padding: .65rem .85rem; margin-bottom: 1rem; }
.fq-live-text { flex: 1; min-width: 200px; font-size: .9rem; color: #4f5b63; }
.fq-live-text strong { color: #2f3a4a; }
.fq-live-banner .btn, .fq-live-entry .btn { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; border-radius: 8px; }
.fq-live-entry { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: #f6f8f9; border: 1px solid #c4e3de; border-radius: 12px; padding: .85rem 1rem; margin-bottom: 1rem; }
.fq-live-entry div { display: flex; flex-direction: column; }
.fq-live-entry strong { color: #2f3a4a; }
.fq-live-entry span { font-size: .85rem; color: #6b7780; }

/* ---------- "Queue Manager is open elsewhere" dialog ---------- */
.fq-modal .fq-instance-body { padding: .5rem 1.5rem 1.5rem; }
.fq-modal .fq-instance-body .fq-portals { margin-top: .25rem; }
.fq-modal .fq-instance-body .fq-portal:last-child { margin-bottom: 0; }

/* ---------- Stats dialog ---------- */
.fq-stats-run { display: flex; align-items: center; gap: .45rem; color: #4f5b63; font-size: .9rem; margin-bottom: .9rem; }
.fq-stats-run .ph-duotone { color: #22847a; font-size: 1.1rem; }
.fq-stats-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin-bottom: .75rem; }
.fq-stats-kpis > div { background: #f5f7f8; border-radius: 12px; padding: .7rem .85rem; display: flex; flex-direction: column; }
.fq-stats-kpis span { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6b7780; }
.fq-stats-kpis strong { font-size: 1.6rem; font-weight: 700; color: #2f3a4a; line-height: 1.15; }
.fq-stats-kpis strong.fq-stats-small { font-size: 1rem; line-height: 1.6; }
.fq-stats-kpis em { font-style: normal; font-size: .8rem; color: #6b7780; }
.fq-stats-range { display: flex; align-items: center; gap: .45rem; font-size: .9rem; color: #4f5b63; margin-bottom: 1rem; }
.fq-stats-range .ph-duotone { color: #22847a; font-size: 1.1rem; }
.fq-stats-range strong { color: #2f3a4a; }
.fq-stats-tabs { border-top: 1px solid #eef1f3; padding-top: .9rem; margin-bottom: .9rem; }
.fq-stats-tabs .fq-chip { border: 1px solid #e3e7ea; background: #fff; color: #4f5b63; border-radius: 999px; padding: .3rem .9rem; font-size: .85rem; font-weight: 600; }
.fq-stats-tabs .fq-chip.active { background: #22847a; border-color: #22847a; color: #fff; }
.fq-stats-block-title { font-weight: 700; color: #2f3a4a; margin-bottom: .6rem; }
.fq-stats-stack { display: flex; gap: 2px; height: 22px; border-radius: 6px; overflow: hidden; margin-bottom: .75rem; }
.fq-stats-stack span { display: block; }
.fq-stats-legend > div { display: flex; align-items: center; gap: .55rem; padding: .35rem 0; border-top: 1px solid #eef1f3; font-size: .9rem; }
.fq-stats-legend > div:first-child { border-top: 0; }
.fq-stats-legend i, .fq-stats-key i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.fq-stats-legend span { color: #2f3a4a; }
.fq-stats-legend strong { margin-left: auto; color: #2f3a4a; font-variant-numeric: tabular-nums; }
.fq-stats-legend em { font-style: normal; width: 3rem; text-align: right; color: #6b7780; font-variant-numeric: tabular-nums; }
.fq-stats-key { display: flex; gap: 1rem; font-size: .8rem; color: #4f5b63; margin-bottom: .35rem; }
.fq-stats-key span { display: inline-flex; align-items: center; gap: .35rem; }
.fq-stats-chart { width: 100%; height: auto; display: block; }
.fq-stats-axis { font-size: 11px; fill: #6b7780; font-variant-numeric: tabular-nums; }
.fq-stats-staff-row { display: grid; grid-template-columns: minmax(80px, 1.2fr) 2fr 2.5rem minmax(90px, 1fr); align-items: center; gap: .75rem; padding: .45rem 0; border-top: 1px solid #eef1f3; font-size: .9rem; }
.fq-stats-staff-row:first-child { border-top: 0; }
.fq-stats-staff-name { color: #2f3a4a; font-weight: 600; overflow-wrap: anywhere; }
.fq-stats-staff-bar { height: 10px; background: #f5f7f8; border-radius: 5px; overflow: hidden; }
.fq-stats-staff-bar span { display: block; height: 100%; background: #2a9d8f; border-radius: 5px; }
.fq-stats-staff-row strong { text-align: right; color: #2f3a4a; font-variant-numeric: tabular-nums; }
.fq-stats-staff-time { color: #6b7780; font-size: .82rem; text-align: right; }
.fq-stats-note, .fq-stats-footnote { font-size: .78rem; color: #6b7780; margin: .6rem 0 0; }
.fq-stats-empty { color: #6b7780; margin: .5rem 0; }
#chararhivetable table { margin: 0; }
#chararhivetable td { vertical-align: middle; border-color: #eef1f3; }
#chararhivetable .btn { border-radius: 8px; }
@media (max-width: 576px) { .fq-stats-kpis { grid-template-columns: repeat(2, 1fr); } .fq-stats-staff-row { grid-template-columns: 1fr 2.5rem; } .fq-stats-staff-bar, .fq-stats-staff-time { display: none; } }

/* ---------- Leave warning ---------- */
.fq-leave-footer { flex-wrap: wrap; gap: .5rem; }
.fq-leave-footer > * { margin: 0 !important; }
.fq-leave-footer .btn { display: inline-flex; align-items: center; }
@media (max-width: 480px) { .fq-leave-footer .btn { flex: 1 1 100%; justify-content: center; } }
#fqLeaveModal .modal-dialog { max-width: 560px; }

/* Waiting queue header on phones: title and progress bar get their own line, so Add and the credits wrap underneath instead of covering the title. */
@media (max-width: 576px) {
    .fq-qm-title { flex: 1 1 100%; }
    #qPBContainer.progress { width: auto !important; flex: 1 1 auto; max-width: 160px; }
}