.custom-combobox {
  position: relative;
  display: inline-block;
  width: 90%;
}
.custom-combobox-toggle {
  position: absolute;
  top: 0;
  bottom: 0;
  margin-left: -1px;
  padding: 0;
}
.custom-combobox-input {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
#notification {
  margin-bottom: 0;
}
#brand {
  margin-left: 0;
}
#menu {
  margin-right: 0;
}

.control-box a {
  color: #cccccc;
}

.control-box a:hover {
  color: #74ccb3;
}

.pagination {
  margin-bottom: 7px;
}
.pagination-page-info {
  padding: 0;
  width: 100%;
  margin: 0.5em;
  margin-left: 0;
  font-size: 12px;
}
.pagination-list {
  list-style: none !important;
  margin-top: 0px !important;
  margin-left: 0px !important;
  margin-bottom: 0px !important;
}
.pagination-list li {
  margin-top: 0px !important;
}
.pagination-previous,
.pagination-next {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}
.pagination-page-info b {
  color: white;
  background-color: transparent;
  font-size: 100%;
}

input {
  /* prevents mobile zooming */
  font-size: 16px !important;
}

/* Sections step down from the page heading rather than matching it: Bulma's
   own scale starts an h2 at 1.75em. Bold, not Bulma's 800, which the theme
   loads no face for. */
.content h2 {
  font-size: 1.5em;
}
.content h3 {
  font-size: 1.25em;
}
.content h4 {
  font-size: 1.125em;
}
.content h5,
.content h6 {
  font-size: 1em;
}
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
  font-weight: 700;
}

/* The heading row: the page title, and optionally one action held against the
   right edge. Baseline rather than centre, so that action sits on the title's
   own text line instead of floating halfway up it. */
.page-header {
  /* What .title:not(:last-child) used to give the header it replaced. */
  margin-bottom: var(--bulma-block-spacing);
}
.page-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
/* Matched on .title, not h1: Bulma spaces a .title from what follows it, which
   inside a row is height rather than space, and its selector outranks an h1
   one. Regular weight because the sections below carry the emphasis. */
.page-heading .title {
  font-weight: 400;
  margin-bottom: 0;
}

table {
  table-layout: fixed;
  width: 100%;
}

.break-word {
  overflow-wrap: break-word; /* Renamed property in CSS3 draft spec */
  width: 100%;
}

/* Admin-only field naming who is about to sing. */
.singer-field {
  max-width: 320px;
  margin-bottom: 10px;
}

/* A timestamp cell holds either a time or a date, never both (see whenLabel),
   so it is short enough to keep whole. Only "31 Jul 2025" is long enough to
   want a second line, and it has spaces to break at. */
.when {
  overflow-wrap: break-word;
}

/* Every paged table on the site (session list, play log, browse) carries the
   same controls underneath: a prev/next pair and a "1-50 of 300" summary. */
.pager-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

/* The row above a table holding what narrows it: which subset is on screen on
   the left, the controls that change it on the right. Wraps rather than
   squeezing, so a long performer name and a checkbox take a line each on a
   phone. */
.table-toggle-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 8px;
}

/* Held to the right edge whether or not a filter chip shares the row, so the
   checkbox is in the same place on every page that has one. Set apart rather
   than emphasised: these hide bookkeeping rows rather than filter the list the
   reader came for. */
.table-toggle {
  margin-left: auto;
  color: #a7a7a7;
  /* A box and its label, centred on each other. Left inline the box sits on the
     text baseline, which puts it a couple of pixels low against type this
     small. The gap replaces the whitespace between them, which a flex
     container would otherwise collapse away. */
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* The session list and the play log. Each declares its column widths in a
   colgroup and keeps the global fixed layout, so the name columns hold their
   share instead of being squeezed to one word per line by whichever cell
   happens to hold the longest song title. Only the unsized column absorbs the
   slack. */
.history-table td {
  word-wrap: break-word;
}

@media screen and (max-width: 600px) {
  /* Headers set smaller than the rows under them. They are single words that
     cannot wrap, so on a phone they, not the data, are what decides how narrow
     a column may be -- and they are read once rather than scanned down the
     page, which makes them the right thing to shrink. */
  .history-table th {
    font-size: 0.75rem;
  }
}

/* Which session a page reports on. Its own row on both pages that carry it: a
   long session name sharing a line with a control wraps badly on a phone. */
.session-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

/* Bulma top-aligns every table cell (`table td,table th{vertical-align:top}`,
   unscoped). Text is fine with that -- it sits half a leading below the cell's
   top edge -- but a cell holding one glyph has no baseline to sit on, so it
   pins flush to the top and reads as floating above the words beside it.
   Cells whose whole content is an icon centre against the row instead. */
.history-table td.options-cell,
.history-table td.status-cell {
  vertical-align: middle;
}

/* The cog opening a row's actions. Fontello gives every glyph side margins that
   push it off the right edge the other cells sit flush against. */
.row-options-btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.row-options-btn .icon-cog:before {
  margin-left: 0;
  margin-right: 0;
}

/* The cog is deliberately dim until pointed at, so a column of them does not
   compete with the rows. !important because it carries has-text-grey-light,
   and Bulma's colour helpers are themselves !important. */
.row-options-btn:hover {
  color: var(--dark-link) !important;
}

body.hide-cursor * {
  cursor: none !important;
}

/* Drag and drop highlight */
.drag-chosen {
  background-color: #3273dc !important;
  opacity: 0.9;
}

/* Brief highlight after move action */
.row-moved {
  animation: highlight-fade 1.5s ease-out;
}

@keyframes highlight-fade {
  0% { background-color: #3273dc; }
  100% { background-color: transparent; }
}

/* Format badge on edit page */
.format-badge {
  height: 1.2em;
  vertical-align: middle;
  opacity: 0.6;
  flex-shrink: 0;
}

/* Suggestion results on edit page */
.suggested_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--dark-text-light);
  border-radius: 4px;
  padding: 0.5em 0.75em;
  margin-bottom: 2px;
  font-size: 0.85rem;
  cursor: pointer;
}
.suggest-text {
  flex: 1;
  min-width: 0;
}
.suggest-meta {
  color: var(--dark-text-muted);
}
.suggest-score {
  flex-shrink: 0;
  margin-left: 1em;
  color: var(--dark-text-muted);
  font-size: 0.8rem;
}

/* The two Bulma stylesheets disagree about how dark an input is: bulma-dark.css
   gives .input a white background, while Bulma's own dark-theme variables still
   supply near-white values for the placeholder (0.3 alpha of a 93%-lightness
   text colour) and for the left icon. Both were being painted white on white.
   Set explicit greys rather than adjusting the variables, since the theme chain
   cannot be trusted to know the background here. */
.input::placeholder,
.textarea::placeholder {
  /* ~4.9:1 on white, and clearly dimmer than the near-black text entered above it */
  color: #6a7273;
  /* Firefox applies its own default placeholder opacity on top of the colour */
  opacity: 1;
}

.control.has-icons-left .icon,
.control.has-icons-right .icon {
  color: #6a7273;
}

.pager-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}