html,
body,
div,
applet,
object,
iframe,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

input {
    border: 0;
    width: 260px;
    height: 40px;
    text-indent: 6px;
    font-size: 15px;
    border-radius: 4px 4px 4px 4px;
    position: relative;
    color: var(--secondary);
    padding: 0;
    display: inline-flex;
    flex: 0 1 260px;
}

input.half:last-child,
input.third:last-child {
    margin-right: 0px;
}

input.half:first-child,
input.third:first-child {
    margin-right: 15px;
}


input.half,
div.half {
    max-width: 120px;
    margin-right: 15px;
}

input.third {
    width: 78px;
    margin-right: 9px;
}

input[type="button"],
input[type="submit"] {
    float: right;
    height: 40px;
    background: var(--arena-orange);
    color: var(--neutral);
    cursor: pointer;
    text-align: center;
    display: inline-block;
    text-indent: 0;
}

input[type="select"] {
    float: left;
    width: 460px;
    height: 40px;
    margin-left: 174px;
    background: var(--arena-orange);
}

select {
    /*float: left;*/

    /* display:inline-flex; */
    /*display: inline-block;*/
    min-width: 50% !important;
    height: 40px;
    /* padding: 20px 0 20px 0; */
    background-color: var(--surface);
    border: 0;
    border-radius: 5px;
    width: 260px;
    text-indent: 5px;
}

textarea {


    border: 0;
    border-radius: 5px;
    width: 242px;
    max-height: 66px;
    padding: 7px;
    color: var(--secondary);
    /* margin-bottom: 30px; */
    display: inline-flex;
    flex: 0 1 260px;
}

.depricated{
    color:red;
}

.depricated:hover::after{
    content: "depricated, requires update";
    position: absolute;
    font-size: x-small;
    background: #0000001c;
    border-radius: 5px;
    padding: 5px;
    line-height: normal;
}

.hidden {
    display: none !important;
}

.customSelect {
    /* This is the default class that is used */
    /* Put whatever custom styles you want here */

    background-color: var(--surface);
    color: var(--text-muted);
    border-radius: 5px;
    height: 40px;
    font-size: 14px;
    /* width: 260px; */

}

.customSelect.customSelectHover {
    /* Styles for when the select box is hovered */
}

.customSelect.customSelectOpen {
    /* Styles for when the select box is open */
}

.customSelect.customSelectFocus {
    /* Styles for when the select box is in focus */
}

.customSelectInner {
    text-indent: 10px;
    line-height: 40px;
    position: relative;
    padding-right: 43px;
    /* width: 224px; */
}

.customSelectInner:after {
    /* You can style the inner box too */
    background: url('../images/icon-sprites.png');
    content: '';
    display: inline-block;
    width: 43px;
    height: 40px;
    vertical-align: middle;
    float: right;
    background-position: -520px 0px;
    border-left: solid 1px grey;
    position: relative;
    right: -43px;
    top: 0px;
}

.customSelect.customSelectHover .customSelectInner:after,
.customSelect.customSelectOpen .customSelectInner:after {
    background-position: -520px -43px;
}

.dz-filename {
    display: none;
}

.dz-size {
    display: none;
}

.dz-preview,
.dz-file-preview,
.dz-processing,
.dz-success {
    /*background: white; */
    position: absolute;
    top: 40px;
    width: 300px;
    height: 60px;
    border-radius: 5px;
}

.dz-success-mark {
    display: none;
}

.dz-error-message {
    display: none;
}

.dz-error-mark {
    display: none;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

.wf-loading {
    visibility: hidden;
}

.wf-active {
    visibility: visible;
}

a {
    text-decoration: none;
    line-height: inherit;
    color: inherit;
}

a:hover,
a:focus {
    color: var(--arena-orange);
    cursor: pointer;
}

.active {
    color: var(--arena-orange) !important;
}

#mainMenu .active {
    border-bottom: solid 2px;
}

.active a {
    color: var(--arena-orange) !important;
}

.grey {
    color: inherit !important;
}

html {
    font-family: "Open Sans";
    font-size: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    position: relative;
    background: var(--neutral-dark);
    color: var(--secondary);
    padding: 0;
    margin: 0;
    font-weight: normal;
    font-style: normal;
    font-size: 100%;
    line-height: 1;
    cursor: default;
    /* min-width: 1280px; */
    /* width: 100%; */
    height: 100%;
    overflow: auto;
}

h1 {
    font-size: 23px;
    line-height: 40px;
    text-align: left;
    margin: 0;
    padding: 0;
}

h2 {
    font-size: 14px;
    line-height: 30px;
    font-weight: 400;
    text-align: left;
    margin: 0;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
}

h3 {
    /* float: left; */
    line-height: 100%;
    font-weight: 300;
    text-align: center;
    margin: 0;
    padding: 0;
    position: relative;
}

h4,
.h4 {
    font-size: 12px;
    line-height: 19px;
    font-weight: 400;
    text-align: left;
    margin: 0;
    padding: 0;
    display: inline;
}

h5 {
    width: 100%;
    font-weight: 600;
    line-height: 1em;
    margin: 0;
}

h6 {
    width: 100%;
}

p {
    width: 100%;
}

#mainLogo {
    background: url(../images/arena_logo.png) no-repeat center;

    height: 200px;
    width: 100%;
}

#loginForm {
    width: 290px;
    height: 150px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -75px;
    margin-left: -130px;
}

#loginForm input[type="submit"] {
    left: initial;

}

header {
    position: relative;
    width: 100%;
    border-bottom: solid 1px;
    margin: 0px;
}

.header {
    position: relative;
    width: 100%;
    height: 70px;
    background: var(--neutral);
}

.header .logo {
    position: relative;
    display: inline-block;
    /* width: 300px; */
    height: 69px;
    top: 0;
    left: 0px;
    text-align: left;
    background: url(../images/ibookshows-logo.png) no-repeat 0 center;
}

.header .logo a {
    float: left;
    width: 235px;
    height: 69px;
    text-align: left;
    font-size: 21px;
    line-height: 69px;
    color: var(--text);
}

.header nav {
    position: relative;
    /* max-width: 835px; */
    display: inline-block;
    height: 69px;
    margin: 0 auto;
}

.header nav ul {
    display: inline-block;
    margin: 0 auto;

    height: 100%;
}

.header nav ul li {
    float: left;
    padding: 0px 15px;
    color: var(--tertiary);
}

.header nav ul li a {
    float: left;
    font-size: 13px;
    line-height: 69px;
    text-align: center;
}

.header nav ul li a:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    background: url('../images/icon-sprites.png');
    width: 42px;
    height: 42px;
}



.header .logout {
    position: absolute;
    /* width: 200px; */
    height: 69px;
    top: 0;
    right: 20px;
    /* #108 — flex row so the notification bell sits left of the (variable-width)
       username without a fragile fixed offset. */
    display: flex;
    align-items: center;
}

.header .logout a {
    float: left;
    color: var(--arena-orange);
    text-align: right;
    margin-right: 20px;
    font-size: 21px;
    line-height: 66px;
}

#mainMenu_tasks a:before {
    background-position: -43px 0px;
}

#mainMenu_contracts a:before {
    background-position: -814px 0px;
}

#mainMenu_artists a:before {
    background-position: -129px 0px;
}

#mainMenu_venues a:before {
    background-position: -172px 0px;
}

#mainMenu_promoters a:before {
    background-position: -215px 0px;
}

#mainMenu_email a:before {
    background-position: -258px 0px;
}

#mainMenu_admin a:before {
    background-position: 0px 0px;
}

.header nav ul li:hover a:before,
.header nav ul li.active a:before {
    background-position-y: -43px !important;
}

.sub-header {
    position: relative;
    width: 100%;
    height: 60px;
    background: var(--neutral-dark);
    border-top: 1px solid var(--surface);
    z-index: 3;
    display: flex;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

.sub-header nav {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

.sub-header nav ul {
    display: flex;
    margin: 0 10px 0 0;
    padding: 0;
    list-style: none;
    flex: 0 0 auto;
}

.sub-header nav ul li {
    flex-shrink: 0;
}

.sub-header nav ul li a {
    display: block;
    padding: 0 15px;
    font-size: 13px;
    line-height: 58px;
    color: var(--tertiary);
    text-align: center;
    white-space: nowrap;
}

div.search {
    flex: 1 0 auto;
    overflow: hidden;
    text-align: center;
}

.sub-header .add-user {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    height: 60px;
    margin-left: 15px;
    gap: 20px;
}

.sub-header .add-user a {
    color: var(--arena-orange);
    line-height: 60px;
    text-align: right;
    white-space: nowrap;
}

.sub-header .add-user a:hover {
    color: var(--arena-orange-hover);
}

input[type="search"] {
    -webkit-appearance: textfield;
    width: 100%;
    max-width: 300px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 8px 8px 8px 8px;
    outline: 0;
}

.page {
    position: absolute;
    /* margin-bottom: 80px; */
    /* height: auto; */
    overflow: hidden;
    margin: 0;
    padding: 0;
    top: 71px;
    bottom: 44px;
    left: 0px;
    width: 100%;
    border-bottom: solid 1px;
}

#content {
    position: absolute;
    width: 100%;
    /*max-height: 675px; */
    /*padding: 0 0 1px 0; border: none;*/
    border-top: 1px solid var(--border-dark);
    /* margin-top: 61px; */
    overflow: auto;
    background: var(--neutral);
    top: 61px;
    margin: 0;
    padding: 0;
    bottom: 0px;
    /* display: flex; */
    /* flex-flow: row wrap; */
    max-height: 100%;
}

/* #537 Drop the fixed `height: 130px`; keep `min-height: 130px` so rows expand
   when a child cell wraps to multiple lines (e.g. long leader names on
   /artists). See the companion `vertical-align` change on `.cell` below. */
#content .row {
    position: relative;
    min-width: 100%;
    float: left;
    min-height: 130px;
    border-bottom: 1px solid var(--border-dark);
    white-space: nowrap;
    margin: 0;
    padding: 0;
    display: block;
    /* display: flex; */
    /* flex-wrap: nowrap; */
}


/* #537 Cells switch from `vertical-align: middle` to `top` so shorter cells
   pin to the row top instead of mid-anchoring against a now-taller line box
   when one cell's content wrapped and stretched the row. */
#content .row .cell {
    display: inline-flex;
    /* display: inline-block; */
    padding: 0 10px 0 10px;
    /* min-height: 130px; */
    position: relative;
    min-width: 280px;
    vertical-align: top;
    flex-direction: column;
    justify-content: space-around;
    min-height: 129px;

    border-top: solid 1px var(--surface);
    /* border-bottom: solid 1px; */
    /* border-left: solid 1px white; */
}

.floater {
    /* display: flex; */
    /* flex-direction: inherit; */
}

.floater.full {
    background: var(--surface);
    max-height: 400px;
    z-index: 2;
    position: absolute;
    top: -2px;
    left: -5px;
    width: 94.4%;
    padding: 8px 10px 27px 11px;
    border: solid;
    border-width: 0px 1px 1px 1px;
}

#content .row .cell.noMin {
    min-width: 0px;
}

#content .row .cell:nth-child(odd) {
    border-left: solid 1px;
    border-right: solid 1px;
}

#content .row .cell:first-child {
    border-right: none;
    min-width: 0;
}

#content .row .cell:nth-child(2) {
    border-left: none;
}

