, single links in a
: one line height for both */
.side-bar .accordion-button i { margin: 0; }
.side-bar .single-item { margin: 0; padding: 0; } /* every row the same height: style.css padded single links by 14px */
.side-bar .single-item::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* ---------- Feedback phone cards (Venue Feedback and Artist Feedback): start date/time first, when it was left last ---------- */
@media (max-width: 767.98px) {
.vf-card .vf-when { font-size: 14px; }
.vf-card .vf-stars { font-size: 15px; letter-spacing: 1px; }
.vf-card .vf-note { display: block; white-space: normal; color: var(--tm-text); }
.vf-card .vf-created { color: var(--tm-text-muted); font-size: 11px; margin-top: 4px; }
.vf-card .vf-stars .btn { padding: 2px 12px; font-size: 12px; }
.vf-card .vf-history { text-align: left; font-size: 12px; }
.vf-card .vf-history .review-history { margin-top: 2px !important; }
table.tm-cards.tm-booking-cards tbody tr:has(> td.bc-whole) { cursor: default; }
}
/* Star ratings (includes/_widgets.html star_rating) always stay on one line */
.tm-star-rating { white-space: nowrap; }
/* ---------- compact phone cards on list pages (users, venues, requests, holds, activity, overlaps, SOPs) ---------- */
/* The row's own Actions cell (td.bc-end) stays visible at the right of its card, so menus aren't duplicated */
@media (max-width: 767.98px) {
table.tm-cards.tm-booking-cards td.bc-end { display: block; order: 2; flex: 0 0 auto; width: auto !important; padding: 2px 0 0 !important; text-align: right; }
table.tm-cards.tm-booking-cards td.bc-end::before { display: none; }
.bc-card .bc-muted { color: var(--tm-text-muted); font-size: 11px; }
.bc-card .bc-note { display: block; white-space: normal; }
.bc-card .bc-badges { flex-wrap: wrap; gap: 4px; }
.bc-card .bc-badges:empty { display: none; }
.bc-card .bc-badges .badge, .bc-card .bc-top .badge { font-size: 11px; padding: .3em .6em; }
}
/* Set Availability: the bulk action bar stays in view while scrolling; rows with unsaved bulk changes are marked */
.availability-bulk-bar { position: sticky; top: 0; z-index: 5; }
tr.availability-unsaved > td { background-color: rgba(250, 204, 21, 0.06); }
/* ---------- Accounting Review: the 16-column audit table scrolls sideways inside its .table-responsive wrapper ---------- */
/* Compact cells on one line each, so no column is cut off at the screen's right edge; long comments are truncated
(the full text is in the cell's title, and in the box while editing) */
.accounting-table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.accounting-table { width: max-content; min-width: 100%; margin-bottom: 0; }
.accounting-table > :not(caption) > * > th,
.accounting-table > :not(caption) > * > td { padding: .3rem .5rem; white-space: nowrap; vertical-align: middle; }
.accounting-table > :not(caption) > * > td.cell-notes { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; }
.accounting-table > :not(caption) > * > td.cell-notes:has(textarea) { max-width: none; overflow: visible; }
/* Accounting & Rates Settings tabs: all four on one row, each as wide as its title (style.css gives every .nav-link a
fixed 325px, which wrapped Xero Chart of Accounts onto a second row); on a narrow screen the row scrolls sideways */
#accountingSettingsTabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
#accountingSettingsTabs .nav-item { flex: 0 0 auto; }
#accountingSettingsTabs .nav-link { width: auto !important; white-space: nowrap; padding: .5rem 1rem; }
/* Venue users: the searchable venue checkbox list (templates/includes/venue_checkbox_list.html) */
.venue-checkbox-container { max-height: 280px; overflow-y: auto; border: 1px solid var(--tm-border-strong); border-radius: 8px; padding: 12px; }
.venue-checkbox-item { display: flex; align-items: flex-start; gap: 10px; padding: 6px 4px; border-radius: 6px; cursor: pointer; }
.venue-checkbox-item:hover { background: var(--tm-surface); }
.venue-checkbox-item .form-check-input { margin-top: .2rem; flex: 0 0 auto; }
.venue-checkbox-name { display: block; }
.venue-checkbox-address { display: block; font-size: 12px; color: var(--tm-text-muted); }
.venue-search { flex: 1 1 12rem; min-width: 0; }
/* includes/view_bar.html: tabs, buttons and search on one row */
.tm-view-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.tm-view-bar .tm-view-search { flex: 1 1 16rem; width: auto; min-width: 0; }
/* ---------- Data tables: one spec on every portal ---------- */
/* Top bar (title, primary action, Download, search) > filter bar (dropdowns and one Reset, tableFilters.js /
bookingTable.js) > the table: compact cells, headers that sort on one click, and badges side by side */
@media (min-width: 768px) {
table.tm-booking-cards > :not(caption) > * > th,
table.tm-booking-cards > :not(caption) > * > td { padding: .4rem .45rem; vertical-align: middle; }
table.tm-booking-cards > thead > tr > th.sorting,
table.tm-booking-cards > thead > tr > th.sorting_asc,
table.tm-booking-cards > thead > tr > th.sorting_desc { cursor: pointer; }
}
.tm-badges, .bc-badges { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }
/* ---------- Closed sidebar (the 80px labelled icon rail on tablets and desktops) ---------- */
/* Icons only, centred: labels, chevrons and sub-menus wait for the drawer to open, so nothing is cut off at the
rail's edge. Labels shrink to zero size rather than display: none, so screen readers still read each link and the
Home / page rows stay one tap to their page. */
.side-bar:not(.open) .accordion { width: 100%; }
.side-bar:not(.open) .accordion-button { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }
.side-bar:not(.open) .accordion-button i { font-size: 15px; }
.side-bar:not(.open) .nav-text { font-size: 0; letter-spacing: 0; }
.side-bar:not(.open) .single-item { flex-grow: 0; } /* single links (Home, artist and venue pages) don't push their icon left */
.side-bar:not(.open) button.accordion-button::after { display: none; }
.side-bar:not(.open) .accordion-collapse { display: none; }
/* ---------- Phone cards (< 768px): full labels, never "Vie…" ---------- */
/* Line 1: venue (left), booking # and status (right). Line 2: date and time. Then the action buttons and pills as one
full-width row at the base of the card that wraps instead of squeezing: no fixed or percentage widths, no ellipsis
on a button or pill. Only the venue name and the date / who lines may trim, and they wrap before trimming a word. */
@media (max-width: 767.98px) {
.bc-card .bc-top { justify-content: flex-start; flex-wrap: wrap; row-gap: 2px; }
.bc-card .bc-top .bc-venue { margin-right: auto; white-space: normal; overflow: visible; }
.bc-card .bc-top .badge.bc-status { flex: 0 0 auto; font-size: 11px; padding: .3em .6em; white-space: nowrap; }
.bc-card .bc-when, .bc-card .bc-who { white-space: normal; overflow: visible; }
.bc-card .bc-bottom .bc-actions { flex: 1 1 100%; justify-content: flex-start; margin-left: 0; gap: 6px; }
.bc-card .bc-bottom .btn, .bc-card .bc-bottom .badge, .bc-card .badge-group > * {
flex: 0 0 auto; width: auto; max-width: none; overflow: visible; text-overflow: clip; white-space: nowrap;
}
.badge-group, .venue-pills { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; max-width: 100%; }
/* Notice and help text spans the device */
.notice-text, .content-window .card-body > span { width: 100%; max-width: 100%; }
}
/* ---------- Set Availability on phones (< 768px): one card per shift, no "DATE: / HOURS:" labels ---------- */
/* Top: the date, with the row's checkbox top right. Middle: the shift and hours, with its status badge on the right.
Bottom: Set Availability and Add Note side by side. The batch menu always shows its whole label. */
.bulk-actions-toggle { min-width: auto; padding: 6px 12px; white-space: nowrap; }
@media (max-width: 767.98px) {
table.availability-table thead { display: none; }
table.availability-table, table.availability-table tbody { display: block; width: 100%; }
table.availability-table tr {
display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "date check" "hours status" "set note";
align-items: center; gap: 6px 10px; margin-bottom: 8px; padding: 10px 12px;
border: 1px solid var(--tm-border); border-radius: 12px; background: var(--tm-surface);
}
table.availability-table td { display: block; padding: 0 !important; border: 0; width: auto !important; text-align: left; }
table.availability-table td::before { display: none; }
table.availability-table td.av-date { grid-area: date; font-weight: 600; font-size: 14px; }
table.availability-table td.av-check { grid-area: check; justify-self: end; }
table.availability-table td.av-hours { grid-area: hours; color: var(--tm-text-muted); font-size: 13px; }
table.availability-table td.av-status { grid-area: status; justify-self: end; text-align: right; }
table.availability-table td.av-set { grid-area: set; justify-self: start; }
table.availability-table td.av-note { grid-area: note; justify-self: end; }
table.availability-table td.av-note:empty { display: none; }
table.availability-table .btn { white-space: nowrap; }
}
/* ---------- Long text in tables (static/js/longText.js): two lines, then "Read more" opens the whole text ---------- */
.tm-clamp-text {
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
overflow: hidden; white-space: normal; overflow-wrap: anywhere; max-width: 32rem;
}
.tm-read-more { display: inline-block; padding: 0; margin-top: 2px; border: 0; background: none; color: var(--tm-turquoise);
font-size: 12px; font-weight: 600; cursor: pointer; }
.tm-read-more:hover, .tm-read-more:focus-visible { text-decoration: underline; outline: none; }
.tm-long-text-full { white-space: pre-line; overflow-wrap: anywhere; line-height: 1.55; }
/* ---------- Phone cards never collapse into a one-letter column ---------- */
/* A row's own Actions / review cell (td.bc-end) sits beside its card, but it may never squeeze the card: the card keeps
at least 60% of the row, and a wide cell wraps to its own line underneath instead. Overlapping Bookings' Admin Review
(Approved by ... on ..., Approve / Revoke) always goes underneath, full width. */
@media (max-width: 767.98px) {
table.tm-cards.tm-booking-cards tr { flex-wrap: wrap; }
table.tm-cards.tm-booking-cards td.bc-card { min-width: 60%; flex-basis: 60%; }
table.tm-cards.tm-booking-cards td.bc-end { max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
table.tm-cards.tm-booking-cards td.bc-end.overlap-review {
order: 3; flex: 1 1 100%; width: 100% !important; text-align: left; padding-top: 6px !important;
border-top: 1px solid var(--tm-border);
}
table.tm-cards.tm-booking-cards td.overlap-review .overlap-stamp { white-space: normal; }
}
/* ---------- Light mode (the sun / moon button in the top bar; static/js/sidebar.js tmToggleTheme) ---------- */
/* Dark is the default. Light swaps the design tokens, Bootstrap's own colours (data-bs-theme="light") and the few
places the dark design used fixed colours. The choice is remembered on each device. */
html[data-tm-theme="light"] {
--tm-bg: #f4f6fa;
--tm-bg-raised: #ffffff;
--tm-surface: rgba(15, 23, 42, 0.03);
--tm-surface-hover: rgba(15, 23, 42, 0.06);
--tm-surface-strong: rgba(15, 23, 42, 0.09);
--tm-border: rgba(15, 23, 42, 0.10);
--tm-border-strong: rgba(15, 23, 42, 0.18);
--tm-text: #0f172a;
--tm-text-muted: #556070;
--tm-turquoise: #0d9488;
--tm-accent: #0d9488;
--tm-success: #059669;
--tm-danger: #dc2626;
--tm-warning: #b45309;
}
html[data-tm-theme="light"] [data-bs-theme="light"], html[data-tm-theme="light"][data-bs-theme="light"] {
--bs-body-bg: var(--tm-bg);
--bs-body-color: var(--tm-text);
--bs-secondary-color: var(--tm-text-muted);
--bs-emphasis-color: #000000;
--bs-border-color: var(--tm-border);
--bs-tertiary-bg: #ffffff;
--bs-secondary-bg: #ffffff;
--bs-link-color: #0f766e;
--bs-link-color-rgb: 15, 118, 110;
--bs-link-hover-color: #115e59;
--bs-link-hover-color-rgb: 17, 94, 89;
--bs-font-sans-serif: var(--tm-font);
}
html[data-tm-theme="light"] body { background-image: radial-gradient(1200px 600px at 85% -10%, rgba(13, 148, 136, 0.06), transparent 60%); }
html[data-tm-theme="light"] .top-bar { background: rgba(255, 255, 255, 0.88); }
html[data-tm-theme="light"] .side-bar.bg-dark-blue, html[data-tm-theme="light"] .side-bar { background: rgba(255, 255, 255, 0.95) !important; }
html[data-tm-theme="light"] .backdrop { background-color: #0f172a; }
html[data-tm-theme="light"] .modal-content, html[data-tm-theme="light"] .dropdown-menu { background: rgba(255, 255, 255, 0.98); }
html[data-tm-theme="light"] .form-control, html[data-tm-theme="light"] .form-select { background-color: #ffffff; }
html[data-tm-theme="light"] .form-control:focus, html[data-tm-theme="light"] .form-select:focus { background-color: #ffffff; color: var(--tm-text); }
html[data-tm-theme="light"] .form-control.bg-light, html[data-tm-theme="light"] .form-control[readonly] { background-color: var(--tm-surface) !important; }
html[data-tm-theme="light"] .form-check-input:not(:checked):not(:indeterminate) { background-color: #ffffff; }
@media (max-width: 767.98px) {
html[data-tm-theme="light"] .booking-filters { background: rgba(244, 246, 250, 0.96); }
}
/* Hover text that was white on dark */
html[data-tm-theme="light"] .top-bar .btn-light-gray:hover, html[data-tm-theme="light"] .side-bar ul li a:hover,
html[data-tm-theme="light"] .side-bar ul li a:focus, html[data-tm-theme="light"] .btn-light-gray:hover,
html[data-tm-theme="light"] .btn-md-gray:hover, html[data-tm-theme="light"] .btn-outline-white:hover,
html[data-tm-theme="light"] .btn-outline-blue:hover, html[data-tm-theme="light"] .btn-outline-secondary:hover,
html[data-tm-theme="light"] .btn-cancel:hover, html[data-tm-theme="light"] .btn-mint-dark:hover,
html[data-tm-theme="light"] .dropdown-item:hover, html[data-tm-theme="light"] .dropdown-item:focus,
html[data-tm-theme="light"] .nav-pills .nav-link:hover, html[data-tm-theme="light"] a.paginate_button:hover { color: var(--tm-text) !important; }
html[data-tm-theme="light"] .btn-outline-white { color: var(--tm-text); border-color: var(--tm-border-strong); }
html[data-tm-theme="light"] .btn-outline-blue,
html[data-tm-theme="light"] .btn-light-gray:not(:disabled):not([data-bs-dismiss]), html[data-tm-theme="light"] .btn-md-gray:not(:disabled):not([data-bs-dismiss]),
html[data-tm-theme="light"] .btn-outline-secondary:not(.btn-cancel):not([data-bs-dismiss]) { color: #0f766e; }
html[data-tm-theme="light"] .top-bar .btn-light-gray { color: var(--tm-text); }
/* Page titles were white on the dark banner; close buttons were white */
html[data-tm-theme="light"] .content-window .container-fluid.bg-mint .text-white,
html[data-tm-theme="light"] .content-window h1.text-white, html[data-tm-theme="light"] .modal-content .text-white:not(.btn):not(.badge) { color: var(--tm-text) !important; }
html[data-tm-theme="light"] .btn-close-white { filter: none; }
html[data-tm-theme="light"] .pwa-install-banner { background: rgba(255, 255, 255, 0.98); color: var(--tm-text); }
html[data-tm-theme="light"] .pwa-install-banner .btn-close { filter: none; }
/* The logo: the light (white) wordmark on dark, the dark one on light */
.tm-logo-for-light { display: none; }
html[data-tm-theme="light"] .tm-logo-for-dark { display: none; }
html[data-tm-theme="light"] .tm-logo-for-light { display: inline; }
.tm-theme-toggle .bi-sun { display: none; }
html[data-tm-theme="light"] .tm-theme-toggle .bi-sun { display: inline; }
html[data-tm-theme="light"] .tm-theme-toggle .bi-moon-stars { display: none; }
/* Status badges: the pale text and glow made for dark backgrounds wash out on light, so darker text and no glow */
html[data-tm-theme="light"] .badge.bg-green { background: rgba(16, 185, 129, 0.14) !important; color: #047857; box-shadow: inset 0 0 0 1px rgba(16, 185, 129, .45); }
html[data-tm-theme="light"] .badge.bg-red { background: rgba(239, 68, 68, 0.12) !important; color: #b91c1c; box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .45); }
html[data-tm-theme="light"] .badge.bg-yellow { background: rgba(245, 158, 11, 0.16) !important; color: #92400e; box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .5); }
html[data-tm-theme="light"] .badge.bg-orange { background: rgba(249, 115, 22, 0.14) !important; color: #9a3412; box-shadow: inset 0 0 0 1px rgba(249, 115, 22, .45); }
html[data-tm-theme="light"] .badge.bg-blue { background: rgba(13, 148, 136, 0.12) !important; color: #0f766e; box-shadow: inset 0 0 0 1px rgba(13, 148, 136, .45); }
/* Found by the light-mode contrast check (every admin page) */
/* Count bubbles on the selected tab: dark ink on the turquoise pill, in both modes */
.nav-pills .nav-link.active .badge { background: rgba(4, 18, 26, 0.18) !important; color: var(--tm-accent-ink) !important; box-shadow: none; }
/* Overlap gap badges (style.css's pale green / red fills): dark text, readable in both modes */
.badge.bg-light-green, .badge.bg-light-red { color: #10230a; }
/* Star ratings: gold and pale grey disappear on white, so deeper amber and slate in light mode */
html[data-tm-theme="light"] .active-star { color: #d97706; }
html[data-tm-theme="light"] .star { color: #b6bfcc; }
html[data-tm-theme="light"] .star-input input:checked ~ label, html[data-tm-theme="light"] .star-input label:hover,
html[data-tm-theme="light"] .star-input label:hover ~ label { color: #d97706; }
/* Client Communications: one line per venue, its contacts beside it as checkboxes */
.contact-venue { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 14px; padding: 8px 4px; border-bottom: 1px solid var(--tm-border); }
.contact-venue:last-child { border-bottom: 0; }
.contact-venue-name { display: flex; align-items: center; gap: 8px; flex: 0 0 13rem; max-width: 100%; cursor: pointer; }
.contact-venue-people { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 14rem; min-width: 0; }
.contact-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--tm-border-strong);
border-radius: 999px; font-size: 13px; cursor: pointer; max-width: 100%; overflow-wrap: anywhere; }
.contact-chip:has(input:checked) { border-color: var(--tm-turquoise); background: rgba(45, 212, 191, 0.10); }
/* ---------- bulk actions on admin tables (static/js/bulkSelect.js) ---------- */
.bulk-bar { position: sticky; top: 64px; z-index: 5; padding: 8px 12px; border-radius: var(--tm-radius); background: var(--tm-surface);
border: 1px solid var(--tm-turquoise); }
tr.bulk-selected > td { background: rgba(45, 212, 191, 0.08) !important; }
.bulk-check { cursor: pointer; vertical-align: middle; }
/* Banned (bans.py): stands apart from Inactive */
.badge.user-banned { background: #18181b !important; color: #fca5a5; box-shadow: inset 0 0 0 1px #ef4444; }
/* Every Actions menu button (includes/_widgets.html actions_toggle): only ⋮, same colors as before */
.btn.tm-actions-toggle { padding: .2rem .3rem; line-height: 1; }
/* Combos (static/js/bookingTable.js comboHtml): "Plays with ... [music status]" under the artist on admin booking tables */
.combo-line { color: var(--tm-text-muted); margin-top: 2px; white-space: normal; }
.combo-line .badge { font-size: .7em; vertical-align: middle; }
/* Only an arrow right after the artist's name; it opens the line below (bookingTable.js comboToggle) */
.combo-toggle { display: inline; padding: 0 0 0 4px; border: 0; font-size: .75em; line-height: 1; vertical-align: baseline; color: var(--tm-text-muted); text-decoration: none; }
.combo-toggle:hover, .combo-toggle:focus { filter: brightness(1.25); }
.combo-toggle.combo-green { color: var(--tm-success); }
.combo-toggle.combo-amber { color: var(--tm-warning); }
.combo-toggle.combo-red { color: var(--tm-danger); }
.bc-card .bc-line.bc-combo { display: block; white-space: normal; }
/* Every booking table, every role: one line per cell on desktop (the table scrolls sideways if it must); long free
text is cut with "…", full text on hover (bookingTable.js clipLongText). Phones use cards. */
@media (min-width: 768px) {
table.tm-booking-cards > tbody > tr > td { white-space: nowrap; }
/* Headings may break ("START / TIME") and no column keeps a width set when the table was built, so a column is as
wide as what's in it (times and dates stay narrow) and the table fits without scrolling sideways */
table.tm-booking-cards > thead > tr > th { white-space: normal; width: auto !important; }
table.tm-booking-cards > tbody > tr > td.bt-clip { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; }
table.tm-booking-cards td.venue-col .venue-address { display: inline; margin: 0 0 0 .5rem; }
/* The column that gives (bookingTable.js clipLongText): whatever width is left, its text cut with "…", so the table
always fits its box */
table.tm-booking-cards > thead > tr > th.bt-flex { width: 100% !important; max-width: 0; }
table.tm-booking-cards > tbody > tr > td.bt-flex { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; }
table.tm-booking-cards > tbody > tr > td.bt-flex .tm-clamp-text { display: block; max-width: 100%; }
}
/* Desktop booking tables: long text is one line cut with "…" (click it for the whole text, longText.js), stars are small */
@media (min-width: 768px) {
table.tm-booking-cards > tbody > tr > td .tm-clamp-text {
display: inline-block; vertical-align: bottom; -webkit-line-clamp: unset; line-clamp: unset; white-space: nowrap;
text-overflow: ellipsis; overflow-wrap: normal; max-width: 14rem; cursor: pointer; }
table.tm-booking-cards > tbody > tr > td .tm-read-more { display: none; }
table.tm-booking-cards > tbody > tr > td:not(.bc-card) .tm-star-rating span { font-size: 15px !important; }
table.tm-booking-cards .vf-stars-cell { width: auto; line-height: 1; }
}
/* Laptop screens: a touch smaller so a full booking table fits beside the sidebar */
@media (min-width: 768px) and (max-width: 1599.98px) {
table.tm-booking-cards > tbody > tr > td { font-size: .875rem; }
table.tm-booking-cards > tbody > tr > td .badge { font-size: .7rem; }
}
/* Artist Availability (dashboards_artist_availability.html): the table's rows laid out as a grid of cards */
/* A table only grows to its content: as a block it takes the page's full width, so the grid gets every column */
table.availability-cards { display: block; width: 100% !important; }
table.availability-cards thead { display: none; }
table.availability-cards tbody { display: grid; width: 100%; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
table.availability-cards tbody tr { display: block; background: transparent; }
table.availability-cards tbody td { display: block; padding: 0; border: 0; background: transparent; }
table.availability-cards tbody td.dataTables_empty { grid-column: 1 / -1; padding: 16px; color: var(--tm-text-muted); }
.availability-card { display: flex; flex-direction: column; gap: 10px; height: 100%; color: var(--tm-text); text-decoration: none; }
.availability-week { display: flex; gap: 4px; }
.availability-night { flex: 1; display: inline-flex; flex-direction: column; align-items: center; padding: 3px 0; border-radius: 6px;
font-size: 11px; line-height: 1.2; border: 1px solid var(--tm-border); }
.availability-night .night-date { font-weight: 600; font-size: 12px; }
.availability-night.night-yes { background: rgba(52, 211, 153, 0.18); border-color: rgba(52, 211, 153, 0.55); }
.availability-night.night-booked { background: rgba(59, 130, 246, 0.2); border-color: rgba(59, 130, 246, 0.6); }
.availability-night.night-no { background: rgba(239, 68, 68, 0.14); border-color: rgba(239, 68, 68, 0.45); }
.availability-night.night-none { color: var(--tm-text-muted); }
.availability-night.legend { display: inline-block; width: 14px; height: 14px; padding: 0; vertical-align: middle; flex: none; }
/* ---------- Labelled rail: a short name under each icon, so nobody needs the Menu button to tell pages apart ---------- */
.rail-label { display: none; }
.tm-menu-button { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: .15rem .55rem; }
.tm-menu-label { font-size: 13px; font-weight: 500; }
@media (max-width: 575.98px) { .tm-menu-label { display: none; } } /* phones: the icon alone (the top bar is tight) */
@media (min-width: 576px) {
.side-bar:not(.open) { width: 80px; }
.content-window { left: 80px; }
.side-bar:not(.open) .accordion-button { flex-direction: column; justify-content: center; gap: 2px; padding: 6px 2px; margin: 1px 4px; width: calc(100% - 8px); }
/* The open menu's look (same colour and weight), small and compact so each name fits under its icon */
.side-bar:not(.open) .rail-label { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.2px; line-height: 1.2;
text-align: center; color: var(--tm-text); white-space: normal; max-width: 100%; }
}
/* ---------- Matrix grid (dashboards_matrix.html): artists x venues, sticky artist column and venue headers ---------- */
.matrix-scroll { overflow: auto; max-height: calc(100vh - 260px); border: 1px solid var(--tm-border); border-radius: var(--tm-radius); }
.matrix-grid { border-collapse: separate; border-spacing: 0; font-size: 12px; }
.matrix-grid th, .matrix-grid td { border-bottom: 1px solid var(--tm-border); border-right: 1px solid var(--tm-border); background: var(--tm-bg); }
#availabilityTable thead th { background: var(--tm-bg-raised); } /* its header stays put: rows scroll under it, not through it */
.matrix-grid thead th { position: sticky; top: 0; z-index: 2; vertical-align: bottom; background: var(--tm-bg-raised); }
.matrix-grid .matrix-artist { position: sticky; left: 0; z-index: 1; min-width: 190px; max-width: 220px; padding: 6px 10px; text-align: left; background: var(--tm-bg-raised); }
.matrix-grid thead .matrix-artist { z-index: 3; }
.matrix-grid .matrix-artist a { color: var(--tm-text); text-decoration: none; font-weight: 500; }
.matrix-grid .matrix-meta { display: block; color: var(--tm-text-muted); font-size: 11px; font-weight: 400; }
.matrix-grid .matrix-venue { width: 96px; min-width: 96px; max-width: 96px; padding: 6px 6px; font-weight: 500; color: var(--tm-text-muted); text-align: center; vertical-align: bottom; }
/* Venue names read across (Kice, 2026-10-28), up to three lines; the full name is in the tooltip */
.matrix-grid .matrix-venue span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
.matrix-grid .matrix-cell { width: 96px; min-width: 96px; height: 34px; text-align: center; padding: 2px; }
.matrix-grid .matrix-cell.editable { cursor: pointer; }
.matrix-grid .matrix-cell.editable:hover { background: var(--tm-surface-hover); }
.matrix-grid .matrix-cell .badge { font-size: 10px; padding: .3em .45em; }
.coverage-card.coverage-thin { border-color: rgba(234, 179, 8, 0.5); }
.coverage-card a { color: var(--tm-text); text-decoration: none; }
.coverage-card a:hover { color: var(--tm-accent); }
.coverage-card .coverage-type { display: inline-block; padding: 1px 6px; border-radius: 6px; background: var(--tm-surface); }
.perm-matrix .perm-section-set { font-size: .7rem; color: var(--tm-text-muted); text-decoration: none; }
.perm-matrix .perm-section-set:hover { color: var(--tm-accent); }
/* Star ratings with their action (venue Past Bookings & Feedback, table and phone card): stars and the button or note
sit side by side and wrap rather than overlap */
.tm-rating { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.tm-rating .tm-stars { display: inline-flex; gap: .15rem; line-height: 1; }
.tm-rating .tm-stars .star { font-size: 20px; cursor: pointer; }
/* A client's past booking: stars, who reviewed it and the comment on one line; what's written gives way first */
.tm-review-line { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.tm-review-line > * { flex: 0 0 auto; }
.tm-review-line .tm-rating { flex-wrap: nowrap; gap: .75rem; }
.tm-review-line .tm-rating .btn { padding: 2px 10px; font-size: 12px; }
.tm-review-line .reviewed-by, .tm-review-line .reviewed-comment { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tm-rating-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; font-size: 14px; }
.tm-title-row:has(> .d-none) { display: none; }
.bc-card .tm-rating .tm-stars .star { font-size: 22px; }
.tm-rating .tm-rating-note { font-size: 12px; font-style: italic; color: var(--tm-text-muted, #797979); }
/* Onboarding: the whole application's progress stays at the bottom of the screen while the artist scrolls; on the
signing page it sits above the contract instead, so it never covers signNow's buttons */
.onboarding-progress { position: sticky; bottom: 12px; z-index: 5; background: var(--tm-bg-raised); box-shadow: 0 -4px 16px rgba(0, 0, 0, .25); margin-top: 1rem; }
.onboarding-progress.onboarding-progress-inline { position: static; box-shadow: none; margin-top: 0; }
/* The sticky bar never hides what they're reading or typing in: jumping to a step, or tabbing to a field, keeps it
clear of the bar; the bar itself is slimmer on phones */
html:has(#onboardingProgress:not(.onboarding-progress-inline)) { scroll-padding-bottom: 140px; }
#onboardingProgress:not(.onboarding-progress-inline) ~ *, .onboarding-step:last-of-type { margin-bottom: 1rem; }
@media (max-width: 575.98px) { .onboarding-progress:not(.onboarding-progress-inline) { padding: .5rem .75rem !important; bottom: 6px; } }
/* Venue Feedback (dashboards_venue_reviews.html): the stars column, and each review's History */
.vf-stars-cell { width: 170px; line-height: 17px; }
.review-history summary, .account-history summary { cursor: pointer; }
/* Update My Info (onboarding/onboarding_update.html): the same width as the onboarding checklist */
.onboarding-update { max-width: 820px; }
/* Account History (includes/account_history.html, staff pages): one line per event, wrapping on phones */
.account-history summary { list-style: none; }
.account-history .account-event { overflow-wrap: anywhere; }
/* Staff table row buttons (includes/row_actions.html): the main action and a "⋯" menu, on one line */
.row-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: nowrap; }
.row-actions form { margin: 0; }
.row-actions .dropdown-menu form { display: block; }
.row-actions .dropdown-menu .dropdown-item { white-space: nowrap; }
.row-note { font-size: .78rem; color: var(--tm-text-muted); margin-top: 2px; }
/* Phones: compact rows that expand (table.tm-expand, base.html). Collapsed, a row shows only its data-summary cells on
one line with a chevron; tapped open, it shows every cell as the usual labelled card. */
@media (max-width: 767.98px) {
table.tm-cards.tm-expand tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; position: relative;
margin-bottom: 6px; padding: 9px 36px 9px 12px; cursor: pointer; }
table.tm-cards.tm-expand tr::after { content: ''; position: absolute; right: 14px; top: 17px; width: 8px; height: 8px;
border-right: 2px solid var(--tm-text-muted); border-bottom: 2px solid var(--tm-text-muted);
transform: rotate(45deg); transition: transform .15s ease; }
table.tm-cards.tm-expand tr.tm-open::after { transform: rotate(-135deg); top: 21px; }
table.tm-cards.tm-expand tr:focus-visible { outline: none; box-shadow: var(--tm-focus-ring); }
table.tm-cards.tm-expand td { display: none; }
table.tm-cards.tm-expand td[data-summary] { display: block; width: auto !important; padding: 0 !important; text-align: left; }
table.tm-cards.tm-expand td[data-summary]::before { display: none; }
table.tm-cards.tm-expand td[data-summary]:first-child { flex: 1 1 auto; min-width: 0; }
table.tm-cards.tm-expand td[data-summary] .row-note { display: none; }
table.tm-cards.tm-expand tr.tm-open td { display: block; width: 100% !important; padding: 6px 0 !important; text-align: right; }
table.tm-cards.tm-expand tr.tm-open td[data-label]:not([data-label=""])::before { display: block; }
table.tm-cards.tm-expand tr.tm-open td[data-summary]:first-child { text-align: left; }
table.tm-cards.tm-expand tr.tm-open td[data-summary]:first-child::before { display: none; }
table.tm-cards.tm-expand tr.tm-open td[data-summary] .row-note { display: block; }
}
/* Phones: an empty-table message or a one-cell row (colspan) in a tap-to-open table is always shown */
@media (max-width: 767.98px) {
table.tm-cards.tm-expand td.dataTables_empty, table.tm-cards.tm-expand td[colspan] { display: block; width: 100% !important; text-align: center; }
table.tm-cards.tm-expand tr:has(> td.dataTables_empty)::after, table.tm-cards.tm-expand tr:has(> td[colspan])::after { display: none; }
/* The compact booking cards open too (base.html toggleRow): collapsed they look exactly as before; tapped open, the
row's other columns follow the card as labelled lines (cells with no heading, e.g. a duplicate button column, stay hidden) */
table.tm-cards.tm-booking-cards tbody tr { cursor: pointer; }
table.tm-cards.tm-booking-cards tr:focus-visible { outline: none; box-shadow: var(--tm-focus-ring); }
table.tm-cards.tm-booking-cards tr.tm-open { flex-wrap: wrap; }
table.tm-cards.tm-booking-cards tr.tm-open td.bc-keep { order: 1; }
table.tm-cards.tm-booking-cards tr.tm-open td.bc-card { order: 2; }
table.tm-cards.tm-booking-cards tr.tm-open td[data-label]:not([data-label=""]):not(.bc-card):not(.bc-keep) {
display: block; order: 3; flex: 0 0 100%; width: 100% !important; padding: 5px 0 !important; text-align: right;
border-top: 1px solid var(--tm-border) !important; font-size: 13px;
}
table.tm-cards.tm-booking-cards tr.tm-open td[data-label]:not([data-label=""]):not(.bc-card):not(.bc-keep)::before { display: block; }
}
/* Music Approvals: the review card a Review button jumps to stands out */
.music-submission { scroll-margin-top: 90px; }
.music-submission:target { outline: 2px solid var(--tm-accent); outline-offset: 2px; }
/* Back button at the top of inner pages (navigation.py) */
.tm-back-row { padding: .6rem 1rem 0; }
.tm-back { display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; padding: .25rem .75rem .25rem .5rem; border: 1px solid var(--tm-border, rgba(127,127,127,.35)); border-radius: 999px; color: inherit; font-size: .875rem; font-weight: 500; text-decoration: none; }
.tm-back:hover { background: var(--tm-surface-hover, rgba(127,127,127,.15)); color: inherit; }