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: #8a9398;
    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: #ff712b;
    color: #f2f2f2;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    text-indent: 0;
}

input[type="select"] {
    float: left;
    width: 460px;
    height: 40px;
    margin-left: 174px;
    background: #ff712b;
}

select {
    /*float: left;*/

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

textarea {


    border: 0;
    border-radius: 5px;
    width: 242px;
    max-height: 66px;
    padding: 7px;
    color: #8a9398;
    /* 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: #fff;
    color: #7c7c7c;
    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: #ff712b;
    cursor: pointer;
}

.active {
    color: #ff712b !important;
}

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

.active a {
    color: #ff712b !important;
}

.active:after {
    /*    content:'';
    background:#ff712b;
    width   2%;
    height: 5px;
    position: absolute;
    bottom: -7px;
    width: 5px;
    display: block;
    z-index: 9999;
    margin: 0;
    padding: 0;*/
}

.grey {
    color: inherit !important;
}

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

body {
    position: relative;
    background: #eae9e9;
    color: #8a9398;
    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: #f2f2f2;
}

.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: #333;
}

.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: #4d5761;
}

.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;
}

.header .logout a {
    float: left;
    color: #ff712b;
    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: #eae9e9;
    border-top: 1px solid #fff;
    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: #4d5761;
    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: #ff712b;
    line-height: 60px;
    text-align: right;
    white-space: nowrap;
}

.sub-header .add-user a:hover {
    color: #FFA071;
}

input[type="search"] {
    -webkit-appearance: textfield;
    width: 100%;
    max-width: 300px;
    height: 32px;
    border: 1px solid #ccc;
    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 #8a9398;
    /* margin-top: 61px; */
    overflow: auto;
    background: #f2f2f2;
    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 #8a9398;
    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 white;
    /* border-bottom: solid 1px; */
    /* border-left: solid 1px white; */
}

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

.floater.full {
    background: white;
    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: #fff;
    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: #ff712b;
}


.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: #ff712b;
    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: #a5cf00;
    font-size: 2em;
}

.fieldVal.status-CONTRACT {
    color: #f0a020;
    font-size: 2em;
}

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

.fieldVal.status-confirmed,
.fieldVal.status-ISSUED {
    color: #a5cf00;
    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 #8a9398;
    background: #fff;
}

#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: #ff712b;
    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: #ff712b;
    user-select: none;
}

.cellContent .eventAttached:hover {
    color: #FFA071;
}

.cell.clickable:hover {
    cursor: pointer;
    background: #fff;
}


.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: #fff;
}

.temp-venue {
    float: left;
    width: 380px;
    height: 80px;
    margin: 10px 0 10px 0;
    background: #fff;
}

.temp-venueB {
    float: left;
    width: 380px;
    height: 280px;
    margin: 10px 0 10px 0;
    background: #fff;
}


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

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

.messagePreviews h5:hover {
    color: #ff712b;
    cursor: pointer;
}

.messagePreview,
.message {
    width: 100%;
    white-space: initial;
    word-break: break-all;
    color: #8a9398;
}

.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: #ff712b;
    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: #ff712b;
}

.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: #ff712b;
}

.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: #666;
    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 #ddd;
    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: #888;
    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: #8a9398 none;
    background-image: none;
    right: auto;
    top: auto;
    float: none;
    font-size: 0.875em;
    color: #fff;
    text-indent: 0;
    padding: 8px 16px;
    border-radius: 3px;
    cursor: pointer;
}

.popup {
    padding: 0 0 20px 0;
    border: solid 1px #ccc;
    background: #eae9e9;
}

/* #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 or a Prefixfree hot-reload race — guarantees the
   contracts list behind never bleeds through the rider/catalog-toggle row. */
#add-contract { background: #eae9e9; }

#add-user {
    float: left;
}

.popup .full,
.popup .top {
    min-width: 0;
    max-width: 180%;
    padding: 10px 20px;
    border-bottom: 1px solid #8a9398;
    color: #ff712b;
    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 #fff;
    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: #fff;
}