#content .row .cell:last-child {
    border-right: none;
    min-width: 0;
    /* margin-top: -2px; */
    /* margin-bottom: -1px; */
    margin-left: auto;
    /* margin-right: 0; */
    height:100%;
}

#content .row .cell:nth-child(3).userInfo

/*HACK!!*/
    {
    float: none;
    display: inline-flex;

}


#content .row .cell.settings {}

.settingsBox {
    background: var(--surface);
    border-radius: 5px;
    position: relative;
    top: 25px;
    overflow: hidden;
    -webkit-transform: scaleY(0);
    -webkit-transform-origin: top;
    transition: -webkit-transform 0.26s ease;
}

.settingsItem {
    padding: 10px;
    cursor: pointer;
}


.settingsItem:hover {
    color: var(--arena-orange);
}


.settingsBoxOpen {
    -webkit-transform: scaleY(1);
}

/* #537 max-width was 150px, which made multi-word values (leader names,
   long city names, multi-part contact strings) wrap to 4–5 lines while
   plenty of horizontal cell space sat unused. Raised to 320px so multi-word
   and slash-joined values lay out on 1–2 lines across all listings
   (#content .row .cell .cellContent .fieldVal — artists, venues, promoters,
   contracts). .fieldVal.artistNames keeps its own explicit 150px override
   below (intentional ellipsis cap). */
.fieldVal {
    font-size: 12px;
    line-height: 19px;
    font-weight: 400;
    text-align: left;
    margin: 0;
    padding: 0;
    color: var(--arena-orange);
    max-width: 320px;
    text-wrap: auto;
    text-align: center;
    /* flex: 1; */
}

.fieldVal h1 {
    text-align: center;
    font-weight: 200;
}

.fieldVal.status-not-started,
.fieldVal.status-tentative,
.fieldVal.status-OFFER {
    font-size: 2em;
}

.fieldVal.status-ongoing {
    color: var(--success);
    font-size: 2em;
}

.fieldVal.status-CONTRACT {
    color: var(--warning);
    font-size: 2em;
}

.fieldVal.status-complete,
.fieldVal.status-cancelled,
.fieldVal.status-CANCELED {
    font-size: 2em;
}

.fieldVal.status-confirmed,
.fieldVal.status-ISSUED {
    color: var(--success);
    font-size: 2em;
}

.fieldVal.artistNames {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 150px;
}

.row .nameField {
    /* min-height: 110px; */
    margin: 0;
    padding: 0;
    position: relative;
}

.nameField h1 {
    font-weight: 400;
}

.nameField input {}

#content .row .D {
    float: left;
    padding: 0 10px 0 10px;
    min-height: 150px;
    border-right: 1px solid var(--border-dark);
    background: var(--surface);
}

#content .row .full {
    width: 100%;
    margin: 0;
    padding: 0;
    height: 100%;
    left: 0;
    z-index: 1;
}

#content .row .top {
    width: 100%;
    margin: 0;
    padding: 0;
    min-height: 35px;
    /* position: absolute; */
    left: 0;
    z-index: 1;
}

#content .row .top .left,
#content .row .full .left {
    float: left;
    height: 30px;
}

#content .row .full .right,
#content .row .top .right {
    float: right;
    min-width: 40px;
    height: 30px;
    display: inline-block;
    position: relative;
    font-size: 0.7em;
}

#content .row .D .top .left {
    float: left;
    width: 100px;
    height: 30px;
}


#content .row .middle {
    min-height: 70px;
    margin: 0;
    padding: 0;
    /* display: inline-flex; */
    /* justify-content: space-around; */
    /* flex-wrap: nowrap; */
}

#content .row .middle.fixed {
    flex-wrap: nowrap;
}

#content .row .middle .topHalf {
    width: 100%;
    min-height: 25px;
    position: absolute;
    display: none;
}

#content .row .middle .bottomHalf {
    width: 100%;
    min-height: 25px;
}

.bottom {
    height: 40px;
    line-height: 40px;
    text-align: right;
    padding: 0px 20px;
}

#content .row .bottom {
    /*float: right; */
    /*min-height: 29px; */
    height: 30px;
    line-height: inherit;
    text-align: right;
    cursor: pointer;
    position: absolute;
    bottom: 0px;
    right: 20px;
    padding: initial;
}

#content .row .middle-bottom {
    float: left;
    width: 100%;
    min-height: 90px;
    margin: 0;
    padding: 0;
}

#content .row .number {
    line-height: 128px;

}


#content .row .middle .bottomHalf .user-legal-name {
    float: left;
    padding: 0 30px 0 42px;
}

.title {
    min-height: 25px;
    text-align: center;
}

.tax {
    color: var(--arena-orange);
    width: 100%;
    width: 200px;
    font-weight: 100;
}

#content .row .middle .bottomHalf .user-address,
#content .row .middle .bottomHalf .user-email,
#content .row .middle .bottomHalf .user-phone,
#content .row .middle .bottomHalf .user-password {
    float: left;
    padding: 0 30px 0 0;
}

.cellContent {
    float: left;
    /* display: inline-flex; */
    display: inline-block;
    padding: 0 15px 0 15px;
    min-height: 80px;
    vertical-align: bottom;
    text-align: left;
    /* flex-direction: column; */
}

.cellContent .eventAttached {
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    color: var(--arena-orange);
    user-select: none;
}

.cellContent .eventAttached:hover {
    color: var(--arena-orange-hover);
}

.cell.clickable:hover {
    cursor: pointer;
    background: var(--surface);
}


.cellContent .clickable {
    cursor: pointer;
}

#content .row .middle-bottom .artist-commission,
#content .row .middle-bottom .artist-leader,
#content .row .middle-bottom .artist-location,
#content .row .middle-bottom .artist-phone,
#content .row .middle-bottom .artist-email,
#content .row .middle-bottom .artist-status {
    float: left;
    padding: 0 0px 0 0;
    min-height: 25px;
}

#content .row .middle-bottom .artist-commission,
#content .row .middle-bottom .artist-status {
    padding: 0 0px 0 42px;
}



#content .row .half-A {
    ;
}

#content .row .half-B {
    float: left;
    width: 200px;
}

#content .row .half-C {
    float: left;
    width: 200px;
}

#content .row .half-D {
    float: left;
    width: 140px;
}

#content .row .half-E {
    float: left;
    width: 100px;
}


#content .row .admin-logo {
    float: left;
    width: 100%;
    height: 80px;
    background: var(--surface);
}

.temp-venue {
    float: left;
    width: 380px;
    height: 80px;
    margin: 10px 0 10px 0;
    background: var(--surface);
}

.temp-venueB {
    float: left;
    width: 380px;
    height: 280px;
    margin: 10px 0 10px 0;
    background: var(--surface);
}


.messagePreviews {
    height: 4em;
    overflow: hidden;
}

.messagePreviews h5 {
    width: 250px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.messagePreviews h5:hover {
    color: var(--arena-orange);
    cursor: pointer;
}

.messagePreview,
.message {
    width: 100%;
    white-space: initial;
    word-break: break-all;
    color: var(--secondary);
}

.messagePreview {
    /* height: 55px; */
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 400px;
}

.message {
    /* white-space: pre-wrap; */
}

.cellIcon,
.bottomIcon {
    /*    line-height:35px;*/
}

.bodyIcon {}

.cellIcon:before,
.bottomIcon:before,
.icon-logout:after,
.menuIcon:before {
    content: '';
    width: 35px;
    height: 28px;
    margin: 0px 0px 0 0px;
    background: url('../images/icon-sprites.png');
    display: inline-block;
    vertical-align: middle;
}

.cellIcon {
    float: left;
}

.menuIcon {
    float: left;
    margin: 20px 20px;
    font-size: 0.8em;
    text-align: center;
}

.menuIcon.right {
    float: right;
}

.bottomIcon {
    vertical-align: middle;
}

.cellIcon.hover:hover,
.bottomIcon.hover:hover,
.menuIcon:hover,
.hover:hover {
    color: var(--arena-orange);
    cursor: pointer;
}

.cellIcon.hover:hover:before,
.bottomIcon.hover:hover:before,
.icon-logout:hover:after,
.menuIcon.hover:hover:before {
    background-position-y: 37px;
}

.icon-logout:after {
    width: 32px;
    height: 32px;
    margin: 18px 0px 4px 0;
    background-position: -305px -6px;
}

.icon-add {
    display: inline-block;
    /* float: left; */
    /* height: 30px; */
    /* font-size: 3em; */
    /* vertical-align: bottom; */
}

.cellIcon.icon-search:before {
    float: left;
    width: 32px;
    height: 32px;
    margin: 14px 0px 0 8px;
    background: var(--arena-orange);
}

.cellIcon.icon-user:before {
    background-position: -1075px -8px;
}

.cellIcon.icon-contract:before {
    background-position: -563px -52px;
}

.cellIcon.icon-artist:before {
    background-position: -129px -8px;
}

.cellIcon.icon-promoter:before {
    background-position: -221px -8px;
}

/* #528 — Align Email column glyph to the .fieldVal h1 line-box used by
 * adjacent value columns (Commission/Leader/Location/Phone, etc).
 *
 * Canonical reference: .fieldVal h1 renders at font-size 23px / line-height
 * 40px, vertical-centering its text in a 40px-tall box at the top of
 * .cellContent. The email icon was 54x50 with no vertical-centering, so it
 * rendered with its top edge at .fieldVal top but its 50px height descended
 * ~10px below the h1 line-box and skewed the row baseline. Constraining the
 * icon's effective box to 40px (matching h1 line-height) and centering it
 * via flex aligns the icon's visual center to the h1 text center. */
.bodyIcon.icon-email {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
}
.bodyIcon.icon-email:before {
    background: url('../images/email_big.png') no-repeat center;
    background-size: contain;
    content: '';
    width: 43px;
    height: 40px;
    display: block;
}

.bodyIcon.icon-blast:before {
    background: url('../images/email-b-icon-sprite.png') no-repeat 0px 0px;
    content: '';
    width: 54px;
    height: 50px;
    display: block;
}

.cellIcon.icon-write:before {
    float: left;
    width: 32px;
    height: 32px;
    margin: 4px 10px;
    background: var(--arena-orange);
}

.cellIcon.icon-logo:before {
    background-position: -559px -7px;
}

.cellIcon.icon-tax:before {
    background-position: -994px -7px;
}

.cellIcon.icon-edit:before {
    background-position: -350px -7px;
}

.cellIcon.icon-message:before {
    background-position: -993px -51px;
}

.cellIcon.icon-calendar:before {
    background-position: -606px -6px;
}

.cellIcon.icon-status:before {
    background-position: -603px -48px;
}

.cellIcon.icon-time:before {
    background-position: -648px -7px;
}

.cellIcon.icon-settings:before {
    background-position: -391px -7px;
}

.cellIcon.icon-mail:before {
    background-position: -261px -7px;
}

.bottomIcon.icon-more:before,
.bottomIcon.icon-less:before {
    background-position: -1036px -7px;
    font-size: 0.6em;
}

.bottomIcon.icon-less:before {
    -webkit-transform: rotate(180deg);
}


.bottomIcon.icon-change:before,
.bottomIcon.icon-save:before {
    background-position: -434px -6px;
}

.bottomIcon.icon-close:before {
    background-position: -734px -7px;
}
.bottomIcon.icon-cancel:before {
    background-position: -734px -7px;
    /* The X glyph in the sprite is intrinsically bolder/thicker than the
       check-in-circle at -434px -6px (both use the same 35x28 viewport).
       Scale the pseudo-element so the cancel X reads at the same visual
       weight as the save check. */
    transform: scale(0.7);
    transform-origin: center center;
}

/* When the contract status .bottom contains both .icon-save and .icon-cancel
   side by side, lay them out horizontally instead of stacking vertically.
   .bottomIcon is a <div> (block by default) — without this, the cancel
   button drops to a new line below save. Scope to .contractStatus so other
   single-icon .bottom cells (provName, taskStatus, etc.) are unaffected. */
.bottom .bottomIcon.contractStatus {
    display: inline-block;
}
.bottom .bottomIcon.icon-cancel.contractStatus {
    margin-left: 8px;
}

.menuIcon:before {
    display: block;
    margin: 0 auto;
}

.menuIcon.icon-preview:before {
    background-position: -820px -7px;

}

.menuIcon.icon-save:before {
    background-position: -864px -7px;
}

.menuIcon.icon-send:before {
    background-position: -775px -6px;
}

.menuIcon.icon-print:before {
    background-position: -907px -7px;
}

.menuIcon.icon-delete:before {
    background-position: -951px -7px;
}

.menuIcon.icon-mail:before {
    background-position: -261px -7px;
}

.menuIcon.icon-arena-send:before {
    background: url('../images/arena-send-sprite.png') no-repeat 0px 0px;
    background-size: 35px 56px;
}
.menuIcon.hover:hover.icon-arena-send:before,
.menuIcon.icon-arena-send:hover:before {
    background-position: 0px -28px;
}

.reveal-modal-bg {
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 98;
    display: none;
    top: 0;
    left: 0;
}

.reveal-modal {
    visibility: hidden;
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
    height: auto;
    width: 480px;
    border-radius: 4px 4px 4px 4px;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    top: 68px;
}

.reveal-modal.big {
    width: min(970px, calc(100vw - 40px));
}

.reveal-modal.extraBig {
    width: 100%;
    max-width: 1400px;
}

/* #366 Rider picker modal — use position:fixed so the modal always renders
   within the viewport regardless of page scroll position. Foundation reads
   the CSS top value at open time, so this also sets the animation target. */
#riderPicker {
    position: fixed;
    top: 120px;
}

