.admin-logo {
    width: 100px;
}

.header #branding h1 {
    margin: 5px;
}

#site-name {
    text-align: center;
}

#header {
    height: 50px;
}

.orange, tr.orange td, tr.orange th {
    background-color: #FFD1B2 !important;
}

.violet, tr.violet td, tr.violet th {
    background-color: #ded0ff !important;
}

.form-horizontal .select2-container span.selection,
.form-horizontal .inline-related span.select2-selection {
    display: block;
}

.select2-search__field {
    height: auto !important;
}

.search-container .select2 {
    margin-top: 5px;
}

/*.change-related, .add-related {*/
/*    display: none !important;*/
/*}*/

#result_list thead th {
    position: sticky;
    top: 0;
}

@media only screen and (max-width: 767px) {
    body {
        min-width: auto;
    }

    #wrap {
        background: none;
    }

    .suit-columns {
        padding-left: 10px;
        padding-right: 10px;
    }

    #suit-center {
        padding-left: 0;
    }

    /* ---- Mobile chrome -------------------------------------------------------
       The header used to be a fixed 50px box with overflow:hidden holding ~159px
       of content, so #user-tools (Change password / Log out) and #lease-switcher
       were clipped and unreachable on a phone. Those nodes are now relocated into
       the drawer by admin.js, leaving the bar with only a menu button + branding. */

    /* Must be #header: this file's own "#header { height: 50px }" above is an ID rule and
       beats a .header class selector, which would leave the 44px menu button clipped by the
       header's overflow:hidden. 58px = 6px margin + 44px button + 6px margin.

       Flex (rather than the desktop float layout) so the menu button can be ordered ahead of
       #branding, which precedes it in the template. Hidden children (date/time, user-tools)
       are display:none and so don't participate. */
    #header,
    .header {
        align-items: center;
        display: flex;
        height: 58px;
    }

    .header #branding {
        min-width: unset;
    }

    .brand-name {
        display: none;
    }

    /* Date/time stays out on small screens; the rest is moved into the drawer, so
       anything still parented to the header must not reserve space here. */
    .header-content-first,
    .header #user-tools {
        display: none;
    }

    .breadcrumb {
        font-size: 9pt;
    }

    /* Menu button: replaces Suit's Bootstrap-2 gradient .btn-info with a flat
       44x44 target (Apple/Android minimum) that reads on the dark header. */
    .menu-link {
        align-items: center;
        background: rgba(255, 255, 255, 0.1) !important;
        background-image: none !important;
        border: 1px solid rgba(255, 255, 255, 0.16) !important;
        border-radius: 10px;
        box-shadow: none !important;
        display: inline-flex !important;
        flex-shrink: 0;
        height: 44px;
        justify-content: center;
        margin: 6px 4px 6px 10px;
        /* Precedes #branding visually even though it comes after it in the template. */
        order: -1;
        padding: 0;
        text-shadow: none !important;
        transition: background 0.15s ease;
        width: 44px;
    }

    .menu-link:hover,
    .menu-link:focus,
    .menu-link[aria-expanded="true"] {
        background: rgba(255, 255, 255, 0.2) !important;
    }

    .menu-link > i {
        display: none;
    }

    /* Hamburger drawn in CSS -- the icon font glyph rendered inconsistently and
       carried Bootstrap's text-shadow. */
    .menu-link::before,
    .menu-link::after {
        background: #fff;
        border-radius: 1px;
        content: "";
        height: 2px;
        position: absolute;
        transition: transform 0.2s ease, opacity 0.2s ease;
        width: 18px;
    }

    /* Three bars: ::before is the top one, ::after the bottom, and the middle comes from
       ::before's box-shadow (which sits at the element's own offset, i.e. centred). */
    .menu-link::before {
        box-shadow: 0 6px 0 #fff;
        transform: translateY(-6px);
    }

    .menu-link::after {
        transform: translateY(6px);
    }

    .menu-link[aria-expanded="true"]::before {
        box-shadow: none;
        transform: rotate(45deg);
    }

    .menu-link[aria-expanded="true"]::after {
        transform: rotate(-45deg);
    }

    /* Branding sits beside the button rather than owning the full bar. Suit's separator
       border-right divided branding from the widgets that followed it; with those gone it
       reads as a stray line, and the centred #site-name leaves the text floating away from
       the button, so both are reset here. */
    .header #branding {
        border-right: 0;
        min-width: 0;
    }

    .header #branding h1#site-name {
        align-items: flex-start;
        padding-left: 4px;
        text-align: left;
    }

    /* ---- Modals --------------------------------------------------------------
       dry-ux places modals at top:10%, which on a phone leaves a short dialog stranded
       near the top with dead space beneath it. Centre them instead -- but via flex with a
       capped, scrollable dialog rather than a transform, because 10% exists to stop a tall
       modal from clipping off the top of the screen, and naive centring would reintroduce
       exactly that. Also drops dry-ux's inline width:420px, which is wider than a 375px
       phone. Mobile only; desktop modals are untouched. */

    .dry-ux-modal.in {
        align-items: center;
        bottom: 0;
        display: flex !important;
        justify-content: center;
        top: 0;
    }

    .dry-ux-modal.in .modal-dialog {
        margin: 0;
        max-height: 88vh;
        max-width: 94vw;
        overflow-y: auto;
        /* 94vw rather than auto: auto shrink-wraps to the content and leaves a cramped
           ~226px dialog, while dry-ux's inline 420px overflows a 375px phone. */
        width: 94vw !important;
    }

    /* ---- Off-canvas drawer ---------------------------------------------------
       #suit-left was position:absolute + display:none toggled by jQuery. It is now
       a real drawer: fixed, translate-based, with a scrim, Escape-to-close and a
       scroll lock (all handled in admin.js). */

    #suit-left {
        background: #fff;
        border: 0;
        bottom: 0;
        box-shadow: 6px 0 32px -8px rgba(12, 22, 30, 0.45);
        display: flex !important;
        flex-direction: column;
        left: 0;
        margin: 0;
        max-width: 86vw;
        overflow-y: auto;
        position: fixed;
        right: auto;
        top: 0;
        transform: translateX(-100%);
        transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
        visibility: hidden;
        width: 304px;
        z-index: 1100;
        -webkit-overflow-scrolling: touch;
    }

    body.suit-drawer-open #suit-left {
        transform: translateX(0);
        visibility: visible;
    }

    .suit-drawer-scrim {
        background: rgba(10, 18, 24, 0.5);
        inset: 0;
        opacity: 0;
        position: fixed;
        transition: opacity 0.26s ease;
        z-index: 1090;
        pointer-events: none;
    }

    body.suit-drawer-open .suit-drawer-scrim {
        opacity: 1;
        pointer-events: auto;
    }

    body.suit-drawer-open {
        overflow: hidden;
    }

    /* Sections stagger in behind the panel slide -- one orchestrated reveal. */
    body.suit-drawer-open #suit-left > * {
        animation: suit-drawer-in 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    body.suit-drawer-open #suit-left > :nth-child(2) { animation-delay: 0.04s; }
    body.suit-drawer-open #suit-left > :nth-child(3) { animation-delay: 0.08s; }
    body.suit-drawer-open #suit-left > :nth-child(4) { animation-delay: 0.12s; }
    body.suit-drawer-open #suit-left > :nth-child(5) { animation-delay: 0.16s; }

    @keyframes suit-drawer-in {
        from { opacity: 0; transform: translateX(-10px); }
        to { opacity: 1; transform: translateX(0); }
    }

    .suit-drawer__head {
        align-items: center;
        background-color: #14232b;
        background-image: linear-gradient(135deg, #0f1a20, #1c3a45 55%, #2f5f70);
        display: flex;
        flex: 0 0 auto;
        gap: 10px;
        justify-content: space-between;
        padding: 10px 10px 10px 18px;
    }

    .suit-drawer__title {
        color: #fff;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.4px;
        line-height: 1.25;
        text-transform: uppercase;
    }

    .suit-drawer__close {
        align-items: center;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 10px;
        color: #fff;
        cursor: pointer;
        display: flex;
        flex-shrink: 0;
        font-size: 22px;
        height: 44px;
        justify-content: center;
        line-height: 1;
        padding: 0;
        width: 44px;
    }

    .suit-drawer__close:hover,
    .suit-drawer__close:focus {
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
    }

    /* Relocated widgets: lease switcher / prime rate / acting-as banner. These are all
       styled for the dark header bar (white text, translucent fills), so the block keeps
       the head's dark treatment rather than restyling each widget for a light panel. */
    .suit-drawer__context:not(:empty) {
        background-color: #14232b;
        background-image: linear-gradient(135deg, #0f1a20, #1c3a45 55%, #2f5f70);
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
        gap: 10px;
        /* Symmetric: 4px/16px left the widget sitting visibly high in the block. */
        padding: 12px 16px;
    }

    /* #suit-left is a light panel, so its dark text colour cascades in and makes these
       widgets unreadable on the dark block. They were authored for the dark header bar. */
    .suit-drawer__context,
    .suit-drawer__context strong,
    .suit-drawer__context a {
        color: #fff;
    }

    .suit-drawer__context .font-disabled {
        color: rgba(255, 255, 255, 0.62);
    }

    /* Widgets float inside the header row; in the drawer they stack full-width. */
    .suit-drawer__context > * {
        float: none !important;
        height: auto !important;
        margin: 0 !important;
        white-space: normal;
    }

    /* These widgets carry a border-left separating them from their neighbours in the header
       row; stacked in the drawer it reads as a stray vertical line. Their own horizontal
       padding is also dropped so they line up with the drawer's 16px gutter (and therefore
       with the menu items below). The prime-rate widget sets its border inline, hence the
       !important. */
    .suit-drawer__context .lsw,
    .suit-drawer__context .js-header-widget {
        border-left: 0 !important;
        padding-left: 0;
        padding-right: 0;
    }

    .suit-drawer__context .tp-acting-banner {
        border-left: 0;
        border-radius: 8px;
        padding: 8px 12px;
    }

    /* Nav rows keep Suit's desktop sizing (29px tall, 12px text) which is both under the
       touch minimum and visibly slighter than the account rows below, making the two blocks
       look like they belong to different designs. Scale them for touch here so the whole
       drawer shares one rhythm: 44px rows, 14px label, 18px icon column on the 16px gutter. */
    #suit-left ul li > a {
        align-items: center;
        display: flex;
        font-size: 14px;
        padding: 6px 16px;
    }

    #suit-left ul li > a > i {
        flex-shrink: 0;
        margin: 0 12px 0 0;
        text-align: center;
        transition: transform 0.18s ease;
        width: 18px;
    }

    /* Submenus are a hover flyout on desktop, which touch can never open -- so in the drawer
       they become an inline accordion instead (admin.js turns a parent tap into a toggle).
       No destination is lost: each parent's href duplicates its own first child.

       suit.css's ".left-nav > ul > li:not(.active):hover > ul" must be neutralised first:
       a tap on a touch device leaves a sticky :hover, so that rule pops the absolutely
       positioned flyout (left:180px) open and it stays open regardless of the accordion
       state -- which is what made repeated taps appear to break the menu. */
    #suit-left .left-nav > ul > li:hover > ul {
        display: none;
    }

    /* Declared after the rule above, and the :hover variant out-specifies it, so an open
       item stays open while the pointer is still on it. */
    #suit-left .left-nav > ul > li.is-open > ul,
    #suit-left .left-nav > ul > li.is-open:hover > ul {
        background: rgba(15, 26, 32, 0.035);
        display: block;
        left: auto;
        /* The flyout rule also carries margin-top:-30px / margin-right:-250px to offset the
           popout. Left in place they drag the submenu up over its own parent row, so the
           margins must be reset too -- not just position and display. */
        margin: 0;
        position: static;
        width: auto;
    }

    #suit-left ul li.is-open > a > i.icon-chevron-right {
        transform: rotate(90deg);
    }

    /* Suit colours submenu links as plain anchors (blue); neutralise them so they read as
       menu rows continuing the parent list rather than body links. */
    #suit-left ul li > ul > li > a {
        color: #4a5560;
        font-size: 13.5px;
        padding-bottom: 4px;
        /* One level in from the parent's label column (16px gutter + 18px icon + 12px gap
           = 46px), so children read as nested rather than as siblings of their parent. */
        padding-left: 62px;
        padding-top: 4px;
    }

    #suit-left ul li > ul > li > a:hover,
    #suit-left ul li > ul > li > a:focus {
        background: rgba(15, 26, 32, 0.05);
        color: #1f2d38;
    }

    /* margin-top:auto pins this to the bottom when the menu is short (tenant portal, 3
       items); position:sticky keeps it on screen when the menu is long enough to scroll
       (staff admin, 13 items) instead of stranding Log out below the fold. #suit-left is
       the scroll container, so bottom:0 sticks against it. */
    .suit-drawer__account:not(:empty) {
        margin-top: auto;
        background: #f4f7f9;
        border-top: 1px solid #e2e7eb;
        bottom: 0;
        flex: 0 0 auto;
        padding: 13px 16px 14px;
        position: sticky;
    }

    /* "Welcome, <name>." is context, not an action -- demote it to a small muted caption so
       the two actions below read as the content of this block. */
    .suit-drawer__account #user-tools {
        color: #7a848e;
        display: block !important;
        float: none;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.6px;
        line-height: 1.4;
        margin: 0;
        max-width: none;
        padding: 0;
        text-shadow: none;
        text-transform: uppercase;
    }

    .suit-drawer__account #user-tools strong {
        color: #56616c;
        font-weight: 700;
    }

    /* Negative horizontal margin bleeds the rows to the block's edges, so each link's own
       12px padding lands its text back on the 16px gutter -- aligned with "Welcome, ..."
       above and the menu items above that. Without it the links sit visibly indented. */
    .suit-drawer__account #user-tools .user-links {
        display: flex;
        flex-direction: column;
        float: none;
        gap: 0;
        margin: 6px -12px 0;
    }

    .suit-drawer__account #user-tools .user-links .separator {
        display: none;
    }

    /* Same row shape as the nav above: 44px tall, 14px label, 18px icon column landing on
       the 16px gutter (12px padding + the -12px bleed on .user-links). */
    .suit-drawer__account #user-tools a {
        align-items: center;
        border-radius: 8px;
        color: #1f2d38;
        display: flex;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0;
        padding: 6px 12px;
        text-decoration: none;
        text-transform: none;
    }

    /* Icons via mask rather than background-image so they inherit the link's colour. */
    .suit-drawer__account #user-tools .user-links a::before {
        background-color: currentColor;
        content: "";
        flex-shrink: 0;
        height: 17px;
        margin-right: 12px;
        opacity: 0.75;
        width: 18px;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 17px 17px;
        mask-size: 17px 17px;
    }

    .suit-drawer__account #user-tools .user-links a[href*="password"]::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
    }

    .suit-drawer__account #user-tools .user-links a[href*="logout"]::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
    }

    /* Hairline between the actions -- :not(:first-of-type) rather than "a + a" because the
       hidden <span class="separator">|</span> sits between them and breaks the sibling
       combinator. */
    .suit-drawer__account #user-tools .user-links a:not(:first-of-type) {
        border-top: 1px solid rgba(31, 45, 56, 0.08);
        border-radius: 0;
    }

    .suit-drawer__account #user-tools a:hover,
    .suit-drawer__account #user-tools a:focus {
        background: #e6edf2;
    }

    #changelist-form .results,
    .inline-group {
        max-width: 100%;
        overflow-x: auto;
    }

    .inner-two-columns .inner-right-column {
        float: unset;
        width: unset;
    }

    .inner-two-columns .inner-right-column.fixed {
        position: static;
    }

    .inner-two-columns .inner-center-column {
        margin-right: unset;
    }

    .submit-row button {
        height: 50px;
    }

    .submit-row button[name="_addanother"] {
        display: none;
    }

    .form-horizontal .control-group .control-label {
        min-width: unset;
    }

    .dashboard #content #content-main {
        float: unset;
        display: table;
        margin-left: auto;
        margin-right: auto;
    }

    .admin-logo {
        width: 70px;
    }
}

