html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 0px;
}

.drag-and-drop-area {
    border-radius: 5px;
    text-align: center;
    width: 100%;
    height: 15em;
}

.drag-and-drop-area-dragging {
    background: #0dcaf0 !important;
}

/* Deploy table: content preview fixed at three lines (no expansion on hover) with a thumbnail */
.lc-3 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin: 0;
}

.deploy-content {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.deploy-content .lc-3 {
    flex: 1 1 auto;
    min-width: 0;
}

.deploy-thumb {
    flex: 0 0 auto;
    height: 64px;
    max-width: 96px;
    object-fit: cover;
    border-radius: 3px;
}

/* Deploy table: in-place editing (only while the Edit toggle is on) */
/* in-cell editing parked 2026-09-16:
.editing-enabled td.editable:hover {
    cursor: cell;
    outline: 1px dashed #999;
    outline-offset: -1px;
}
*/

td.editing input,
td.editing select {
    width: 100%;
    min-width: 6rem;
}

td.editing .spinner-border-sm {
    vertical-align: middle;
}

/* Deploy table: the actions column (edit / copy / delete, or edit + accept / reject in review mode);
   the column itself is hidden by DataTables unless editing or reviewing */
.row-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.somu-table td.actions-cell {
    width: 1%;
    padding-left: .4rem;
    padding-right: .4rem;
}

/* review of generated content: undecided pale yellow, rejected pale red, accepted pale green (distinct from
   the stronger green of posted rows); a finished review leaves the rows white like a plain spreadsheet */
tr.row-draft > td    { background-color: rgba(255, 253, 1, 0.2) !important; }
tr.row-rejected > td { background-color: rgba(255, 0, 0, 0.10) !important; }
tr.row-accepted > td { background-color: rgba(0, 255, 0, 0.10) !important; }

.review-locked {
    opacity: .55;
    pointer-events: none;
}

.somu-table-controls .controls-middle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.somu-table-controls .controls-middle .vr {
    height: 24px;
}

/* channel picker (channel-picker.js): a small list under the caret or field */
.channel-picker {
    position: absolute;
    z-index: 1080;
    max-width: 420px;
    font-size: .875rem;
    max-height: 18rem;
    overflow-y: auto;
}

.channel-picker .platform-icon {
    width: 16px;
    height: 16px;
    margin-right: .4rem;
}

/* Content dialog: images on the row */
.edit-image-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-height: 2rem;
    align-items: center;
}

.edit-image-strip.busy {
    opacity: 0.5;
    pointer-events: none;
}

.edit-image-strip .edit-image {
    position: relative;
    margin: 0;
}

.edit-image-strip img {
    height: 72px;
    max-width: 120px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid #ccc;
}

.edit-image-strip .remove-row-image {
    position: absolute;
    top: -6px;
    right: -6px;
    padding: 0 0.3rem;
    line-height: 1.2;
    font-size: 0.7rem;
    border-radius: 999px;
}


/* notification */
#toast-container > div {
    opacity: 0.95
}

/* datatables */
table.dataTable tbody td.dataTables_empty {
    font-size: 2em;
    line-height: 4em;
}

div.dataTables_wrapper div.dataTables_filter input {
    font-size: 1.25em;
    min-width: 300px;
}

.dataTables_length {
    font-size: 1.25em;
}

table.dataTable tbody > tr.selected,
table.dataTable tbody > tr > .selected {
    background-color: #bdd4ff;
}

.color-scheme-dark table.dataTable tbody > tr.selected,
.color-scheme-dark table.dataTable tbody > tr > .selected {
    background-color: #354153;
}

table.dataTable td.select-checkbox,
table.dataTable th.select-checkbox {
    position: relative;
}

    table.dataTable td.select-checkbox:before, 
    table.dataTable td.select-checkbox:after,
    table.dataTable th.select-checkbox:before,
    table.dataTable th.select-checkbox:after {
        display: block;
        position: absolute;
        top: 1.2em;
        left: 50%;
        width: 12px;
        height: 12px;
        box-sizing: border-box;
    }

    table.dataTable td.select-checkbox:before,
    table.dataTable th.select-checkbox:before {
        content: " ";
        margin-top: -2px;
        margin-left: -6px;
        border: 1px solid;
        border-radius: 1px;
    }