#riderPicker .subheader {
    color: var(--text-muted);
    font-size: 0.9em;
    margin: 0 15px 4px 15px;
}

#riderPickerList {
    list-style: none;
    margin: 0 0 4px 0;
    padding: 0 15px;
    max-height: 280px;
    overflow-y: auto;
}

#riderPickerList li {
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.9em;
    list-style: none;
}

#riderPickerList li:last-child {
    border-bottom: none;
}

/* Show native checkboxes in the rider picker list (global rule hides all checkboxes
   for the custom sprite pattern, but our list uses input-inside-label, not siblings). */
#riderPickerList input[type="checkbox"] {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 0 6px 0 0;
    vertical-align: middle;
    cursor: pointer;
}

#riderPickerList li label {
    display: block;
    cursor: pointer;
    line-height: 1.4;
}

#riderPickerEmpty {
    color: var(--text-muted);
    font-size: 0.9em;
    padding: 8px 15px;
}

/* Button row: override form .row flex so Attach and Cancel sit side by side.
   The global input[type="button"] rule sets float:right — clear that for picker buttons. */
#riderPickerForm .riderPickerActions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 12px 15px 15px 15px;
    margin: 0;
}

#riderPickerForm .riderPickerActions input[type="button"] {
    float: none;
    height: auto;
    padding: 8px 16px;
    border-radius: 3px;
    left: auto;
    flex-basis: auto;
    position: static;
}

/* Cancel button: override .close-reveal-modal sprite styles so it renders as a normal button. */
#riderPickerForm .riderPickerCancel {
    position: static;
    width: auto;
    height: auto;
    background: var(--secondary) none;
    background-image: none;
    right: auto;
    top: auto;
    float: none;
    font-size: 0.875em;
    color: var(--surface);
    text-indent: 0;
    padding: 8px 16px;
    border-radius: 3px;
    cursor: pointer;
}

.popup {
    padding: 0 0 20px 0;
    border: solid 1px var(--border);
    background: var(--neutral-dark);
}

/* #555 Defensive: pin the Add Contract panel's opaque background on the id
   itself (specificity 1,0,0 beats .popup's 0,1,0) so it holds independent of
   the .popup-class cascade — guarantees the contracts list behind never bleeds
   through the rider/catalog-toggle row. */
#add-contract { background: var(--neutral-dark); }

#add-user {
    float: left;
}

.popup .full,
.popup .top {
    min-width: 0;
    max-width: 180%;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-dark);
    color: var(--arena-orange);
    font-size: 1.5em;
    line-height: 30px;
    text-align: left;
    font-weight: 300;
    text-shadow: 1px -1px 1px rgba(255, 255, 255, 1);
    vertical-align: text-bottom;
}

.close-reveal-modal, .close-dropdown {
    position: absolute;
    width: 43px;
    height: 43px;
    text-align: center;
    cursor: pointer;
    font-size: 1.5em;
    background: url('../images/icon-sprites.png');
    background-position: -731px 0px;
    right: 10px;
    top: 0px;
}


.popup h3 {}

#.popup form {
    border-top: 1px solid var(--surface);
    display: inline-block;
}

.popup.big form {
    min-width: 480px;
}

/* #536 The form element itself has class `dropdownList scroll` (see the
   `<form class="dropdownList scroll">` markup in addArtist.php /
   addArtistContract.php), so the `.dropdownList { margin: 0 0 0 20px }` rule
   at line ~1962 applies to the form's own box. With `width: 100%` the
   form's content-box matched the modal's content width, and the 20px left
   margin then pushed the form's right edge 20px past the modal's right.
   The vertical scrollbar living at the form's inner right edge therefore
   rendered outside the white card. Subtracting the form's own left margin
   from its width pulls the right edge back inside the modal. flex-basis
   matches `width` to keep the two constraints in lock-step. */
.popup.extraBig form {
    width: calc(100% - 20px);
    flex-basis: calc(100% - 20px);
    flex-flow: row nowrap;
    justify-content: center;
}

/* #326 .field wraps each <label> + <input> pair inside .popup form .row.
   Default (≥720px): .field wrappers are `inline-block` so multiple fields
   sit side-by-side in a row. Inside each .field the label has `display:
   block` (via the ID-allowlist rule directly below) so it renders above
   its input. Phone tier override (further below) stacks .field vertically
   at full width so label-input pairs interleave correctly in DOM order.

   Label override uses the same ID-allowlist as the existing
   #addContract label rule (specificity 0,1,0,1) so it actually wins.

   #538: the Modify Artist Contract edit dropdown (.dropdownList.scroll
   #artistContractForm) lives outside .popup but uses the same .row > .field
   structure. Without inline-block, its .field children stack vertically and
   each input rides the legacy 198px width, leaving fields squashed into a
   ~230px left column. Selector below covers both contexts. */
.popup form .row .field,
.dropdownList.scroll .row .field {
    display: inline-block;
    vertical-align: top;
    margin: 0 15px;
}

#addArtist .field label,
#addContract .field label,
#addVenue .field label,
#addPromoter .field label,
.dropdownList.scroll .field label,
#artistContractForm .field label,
#vendorContractForm .field label {
    display: block;
    width: auto;
    flex: 0 1 auto;
    margin: 8px 0 4px 0;
    min-width: initial;
    max-width: initial;
}

/* NOTE: At desktop, inputs inside .field keep their existing inline-flex/
   inline-block behavior (defined by the global `input` rule + per-form
   width rules). This preserves side-by-side layout for multi-input .field
   wrappers like Contact Person (First Name + Last Name) and Address
   (Street + Apt). The full-width override fires only at phone tier — see
   the @media (max-width: 719px) block below. */

.popup form .row .field.half,
.dropdownList.scroll .row .field.half {
    width: 130px;
}

.popup form .row .field.large,
.dropdownList.scroll .row .field.large {
    width: 410px;
}

.popup form section {
    display: inline-block;
    width: min(480px, 100%);
    vertical-align: top;
    max-height: 740px;
    overflow-y: auto;
    box-sizing: border-box;
}

.popup.extraBig form section {
    width: 32%;
    min-width: min(480px, 100%);
    display: inline-flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* #543 Override the `.popup form section` rule's `overflow-y: auto` +
   `max-height: 740px` for multi-section popups. The cascade was correct for
   single-section popups like Add Promoter (the #535/!376 target), but on
   forms with two or more <section> columns (Add Venue uses .popup.big,
   Add People uses .popup) it produced a per-column scrollbar instead of one
   outer modal scrollbar. :not(:only-of-type) scopes the reset to the
   multi-section case without depending on a specific popup-size class,
   so future popups inherit the right behaviour by section count. */
.popup form section:not(:only-of-type) {
    overflow-y: visible;
    max-height: none;
}

/* #543 Outer-container scroll for multi-section popups. The :not(:only-of-type)
   rule above removes per-section scroll; this rule lets the form own one
   bounded scroll instead so the modal card stays inside the viewport and the
   user sees a single scrollbar at the form's edge (the UX target named in
   the issue's "Suggested fix" — "the outer container should handle scroll for
   multi-section modals"). :has() is widely supported in modern browsers; the
   Arena userbase runs current Chromium/Firefox/Safari. */
.popup form:has(section + section) {
    /* The modal is `position: absolute; top: 68px` with ~73px of header chrome
       above the <form>, so the form needs ~141px of headroom inside the viewport
       to avoid pushing the modal card past the viewport bottom (which would
       trigger a document-body scroll on top of the form's own scroll). 180px
       gives ~40px of safety for variance in modal chrome at different viewports. */
    max-height: calc(100vh - 180px);
    overflow-y: auto;
}

form .row {
    /* min-width: 430px; */
    padding: 20px 20px 0px 20px;
    display: flex;
    position: relative;
    /* flex: 0 1 430px; */
}

form .row:last-child input[type=button],
form .row:last-child input[type=submit] {
    left: calc(100% - 130px);
}

/* #597 — Right-align modal submit buttons via flexbox and neutralize the
   global `left: calc(100% - 130px)` push above for popup submit rows.
   `form .row` is `display: flex`, which makes the global `input[type=submit]
   { float: right }` rule inert on the button (floats don't apply to flex
   items), so the button's horizontal position is governed entirely by the
   `left:` offset. That offset was tuned for a ~120px button (Add Venue / Add
   Promoter, where `input.half` caps the width) — on Add Contract / Add Artist
   the submit inherits `flex: 0 1 260px` from the base `input` rule and renders
   ~260px wide, so `left: calc(100% - 130px)` pushed it ~124px past the modal's
   right edge (the overflow Adam reported on !414). Add Contract / Add Artist
   previously masked this with an inline `style="left:0"`, which #597 removed to
   make all four modals float right consistently — re-exposing the broken push.
   Fix: push the submit row's children to the flex end and zero the `left`
   offset, so the button sits cleanly at the row's right content edge (inside
   the 20px `.row` padding) regardless of its width, on all four modals and at
   every viewport (the `.row` stays `display: flex` at phone tier). */
.popup form .row:last-child {
    justify-content: flex-end;
}

.popup form .row:last-child input[type=button],
.popup form .row:last-child input[type=submit] {
    left: 0;
}

.popup form label {
    /* float: left; */
    max-width: 170px;
    min-width: 39.5%;
    min-height: 40px;
    font-size: 13px;
    line-height: 20px;
    display: inline-flex;
    flex: 0 0 170px;
}

.popup form label.popupCheck {
    display: block;
    font-size: initial;
    min-width: 95%;
    padding: 0 2.5%;
    border-radius: 5px;
}

.popup form label.popupCheck:hover {
    background: var(--surface);
}



#taskAttach.dropdown {
    min-width: 561px;
    position: absolute;
    left: 332px;
    top: 131px;
    z-index: 10;
}

#eventAttach.dropdown {
    width: 100%;
    /* position: absolute; */
    left: 0;
    top: 131px;
    z-index: 10;
}

