body { background: #f4f6f9; }
#app-wrapper { min-height: 100vh; }
.sidebar { width: 250px; min-height: 100vh; background: #141319; color: #dee4ee; position: sticky; top: 0; }
.sidebar-brand { display: block; text-decoration: none; padding-bottom: .9rem; border-bottom: 1px solid #2e2c3a; }
.sidebar-brand .brand-role { display: block; margin-top: .45rem; font-size: .68rem; letter-spacing: 1.5px; color: #7F77DD; font-weight: 600; }
.sidebar .nav-link { color: #b9b7c9; border-radius: .55rem; padding: .45rem .7rem; }
.sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.07); }
.sidebar .nav-link.active { background: #534AB7; color: #fff; }
.sidebar .nav-link.disabled { color: #5a5868; }
.sidebar .sr-nav-label { font-size: .68rem; letter-spacing: 1.2px; color: #6f6d80; margin: .9rem 0 .3rem .3rem; font-weight: 600; }
/* The user block was a dark card from when the sidebar itself was dark. The sidebar is now
   light, and the theme forces the text dark on top — dark on dark, unreadable. It now sits
   on the sidebar surface with a divider instead of a filled card. */
.sidebar-user { background: transparent; border-top: 1px solid #e3e3ee;
                border-radius: 0; padding: .75rem .25rem 0; margin-top: .25rem; }
.sidebar-user .user-avatar { width: 34px; height: 34px; border-radius: 50%; background: #8b2fa8; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: .85rem; flex: 0 0 auto; }
.sidebar-user .logout-link { color: #888780; text-decoration: none; font-size: .78rem; }
.sidebar-user .logout-link:hover { color: #E24B4A; }   /* log out reads as a leave action */
.kpi-accent { border: 1px solid #ececf4; border-top-width: 3px; border-radius: 1rem; background: #fff; }
.dash-card { border: 1px solid #ececf4; border-radius: 1rem; background: #fff; }
.region-pill { font-size: .72rem; background: #E1F5EE; color: #085041; padding: .15rem .6rem; border-radius: 999px; }
.company-avatar { width: 36px; height: 36px; border-radius: .6rem; display: inline-flex; align-items: center;
  justify-content: center; font-weight: 600; font-size: .8rem; flex: 0 0 auto; }
.quick-link { display: block; color: #534AB7; text-decoration: none; padding: .3rem 0; font-size: .9rem; }
.quick-link:hover { color: #3C3489; }
.auth-bg { background: linear-gradient(135deg, #1c2434 0%, #3c50e0 100%); }
.auth-card { width: 420px; max-width: 92vw; }
.kpi-card { border: 0; border-radius: 1rem; }
.kpi-card .icon { width: 52px; height: 52px; border-radius: .8rem; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.table-card { border: 0; border-radius: 1rem; }


/* ===== Runner console — brand step card ===== */
.runner-step-card { background: #26215C; border-radius: 1rem; padding: 1rem 1.1rem; color: #EEEDFE; }
.runner-step-card .step-pos { font-size: .72rem; color: #AFA9EC; letter-spacing: .8px; }
.runner-step-card .step-name { font-size: 1.25rem; font-weight: 600; }
.runner-step-card .step-empty { color: #CECBF6; }
.runner-step-card .form-text { color: #AFA9EC !important; }
.step-pill { font-size: .72rem; padding: .15rem .65rem; border-radius: 999px; font-weight: 600; }
.pill-type { background: #7F77DD; color: #fff; }
.pill-pending { background: #4a4567; color: #CECBF6; }
.pill-ready { background: #FAC775; color: #412402; }
.pill-active { background: #1D9E75; color: #E1F5EE; }
.pill-complete { background: #141319; color: #b9b7c9; }
.runner-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .9rem; }
.runner-actions form { margin: 0; }
.r-btn { border: 0; border-radius: .65rem; padding: .5rem .9rem; font-size: .85rem; font-weight: 600; }
.r-btn:disabled { opacity: .45; }
.r-btn-ready { background: #FAC775; color: #412402; }
.r-btn-activate { background: #1D9E75; color: #E1F5EE; }
.r-btn-complete { background: #EEEDFE; color: #26215C; }
.r-btn-next { background: #534AB7; color: #fff; }
.r-btn-prev { background: transparent; color: #AFA9EC; border: 1px solid #4a4567; }
.joined-badge { background: #EEEDFE; color: #3C3489; }

/* ===== Runner console — mobile layer ===== */
/* ===== Facilitator console (Runner) - responsive, no tab view =====
   Every panel is always visible; the layout reflows instead of hiding things.
     >=992px  two columns (desktop, iPad landscape)
     768-991  single column, but the two light panels sit side by side
     <768px   everything full width, comfortable touch targets            */

/* Runner tables are dense - let them scroll inside their card rather than
   squashing columns or pushing the page wide. */
#step-panel .table-responsive,
.runner-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#step-panel table { min-width: 340px; }

@media (max-width: 991px) {
    main.flex-grow-1 { padding: .9rem !important; }
    .runner-topline { flex-wrap: wrap; gap: .5rem; }
    .runner-title { font-size: 1.05rem; }
    .runner-topline-actions { display: flex; gap: .4rem; flex-wrap: wrap; }

    /* Stage buttons: two per row, full-width targets */
    .runner-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
    .runner-actions form { display: contents; }
    .r-btn { width: 100%; padding: .7rem 0; font-size: .85rem; }

    #step-panel .btn { padding: .55rem .9rem; }
    /* Panel button rows wrap instead of overflowing */
    #step-panel .d-flex.gap-2 { flex-wrap: wrap; }
}

@media (max-width: 575px) {
    .runner-title { font-size: .98rem; }
    .runner-actions { grid-template-columns: 1fr; }   /* one big button per row on phones */
    #step-panel .fs-4, #step-panel .fs-5 { font-size: 1.15rem !important; }
    .runner-side .card-body { padding: .8rem; }
}


/* ===== Mobile list cards (Object Library / Sequences / Events) ===== */
.m-obj-card { background: #fff; border: 1px solid #e3e3ee; border-radius: .9rem; padding: .7rem .85rem; margin-bottom: .55rem; }
.m-obj-name { font-size: .92rem; font-weight: 600; color: #26215C; }
.m-obj-sub { font-size: .74rem; color: #6c757d; }
.m-icon-btn { width: 32px; height: 32px; border-radius: .55rem; border: 0; display: inline-flex; align-items: center;
    justify-content: center; font-size: .9rem; text-decoration: none; }
.ib-purple { background: #EEEDFE; color: #3C3489; }
.ib-red { background: #FCEBEB; color: #A32D2D; }
.type-pill { font-size: .72rem; padding: .12rem .6rem; border-radius: 999px; font-weight: 600; }
.tp-purple { background: #EEEDFE; color: #3C3489; }
.tp-teal { background: #E1F5EE; color: #085041; }
.tp-red { background: #FCEBEB; color: #791F1F; }
.tp-blue { background: #E6F1FB; color: #0C447C; }
.tp-pink { background: #FBEAF0; color: #72243E; }
.tp-amber { background: #FAEEDA; color: #633806; }
.tp-gray { background: #F1EFE8; color: #444441; }
.m-run-btn { background: #534AB7; color: #fff; border-radius: .55rem; padding: .3rem .7rem; font-size: .78rem;
    font-weight: 600; text-decoration: none; }
@media (max-width: 1199px) {
    .filter-chips { display: flex; gap: .35rem; overflow-x: auto; flex-wrap: nowrap; padding-bottom: .25rem; -webkit-overflow-scrolling: touch; }
    .filter-chips .btn { white-space: nowrap; flex: 0 0 auto; border-radius: 999px; }
}


/* Events page — card grid at every width */
/* auto-fit rather than auto-fill so the last row stretches instead of leaving phantom
   empty tracks, and minmax(0,…) lets a track shrink below its content — without that the
   long date line forced every card wider than its column and the grid overflowed the page. */
.event-grid { display: grid; gap: 1rem;
              grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
              align-items: start; }
.event-grid > .m-obj-card { min-width: 0; padding: .85rem 1rem; }
.m-obj-card .m-obj-sub { overflow: hidden; text-overflow: ellipsis; }
.m-obj-dates { white-space: normal; line-height: 1.35; margin-top: .15rem; }
.m-obj-dash { opacity: .5; }
.m-obj-foot { margin-top: .7rem; padding-top: .6rem; border-top: 1px solid #f0f0f2; }
.m-run-btn.m-run-outline { background: #fff; color: #26215C; border: 1px solid #CECBF6; }


/* ===== Desk page chrome =====
   Every Desk page opens with a title + action row. It had no wrap rule, so a long
   title and a button collided on narrow screens. Fixed once here rather than in
   each of the fifteen views. */
.sr-content > .d-flex.justify-content-between { flex-wrap: wrap; gap: .6rem; }
.sr-content h4 { min-width: 0; word-break: break-word; }
/* Tables never squash: any Desk table scrolls inside its card instead. */
.sr-content .table-responsive { -webkit-overflow-scrolling: touch; }
@media (max-width: 575px) {
    .sr-content .btn { white-space: nowrap; }
    .sr-content .card-body { padding: .85rem; }
}


/* ===== Desk list filters =====
   One bar per list page: free-text search plus the selects that page needs.
   Filtering runs server-side on submit, so results survive a refresh and can
   be shared as a URL. */
.desk-filter { background: #fff; border: 1px solid #e3e3ee; border-radius: .7rem; padding: .75rem; }
.desk-filter .form-label { color: #6c757d; font-weight: 500; }
.desk-filter .form-text { font-size: .7rem; margin-top: .15rem; }
.desk-filter hr { opacity: .12; }

/* ---- Tag-style multiselect ----
   Chips sit INSIDE the field and the suggestion list is absolutely positioned, so
   picking several items never pushes the neighbouring columns around. Values post
   as hidden inputs, so the server sees a normal string[] bind. */
.tag-select { position: relative; }
.ts-box { display: flex; flex-wrap: wrap; align-items: center; gap: .28rem;
          min-height: 31px; padding: .18rem .4rem; cursor: text;
          border: 1px solid #BFBFBF; border-radius: 6px; background: #fff; }
.tag-select:focus-within .ts-box { border-color: #3ABBDA; outline: 2px solid #E6F5F7; }
.ts-chips { display: contents; }
.ts-chip { display: inline-flex; align-items: center; gap: .28rem; font-size: .76rem;
           background: #0d6efd; color: #fff; border-radius: 4px; padding: .1rem .4rem;
           cursor: pointer; max-width: 100%; }
.ts-chip i { font-size: .85rem; opacity: .85; order: -1; }   /* × before the label, as in V1 */
.ts-chip:hover i { opacity: 1; }
.ts-input { border: 0; outline: 0; background: transparent; font-size: .84rem;
            flex: 1 1 60px; min-width: 60px; padding: .12rem 0; color: inherit; }
.ts-list { display: none; position: absolute; z-index: 1050; left: 0; right: 0; top: 100%;
           margin-top: 2px; background: #fff; border: 1px solid #e3e3ee; border-radius: 6px;
           max-height: 220px; overflow-y: auto; box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.tag-select.open .ts-list { display: block; }
.ts-opt { padding: .4rem .55rem; font-size: .84rem; cursor: pointer;
          white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-opt:hover { background: #E6F5F7; }
.ts-empty { padding: .45rem .55rem; font-size: .78rem; color: #888780; }

@media (max-width: 767px) {
    .desk-filter { padding: .65rem; }
    .desk-filter .form-label { font-size: .72rem; }
    .ts-opt { padding: .6rem .55rem; }               /* bigger tap targets */
}


/* ===== Facilitator console — single column, collapsible, reorderable ===== */
/* Playlist rail: one scrolling line at every width, with an arrow at each end.
   Wrapping produced eight rows on a phone and pushed the console off the screen. */
.seq-strip { display: flex; align-items: center; gap: .4rem; }
.seq-rail { display: flex; flex-wrap: nowrap; gap: .4rem; overflow-x: auto;
            scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
            scrollbar-width: none; }
.seq-rail::-webkit-scrollbar { display: none; }   /* arrows and swipe do the scrolling */
.seq-nav { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 6px;
           border: 1px solid #e3e3ee; background: #fff; color: #5F5E5A;
           display: flex; align-items: center; justify-content: center; padding: 0; }
.seq-nav:hover:not(:disabled) { border-color: #3ABBDA; color: #2C2C2A; }
.seq-nav:disabled { opacity: .35; cursor: default; }
.seq-count { font-size: .72rem; color: #888780; text-align: center; }
.seq-chip { display: inline-flex; align-items: center; gap: .35rem; flex: 0 0 auto;
            font-size: .78rem; padding: .38rem .8rem; border-radius: 999px;
            border: 1px solid #e3e3ee; background: #fff; color: #5F5E5A;
            white-space: nowrap; cursor: pointer; }
.seq-chip:hover { border-color: #3ABBDA; color: #2C2C2A; }
.seq-chip .seq-pos { font-weight: 600; opacity: .55; }
.seq-chip.done { background: #EAF3DE; border-color: #C0DD97; color: #3B6D11; }
.seq-chip.done .seq-pos { display: none; }        /* the tick already says "done" */
.seq-chip.current { background: #1D9E75; border-color: #1D9E75; color: #fff; cursor: default;
                    font-weight: 600; }
.seq-chip.current .seq-pos { opacity: .8; }

.btn-next-obj { font-size: 1rem; font-weight: 600; padding: .65rem 1.4rem; }

.rs { background: #fff; border: 1px solid #e3e3ee; border-radius: 12px; margin-bottom: .7rem; }
.rs.dragging { opacity: .45; }
.rs-head { display: flex; align-items: center; gap: .55rem; padding: .7rem .9rem;
           cursor: pointer; user-select: none; }
.rs-grip { cursor: grab; color: #B4B2A9; display: flex; align-items: center; padding: 0 .1rem; }
.rs-grip:active { cursor: grabbing; }
.rs-title { font-size: .95rem; font-weight: 600; }
.rs-sum { font-size: .75rem; color: #888780; margin-left: .2rem; }
.rs-toggle { margin-left: auto; background: none; border: 0; color: #888780; padding: 0 .2rem; }
.rs-body { padding: 0 .9rem .9rem; }
.rs.collapsed .rs-body { display: none; }
.rs.collapsed .rs-toggle i { transform: rotate(-90deg); }
.rs-toggle i { transition: transform .15s ease; display: inline-block; }

.tool-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
            border: 1px solid #ececed; border-radius: 8px; padding: .55rem .7rem; margin-bottom: .5rem; }
.tool-row:last-child { margin-bottom: 0; }
.tool-ico { font-size: 1.15rem; color: #3ABBDA; flex: 0 0 auto; }
.tool-txt { flex: 1 1 200px; min-width: 0; }
.tool-name { font-size: .85rem; font-weight: 600; }
.tool-url { font-size: .72rem; color: #888780; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 575px) {
    .btn-next-obj { width: 100%; }
    .rs-body { padding: 0 .65rem .7rem; }
    .tool-row { padding: .5rem .55rem; }
    .tool-txt { flex: 1 1 100%; }
}


/* ===== Current object card: type and state pills ===== */
.obj-pill { display: inline-flex; align-items: center; font-size: .72rem; font-weight: 600;
            letter-spacing: .02em; padding: .22rem .65rem; border-radius: 999px; }
.obj-type { background: #EEEDFE; color: #3C3489; }
.state-pending  { background: #F1EFE8; color: #5F5E5A; }
.state-ready    { background: #FAEEDA; color: #854F0B; }
.state-active   { background: #EAF3DE; color: #3B6D11; }
.state-complete { background: #E6F1FB; color: #185FA5; }

.runner-step-card .card-body { padding: 1.15rem 1.35rem; }
.runner-step-card h5 { font-weight: 600; font-size: 1.35rem; margin-bottom: .3rem; }
.runner-title { font-size: 1.4rem; font-weight: 700; }
.runner-title .text-primary { font-weight: 600; }

/* ===== Object control ===== */
.rs-accent { border-color: #3ABBDA; }
.oc-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.oc-actions .btn { min-width: 108px; }
.oc-note { font-size: .76rem; color: #888780; margin-top: .7rem; }

/* Consoles use the full width of their section: the facilitator wants every column
   of a dense table visible at a glance rather than a narrow measure. */
#step-panel { max-width: none; }
#step-panel > .table-responsive > table,
#step-panel table { width: 100%; }

@media (max-width: 575px) {
    .oc-actions .btn { flex: 1 1 100%; min-width: 0; }
    .oc-actions .ms-auto { margin-left: 0 !important; }
}


/* Trade quantity validation: the field is flagged while typing rather than rewritten,
   so a player can type a two-digit number without it being clipped mid-entry.
   Deliberately a plain outline, not Bootstrap's .is-invalid: that adds a background icon
   and its own padding, which squashed the stepper inside the narrow trade row. */
.pu-qty.pu-qty-bad { border-color: #FF1D25 !important; background: #FFF5F5 !important;
                     box-shadow: none !important; background-image: none !important; }
.pu-qty { min-width: 3.2rem; }                 /* never squeezed out by a sibling */
#pu-trade-note { line-height: 1.25; }
#pu-trade-send:disabled { opacity: .55; }


/* Existing uploaded image shown next to its file input. _ImagePreview adopts these,
   swapping in a live preview when a new file is chosen and adding a Remove link. */
.img-preview-existing { max-width: 120px; max-height: 60px; width: auto; height: auto;
                        object-fit: contain; border: 1px solid #e3e3ee; border-radius: 6px;
                        padding: 2px; background: #fff; display: block; margin-bottom: .35rem; }


/* ===== Desk dashboard charts ===== */
.chart-wrap { position: relative; width: 100%; height: 260px; }
.chart-wrap.chart-sm { height: 210px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: .5rem;
                font-size: .74rem; color: #5F5E5A; }
.chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px;
                  margin-right: 5px; vertical-align: middle; }

/* ===== Event list view =====
   Rows were ~62px, so barely six events fitted the screen. Tightened to ~44px, which
   nearly doubles what is visible without losing the two-line event name. */
.event-table { table-layout: fixed; }
.event-table thead th { background: #F4F5F8; border-bottom: 1px solid #e3e3ee;
                        font-size: .74rem; text-transform: uppercase; letter-spacing: .04em;
                        color: #5F5E5A; padding: .5rem .6rem; }
.event-table tbody td { padding: .45rem .6rem; }
.event-table tbody tr { cursor: pointer; }
.ev-sub { font-size: .72rem; color: #888780; line-height: 1.2; }
.ev-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem;
           color: #5F5E5A; background: #F4F5F8; border-radius: 4px; padding: .1rem .4rem; }

/* ===== Event list view (legacy) ===== */
.event-list .sort-link { color: inherit; text-decoration: none; white-space: nowrap; }
.event-list .sort-link:hover { color: #3ABBDA; }
.event-list .sort-link i { font-size: .72rem; margin-left: .2rem; }
.event-list td { vertical-align: middle; }
/* A six-column table cannot work on a phone, so cards are forced there. */
@media (max-width: 767px) {
    .event-list { display: none !important; }
    .view-toggle { display: none; }
    .chart-wrap { height: 220px; }
}


/* Theme toggle belongs beside the user, not stranded on its own line. */
.sidebar-foot { display: flex; align-items: center; gap: .5rem; }
.sidebar-foot .dt-theme-toggle { flex: 0 0 auto; margin: 0 !important; }