table.dataTable tr.selected td.select-checkbox:after,
table.dataTable tr.selected th.select-checkbox:after {
    content: "✓";
    font-size: 20px;
    margin-top: -19px;
    margin-left: -6px;
    text-align: center;
    text-shadow: 1px 1px #B0BED9, -1px -1px #B0BED9, 1px -1px #B0BED9, -1px 1px #B0BED9;
}

table.dataTable.compact td.select-checkbox:before,
table.dataTable.compact th.select-checkbox:before {
    margin-top: -12px;
}

table.dataTable.compact tr.selected td.select-checkbox:after,
table.dataTable.compact tr.selected th.select-checkbox:after {
    margin-top: -16px;
}

div.dataTables_wrapper span.select-info,
div.dataTables_wrapper span.select-item {
    margin-left: 0.5em;
}

@media screen and (max-width: 640px) {
    div.dataTables_wrapper span.select-info,
    div.dataTables_wrapper span.select-item {
        margin-left: 0;
        display: block;
    }
}

/*

table.dataTable tbody tr.selected,
table.dataTable tbody td.selected {
    color: white;
}

    table.dataTable tbody tr.selected a,
    table.dataTable tbody th.selected a,
    table.dataTable tbody td.selected a {
        color: #a2d4ed;
    }*/
/* ------------------------------------------------------------------ */
/* Site chrome (design Sept 2026): navbar, action bar, page, footer      */
/* Non-stock values: navbar #2f5ba6, action bar #f8f9fa + border,       */
/* .vr dividers between action groups, highlighted row #fff3cd.         */
/* ------------------------------------------------------------------ */
.somu-header {
    position: sticky;          /* the navbar stays visible while scrolling (user decision) */
    top: 0;
    z-index: 1030;
}

/* tab row: brand, one tab per page, session/user + Help/Logout on the right. The active tab is a light
   plate with a slanted left edge (the only element carrying a clip-path) that runs into the action bar
   below; inactive tabs share its left padding so labels stay put when the active state moves. */
:root {
    --somu-header-height: 49px;    /* 9px top padding + 40px active tab; site.js corrects it if the row wraps */
}

.somu-tabbar {
    background: #2f5ba6;
    padding: 9px 1rem 0;
}

.somu-tabbar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 2px;
}

.somu-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .1px;
    text-decoration: none;
    padding: 0 20px .35rem 0;
    line-height: 16px;
}

.somu-brand-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
}

/* two lines: "Somulator" over "ExCon" */
.somu-brand-text {
    display: flex;
    flex-direction: column;
}

.somu-brand-text span:last-child {
    font-weight: 500;
    opacity: .85;
}

.somu-brand:hover,
.somu-brand:focus {
    color: #fff;
}

.somu-tab {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 18px 0 26px;
    color: rgba(255, 255, 255, .72);
    font-size: 15px;
    text-decoration: none;
    white-space: nowrap;
}

.somu-tab:hover,
.somu-tab:focus {
    color: #fff;
}

.somu-tab.active {
    height: 40px;
    padding: 0 20px 0 30px;
    color: #1a2b45;
    font-weight: 600;
    background: #f8f9fa;
    clip-path: polygon(0 100%, 14px 6px, 16px 2.4px, 20px 0,
                       calc(100% - 10px) 0, calc(100% - 5px) 1.2px, calc(100% - 2px) 4px, 100% 8px,
                       100% 100%);
}

.somu-tabbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    padding-bottom: .5rem;
}

.somu-tabbar-context {
    color: rgba(255, 255, 255, .72);
    font-size: 13px;
    white-space: nowrap;
}

/* action bar: one-line page summary on the left, the page's actions on the right; pinned under the tab row */
.somu-actionbar {
    position: sticky;
    top: var(--somu-header-height, 49px);
    z-index: 1020;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: .5rem 1rem;
}

.somu-actionbar .actionbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* actions that belong on the left of the bar (e.g. Automated Join info) push the rest right */
.somu-actionbar .actionbar-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-right: auto;
}