#emailBlastPanel.dropdown {
    left: 332px;
    width: 900px;
}

.dropdownList input:not([type="checkbox"]),
 .dropdownList select {
    height: 28px;
    margin: 5px 15px 15px 15px;
}

.dropdownList input:not([type="checkbox"]):not([type="file"]),
 .dropdownList select {
    width: 198px;
    max-width: 100%;
 }

/* #534 — Promote border/radius/box-sizing off `.dropdownList` so popup-form inputs
   in addVenue / addPromoter (which don't carry the `.dropdownList` class on their
   <form> and have no JS to flip its `display: none` base state) get the same crisp
   1px border treatment as addContract / addArtist. Width/margin remain scoped to
   `.dropdownList` so Contract/Artist sizing is unchanged. */
.popup form input:not([type="checkbox"]):not([type="file"]):not([type="submit"]):not([type="button"]),
.popup form select,
.popup form textarea {
    border: 1px solid;
    border-radius: 3px;
    box-sizing: border-box;
}

/* #613 — Restore borders to edit forms rendered in `.dropdownList.scroll` (the
   "Modify Artist Contract" dropdown and defunct event-attach edit forms). These
   lost their borders when #534 moved the rule to `.popup form input` only.
   Note: the <form> IS the .dropdownList element (not a descendant), so
   `.dropdownList form input` never matches. The `.scroll` modifier is the correct
   discriminator: empty autocomplete placeholder forms (#taskArtistList) never
   carry `.scroll`; only real data-entry forms do. Exact property values match
   the `.popup form input` rule above so both surfaces look identical. */
.dropdownList.scroll input:not([type="checkbox"]):not([type="file"]):not([type="submit"]):not([type="button"]),
.dropdownList.scroll select,
.dropdownList.scroll textarea {
    border: 1px solid;
    border-radius: 3px;
    box-sizing: border-box;
}

/* #597 — Country selects inside popup modals carry class .half (to size
   them narrower than full-width). The global `select { min-width: 50% !important }`
   rule (line ~158) overrides the .half width constraint, making these selects
   render wider than intended. Previously worked around with an inline
   `style="min-width:unset!important;"` on the Add Artist country select.
   This scoped rule replaces that inline hack and covers all four modals
   consistently, including Add Venue and Add Promoter which were silently
   affected by the global rule but not visibly hacked. */
#addArtist select.half,
#addContract select.half,
#addVenue select.half,
#addPromoter select.half {
    min-width: 0 !important;
}


.dropdownList input.half {
    width: 98px;
    max-width: 100%;
    box-sizing: border-box;
}

.dropdownList textarea {
    border: 1px solid;
    border-radius: 3px;
    height: 98px;
    width: 418px;
    max-width: 100%;
    box-sizing: border-box;
    margin: 5px 15px 15px 15px;
    vertical-align: top;
}


.dropdownList input.blastTitle {
    border: solid;
    border-width: 0 0 1px 0;
    border-radius: 0;
    width: 100%;
    margin: 0;
    height: 39px;
    display: inline-block;
    line-height: 39px;
}

.dropdownList .blastContent {
    overflow: auto;
    border-width: 0 0 1px 0;
    border-radius: 0;
    padding: 10px;
    width: calc(100% - 22px);
    margin: 0;
    max-height: 440px;
    height: 380px;
}

.blastTitle:focus,
.blastContent:focus {
    outline-width: 0;
}

#blastMessageMenu {
    line-height: 30px;
    height: 20px;
    font-size: 0.8em;
    text-align: end;
}

span.blastHeader {
    margin: 0 110px 0 20px;
}

.dropdownList .listItem:nth-child(odd) {
    background: var(--neutral);
}

.dropdownList .listItem {
    height: 40px;
    line-height: 40px;
    padding: 0px 20px;
}

.dropdownList #blastList .listItem {
    line-height: 20px;
}


/* #534 — extend the per-modal label sizing rule to Add Venue + Add Promoter
   so their labels render at the same font-size / width / spacing as Add Contract
   + Add Artist (the dominant pattern across 5 modal IDs prior to this addition).
   Without these selector additions, Venue/Promoter labels fall through to
   `.popup form label` at line 1713 (font-size 13px, max-width 170px). */
#addArtist label,
#addContract label,
#addVenue label,
#addPromoter label,
.dropdownList.scroll label,
#artistContractForm label,
#vendorContractForm label {
    width: 200px;
    display: inline-flex;
    margin: 10px 15px 0 15px;
    flex: 0 1 260px;
    display: inline-block;
    min-width: initial;
    max-width: initial;
    font-size: initial;
    min-height: initial;
}

#addArtist label.half,
#addContract label.half,
#addVenue label.half,
#addPromoter label.half,
.dropdownList.scroll label.half,
#artistContractForm label.half {
    width: 102px;

}

#addArtist label.large,
#addContract label.large,
#addVenue label.large,
#addPromoter label.large,
.dropdownList.scroll label.large,
#artistContractForm label.large {
    width: 410px;
}

/* #534 Inline-checkbox modifier — for single-checkbox-with-label cases (Alcohol
   Licensed and Deposit Received in Add Contract, calendarNotifications in
   Add Artist) where the layout intent is "checkbox sits immediately to the
   right of its label". Overrides the ID-anchored `#addContract .field label
   { width: 200px }` rule above.

   margin-top: 10px matches the base `#addContract .field label` rule's top
   margin so the inline-checkbox label sits at the same vertical baseline as
   its sibling `.field`'s label (which is the alignment goal — when an
   inline-checkbox cell sits adjacent to a label-above-input cell on the same
   .row, their labels share a baseline).

   display: inline-block (not inline) is required for margin-top to take
   effect — inline elements ignore vertical margin. vertical-align: top
   keeps the label anchored to the cell's top edge rather than its baseline
   so the row reads predictably across mixed-content cells. */
#addContract .field.inline-checkbox label,
#addArtist .field.inline-checkbox label,
#addVenue .field.inline-checkbox label,
#artistContract .field.inline-checkbox label {
    width: auto;
    flex: 0 0 auto;
    display: inline-block;
    margin: 10px 0 0 6px;
    vertical-align: top;
}

/* #534 The real "checkbox" graphic is a pseudo-element on the label (see line
   ~2147 `input[type="checkbox"]+label:after`), and the base rule floats it
   right with 20px left margin — which is what pushes the visible checkbox
   far from the label text. Override for inline-checkbox: no float, sit inline
   right after the text with a small 6px gap. */
#addContract .field.inline-checkbox label:after,
#addArtist .field.inline-checkbox label:after,
#addVenue .field.inline-checkbox label:after,
#artistContract .field.inline-checkbox label:after {
    float: none;
    margin-top: 0;
    margin-left: 6px;
    vertical-align: middle;
}

    {
    margin-left: 10px;
    cursor: pointer;
}

.copyFileRiderUrl {
    margin-right: 10px;
}

.removeDate,
.removeTime,
.removeRider,
.removeContractRider,
.copyFileRiderUrl {
    margin: 5px;
    cursor: pointer;
}

.removeDate:hover,
.removeTime:hover,
.removeRider:hover,
.removeContractRider:hover,
.copyFileRiderUrl:hover {
    color: var(--arena-orange)
}

.datesField {
    margin: 5px 15px;
}

#date,
#dateNew {
    height: 0;
    border: 0;
    margin: 0;
}

#dateLabel,
#dateLabelNew {
    cursor: pointer;
}

#dateLabel:after,
#dateLabelNew:after {
    content: '';
    background: url("/assets/css/../images/icon-sprites.png") no-repeat -649px -10px;
    display: inline-block;
    width: 29px;
    height: 22px;
    margin-top: -4px;

    vertical-align: middle;
}

#dateLabel span,
#dateLabelNew span {
    position: absolute;
    left: 120px;
    color: var(--arena-orange);
}

#attachedList .listItem {
    height: 60px;
    line-height: 60px;
    padding: 0px 20px;
    border-bottom: solid 1px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
}

#attachedList .listItem:hover,
#attachedList .listItem.active {
    background: var(--secondary);
    color: var(--neutral) !important;
}

.dropdownTitleSmall {
    height: 39px;
    border-bottom: solid 1px;
    line-height: 40px;
    margin: 0px 20px 0px 20px;
    overflow: hidden;
}

.dropdownTitleBig {
    height: 89px;
    border-bottom: solid 1px;
    line-height: 40px;
    margin: 0px 20px 0px 20px;
    overflow: hidden;

    font-size: 2em;
    line-height: 90px;
}

.dropdownFilters {
    height: 40px;
    border-bottom: solid 1px;
    line-height: 40px;
    margin: 0px 20px 0px 20px;
}

.subFilters {
    margin: 0;
}

.filterItem {
    cursor: pointer;
    margin: 0px 20px;
    border-bottom: 0;
}

.filterItem:hover {
    color: var(--arena-orange);
}

#attachedList,
#blastList {
    float: left;
    height: calc(100% + 89px);
    border-right: solid 1px;
    margin-right: 20px;
}

#attachedList {
    width: 20%;
    min-height: 580px;
}

#blastList {
    width: 30%;
    min-height: 430px;
}

div.blastDate {
    font-size: 0.6em;
}

.dropdownList {
    display: none;
    position: relative;
    height: calc(100vh - 265px);
    overflow: hidden;
    vertical-align: top;
    margin: 0px 0px 0px 20px;
    /* overflow-y: auto; */
}

.dropdown {
    background: var(--surface);
    border: solid;
    border-width: 0px 1px 1px 1px;
    width: 100%;
    display: none;
    overflow: hidden;
    position: fixed;
    z-index: 1;
}

#addArtist .row:not(:last-child),
#addContract .row:not(:last-child),
.dropdownList.scroll .row:not(:last-child),
#artistContractForm .row,
#vendorContractForm .row {
    border: 0 !important;
    min-height: initial;
    height: auto;
    padding: 0;
    display: block;
    position: initial;
}

.contractMenu {
    margin-top: 20px;
    border-top: solid 1px;
    height: 80px;
    width: 100%;
    float: left;
}


.dropdownList.scroll {
    overflow-y: auto;
}

.contract-audit {
    padding: 5px 15px;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 5px;
}
.contract-audit span + span {
    margin-left: 15px;
}

/* Wave 4 (#102): banner shown atop the edit dropdown when status=ISSUED. */
.contract-issued-banner {
    background: #fef3c7;
    border-left: 4px solid var(--warning);
    padding: 12px 16px;
    margin: 5px 15px 10px 15px;
    border-radius: 3px;
    box-sizing: border-box;
    width: calc(100% - 30px);
    min-height: unset;
    height: auto;
}
.contract-issued-banner p {
    margin: 0;
    color: #78350f;
    font-size: 13px;
    line-height: 1.4;
}
.contract-issued-banner strong {
    color: #78350f;
}

/* Visual readonly state for ISSUED contracts in the edit dropdown.
   Disabled inputs already get browser default styling; this layer adds the
   muted-action affordance for non-form-control elements (links, dropzone,
   add-buttons) since `disabled` only applies to form controls. */