line.volume-line {
    stroke: #000;
    stroke-dasharray: 2, 1;
    stroke-width: 1;
    stroke-opacity: 0.7;
}

polygon.volume-line {
    stroke: #fff;
    stroke-width: 1;
    fill-opacity: 0.85;
    stroke-opacity: 0.7;
}

.env-warnings {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 5000;
    text-align: right;
}

.env-warning {
    color: white;
    background-color: #d9534f;
    text-align: center;
    font-size: 10px;
    visibility: visible;
    border-radius: 10px;
    text-shadow: none;
    line-height: 2;
    font-weight: normal;
    font-family: Verdana, serif;
    padding: 2px 10px;
    display: inline-block;
}

#toggleAutoFillPromptBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px;
    cursor: pointer;
    z-index: 99;
}

#productQtyAutoFillContainer {
    position: fixed;
    bottom: 70px; /* Adjust based on button size */
    right: 20px;
    width: fit-content;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 5px;
    display: none; /* Hide by default */
    border: 1px solid #dbdbdb;
    text-align: end;
    z-index: 100;
}

.text-danger {
    color: red !important;
}

/* Hide delete icon for all FK dropdowns in admin */
.delete-related img {
    display: none !important;
}

.field-url {
    max-width: 400px;
    word-wrap: break-word;
}

#utilities-group .change-related,
#utilities-group .add-related {
    display: none;
}

ul li label {
    display: inline-block;
}

.modal {
    width: unset;
    margin-left: unset;
    left: 50%;
    transform: translateX(-50%);
    background: unset!important;
    border: 0!important;
    box-shadow: none!important;
}

.modal-dialog {
    max-width: 95vw;
}

.dry-ux-overlay-content {
    padding: 15px!important;
}

.inline-group.file-dump tr.add-row {
    display: none;
}

#user-tools {
    display: flex;
}

.notyf-success {
    background-color: rgb(61, 199, 99);
}

.notyf-error {
    background-color: rgb(237, 61, 61);
}