.somu-actionbar .vr {
    height: 24px;
    align-self: center;
    margin: 0 .25rem;
}

.somu-actionbar .form-switch {
    margin: 0 .25rem;
}

/* page width: everything (tab row, action bar, page, status bar) is centred inside 1900px; content 1100px */
.somu-shell {
    width: 100%;           /* main is a flex item: auto margins would otherwise shrink it to its content */
    max-width: 1900px;
    margin-left: auto;
    margin-right: auto;
}

.somu-content {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

/* page body under the action bar */
.somu-page {
    padding: 1rem 1rem 1.5rem;
}

/* pages built around a tab control: the same space (50px) above the tabs and below the tab box */
.somu-page.somu-tabs-page {
    padding-top: 50px;
    padding-bottom: 50px;
}

/* run control: play/pause + clock in one pill; dark when idle, amber while auto-posting runs */
.run-control {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: #212529;
    color: #fff;
    border-radius: .375rem;
    padding: .375rem .75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.run-control button {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    line-height: 1;
    font-size: 1.15rem;
    display: inline-flex;
}

.run-control.running {
    background: #ffc107;
    color: #212529;
}

.run-control.playbar-disabled {
    opacity: .45;
}

/* table controls in one row: search + page length left, info + paging right.
   Pinned under the action bar so paging is at hand at the bottom of a long table;
   --somu-actionbar-bottom is kept up to date by site.js (the action bar can wrap to two rows). */
.somu-table-controls {
    position: sticky;
    top: var(--somu-actionbar-bottom, 112px);
    z-index: 1010;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fff;
    padding: .5rem 0;
    margin: -1rem 0 .25rem;   /* cancels .somu-page's top padding so the strip meets the action bar when stuck */
}

.somu-table-controls .controls-left,
.somu-table-controls .controls-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.somu-table-controls .dataTables_filter label {
    margin: 0;
}

.somu-table-controls .dataTables_filter input {
    width: 208px;
    font-size: .875rem;
    padding: .25rem .5rem;
}

.somu-table-controls .dataTables_length label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    color: #6c757d;
    white-space: nowrap;
}

.somu-table-controls .dataTables_length select {
    width: 76px;
    font-size: .875rem;
    padding: .25rem 1.75rem .25rem .5rem;
}

.somu-table-controls .dataTables_info {
    padding: 0 !important;
    font-size: 13px;
    color: #6c757d;
    white-space: nowrap;
}

.somu-table-controls .dataTables_paginate .pagination {
    margin: 0;
}

.somu-table-controls .dataTables_paginate .page-link {
    padding: .25rem .5rem;
    font-size: .875rem;
}

/* data table */
.somu-table {
    font-size: 14px;
}

.somu-table thead th {
    background: #f8f9fa;
}

/* the row open in the post dialog */
tr.row-highlight > td {
    background-color: #cfe2ff !important;
}

/* status bar: pinned to the bottom of the window; left = ephemeral messages (Status.flash), middle = the page's
   standing text (section "Status"), right = copyright */
.somu-footer {
    position: sticky;
    bottom: 0;
    z-index: 1020;
    background: #212529;
    color: rgba(255, 255, 255, .7);
    font-size: 13px;
    padding: 0 1rem;
}

.somu-statusbar {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: var(--somu-footer-height, 36px);
    padding: .35rem 0;
}

.somu-statusbar > div {
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.somu-statusbar .status-left {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

/* the activity line (site.js Status): spinner + message, white; red for a failure; fades when idle */
.somu-statusbar .status-activity {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    max-width: 100%;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .4s;
    cursor: default;
}

.somu-statusbar .status-activity.has-processes {
    cursor: pointer;
}

.somu-statusbar .status-activity .status-text {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.somu-statusbar .status-activity .status-spinner {
    width: .8rem;
    height: .8rem;
    border-width: .15em;
    flex: 0 0 auto;
}

.somu-statusbar .status-activity.status-error {
    color: #f8a5a5;
}

.somu-statusbar .status-activity.fading {
    opacity: 0;
}

.status-jobs-panel {
    position: absolute;
    left: 0;
    bottom: 2.4rem;
    width: 26rem;
    max-width: 90vw;
    background: #fff;
    color: #212529;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    padding: .75rem;
    white-space: normal;
    z-index: 1030;
}

.status-jobs-panel .jobs-row + .jobs-row {
    margin-top: .6rem;
}

.status-jobs-panel .jobs-title {
    font-size: .875rem;
    margin-bottom: .2rem;
}

/* the middle part's figures (Status.setParts / Html.StatusCount): badges side by side */
.somu-statusbar .status-parts,
.somu-statusbar .status-parts > span[id] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.somu-statusbar .status-fixed {
    flex: 2 1 0;   /* the page text is the longest of the three */
    text-align: center;
}

.somu-statusbar .status-copyright {
    text-align: right;
}

.somu-statusbar .status-copyright a {
    color: inherit;
    text-decoration: underline dotted;
}

.somu-statusbar .status-logo {
    height: 18px;
    margin-left: 10px;
    vertical-align: -4px;
    opacity: .8;
}

/* e-mail text shown ready to copy (Participants: Automated Join info): wraps, body font */
.join-email {
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 1rem;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    padding: 1rem;
    margin: 0;
}

/* small buttons used in list rows (Bootstrap 5 has no btn-xs) */
.btn-xs {
    padding: .1rem .4rem;
    font-size: .8rem;
    line-height: 1.4;
}

/* platform icons in tabs and menus */
.platform-icon {
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.2em;
    margin-right: .35em;
}

/* tab headers: the active tab is blue (like a default action), the others grey */
.nav-tabs .nav-link {
    color: #6c757d;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    color: #495057;
}

.nav-tabs .nav-link.active {
    color: #0d6efd;
}

/* tabbed lists: the box runs from the tabs down to 50px above the status bar (height set by site.js) and
   scrolls inside; the scroll bar is always shown, and a bit wider, so it is obvious there is more content */
.somu-tab-content {
    height: var(--somu-tab-content-height, 60vh);
    overflow-y: scroll;
    scrollbar-gutter: stable;
    scrollbar-width: auto;
    scrollbar-color: #adb5bd #f1f3f5;
    border: 1px solid #dee2e6;
    border-top: 0;
    padding: 1rem;
}

.somu-tab-content::-webkit-scrollbar {
    width: 14px;
}

.somu-tab-content::-webkit-scrollbar-track {
    background: #f1f3f5;
}

.somu-tab-content::-webkit-scrollbar-thumb {
    background: #adb5bd;
    border-radius: 7px;
    border: 3px solid #f1f3f5;
}

.nav-tabs .badge {
    margin-left: .4em;
}

/* Sessions: the scenario brief fills its tab */
.scenario-text {
    min-height: 40vh;
    resize: vertical;
}

/* Channels: names with a description show a hover box */
.channel-name[data-bs-toggle="tooltip"] {
    cursor: help;
}

/* Content: Generate content dialog */
.generate-platform-icon .platform-icon {
    width: 28px;
    height: 28px;
}

/* Deploy: a Content cell with posting status shows it on hover */
.deploy-content.has-status {
    cursor: help;
}

/* Deploy: Post item(s) menu with search and collapsible platform sections */
#postMenu .dropdown-menu {
    min-width: 22rem;
    max-height: none;
    padding-top: 0;
}

#postMenu .post-menu-search {
    position: sticky;
    top: 0;
    background: #fff;
    padding: .5rem .75rem;
    border-bottom: 1px solid #dee2e6;
    z-index: 1;
}

#postMenu .post-menu-section > button {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#postMenu .post-menu-items {
    max-height: calc(12 * 2.1rem);
    overflow-y: auto;
}

#postMenu .post-menu-section > button .caret-open,
#postMenu .post-menu-section > button.collapsed .caret-closed {
    display: inline;
}