#artistContractForm.contract-issued-readonly .contractField:disabled,
#artistContractForm.contract-issued-readonly .contractField[disabled] {
    background: var(--neutral);
    color: var(--secondary);
    cursor: not-allowed;
}
#artistContractForm.contract-issued-readonly .contractMenu .icon-delete,
#artistContractForm.contract-issued-readonly .contractMenu .emailLink,
#artistContractForm.contract-issued-readonly .add-from-artist-riders-btn,
#artistContractForm.contract-issued-readonly .removeTime,
#artistContractForm.contract-issued-readonly .removeDate,
#artistContractForm.contract-issued-readonly .rider-remove,
#artistContractForm.contract-issued-readonly #riderDropzone,
#artistContractForm.contract-issued-readonly #add-price-tier,
#artistContractForm.contract-issued-readonly #add-venue-btn {
    pointer-events: none;
    opacity: 0.4;
}

.saveBtn,
.sendBtn {
    color: var(--arena-orange);
    cursor: pointer;
    margin: 0px 5px;
}

input[type="checkbox"] {
    display: none;
}

input[type="checkbox"]+label {
    cursor: pointer;
}

input[type="checkbox"]+label:after {
    content: '';
    width: 20px;
    height: 20px;
    background: url(../images/check-radio-sprites.png);
    display: inline-block;
    vertical-align: middle;
    float: right;
    margin-top: 9px;
    margin-left: 20px;
}

#artistContractForm input[type="checkbox"]+label:after {
    margin-top: 0px;
}

input[type="checkbox"]:checked+label:after {
    background-position: -22px 0px;
}


.floater textarea {
    width: 265px;
    font-size: 12px;
    padding: 5px 0px;
}

.floater.full textarea {
    background: var(--neutral);
    min-height: 170px;
}

.logo-upload {
    background: var(--surface);
    width: 300px;
    height: 60px;
    border-radius: 5px;
    line-height: 60px;
    text-align: center;
    font-size: 0.9em;
    cursor: pointer;
}


.logoPreview {
    height: 70px;
}

.logoWrapper {
    text-align: center;
}

/*
#add-user p   		{ float: left; line-height: 25px; }
#add-user a  		{ float: left; width: 280px; font-size: 17px; line-height: 31px;text-align: center; color: #333; font-style: italic; font-weight: 600; text-shadow: 1px -1px 1px rgba(255,255,255,1); }
*/

footer {
    position: absolute;
    width: 100%;
    height: 40px;
    bottom: 3px;
    left: 0px;
}

footer .paging {
    position: relative;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid var(--border-dark);
    background: var(--neutral-dark);
}

footer .paging ul {
    position: relative;
    width: 160px;
    margin: 0 auto;
}

footer .paging ul li {
    float: left;
    width: 20px;
}

footer .paging ul li a {
    float: left;
    width: 20px;
    font-size: 15px;
    /* line-height: 60px; */
    color: var(--tertiary);
    text-align: center;
    margin: 27px 0px;
}


footer .footer {
    position: relative;
    width: 100%;
    height: 40px;
    background: var(--neutral);
    border-top: 1px solid var(--surface);
}

footer .footer .arena {
    position: absolute;
    width: 322px;
    height: 40px;
    bottom: 0;
    left: 20px;
    background: url(../images/logo-arena.png) no-repeat center;
}

footer .footer .throw {
    position: absolute;
    width: 400px;
    height: 40px;
    bottom: 0;
    right: 20px;
}

footer .footer .throw a {
    float: left;
    width: 400px;
    font-size: 13px;
    color: var(--secondary-dark);
    line-height: 40px;
    text-align: right;
}




/* background: #ff0;
*/





/* The input. */
input.mp_input {}

/* Ordered list for display results. */
ol.mp_list {
    background-color: var(--surface);
    border-left: 1px solid;
    border-right: 1px solid;
    overflow: hidden;
    position: absolute;
    width: 200px;
    margin: -15px 15px 0 14px;
    z-index: 99999;
}

/* Each list item, regardless of success, error, etc. */
ol.mp_list li {
    border-bottom: 1px solid;
    padding: 4px 4px 5px;
}

/* Each list item from a successful request. */
ol.mp_list li.mp_item {}

/* Each list item that's selectable. */
ol.mp_list li.mp_selectable {
    cursor: pointer;
}

/* Currently highlighted list item. */
ol.mp_list li.mp_highlighted {
    background-color: var(--neutral-dark);
}

/* When a request is made that returns zero results. */
ol.mp_list li.mp_no_results {}

/* When a request is made that doesn't meet the 'minChars' length option. */
ol.mp_list li.mp_min_chars {}

/* When a request is made that fails during the ajax request. */
ol.mp_list li.mp_error {}

/* Google Calendar section in artist popup */
#create-calendar-btn,
#retry-rename-btn {
    background: var(--arena-orange);
    color: var(--neutral);
    height: 40px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    display: inline-block;
    margin: 5px 15px 15px 15px;
    padding: 0 12px;
    font-size: 13px;
}

#calendar-warning {
    color: var(--arena-orange);
    font-size: 13px;
    line-height: 20px;
    margin: 0 15px 0 15px;
    display: block;
}

.calendar-warning-banner {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 3px;
    padding: 10px 15px;
    margin: 5px 15px 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.calendar-warning-banner .calendar-warning-text {
    color: #856404;
    font-size: 13px;
    line-height: 18px;
    flex: 1;
}

.calendar-warning-banner .calendar-warning-dismiss {
    color: #856404;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    margin-left: 10px;
    line-height: 1;
}

.calendar-warning-banner .calendar-warning-dismiss:hover {
    color: #5a3f03;
}

.pdf-missing-badge {
    display: inline-block;
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffc107;
    border-radius: 3px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    margin-top: 4px;
}

#calendar-success {
    color: var(--secondary);
    font-size: 13px;
    line-height: 20px;
    margin: 0 15px 0 15px;
    display: block;
}

/* ── Admin Config Page (shared: driveConfig, ticketCounts) ────────────────────────────────── */

#content .adminConfigPage {
    padding: 20px 25px;
    min-height: auto;
    height: auto;
    border-bottom: none;
    float: none;
}

.adminConfigPage h2 {
    color: var(--secondary);
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 6px 0;
}

.adminConfigPage h4 {
    color: var(--secondary);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 10px 0;
}

.adminConfigPage .config-header {
    margin-bottom: 25px;
}

.adminConfigPage .config-header p {
    color: var(--secondary);
    font-size: 13px;
    margin: 0;
}

.adminConfigPage .config-status {
    background: var(--surface);
    border-radius: 5px;
    padding: 15px 20px;
    margin-bottom: 25px;
}

.adminConfigPage .status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.adminConfigPage .status-active {
    background: #d4edda;
    color: #155724;
}

.adminConfigPage .status-inactive {
    background: #fff3cd;
    color: #856404;
}

.adminConfigPage .status-detail {
    display: block;
    font-size: 12px;
    color: var(--secondary);
}

.adminConfigPage .status-detail strong {
    color: var(--secondary-dark);
    font-family: monospace;
    font-size: 11px;
}

.adminConfigPage .config-form-section {
    margin-bottom: 20px;
}

.adminConfigPage .config-form-section label {
    color: var(--secondary);
    font-size: 13px;
    margin-bottom: 4px;
    display: block;
}

/* #326/!369 .field convention: each label+control pair gets a uniform
   on-scale (16px) gap so the admin form has consistent vertical rhythm,
   matching the public ticket-count card and the modal forms. */
.adminConfigPage .config-form-section .field {
    margin-bottom: 16px;
}

.adminConfigPage .config-form-section .field:last-child {
    margin-bottom: 0;
}

.adminConfigPage .config-form-section input[type="text"],
.adminConfigPage .config-form-section input[type="email"],
.adminConfigPage .config-form-section input[type="number"],
.adminConfigPage .config-form-section select,
.adminConfigPage .config-form-section textarea {
    width: 100%;
    max-width: 500px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    /* 13px (body) per the type scale — overrides the global input{font-size:15px}
       which is off-scale and larger than the 13px labels. */
    font-size: 13px;
    /* The global input{}/select{} rules set no font-family, so these controls
       fall through to the UA default (Arial). inherit pulls Open Sans from body. */
    font-family: inherit;
    /* slate per DESIGN.md (input/select textColor). Text inputs get this
       from the global input{} rule, but global select{} sets no color, so the
       preview-template <select> was falling through to UA black. */
    color: var(--secondary);
    box-sizing: border-box;
}

/* Selects use the 5px (rounded.lg) token per DESIGN.md; the global select
   rule already uses 5px — restore it here over the 4px input default. */
.adminConfigPage .config-form-section select {
    border-radius: 5px;
}

.adminConfigPage .config-form-section input:focus,
.adminConfigPage .config-form-section select:focus,
.adminConfigPage .config-form-section textarea:focus {
    outline: none;
    border-color: var(--focus-ring);
    box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.2);
}

.adminConfigPage .config-form-section textarea {
    resize: vertical;
    min-height: 120px;
    max-height: none;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
    padding: 8px;
}

.adminConfigPage .config-help {
    color: var(--text-muted);
    font-size: 12px;
    margin: 4px 0 16px 0;
}

/* #109 ticket-count template editor: section sub-headings + placeholder
   legend + live preview pane. Reuses the .config-form-section rhythm above. */
.adminConfigPage .config-form-section h5 {
    color: var(--secondary);
    font-size: 12px;
    font-weight: 400;
    margin: 20px 0 8px 0;
}

.adminConfigPage .config-placeholder-legend {
    list-style: none;
    margin: 0 0 16px 0;
    padding: 12px;
    max-width: 500px;
    background: var(--neutral);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}

.adminConfigPage .config-placeholder-legend li {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0 0 4px 0;
    line-height: 1.5;
}

.adminConfigPage .config-placeholder-legend li:last-child {
    margin-bottom: 0;
}

/* Monospace is a deliberate code-sample exception so literal {{placeholder}}
   tokens read as code rather than prose (DESIGN.md Open-Sans-only otherwise). */
.adminConfigPage .config-placeholder-legend code {
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    color: var(--text);
    background: var(--neutral-dark);
    padding: 1px 4px;
    border-radius: 3px;
}

.adminConfigPage .ticket-count-preview {
    max-width: 500px;
    margin: 8px 0 16px 0;
    padding: 12px;
    background: var(--neutral);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}

.adminConfigPage .ticket-count-preview .tcp-subject {
    font-size: 12px;
    color: var(--text);
    margin-bottom: 8px;
    word-wrap: break-word;
}

.adminConfigPage .ticket-count-preview .tcp-body {
    font-family: inherit;
    font-size: 12px;
    color: var(--text);
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.adminConfigPage .config-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.adminConfigPage .config-actions .button {
    margin: 0;
    float: none;
    /* global .button / input[type=submit] set no font-family → Arial; inherit = Open Sans */
    font-family: inherit;
}

/* Status messages (Save / Test-send) use the defined status tokens, set via
   JS toggling these classes rather than inline color literals. */
.adminConfigPage .config-status-message.is-success {
    color: var(--success);
}

.adminConfigPage .config-status-message.is-error {
    color: var(--error);
}

/* Separate the "Preview & test send" section from the Save action above it.
   #ticketCountTestSection follows the </form> directly, so without this the
   section header sits flush (0px) against the Save button. 24px = top of the
   spacing scale, marking a distinct section break. */
.adminConfigPage #ticketCountTestSection {
    margin-top: 24px;
}