#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: #f2f2f2;
}

.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: #ff712b
}

.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: #ff712b;
}

#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: #8a9398;
    color: #f2f2f2 !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: #ff712b;
}

#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: white;
    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: #888;
    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 #f0a020;
    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: #f3f4f6;
    color: #6b7280;
    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: #ff712b;
    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: #f2f2f2;
    min-height: 170px;
}

.logo-upload {
    background: white;
    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 #8a9398;
    background: #eae9e9;
}

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: #4d5761;
    text-align: center;
    margin: 27px 0px;
}


footer .footer {
    position: relative;
    width: 100%;
    height: 40px;
    background: #f2f2f2;
    border-top: 1px solid #fff;
}

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: #555;
    line-height: 40px;
    text-align: right;
}




/* background: #ff0;
*/





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

/* Ordered list for display results. */
ol.mp_list {
    background-color: #FFFFFF;
    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: #E0E0E0;
}

/* 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: #ff712b;
    color: #f2f2f2;
    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: #ff712b;
    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: #8a9398;
    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: #8a9398;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 6px 0;
}

.adminConfigPage h4 {
    color: #8a9398;
    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: #8a9398;
    font-size: 13px;
    margin: 0;
}

.adminConfigPage .config-status {
    background: #f8f8f8;
    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: #8a9398;
}

.adminConfigPage .status-detail strong {
    color: #555;
    font-family: monospace;
    font-size: 11px;
}

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

.adminConfigPage .config-form-section label {
    color: #8a9398;
    font-size: 12px;
    margin-bottom: 4px;
    display: block;
}

.adminConfigPage .config-form-section input[type="text"],
.adminConfigPage .config-form-section input[type="email"],
.adminConfigPage .config-form-section select,
.adminConfigPage .config-form-section textarea {
    width: 100%;
    max-width: 500px;
    border: 1px solid;
    border-radius: 3px;
    box-sizing: border-box;
}

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

.adminConfigPage .config-help {
    color: #aab0b5;
    font-size: 11px;
    margin: 4px 0 15px 0;
}

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

.adminConfigPage .config-actions .button {
    margin: 0;
    float: none;
}

.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: #fff;
    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: #ddd;
}

.adminConfigPage .config-divider span {
    background: #fff;
    padding: 0 12px;
    position: relative;
    color: #aab0b5;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.adminConfigPage .drive-info {
    background: #f0f4f8;
    border: 1px solid #d0d7de;
    border-radius: 5px;
    padding: 12px 16px;
    margin-bottom: 10px;
    max-width: 500px;
}

.adminConfigPage .drive-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
}

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

.adminConfigPage .drive-id {
    display: block;
    font-size: 11px;
    font-family: monospace;
    color: #8a9398;
}

.adminConfigPage .drive-name-detail {
    font-size: 12px;
    color: #555;
}

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

.adminConfigPage .button.alert {
    background: #c0392b;
    color: #fff;
    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 #dde3e6;
    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 #dde3e6;
    vertical-align: middle;
}

.adminConfigPage .send-via-arena-table th {
    background: #f2f4f5;
    font-weight: 600;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5a6570;
}

.adminConfigPage .send-via-arena-table tbody tr:hover {
    background: #f9fafb;
}

.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: #e8ebed;
}

.adminConfigPage .send-via-arena-table th.sva-sortable:focus {
    outline: 2px solid #4a90d9;
    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 #5a6570;
}

.sva-sort-indicator.sva-sort-asc {
    opacity: 1;
    border-bottom: 5px solid #5a6570;
    border-top: none;
}

.sva-sort-indicator.sva-sort-desc {
    opacity: 1;
    border-top: 5px solid #5a6570;
    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 #c8d0d5;
    border-radius: 3px;
    box-sizing: border-box;
}

.sva-filter-input:focus {
    outline: none;
    border-color: #4a90d9;
    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 #c8d0d5;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
}

.sva-filter-select:focus {
    outline: none;
    border-color: #4a90d9;
}

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

.sva-filter-clear:hover {
    background: #f2f4f5;
    color: #333;
}

/* Live count label — "Showing N of M" */
.sva-filter-count {
    font-size: 0.8em;
    color: #888;
    white-space: nowrap;
}