#postMenu .post-menu-section > button.collapsed .caret-open,
#postMenu .post-menu-section > button:not(.collapsed) .caret-closed {
    display: none;
}

#postMenu .post-menu-section > button {
    color: #212529;
}

/* Content: slimmer drop zone under the toolbar */
.drag-and-drop-area.compact {
    height: 6em;
}

/* Session, General tab: one settings table — name (i) | current value | edit; the (i) opens the explanation */
.somu-settings th {
    width: 22%;
    white-space: nowrap;
    vertical-align: top;
}

.somu-settings td.setting-value {
    vertical-align: top;
    word-break: break-word;
}

.somu-settings td.setting-actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

/* the (i) beside a label; its text is a popover, so the row never grows */
.info-button {
    color: #6c757d;
    line-height: 1;
    vertical-align: baseline;
    font-size: .95em;
}

.info-button:hover,
.info-button:focus {
    color: #0d6efd;
}

.popover {
    max-width: 380px;
}

/* Content: the Generate dialog keeps one height across its three steps, so the buttons never jump */
#generateModal .modal-content {
    height: min(570px, calc(100vh - 3.5rem));
}

/* Deploy: post dialog — Title with its label in front; content and the picture side by side */
.post-field {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.post-field > label {
    flex: 0 0 auto;
    margin: 0;
}

.post-body {
    display: flex;
    gap: .75rem;
    align-items: stretch;
}

.post-body .post-text {
    flex: 1 1 auto;
    min-width: 0;
}

.post-body .post-preview {
    flex: 0 0 38%;
    display: flex;
    flex-direction: column;
}

.post-body .post-preview .edit-image-strip {
    flex: 1 1 auto;
    overflow-y: auto;
    align-content: flex-start;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    padding: .5rem;
}

.post-body .post-preview .edit-image-strip img {
    height: auto;
    max-height: 150px;
    max-width: 100%;
}

/* Deploy table: fixed layout so the checkbox, Timing and Likes columns stay narrow and Content takes the rest */
.somu-table {
    table-layout: fixed;
}

.somu-table th.select-checkbox,
.somu-table td.select-checkbox {
    padding: .5rem .8rem;
}

/* percentages: the fixed layout hands what is left to Content */
.somu-table th.select-checkbox { width: 3.5%; }
.somu-table th.actions-cell,
.somu-table th.actions-col { width: 7%; }
.somu-table th.col-timing  { width: 6.5%; }
.somu-table th.col-platform { width: 7.5%; }
.somu-table th.col-channel { width: 14%; }
.somu-table th.col-title   { width: 18%; }
.somu-table th.col-likes   { width: 4.5%; }

.somu-table td {
    overflow-wrap: anywhere;
}

/* a small dialog on top of another (Image… → Generate over the post dialog) */
.modal.modal-stacked {
    z-index: 1075;
}

.modal-backdrop.backdrop-stacked {
    z-index: 1070;
}

/* stopped clones (Overview switch off): greyed everywhere */
.nav-tabs .nav-link.tab-stopped {
    color: #adb5bd;
    font-style: italic;
}

.nav-tabs .nav-link.tab-stopped .platform-icon {
    filter: grayscale(1);
    opacity: .6;
}

.tab-pane.pane-stopped .list-group-item {
    color: #6c757d;
    background: #f8f9fa;
}

#postMenu .post-menu-stopped .platform-icon,
.platform-row.table-secondary .platform-icon,
.form-check.text-muted .platform-icon {
    filter: grayscale(1);
    opacity: .6;
}

.platform-row.table-secondary .platform-name {
    color: #6c757d;
}

/* Channels page: the profile picture beside the channel name, and its preview in the edit dialog */
.channel-avatar { width: 40px; height: 40px; object-fit: cover; }
.channel-avatar-empty { display: inline-flex; align-items: center; justify-content: center; background: #e9ecef; color: #6c757d; font-size: 1.2rem; }
#channelAvatarPreview { width: 100%; max-height: 220px; object-fit: contain; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: .375rem; }
#channelAvatarEmpty { height: 160px; border: 1px dashed #ced4da; border-radius: .375rem; color: #6c757d; display: flex; align-items: center; justify-content: center; }

/* Deploy: hovering a channel name shows the channel's picture and description */
.channel-hover { cursor: help; border-bottom: 1px dotted #adb5bd; }
.channel-popover { max-width: 300px; }
.channel-popover-avatar { display: block; max-width: 100%; max-height: 160px; object-fit: contain; border-radius: .25rem; margin-bottom: .5rem; }