/* Test-send row: keep the "Send test email" button adjacent to its email
   input with an on-scale gap instead of letting the global
   input[type="button"]{float:right} push it to the page edge. */
.adminConfigPage .config-inline-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.adminConfigPage .config-inline-row input[type="email"] {
    flex: 1;
    max-width: 360px;
}

/* "Send test email" is the primary action of the Preview & Test Send section
   (it fires a real email), so it takes the Arena-Orange primary treatment
   matching the Save button: orange bg, white text, 40px, 4px radius,
   Open Sans, no border (all inherited from the global input[type="button"] +
   .button class). Here we only neutralize the global float:right so it stays
   inline beside the email input, and align the in-row sizing. */
.adminConfigPage .config-inline-row .button {
    margin: 0;
    float: none;
    flex: none;
    height: 40px;
    font-family: inherit; /* else global input[type="button"] falls to UA Arial */
    padding: 0 16px;
}

.adminConfigPage #driveConfigStatus {
    font-size: 13px;
    font-weight: 500;
}

.adminConfigPage .verify-result {
    padding: 12px 15px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.5;
    max-width: 700px;
}

.adminConfigPage .verify-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.adminConfigPage .verify-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.adminConfigPage .drive-action-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.adminConfigPage .drive-action-row input[type="text"] {
    flex: 1;
    max-width: 400px;
    margin: 0;
}

.adminConfigPage .drive-action-row .button {
    margin: 0;
    white-space: nowrap;
}

.adminConfigPage .config-divider {
    text-align: center;
    margin: 18px 0;
    position: relative;
    max-width: 500px;
}

.adminConfigPage .dwd-preflight-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.adminConfigPage .dwd-instructions {
    margin-top: 14px;
    padding: 16px 18px;
    background: #fff8e1;
    border: 1px solid #f0d090;
    border-left: 4px solid #e0a020;
    border-radius: 4px;
    max-width: 700px;
    font-size: 13px;
    line-height: 1.55;
}

.adminConfigPage .dwd-instructions h5 {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #6d4c00;
}

.adminConfigPage .dwd-instructions ol {
    margin: 8px 0 8px 22px;
    padding: 0;
    list-style: decimal outside;
}

.adminConfigPage .dwd-instructions li {
    margin-bottom: 6px;
}

.adminConfigPage .dwd-instructions code {
    display: inline-block;
    padding: 2px 6px;
    background: var(--surface);
    border: 1px solid #d6c89a;
    border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px;
    word-break: break-all;
    max-width: 100%;
}

.adminConfigPage .copy-btn,
.adminConfigPage .button.tiny {
    padding: 2px 10px;
    font-size: 11px;
    line-height: 1.4;
    margin: 0 0 0 4px;
    vertical-align: middle;
}

.adminConfigPage .config-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border);
}

.adminConfigPage .config-divider span {
    background: var(--surface);
    padding: 0 12px;
    position: relative;
    color: var(--secondary);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.adminConfigPage .drive-info {
    background: var(--neutral);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 12px 16px;
    margin-bottom: 10px;
    max-width: 500px;
}

.adminConfigPage .drive-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}

.adminConfigPage .drive-name-error {
    color: #b94a48;
}

.adminConfigPage .drive-id {
    display: block;
    font-size: 11px;
    font-family: monospace;
    color: var(--secondary);
}

.adminConfigPage .drive-name-detail {
    font-size: 12px;
    color: var(--secondary-dark);
}

.adminConfigPage .config-warning {
    color: #b94a48;
    font-size: 11px;
    margin: 6px 0 0 0;
}

.adminConfigPage .button.alert {
    background: var(--error);
    color: var(--surface);
    border: none;
}

.adminConfigPage .button.alert:hover {
    background: #a93226;
}

/* Send-via-Arena bulk toggle table (#552) */
/* Global `input[type="button"]` rule (line 133) sets float:right —
   clear that here so bulk-action buttons sit left above the table. */
.adminConfigPage .send-via-arena-controls {
    margin-bottom: 12px;
    overflow: hidden; /* clearfix for floated child buttons */
}

.adminConfigPage .send-via-arena-controls .button {
    float: left;
    margin-right: 8px;
}

/* Section separator — Email Defaults → Send via Arena (#552 v5) */
.adminConfigPage .email-settings-user-section {
    margin-top: 32px;
    border-top: 1px solid var(--border);
    padding-top: 24px;
}

.adminConfigPage .send-via-arena-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
    /* #601 — separate the save row below from the table, matching the 20px
       gap .config-form-section gives Section 1's save button */
    margin-bottom: 20px;
}

.adminConfigPage .send-via-arena-table th,
.adminConfigPage .send-via-arena-table td {
    text-align: left;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.adminConfigPage .send-via-arena-table th {
    background: var(--neutral);
    font-weight: 600;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--secondary-dark);
}

.adminConfigPage .send-via-arena-table tbody tr:hover {
    background: var(--neutral);
}

.adminConfigPage .send-via-arena-table .sva-toggle-col {
    width: 140px;
    text-align: center;
}

/* Sort + filter — Send-via-Arena table (#601) */

/* Sortable column headers */
.adminConfigPage .send-via-arena-table th.sva-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.adminConfigPage .send-via-arena-table th.sva-sortable:hover {
    background: var(--neutral-dark);
}

.adminConfigPage .send-via-arena-table th.sva-sortable:focus {
    outline: 2px solid var(--info);
    outline-offset: -2px;
}

/* Sort direction triangles — rendered purely in CSS */
.sva-sort-indicator {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 5px;
    vertical-align: middle;
    opacity: 0.3;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 5px solid var(--secondary-dark);
}

.sva-sort-indicator.sva-sort-asc {
    opacity: 1;
    border-bottom: 5px solid var(--secondary-dark);
    border-top: none;
}

.sva-sort-indicator.sva-sort-desc {
    opacity: 1;
    border-top: 5px solid var(--secondary-dark);
    border-bottom: none;
}

/* Filter row — sits between bulk buttons header and the table */
.sva-filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.sva-filter-input {
    flex: 1 1 180px;
    min-width: 120px;
    max-width: 280px;
    height: 30px;
    padding: 0 8px;
    font-size: 0.875em;
    border: 1px solid var(--border);
    border-radius: 3px;
    box-sizing: border-box;
}

.sva-filter-input:focus {
    outline: none;
    border-color: var(--info);
    box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.2);
}

.sva-filter-select {
    height: 30px;
    padding: 0 6px;
    font-size: 0.875em;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--surface);
    cursor: pointer;
}

.sva-filter-select:focus {
    outline: none;
    border-color: var(--info);
}

.sva-filter-clear {
    height: 30px;
    padding: 0 10px;
    font-size: 0.8em;
    color: var(--text-muted);
    background: none;
    border: 1px solid var(--border);
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
}

.sva-filter-clear:hover {
    background: var(--neutral);
    color: var(--text);
}

/* Live count label — "Showing N of M" */
.sva-filter-count {
    font-size: 0.8em;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Bulk-scope hint — "(applies to N shown)" next to Enable/Disable All buttons */
.sva-bulk-scope {
    font-size: 0.8em;
    color: var(--text-muted);
    margin-left: 4px;
    white-space: nowrap;
}

/* Hidden (filtered-out) rows — keep in DOM for snapshot stability (#600) */
.adminConfigPage .send-via-arena-table tbody tr.sva-filtered-out {
    display: none;
}

/* Empty-match state row */
.adminConfigPage .send-via-arena-table td.sva-no-results {
    text-align: center;
    padding: 16px;
    color: var(--text-muted);
    font-style: italic;
    border-bottom: none;
}

.autofill-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #2c3e50;
    color: var(--surface);
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 13px;
    max-width: 480px;
    text-align: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}
.autofill-toast.autofill-toast-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* #366 + #96 Rider section layout — any form row that hosts a rider Dropzone
 * stacks its children vertically (label, button, dropzone, list) instead of
 * the default horizontal flex. Covers both the contract edit dropdown and the
 * artist edit modal — they share the same `.rider-dropzone` class now. */
form .row:has(.rider-dropzone) {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

/* "+ Add from artist's riders" button — styled as Arena primary action:
   solid orange fill, white text, matching the modal primary buttons
   (Attach selected, Create!, etc.). */
.add-from-artist-riders-btn {
    display: inline-block;
    margin: 5px 15px 6px 15px;
    padding: 8px 16px;
    background: var(--arena-orange);
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    font-size: 13px;
    color: var(--surface);
    font-weight: 400;
    transition: background 0.2s ease, color 0.2s ease;
    float: none;
    height: auto;
}
.add-from-artist-riders-btn:hover:not(:disabled) {
    background: #e55a16;
    color: var(--surface);
}
.add-from-artist-riders-btn:disabled {
    opacity: 0.45;
    cursor: default;
    border-color: var(--border);
    color: var(--text-muted);
}

/* Dropzone: match the .dropdownList textarea rendered outer width (434px).
   The textarea is content-box: width 418px + padding 7px L/R + border 1px L/R = 434px outer.
   We use border-box so max-width: 434px caps the outer dimension directly.
   max-width instead of fixed width makes it responsive on narrow viewports. */
.rider-dropzone {
    max-width: 434px;
    width: 100%;
    margin: 5px 15px 10px 15px;
    box-sizing: border-box;
}

.rider-list-wrapper {
    max-width: 434px;
    width: 100%;
    min-width: 0;
    margin: 0 15px;
    box-sizing: border-box;
    padding: 0;
}
form .row:has(.add-from-artist-riders-btn) > p.subheader {
    margin: 0 15px 4px 15px;
    font-size: 12px;
    color: var(--text-muted);
}

/* #366 Combined rider list: two colored-border sections. */
.rider-list-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}
.rider-list-section {
    padding-left: 8px;
    border-left: 3px solid transparent;
}
.rider-list-section.rider-source-artist {
    border-left-color: #93c5fd;
}
.rider-list-section.rider-source-contract {
    border-left-color: #fbbf24;
}
.rider-list-section h6 {
    font-size: 13px;
    color: var(--secondary);
    margin: 0 0 6px 0;
    font-weight: 400;
}
.rider-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}
.rider-list li {
    padding: 4px 0;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.rider-list li:last-child {
    border-bottom: none;
}
.rider-list .rider-remove {
    color: #ef4444;
    cursor: pointer;
    margin-left: 8px;
}
.rider-list .rider-remove:hover {
    color: #b91c1c;
}

/* #555 Flow c — wrapper block that contains the catalog toggle + Dropzone.
   The parent .row is a nowrap flex container; this block takes full width
   so the toggle and Dropzone stack vertically without needing flex-wrap.
   The catalog toggle itself reuses the .field.inline-checkbox convention
   (#534) — see the #addContract/#addArtist/#artistContract .inline-checkbox
   rules above — rather than a bespoke class, so the label inherits the
   established form-label grey (#8a9398) and the sprite-checkbox float is
   killed consistently across both the Add popup and the Edit dropdown. */
.rider-upload-block {
    width: 100%;
    flex-shrink: 0;
}

/* #390 Inline rider picker (used in the Add Contract popup, where a stacked
   Foundation reveal-modal collapses the parent). Visually echoes #riderPicker. */
.inline-rider-picker {
    max-width: 434px;
    width: 100%;
    margin: 5px 15px 10px 15px;
    padding: 8px 10px;
    background: var(--neutral);
    border: 1px solid var(--border);
    border-radius: 4px;
    box-sizing: border-box;
}
.inline-rider-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--tertiary);
    margin-bottom: 6px;
}
.inline-rider-picker-refresh {
    font-size: 11px;
    color: var(--text-muted);
    text-decoration: underline;
}
.inline-rider-picker-refresh:hover {
    color: var(--arena-orange);
}
.inline-rider-picker-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 160px;
    overflow-y: auto;
}
.inline-rider-picker-list li {
    padding: 4px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 13px;
}
.inline-rider-picker-list li:last-child {
    border-bottom: none;
}
.inline-rider-picker-list label {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
}
/* Override the global `input[type="checkbox"] { display: none }` rule (line 1915).
   The inline picker uses input-inside-label, not the input+label sibling pattern,
   so the global sprite styles don't apply — only the display:none needs reverting. */