/* Bulk-scope hint — "(applies to N shown)" next to Enable/Disable All buttons */
.sva-bulk-scope {
    font-size: 0.8em;
    color: #888;
    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: #888;
    font-style: italic;
    border-bottom: none;
}

.autofill-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #2c3e50;
    color: #fff;
    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: #ff712b;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    font-size: 13px;
    color: #fff;
    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: #fff;
}
.add-from-artist-riders-btn:disabled {
    opacity: 0.45;
    cursor: default;
    border-color: #aaa;
    color: #aaa;
}

/* 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: #6b7280;
}

/* #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: #8a9398;
    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: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    box-sizing: border-box;
}
.inline-rider-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #4b5563;
    margin-bottom: 6px;
}
.inline-rider-picker-refresh {
    font-size: 11px;
    color: #6b7280;
    text-decoration: underline;
}
.inline-rider-picker-refresh:hover {
    color: #ff712b;
}
.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 #d1d5db;
    border-radius: 4px;
    padding: 12px;
    text-align: center;
    background: #f9fafb;
    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: #6b7280;
    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: #6b7280;
    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: #6b7280;
}
#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: #6b7280;
}
.rider-list .copyFileRiderUrl:hover {
    color: #2a4a4f;
}
/* #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: #2a4a4f;
}
/* #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: #ff712b;
    text-decoration: underline;
}
.artistInfoRiders .rider-name-preview li.none {
    color: #8a9398;
    font-style: italic;
}
.artistInfoRiders .rider-name-preview li.more {
    color: #ff712b;
    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: #2a4a4f;
    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: #ff712b;
    color: #fff;
    border-color: #ff712b;
}
.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: #fff;
    color: #2a4a4f;
    border-color: #8a9398;
}
.modalActions .button.secondary:hover {
    background: #f4f4f4;
    color: #2a4a4f;
}

/* #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: #f8f8f8;
    opacity: 0.65;
}
#content .row.row-inactive:hover {
    opacity: 1;
}
#content .row.row-inactive .nameField h1 {
    color: #8a9398;
    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: #ff712b;
    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: #ff712b;
}
.filter-panel-arrow {
    font-size: 10px;
    margin-left: 2px;
}

/* Slide-down drawer — lives between .sub-header and #content */
#filter-panel {
    background: #f4f3f3;
    border-bottom: 1px solid #d8d7d7;
    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: #555;
    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 #cccccc;
    background: #ffffff;
    color: #555;
    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: #ff712b;
    border-color: #ff712b;
    z-index: 1;
    position: relative;
}
.filter-btn.active {
    background: #ff712b;
    color: #ffffff !important;
    border-color: #ff712b;
    z-index: 1;
    position: relative;
}

/* "✕ Clear filters" link — right side of panel */
.filter-panel-clear {
    margin-left: auto;
    font-size: 12px;
    color: #8a9398;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.12s ease;
}
.filter-panel-clear:hover {
    color: #ff712b;
    text-decoration: none;
}

/* Active-filter chips bar — between panel and #content */
#filter-chips-bar {
    background: #f4f3f3;
    border-bottom: 1px solid #d8d7d7;
    padding: 6px 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border: 1px solid #ff712b;
    color: #ff712b;
    border-radius: 12px;
    padding: 3px 10px;
    font-size: 12px;
    font-family: 'Open Sans', sans-serif;
}
.filter-chip-remove {
    color: #ff712b;
    text-decoration: none;
    font-size: 11px;
    line-height: 1;
    margin-left: 2px;
}
.filter-chip-remove:hover {
    color: #cc4500;
    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;
    }
}