.inline-rider-picker-list input[type="checkbox"] {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 0 8px 0 0;
    vertical-align: middle;
    cursor: pointer;
}
.rider-dropzone {
    min-height: 60px;
    border: 2px dashed var(--border);
    border-radius: 4px;
    padding: 12px;
    text-align: center;
    background: var(--surface);
    font-size: 12px;
    line-height: 1.4;
    overflow: hidden;
}
.rider-dropzone .dz-message {
    margin: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.rider-dropzone.dz-drag-hover {
    border-color: #3b82f6;
    background: #eff6ff;
}

/* Add mode: hide Dropzone (no artistId yet), show note instead.
   Edit mode (form id="editArtist"): show Dropzone, hide the save-first note. */
#addArtist .rider-dropzone {
    display: none;
}
#editArtist .rider-dropzone {
    display: block;
}
#addArtist .riderUploadNote {
    display: block;
}
#editArtist .riderUploadNote {
    display: none;
}
/* In add-contract popup, the note is always visible (no Dropzone in add mode). */
p.riderUploadNote {
    margin: 8px 15px;
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}

/* #366 — explanatory text that replaces the rider interface on the add-contract
   popup. Agents cannot assign riders until the contract has been saved (gap
   tracked as #390). */
p.riderCreateNote {
    margin: 8px 15px;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
    max-width: 434px;
}

/* #366 — picker modal header/content spacing: the form content needs top
   breathing room below the .top divider line, matching the addArtist /
   addPromoter convention where .popup form section has internal margins. */
#riderPicker > form {
    padding: 16px 20px;
}
#riderPicker p.subheader {
    margin: 0 0 12px 0;
    font-size: 13px;
    color: var(--text-muted);
}
#riderPicker #riderPickerList {
    margin-bottom: 12px;
}
#riderPicker .riderPickerActions {
    margin-top: 12px;
    display: flex;
    gap: 10px;
}

/* #96 — The artist edit modal's rider list reuses the same `.rider-list-wrapper`
 * + `.rider-list` styling as the contract edit dropdown (shipped in !232/#366).
 * Only addition: the artist row's `<li>` has a clipboard-copy icon next to the
 * remove × — clustered in `.rider-actions` so the flex layout puts file name
 * on the left and the icon cluster on the right (matching `justify-content:
 * space-between` from the base .rider-list li rule). */
.rider-list .rider-actions {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.rider-list .copyFileRiderUrl {
    cursor: pointer;
    color: var(--secondary);
}
.rider-list .copyFileRiderUrl:hover {
    color: var(--secondary-dark);
}
/* #96 — Inside a `.popup` (Foundation 5 reveal-modal), the rider list must
 * scroll internally so a long list (e.g. 13 riders) does not push the form
 * submit button below the modal viewport. Contract-edit dropdown (.dropdownList,
 * not .popup) is flexible-height and does not need this — the page scrolls. */
.popup .rider-list-wrapper {
    max-height: 200px;
    overflow-y: auto;
}
/* #96 — Rider name preview inside the Artist Information cell. Shows up to
 * 3 filenames with a "+N more" overflow indicator when the artist has more.
 * The full rider list opens in the edit modal — the pencil icon at the top
 * of the cell is the click target. */
.artistInfoRiders {
    max-width: 200px;
}
.artistInfoRiders .rider-name-preview {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 18px;
    color: var(--text);
}
/* #528 — Align the rider list with the .fieldVal h1 line-box used by the
 * adjacent value columns. The h1 renders at 40px line-height with its text
 * vertical-centered, so the first rider line needs to share that 40px
 * line-box to land on the same horizontal axis as "15% / ON / 416-555-2001".
 * Subsequent rider lines fall back to the 18px line-height so multi-rider
 * lists don't grow the cell vertically more than necessary. */
.artistInfoRiders .rider-name-preview li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}
.artistInfoRiders .rider-name-preview li:first-child {
    line-height: 40px;
}
.artistInfoRiders .rider-name-preview li a {
    color: inherit;
    text-decoration: none;
}
.artistInfoRiders .rider-name-preview li a:hover {
    color: var(--arena-orange);
    text-decoration: underline;
}
.artistInfoRiders .rider-name-preview li.none {
    color: var(--secondary);
    font-style: italic;
}
.artistInfoRiders .rider-name-preview li.more {
    color: var(--arena-orange);
    font-weight: 600;
}

/* #102 Wave 3 + Wave 4 — Issue + un-Issue confirmation modals (shared layout). */
#confirmIssueContractModal,
#confirmUnissueContractModal {
    margin-left: -240px;
    width: 480px;
}
#confirmIssueContractModal section,
#confirmUnissueContractModal section {
    padding: 16px 24px;
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
}
#confirmIssueContractModal section p,
#confirmUnissueContractModal section p {
    margin: 0 0 12px 0;
}
#confirmIssueContractModal section .confirmIssueList,
#confirmUnissueContractModal section .confirmIssueList {
    margin: 0 0 16px 0;
    padding-left: 20px;
    list-style: disc;
}
#confirmIssueContractModal section .confirmIssueList li,
#confirmUnissueContractModal section .confirmIssueList li {
    margin-bottom: 6px;
}

.modalActions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #d4d4d4;
}
/* The Cancel anchor needs Foundation's `.close-reveal-modal` to trigger close,
   but the global rule absolutely-positions any `.close-reveal-modal` to the
   modal's top-right corner. Reset within action rows so it flows in flex. */
.modalActions .close-reveal-modal {
    position: static;
    top: auto;
    right: auto;
    font-size: inherit;
    width: auto;
    height: auto;
}
.modalActions .button {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    line-height: 1.2;
}
.modalActions .button.primary {
    background: var(--arena-orange);
    color: var(--surface);
    border-color: var(--arena-orange);
}
.modalActions .button.primary:hover:not(:disabled) {
    background: #d35413;
    border-color: #d35413;
}
.modalActions .button.primary:disabled {
    background: #c8a88f;
    border-color: #c8a88f;
    cursor: default;
}
.modalActions .button.secondary {
    background: var(--surface);
    color: var(--secondary-dark);
    border-color: var(--border-dark);
}
.modalActions .button.secondary:hover {
    background: var(--neutral);
    color: var(--secondary-dark);
}

/* #97 — Soft deletion / data hygiene
 * Visual treatment for deactivated rows on the promoters, venues and
 * artists listings, plus the "Show inactive" header toggle. Reused across
 * all three modules — single shared selector set rather than per-module
 * duplicates (cf. project memory feedback_consolidate_dual_classes.md).
 */
#content .row.row-inactive {
    background: var(--neutral);
    opacity: 0.65;
}
#content .row.row-inactive:hover {
    opacity: 1;
}
#content .row.row-inactive .nameField h1 {
    color: var(--secondary);
    text-decoration: line-through;
    text-decoration-color: rgba(138, 147, 152, 0.6);
}

/* "Inactive" badge rendered next to the entity name in promoters/venues/artists rows. */
.status-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    vertical-align: middle;
    border-radius: 10px;
}
.status-badge-inactive {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffe49a;
}

/* =============================================================
   #417 — Filter panel + chips bar
   Replaces the old .show-inactive-toggle checkbox (removed in #417).
   ============================================================= */

/* "Filters ▾" trigger link in .add-user — peers visually with "+ Add X" */
.add-user .filter-panel-trigger {
    display: inline-block;
    margin-right: 18px;
    color: var(--arena-orange);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    vertical-align: middle;
    user-select: none;
    transition: opacity 0.15s ease;
}
.add-user .filter-panel-trigger:hover {
    opacity: 0.8;
    text-decoration: none;
    color: var(--arena-orange);
}
.filter-panel-arrow {
    font-size: 10px;
    margin-left: 2px;
}

/* Slide-down drawer — lives between .sub-header and #content */
#filter-panel {
    background: var(--neutral);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    transition: max-height 0.25s ease, padding 0.25s ease;
}
#filter-panel.filter-panel-collapsed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
}
#filter-panel.filter-panel-open {
    max-height: 200px;
}
.filter-panel-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 20px;
}

/* Individual facet block */
.filter-facet {
    display: flex;
    align-items: center;
    gap: 10px;
}
.filter-facet-label {
    font-size: 13px;
    font-family: 'Open Sans', sans-serif;
    color: var(--secondary-dark);
    font-weight: 600;
    white-space: nowrap;
    margin: 0;
}

/* Segmented button group */
.filter-btn-group {
    display: flex;
    align-items: center;
}
.filter-btn {
    padding: 5px 14px;
    font-size: 13px;
    font-family: 'Open Sans', sans-serif;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--secondary-dark);
    cursor: pointer;
    border-radius: 0;
    margin: 0;
    line-height: 1.4;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.filter-btn:first-child {
    border-radius: 3px 0 0 3px;
}
.filter-btn:last-child {
    border-radius: 0 3px 3px 0;
}
.filter-btn:not(:first-child) {
    border-left: none;
}
.filter-btn:hover:not(.active) {
    color: var(--arena-orange);
    border-color: var(--arena-orange);
    z-index: 1;
    position: relative;
}
.filter-btn.active {
    background: var(--arena-orange);
    color: var(--surface) !important;
    border-color: var(--arena-orange);
    z-index: 1;
    position: relative;
}

/* "✕ Clear filters" link — right side of panel */
.filter-panel-clear {
    margin-left: auto;
    font-size: 12px;
    color: var(--secondary);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.12s ease;
}
.filter-panel-clear:hover {
    color: var(--arena-orange);
    text-decoration: none;
}

/* Active-filter chips bar — between panel and #content */
#filter-chips-bar {
    background: var(--neutral);
    border-bottom: 1px solid var(--border);
    padding: 6px 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--surface);
    border: 1px solid var(--arena-orange);
    color: var(--arena-orange);
    border-radius: 12px;
    padding: 3px 10px;
    font-size: 12px;
    font-family: 'Open Sans', sans-serif;
}
.filter-chip-remove {
    color: var(--arena-orange);
    text-decoration: none;
    font-size: 11px;
    line-height: 1;
    margin-left: 2px;
}
.filter-chip-remove:hover {
    color: var(--arena-orange-dark);
    text-decoration: none;
}

/* =============================================================
   #326 reflow — responsive breakpoints for modal / dropdown forms
   Wide desktop (≥1280px): no rules — implicit fallthrough.
   ============================================================= */

/* --- Narrow desktop: 1024–1279px --- */
@media (max-width: 1279px) and (min-width: 1024px) {
    /* extraBig modal: cap width and keep centred */
    .reveal-modal.extraBig {
        max-width: 1200px;
    }

    /* extraBig sections: 2-up instead of 3-up */
    .popup.extraBig form section {
        width: 48%;
        min-width: 0;
    }
}

/* --- Tablet / split-screen: 720–1023px --- */
@media (max-width: 1023px) and (min-width: 720px) {
    /* All modal sizes: full-width minus gutters */
    .reveal-modal,
    .reveal-modal.big,
    .reveal-modal.extraBig {
        width: calc(100vw - 40px);
        max-width: calc(100vw - 40px);
        left: 20px;
        transform: none;
    }

    /* Sections stack vertically and grow to fit their content (desktop's
       max-height: 740px would clip section 1 and visually overlap section 2
       since overflow is visible). */
    .popup form section,
    .popup.extraBig form section {
        width: 100%;
        min-width: 0;
        display: block;
        max-height: none;
        height: auto;
    }

    .popup.big form {
        min-width: 0;
    }

    /* Lift the header floor — section width is now the constraint */
    .popup .full,
    .popup .top {
        min-width: 0;
    }
}

/* --- Phone / very narrow: <720px --- */
@media (max-width: 719px) {
    /* Modals go near-full-viewport */
    .reveal-modal,
    .reveal-modal.big,
    .reveal-modal.extraBig {
        width: 100vw;
        max-width: 100vw;
        left: 0;
        top: 0;
        transform: none;
        border-radius: 0;
    }

    /* Header: distribute icon + title + close gracefully when the row is narrow */
    .popup .full,
    .popup .top {
        max-width: 100%;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* Sections stack vertically and grow to fit their content (desktop's
       max-height: 740px would clip section 1 and visually overlap section 2
       since overflow is visible). */
    .popup form section,
    .popup.extraBig form section {
        width: 100%;
        min-width: 0;
        display: block;
        max-height: none;
        height: auto;
    }

    .popup.big form {
        min-width: 0;
    }

    /* Labels stack above inputs (block flow) */
    #addArtist label,
    #addContract label,
    #addVenue label,
    #addPromoter label,
    .dropdownList.scroll label,
    #artistContractForm label,
    #vendorContractForm label {
        width: 100%;
        flex: 1 1 100%;
        display: block;
        margin: 8px 15px 4px 15px;
    }

    #addArtist label.half,
    #addContract label.half,
    #addVenue label.half,
    #addPromoter label.half,
    .dropdownList.scroll label.half,
    #artistContractForm label.half {
        width: 100%;
    }

    /* #534 Inline-checkbox modifier at phone tier — keep checkbox + label
       inline even when other labels stack above their inputs. The default
       phone-tier rule sets labels to `width: 100%; display: block`, which
       would force the checkbox to a new line. Inline-checkbox cases stay
       single-line at every viewport. */
    #addContract .field.inline-checkbox label,
    #addArtist .field.inline-checkbox label,
    #addVenue .field.inline-checkbox label {
        width: auto;
        display: inline;
        flex: 0 0 auto;
        margin: 0 0 0 6px;
    }

    /* Inputs fill the row */
    .dropdownList input:not([type="checkbox"]):not([type="file"]),
    .dropdownList select,
    .dropdownList input.half,
    .dropdownList textarea {
        width: calc(100% - 30px);
        max-width: calc(100% - 30px);
        box-sizing: border-box;
    }

    /* #326 Phone-tier stacking: .field wrappers go full-width-block so each
       label and its input render adjacent (label above input) instead of
       all-labels-then-all-inputs. .half and .large variants repeated
       explicitly to match the desktop specificity.

       #538 extends to .dropdownList.scroll .row .field too so the
       contract-edit dropdown (Modify Artist Contract) stacks identically to
       the Add Contract modal at phone tier. */
    .popup form .row .field,
    .popup form .row .field.half,
    .popup form .row .field.large,
    .dropdownList.scroll .row .field,
    .dropdownList.scroll .row .field.half,
    .dropdownList.scroll .row .field.large {
        display: block;
        /* width: auto + symmetric 15px margins keeps the .field box inside the
           viewport. Earlier (width:100%) the box was parent-width AND carried
           30px of horizontal margin, overflowing the viewport by 30px and
           clipping inputs at the right edge on mobile. */
        width: auto;
        max-width: none;
        margin: 0 15px;
        box-sizing: border-box;
    }

    /* #326 Inside a .field at phone tier, each input/select/textarea takes
       full wrapper width and stacks vertically. This is what makes multi-input
       .field wrappers (Contact Person: First Name + Last Name; Address:
       Street + Apt) flow as one labeled column. At desktop these inputs keep
       their existing inline-flex behavior so multi-input rows lay out
       side-by-side. */
    #addArtist .field input:not([type="checkbox"]):not([type="file"]),
    #addArtist .field select,
    #addArtist .field textarea,
    #addContract .field input:not([type="checkbox"]):not([type="file"]),
    #addContract .field select,
    #addContract .field textarea,
    #addVenue .field input:not([type="checkbox"]):not([type="file"]),
    #addVenue .field select,
    #addVenue .field textarea,
    #addPromoter .field input:not([type="checkbox"]):not([type="file"]),
    #addPromoter .field select,
    #addPromoter .field textarea,
    .dropdownList.scroll .field input:not([type="checkbox"]):not([type="file"]),
    .dropdownList.scroll .field select,
    .dropdownList.scroll .field textarea,
    #artistContractForm .field input:not([type="checkbox"]):not([type="file"]),
    #artistContractForm .field select,
    #artistContractForm .field textarea,
    #vendorContractForm .field input:not([type="checkbox"]):not([type="file"]),
    #vendorContractForm .field select,
    #vendorContractForm .field textarea {
        display: block;
        margin: 6px 0;
        width: 100%;
        max-width: none;
        box-sizing: border-box;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   #107 PUBLIC ticket-count form (chrome-free, unauthenticated promoter page).
   Reuses the app's brand palette via design tokens (colors_and_type.css).
   #mainLogo (defined above) renders the Arena logo at the top of the card.
   ────────────────────────────────────────────────────────────────────────── */
.publicTicketCount {
    max-width: 480px;
    margin: 40px auto;
    padding: 0 24px 32px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    box-sizing: border-box;
    text-align: center;
    color: var(--secondary);
    font-family: 'Open Sans', sans-serif;
}

.publicTicketCount #mainLogo {
    height: 80px;
    margin: 16px 0 8px;
    /* contain (not the global cover/center) so the wide logo is never cropped. */
    background-size: contain;
}

.publicTicketCount h1 {
    font-size: 23px;
    color: var(--text);
    margin: 0 0 20px;
}

.publicTicketCount .tcDetail {
    margin: 4px 0;
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
}

.publicTicketCount .tcDetail strong {
    color: var(--text);
}

.publicTicketCount form {
    margin-top: 24px;
    text-align: left;
}

.publicTicketCount .field {
    margin-bottom: 16px;
}

.publicTicketCount .field label {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    color: var(--text);
}

.publicTicketCount .field input[type="number"] {
    display: block;
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    box-sizing: border-box;
    /* 13px (body) per the type scale. Note: <16px reintroduces iOS Safari
       focus-zoom on this mobile promoter page — accepted to stay on-scale. */
    font-size: 13px;
    color: var(--secondary);
    font-family: inherit;
}

.publicTicketCount .field input[type="number"]:focus {
    outline: none;
    border-color: var(--info);
    box-shadow: 0 0 0 2px var(--focus-ring);
}

.publicTicketCount button[type="submit"] {
    width: 100%;
    height: 40px;
    background: var(--arena-orange);
    color: var(--neutral);
    border: none;
    border-radius: 4px;
    font-size: 14px;
    /* Buttons don't inherit font-family by default — without this it renders
       Arial. inherit pulls Open Sans from .publicTicketCount/body. */
    font-family: inherit;
    cursor: pointer;
}

.publicTicketCount button[type="submit"]:disabled {
    opacity: 0.6;
    cursor: default;
}

.publicTicketCount .ticketCountStatus {
    display: block;
    margin-top: 12px;
    font-size: 13px;
    min-height: 1em;
}

.publicTicketCount .ticketCountStatus.is-error {
    color: var(--error);
}

/* Confirmation / invalid-link state (replaces the form on success; also the
   "link unavailable" copy on an invalid token render). */
.publicTicketCount .publicMessage {
    margin: 24px 0 8px;
    padding: 16px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text);
    background: var(--neutral);
    border-radius: 4px;
    text-align: center;
}

@media (max-width: 540px) {
    .publicTicketCount {
        margin: 16px auto;
        max-width: none;
        border: none;
        border-radius: 0;
    }
}

/* ── #108 Notification bell + dropdown ──────────────────────────────────────
   Lives in the authenticated header chrome, left of .logout (which is
   position:absolute; right:20px). The bell is anchored absolutely so it clears
   the variable-width username; the dropdown hangs below it. Matches the header
   rhythm: 69px tall row, orange (var(--arena-orange)) accent like .logout a. */
.header .notifBell {
    position: relative;
    height: 69px;
    line-height: 69px;
    margin-right: 18px;
    cursor: pointer;
    z-index: 50;
}

.header .notifBell .notifBellIcon {
    font-size: 26px;
    color: var(--tertiary);
    vertical-align: middle;
}

.header .notifBell:hover .notifBellIcon {
    color: var(--arena-orange);
}

.header .notifBell .notifBadge {
    position: absolute;
    top: 14px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: var(--arena-orange);
    color: var(--surface);
    font-size: 11px;
    font-weight: 400;
    line-height: 18px;
    text-align: center;
    padding: 0 4px;
    box-sizing: border-box;
}

.header .notifBell .notifDropdown {
    position: absolute;
    top: 64px;
    right: 0;
    width: 320px;
    max-height: 400px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border-dark);
    border-radius: 4px;
    /* Flat system: no drop shadow on a non-modal overlay. The 1px var(--border-dark)
       border provides separation (matches the .dropdownList overlays). */
    line-height: normal;
    text-align: left;
    cursor: default;
}

.header .notifBell .notifDropdownHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    font-weight: 400;
    color: var(--text);
}

.header .notifBell .notifDropdownHeader a {
    font-size: 12px;
    font-weight: normal;
    color: var(--arena-orange);
}

.header .notifBell .notifList {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.header .notifBell .notifList li {
    padding: 12px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}

.header .notifBell .notifList li:hover {
    background: var(--neutral);
}

/* Unread cue: white background + a 3px left border in primary orange (var(--arena-orange))
   — on-palette and clearer than the prior off-palette #fff5ef tint. No off-scale
   bold weight (the type scale defines only 300/400). The 3px border is offset by
   reducing padding-left 12px -> 9px so unread text stays aligned with read rows. */
.header .notifBell .notifList li.unread {
    background: var(--surface);
    border-left: 3px solid var(--arena-orange);
    padding-left: 9px;
    font-weight: 400;
}

.header .notifBell .notifList li.read {
    font-weight: normal;
}

.header .notifBell .notifList li.notifError {
    color: var(--error);
    cursor: default;
}

.header .notifBell .notifList .notifMsg {
    display: block;
}

.header .notifBell .notifList .notifTime {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
}

.header .notifBell .notifEmpty {
    padding: 16px 12px;
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
}

/* Phone tier: narrow the dropdown so it doesn't overflow the viewport. The bell
   sits in the .logout flex row, so no horizontal repositioning is needed. */
@media (max-width: 719px) {
    .header .notifBell {
        margin-right: 12px;
    }
    .header .notifBell .notifDropdown {
        width: 280px;
    }
}