/*!
 * Custom style overrides
 */

html {
    font-family: 'Inter', sans-serif;
}

body {
    background-color: #f0f1f5;
    color: #333;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
}

input:-webkit-autofill {
    background-color: white !important;
}

.form-control:focus {
    border-color: #cccccc;
    box-shadow: none;
}

input[class="form-control"],
select[class="form-control"] {
    height: 45px !important;
}

.bg-login-image {
    background: url(https://s3.us-east-2.amazonaws.com/app.parkingsnap.com/Office_Man_Woman_Laptop.jpg);
    background-position: -130px;
    background-size: cover;
}

.bg-register-image {
    background: url(https://s3.us-east-2.amazonaws.com/app.parkingsnap.com/Towing_2.jpg);
    background-position: center;
    background-size: cover;
}

.bg-password-image {
    background: url(https://s3.us-east-2.amazonaws.com/app.parkingsnap.com/Towing_2.jpg);
    background-position: center;
    background-size: cover;
}

.topbar {
    height: 60px;
}

a {
    color: #337ab7;
}

.fa-half {
    font-size: 1.5em;
}

.btn {
    font-size: 0.9rem;
    white-space: normal;
}

.btn-default:hover {
    background-color: #e6e6e6;
}

#property-settings-submit {
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

#property-settings-submit:hover,
#property-settings-submit:focus {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}

.btn-info {
    background-color: #5bc0de;
    border-color: #46b8da;
}

.btn-xs,
.btn-group-xs>.btn {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

.custom-select-xs {
    padding: 0.15rem 1.75rem 0.15rem 0.5rem;
    font-size: 12px;
    height: calc(1.5em + 0.3rem + 2px);
    line-height: 1.5;
    border-radius: 3px;
}

.sidebar-light {
    border-right: 3px solid #5e5e5e;
    background-color: #fff;
}

.sidebar-light .sidebar-brand {
    color: #000000;
}

.sidebar-light hr.sidebar-divider {
    border-top: 1px solid #eaecf4;
}

.sidebar-light .sidebar-heading {
    color: #000000;
}

.sidebar-light .nav-item .nav-link {
    color: #000000;
}

.sidebar-light .nav-item .nav-link i {
    color: #000000;
}

.sidebar-light .nav-item .nav-link:active,
.sidebar-light .nav-item .nav-link:focus,
.sidebar-light .nav-item .nav-link:hover {
    color: #000000;
}

.sidebar-light .nav-item .nav-link:active i,
.sidebar-light .nav-item .nav-link:focus i,
.sidebar-light .nav-item .nav-link:hover i {
    color: #000000;
}

.sidebar-light .nav-item .nav-link[data-toggle="collapse"]::after {
    color: #000000;
}

.sidebar .nav-item.active {
    background-color: #f4f4f4;
}

.sidebar .nav-item.active .nav-link {
    font-weight: normal;
}

.sidebar-light .nav-item.active .nav-link {
    color: #000000;
}

.sidebar-light .nav-item.active .nav-link i {
    color: #000000;
}

.sidebar-light #sidebarToggle {
    background-color: #eaecf4;
}

.sidebar-light #sidebarToggle::after {
    color: #000000;
}

.sidebar-light #sidebarToggle:hover {
    background-color: #dddfeb;
}

.sidebar * .collapse-inner {
    border: 2px solid #333333;
    background-color: #fff;
}

/* The sidebar flyout (sb-admin-2 ships it at z-index 1) has to paint above page
   content, because on phone widths the sidebar collapses to an icon rail and this
   submenu opens as a floating card OVER the dashboard.

   1000, not 4: it has to clear everything it can overlap, and the page is full of
   higher stackers than the 3 it used to sit at — the pinned first-column header
   cell below (z-index 3, which tied and won on DOM order, hiding a menu item behind
   the word "Vehicle" — Asana 1217190816043638) and the inline `z-index: 100` on
   controls like dashboard.php's clear-search X, of which there are ~126 across the
   app. 1000 is the Bootstrap dropdown convention and still sits below the FAB
   (1029-1031), the org-settings save bar (1030), modals, ui-autocomplete (1100)
   and the thumbnail preview (9999). */
.sidebar .nav-item .collapse {
    z-index: 1000;
}

input:-webkit-autofill {
    background-color: white !important;
}

.form-control:focus {
    border-color: #cccccc;
    box-shadow: none;
}

.modal-header {
    background-color: #333333;
    color: #fff;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.btn-default {
    border-width: 3px;
    border-color: #5e5e5e;
}

ul.ui-autocomplete {
    z-index: 1100;
}

div.terms {
    width: 100%;
    height: 200px;
    border: 1px solid #ccc;
    background: #f2f2f2;
    padding: 12px;
    overflow: auto;
}

button.close {
    opacity: 1;
    color: #fff;
    text-shadow: none;
    font-size: 27px;
}

button.close:hover {
    color: #fff;
    opacity: 1;
    text-shadow: none;
}

.orange-row {
    /*background-color: #f89b1d !important;*/
    background: rgba(248, 155, 29, 0.4) !important;
}

.yellow-row {
    /*background-color: #fcff1f !important;*/
    background: rgba(252, 255, 31, 0.4) !important;
}

input.form-control {
    border: 3px solid #5e5e5e;
    height: 45px;
}

input.form-control.small {
    border: 3px solid #5e5e5e;
    height: 35px;
}

textarea.form-control {
    border: 3px solid #5e5e5e;
}

textarea.expanding-form-control {
    overflow: hidden !important;
    padding-top: 10px !important;
    padding-bottom: 25px !important;
}

select.form-control {
    border: 3px solid #5e5e5e;
}

.input-group-btn>.btn {
    padding: 4px 12px;
}

.input-group-addon {
    padding: 3px 12px;
    border: 3px solid #5e5e5e;
}

.table {
    border: 1px solid #5e5e5e;
    border-radius: 5px;
    color: #333;
}

.table>tbody>tr>td {
    border-top: 1px solid #5e5e5e;
}

.table>thead>tr>th {
    border-bottom: none;
    padding-top: 14px;
    padding-bottom: 14px;
}

.table th,
.table td {
    border-top: 1px solid #000000;
}

.btn-purple {
    color: #fff;
    background-color: #551a8b;
    border-color: #551a8b;
}

.btn-purple:hover,
.btn-purple:focus,
` .btn-purple:active,
.btn-purple.active,
.open .dropdown-toggle.btn-purple {
    color: #fff;
    background-color: #341056;
    border-color: #341056;
}

.btn-purple:active,
.btn-purple.active,
.open .dropdown-toggle.btn-purple {
    background-image: none;
}

.btn-purple.disabled,
.btn-purple[disabled],
fieldset[disabled] .btn-purple,
.btn-purple.disabled:hover,
.btn-purple[disabled]:hover,
fieldset[disabled] .btn-purple:hover,
.btn-purple.disabled:focus,
.btn-purple[disabled]:focus,
fieldset[disabled] .btn-purple:focus,
.btn-purple.disabled:active,
.btn-purple[disabled]:active,
fieldset[disabled] .btn-purple:active,
.btn-purple.disabled.active,
.btn-purple[disabled].active,
fieldset[disabled] .btn-purple.active {
    background-color: #551a8b;
    border-color: #551a8b;
}

.btn-purple .badge {
    color: #551a8b;
    background-color: #fff;
}

.btn-light-green {
    color: #fff;
    background-color: #99b433;
    border-color: #99b433;
}

.btn-light-green:hover,
.btn-light-green:focus,
.btn-light-green:active,
.btn-light-green.active,
.open .dropdown-toggle.btn-light-green {
    color: #fff;
    background-color: #788c2e;
    border-color: #788c2e;
}

.btn-light-green:active,
.btn-light-green.active,
.open .dropdown-toggle.btn-light-green {
    background-image: none;
}

.btn-light-green.disabled,
.btn-light-green[disabled],
fieldset[disabled] .btn-light-green,
.btn-light-green.disabled:hover,
.btn-light-green[disabled]:hover,
fieldset[disabled] .btn-light-green:hover,
.btn-light-green.disabled:focus,
.btn-light-green[disabled]:focus,
fieldset[disabled] .btn-light-green:focus,
.btn-light-green.disabled:active,
.btn-light-green[disabled]:active,
fieldset[disabled] .btn-light-green:active,
.btn-light-green.disabled.active,
.btn-light-green[disabled].active,
fieldset[disabled] .btn-light-green.active {
    background-color: #99b433;
    border-color: #99b433;
}

.btn-light-green .badge {
    color: #99b433;
    background-color: #fff;
}

.btn-white-blue {
    color: #136bad;
    background-color: #fff;
    border-color: #136bad;
}

.btn-white-blue:hover,
.btn-white-blue:focus,
.btn-white-blue:active,
.btn-white-blue.active,
.open .dropdown-toggle.btn-white-blue {
    color: #136bad;
    background-color: #fff;
    border-color: #136bad;
}

.btn-white-blue:active,
.btn-white-blue.active,
.open .dropdown-toggle.btn-white-blue {
    background-image: none;
}

.btn-white-blue.disabled,
.btn-white-blue[disabled],
fieldset[disabled] .btn-white-blue,
.btn-white-blue.disabled:hover,
.btn-white-blue[disabled]:hover,
fieldset[disabled] .btn-white-blue:hover,
.btn-white-blue.disabled:focus,
.btn-white-blue[disabled]:focus,
fieldset[disabled] .btn-white-blue:focus,
.btn-white-blue.disabled:active,
.btn-white-blue[disabled]:active,
fieldset[disabled] .btn-white-blue:active,
.btn-white-blue.disabled.active,
.btn-white-blue[disabled].active,
fieldset[disabled] .btn-white-blue.active {
    background-color: #fff;
    border-color: #fff;
}

.btn-white-blue .badge {
    color: #fff;
    background-color: #136bad;
}

.yes-toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.yes-toggle-switch.payment-option {
    margin-bottom: 0px;
    top: 6px;
}

.yes-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.yes-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ed2024;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

.yes-toggle-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

.yes-toggle-switch input:checked+.yes-toggle-slider {
    background-color: #489c48;
}

.yes-toggle-switch input:focus+.yes-toggle-slider {
    box-shadow: 0 0 1px #489c48;
}

.yes-toggle-switch input:checked+.yes-toggle-slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}


/* Rounded sliders */

.yes-toggle-slider.round {
    border-radius: 24px;
}

.yes-toggle-slider.round:before {
    border-radius: 50%;
}

.navbar {
    background-color: #333333;
    color: #fff;
    padding: 0px;
}

.topbar .nav-item .nav-link {
    padding: 0px;
}

.topbar.navbar-light .navbar-nav .nav-item .nav-link {
    color: #fff;
}

footer {
    background-color: #333333;
    color: #fff;
}

footer a,
footer a:hover {
    color: #fff;
}

.page-header {
    border-bottom: 3px solid #ed2024;
    width: 100%;
    padding-bottom: 5px;
}

.no-arrow-dropdown::after {
    display: none !important;
}

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

h3,
.h3 {
    font-size: 1.50rem;
}

h4,
.h4 {
    font-size: 1.15rem;
}

.table-info,
.table-info>th,
.table-info>td {
    background-color: #daedf6 !important;
}

.table-success,
.table-success>th,
.table-success>td {
    background-color: #dff0d9 !important;
}

.table-danger,
.table-danger>th,
.table-danger>td {
    background-color: #f2dede !important;
}

.nav-borders .nav-link {
    color: #69707a;
    border-bottom-width: 0.125rem;
    border-bottom-style: solid;
    border-bottom-color: transparent;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0;
    padding-right: 0;
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .nav-borders .nav-link.active {
    color: #002b4e;
    border-bottom-color: #002b4e;
  }
  .nav-borders .nav-link.disabled {
    color: #c5ccd6;
  }
  .nav-borders.flex-column .nav-link {
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    margin-right: 0;
    margin-left: 0;
    border-bottom: none;
    border-right-width: 0.125rem;
    border-right-style: solid;
    border-right-color: transparent;
  }
  .nav-borders.flex-column .nav-link.active {
    border-right-color: #002b4e;
  }


/* Dropdown menu fix for iOS */

.table-responsive {
    -webkit-overflow-scrolling: auto;
}

/* iOS Safari modal scrolling fix */
.modal-body {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
}

/* Ensure modal body can scroll on iOS */
@supports (-webkit-touch-callout: none) {
    /* iOS specific */
    .modal.show .modal-body {
        overflow-y: scroll;
        max-height: calc(100vh - 200px);
    }
    
    /* Prevent body scroll when modal is open */
    body.modal-open {
        position: fixed;
        width: 100%;
        overflow: hidden;
    }
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item.active {
    background-color: #eaecf3;
    color: inherit !important;
}

.red-input {
    border-color: #e74a3b !important;
}

.icon-container {
    width:60px;
    height:60px;
}
.icon-container .autowidth {
    display: inline-block;
    width: 100%;
    height: 100%;
}

.square {
    width: 100%;
    height: 0;
    padding-top: 100%; /* Maintain aspect ratio (1:1) */
    border: 2px dashed #000; /* Dashed border */
    position: relative; /* For absolute positioning of content */
    cursor: pointer; /* Change cursor to pointer */
}

.square .file-upload {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer; /* Change cursor to pointer */
}

.square .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
}

.select2-container {
    position: relative;
    height: 45px;
}

.select2-container--bootstrap .select2-selection--single {
    height: 45px;
    border: 3px solid #5e5e5e;
}

.select2-container--bootstrap .select2-selection--single:focus {
    border: 3px solid #5e5e5e;
}

.select2-container--bootstrap.select2-container--focus .select2-selection, .select2-container--bootstrap.select2-container--open .select2-selection {
    border: 3px solid #5e5e5e;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.select2-container--bootstrap .select2-dropdown {
    border: 3px solid #5e5e5e;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
    padding: 4px;
}

.StripeElement {
    line-height: 1.429 !important;
    padding-top: 10px !important;
    border: 3px solid #5e5e5e;
    height: 45px;
}

@media (min-width: 768px) {
    .sidebar .nav-item .nav-link span {
        font-size: 0.80rem;
    }
}


/* Inline form customizations */

@media (min-width: 576px) {
    .form-inline label {
        display: flex;
        align-items: center;
        justify-content: left;
        margin-bottom: 0
    }
    .form-inline .form-group {
        display: flex;
        flex: 0 0 auto;
        flex-flow: row wrap;
        align-items: center;
        margin-bottom: 0
    }
    .form-inline .form-control {
        display: inline-block;
        vertical-align: middle
    }
    .form-inline .form-control-plaintext {
        display: inline-block
    }
    .form-inline .custom-select,
    .form-inline .input-group {
        width: auto
    }
    .form-inline .form-check {
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        padding-left: 0
    }
    .form-inline .form-check-input {
        position: relative;
        flex-shrink: 0;
        margin-top: 0;
        margin-right: .25rem;
        margin-left: 0
    }
    .form-inline .custom-control {
        align-items: center;
        justify-content: center
    }
    .form-inline .custom-control-label {
        margin-bottom: 0
    }
}


/* Custom sidebar customizations */

@media (min-width: 768px) {
    .sidebar .nav-item .nav-link {
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .sidebar .nav-item .nav-link i {
        width: 20px;
        text-align: center;
    }
}

@media (orientation:landscape) {
    .hide-on-landscape {
        display: none;
    }
}

@media (orientation:portrait) {
    .hide-on-portrait {
        display: none;
    }
}

/* Sortable column headers for permits tables */
th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

th.sortable:hover {
    background-color: rgba(0, 0, 0, 0.075);
}

th.sortable i.fas {
    margin-left: 5px;
    font-size: 0.75rem;
    opacity: 0.6;
}

th.sorted-asc i.fas,
th.sorted-desc i.fas {
    opacity: 1;
}

th.sorted-asc,
th.sorted-desc {
    background-color: rgba(0, 123, 255, 0.1);
}

/* Responsive: Hide sort icons on very small screens */
@media (max-width: 576px) {
    th.sortable i.fas {
        display: none;
    }
}

/* Mobile optimization for permit action buttons */
@media (max-width: 768px) {
    /* Make action buttons smaller and more compact on mobile */
    table td .btn-xs {
        padding: 6px 8px !important;
        font-size: 12px !important;
        margin-right: 3px !important;
        margin-bottom: 3px !important;
        min-width: 32px !important;
    }
    
    /* Ensure icons are appropriately sized */
    table td .btn-xs i {
        font-size: 13px !important;
    }
    
    /* Prevent wrapping and ensure buttons stay in one row */
    table td[style*="text-align: right"] {
        white-space: nowrap !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
}

/* Extra small devices - even more compact */
@media (max-width: 480px) {
    table td .btn-xs {
        padding: 5px 6px !important;
        font-size: 11px !important;
        margin-right: 2px !important;
        margin-bottom: 2px !important;
        min-width: 28px !important;
    }
    
    table td .btn-xs i {
        font-size: 12px !important;
    }
}

/* Login page specific styling */
#page-top.login-page form.user .form-control-user {
    padding: 1.75rem 1rem;
    font-size: 0.85rem;
}

#page-top.login-page .login-logo {
    max-width: 68%;
}

#page-top.login-page .btn-user {
    font-size: 1rem;
    padding: 0.85rem 1rem;
}

#page-top.login-page .text-center a {
    font-size: 1rem;
}

/* Permits table row spacing improvements */
.table.table-hover tbody td {
    padding-top: 12px;
    padding-bottom: 12px;
    vertical-align: middle;
}

.table.table-hover tbody tr {
    line-height: 1.6;
}

/* Ensure action buttons are vertically centered with increased row height */
.table.table-hover tbody td[style*="text-align: right"] {
    vertical-align: middle;
}

/* Violation photo thumbnails - improved styling */
.violation-thumbnail {
    border: none;
    height: 25px;
    width: 25px;
    object-fit: cover;
    object-position: center;
    margin-right: 4px;
    border-radius: 4px !important;
    transition: transform 0.2s ease;
    cursor: pointer;
    display: inline-block;
}

.violation-thumbnail:hover {
    transform: scale(1.1);
}

/* Keep violation photo thumbnails in a single horizontal row instead of
   wrapping/stacking vertically in a narrow Photos column (Asana 1212696969696338).
   The table itself scrolls horizontally (.table-responsive), so the strip
   never forces a broken vertical stack on mobile. */
td:has(.violation-thumbnail) {
    white-space: nowrap;
}

/* Mobile: wide impound/violation tables overflow the phone, so the identifying
   first column (Vehicle) used to scroll out of view. Pin it in place while the
   rest scrolls sideways, with a soft edge shadow as a scroll cue (opt-in via
   .table-sticky-first; desktop unaffected). Asana 1212696969696338.

   The sticky cell MUST paint its own opaque background: an earlier version of this
   block assumed the Bootstrap .table-info/.table-success contextual classes covered
   every row, which is false — many rows carry no contextual class at all and get
   only .table-striped's translucent rgba(0,0,0,.05), so the columns scrolling
   underneath showed through the pinned cell. Each background below is the flattened
   equivalent of the row tint it sits on, so the pinned cell and the rest of its row
   stay the same colour across the seam. */
@media (max-width: 767.98px) {
    .table-sticky-first th:first-child,
    .table-sticky-first td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.10);
        min-width: 124px;
    }

    /* Paint the whole header row, not just the pinned cell. Painting only
       th:first-child left a white box floating against the bare band the
       scrolled-away headers vacated. */
    .table-sticky-first thead th {
        background-color: #eef1f5;
    }
    .table-sticky-first thead th:first-child {
        z-index: 3;
    }

    /* Opaque pinned-cell backgrounds, matched to each row state. */
    .table-sticky-first tbody td:first-child {
        background-color: #ffffff;
    }
    .table-sticky-first.table-striped tbody tr:nth-of-type(odd) td:first-child {
        background-color: #f2f2f2;
    }
    .table-sticky-first tbody tr.table-info td:first-child {
        background-color: #daedf6;
    }
    /* .table-success and .table-danger are already forced opaque by the app-level
       overrides above (both carry !important), so these two only matter if that
       ever changes. They deliberately repeat those exact values rather than
       Bootstrap's defaults. */
    .table-sticky-first tbody tr.table-success td:first-child {
        background-color: #dff0d9;
    }
    .table-sticky-first tbody tr.table-danger td:first-child {
        background-color: #f2dede;
    }
    .table-sticky-first tbody tr.table-warning td:first-child {
        background-color: #fceec9;
    }
    .table-sticky-first tbody tr.yellow-row td:first-child {
        background-color: #feffa5;
    }
    .table-sticky-first tbody tr.orange-row td:first-child {
        background-color: #fad7a5;
    }

    /* Centre cell content. With top alignment, a row whose Vehicle name wrapped to
       two or three lines left its action buttons stranded at the top with a gap
       underneath, which read as broken rather than as a taller row. */
    .table-sticky-first tbody td {
        vertical-align: middle;
    }

    /* Reserve enough width for the widest action cell. Rows carrying a fifth button
       (e.g. Processed + view + Tow Ticket + Tow Report) were wider than the column
       the table computed, so their buttons spilled past the table's right border and
       that border then cut a vertical line straight through the row content. */
    .table-sticky-first th:last-child,
    .table-sticky-first td:last-child {
        min-width: 275px;
    }
}

/* Mobile add floating action button (Asana 1214352392183198).
   A round "+" in the bottom-right that opens the same add menu as the desktop
   header "+". It sits above page content but below Bootstrap modals (backdrop
   1040) so it never floats over an open modal, and the sb-admin-2 scroll-to-top
   button is lifted clear of it so the two stack rather than overlap.
   It replaced a pill labelled "Add Violation", which offered only that one
   action and so pushed people into filing violations when they wanted a pending
   enforcement, a booting enforcement or a parking ticket. */
.fab-add-violation {
    position: fixed;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    z-index: 1030;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: #007bff;
    color: #fff;
    font-size: 1.35rem;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
    transition: transform .18s ease, background-color .18s ease;
}
.fab-add-violation:hover,
.fab-add-violation:focus {
    background-color: #0069d9;
    color: #fff;
    text-decoration: none;
    outline: none;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32);
}
.fab-add-violation:focus-visible {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32), 0 0 0 3px rgba(0, 123, 255, 0.45);
}
.fab-add-violation:active {
    background-color: #0062cc;
}

/* Open state: the "+" turns into a close affordance. */
.fab-add-wrap.is-open .fab-add-violation {
    transform: rotate(45deg);
}

.fab-add-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1029;
    background-color: rgba(0, 0, 0, 0.35);
}

/* The menu expands upward from the button. max-height keeps a long list usable
   on a short screen instead of running off the top. */
.fab-add-menu {
    position: fixed;
    right: 1rem;
    bottom: calc(4.75rem + env(safe-area-inset-bottom));
    z-index: 1031;
    display: flex;
    flex-direction: column;
    min-width: 15rem;
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 9rem);
    overflow-y: auto;
    padding: .5rem 0;
    border-radius: .5rem;
    background-color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30);
}
.fab-add-menu-item {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: .75rem 1.25rem;
    border: 0;
    background: none;
    color: #212529;
    font-size: 1rem;
    line-height: 1.3;
    text-align: left;
    white-space: normal;
}
.fab-add-menu-item:hover,
.fab-add-menu-item:focus {
    background-color: #007bff;
    color: #fff;
    outline: none;
}
.fab-add-menu-item:active {
    background-color: #0062cc;
    color: #fff;
}

@media (max-width: 767.98px) {
    /* keep the scroll-to-top control clear of the FAB */
    .scroll-to-top {
        bottom: calc(5.25rem + env(safe-area-inset-bottom));
    }

    /* On phones the FAB is the single add entry point, so the header "+" would be
       a duplicate. This MUST stay pinned to #add-violation-button, the exact same
       seed the FAB script uses: hiding any header add menu instead would strip the
       only add control from the ten pages that have such a menu but no
       add-violation item (users, the tasks pages, properties-add, enforcements and
       so on), where no FAB comes along to replace it. */
    h1.page-header .btn-group:has(> .dropdown-menu #add-violation-button) {
        display: none;
    }
}

/* Wrapper around a photo's remove control. Deliberately NOT Bootstrap's .d-block:
   that is display:block!important, which overrode BOTH the server-rendered
   "display: none" on a slot holding no photo AND jQuery's .hide() after a removal.
   The result was a trash button under every slot whether or not it held a photo,
   and a button that stayed put after its photo was deleted. Plain display:block
   loses to an inline style, which is exactly what both paths rely on.
   Asana 1212890895597126. */
.remove-photo-wrap {
    display: block;
}

/* Icon-only remove/trash button — comfortable tap target */
.remove-photo-btn {
    min-width: 44px;
    min-height: 44px;
    padding: .375rem .75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.remove-photo-btn i {
    font-size: 1rem;
}

/* Storage Lot mobile sub-nav — horizontal scrolling pills (replaces overlay dropdown) */
.storage-tab-pills {
    display: flex;
    flex-wrap: nowrap;
    gap: .375rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .25rem;
}
.storage-tab-pills .btn {
    flex: 0 0 auto;
}

/* Hover preview container for thumbnails */
.thumbnail-preview {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    border: 3px solid #5e5e5e;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    background: white;
    padding: 4px;
    display: none;
}

.thumbnail-preview img {
    max-width: 400px;
    max-height: 400px;
    border-radius: 6px;
    display: block;
}

/* Mobile-specific Fancybox toolbar improvements */
@media (max-width: 768px) {
    /* Make toolbar more prominent on mobile */
    .fancybox-toolbar {
        background: rgba(0, 0, 0, 0.8) !important;
        padding: 12px 8px !important;
        border-bottom: 2px solid rgba(255, 255, 255, 0.2) !important;
    }
    
    /* Increase button sizes for easier tapping */
    .fancybox-button {
        width: 48px !important;
        height: 48px !important;
        padding: 12px !important;
    }
    
    /* Make button icons larger */
    .fancybox-button svg {
        width: 24px !important;
        height: 24px !important;
    }
    
    /* Add more visual emphasis to close button */
    .fancybox-button--close {
        background: rgba(255, 59, 48, 0.9) !important;
        border-radius: 8px !important;
        margin-right: 4px !important;
    }
    
    .fancybox-button--close:hover,
    .fancybox-button--close:focus {
        background: rgba(255, 59, 48, 1) !important;
    }
    
    /* Make other buttons more visible */
    .fancybox-button--zoom,
    .fancybox-button--download {
        background: rgba(255, 255, 255, 0.15) !important;
        border-radius: 8px !important;
        margin-right: 4px !important;
    }
    
    .fancybox-button--zoom:hover,
    .fancybox-button--zoom:focus,
    .fancybox-button--download:hover,
    .fancybox-button--download:focus {
        background: rgba(255, 255, 255, 0.25) !important;
    }
    
    /* Add visual indicator that toolbar is interactive */
    .fancybox-toolbar::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 2px;
    }
}

/* ============================================
   MVR FORM STYLING
   ============================================ */

/* Remove gray "disabled" appearance from readonly inputs in MVR tab */
#mvr-tab .form-control[readonly] {
    background-color: #fff;
    border: 3px solid #5e5e5e;
    cursor: default;
}

/* Section background for visual grouping of Owner/Lien columns */
.owner-lien-section {
    background-color: #f8f9fa;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.owner-lien-section h6 {
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
    color: #6c757d;
}

/* Collapsible owner sections */
.owner-section-card {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
}

.owner-section-card .card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-weight: 600;
    color: #495057;
}

.owner-section-card .card-header:hover {
    background-color: #e9ecef;
}

.owner-section-card .card-header .collapse-icon {
    transition: transform 0.2s ease;
    display: inline-block;
    width: 1rem;
    text-align: center;
}

.owner-section-card .card-header[aria-expanded="true"] .collapse-icon {
    transform: rotate(90deg);
}

.owner-section-card .card-body {
    padding: 1.5rem;
}

/* MVR section header styling */
#mvr-tab h5 {
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
}

/* Checkbox styling in MVR tab */
#mvr-tab .checkbox label {
    font-weight: 400;
    color: #495057;
}

/* Ensure proper spacing for MVR form groups */
#mvr-tab .form-group {
    margin-bottom: 1rem;
}

#mvr-tab .form-group label {
    font-weight: 600;
    font-size: 0.875rem;
    color: #495057;
    margin-bottom: 0.375rem;
}

/* ============================================
   ACTION ICON BUTTONS
   ============================================ */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-icon i {
    font-size: 14px;
}

/* Export icon - gray to blue on hover */
.btn-icon-export {
    color: #495057;
}

.btn-icon-export:hover {
    color: #337ab7;
    background-color: rgba(51, 122, 183, 0.1);
}

/* Delete icon - gray to red on hover */
.btn-icon-delete {
    color: #495057;
}

.btn-icon-delete:hover {
    color: #e74a3b;
    background-color: rgba(231, 74, 59, 0.1);
}

/* ============================================
   MODERN SEARCH BAR
   ============================================ */
.search-modern .form-control {
    border: 1px solid #ced4da !important;
    border-radius: 8px 0 0 8px !important;
    height: 42px !important;
}

.search-modern .form-control:focus {
    border-color: #80bdff !important;
    box-shadow: 0 0 0 0.15rem rgba(0,123,255,.15) !important;
}

.search-modern .btn-default {
    border: 1px solid #ced4da !important;
    border-radius: 0 8px 8px 0 !important;
}

.search-modern .input-group-prepend .btn-default {
    border-radius: 8px 0 0 8px !important;
    border-right: none !important;
}

.search-modern .input-group-prepend + .form-control {
    border-radius: 0 !important;
}

/* ============================================
   EMPTY STATES
   ============================================ */
.empty-state {
    text-align: center;
    padding: 40px 20px;
}

.empty-state-icon {
    font-size: 48px;
    color: #c3c7cc;
    margin-bottom: 16px;
}

.empty-state-text {
    color: #6c757d;
    font-size: 14px;
    margin: 0;
}

/* ============================================
   BUSINESS INTELLIGENCE CARDS
   ============================================ */
.bi-card {
    border-left: 4px solid;
}

.bi-card.border-left-primary {
    border-left-color: #4e73df;
}

.bi-card.border-left-success {
    border-left-color: #1cc88a;
}

.bi-card.border-left-info {
    border-left-color: #36b9cc;
}

.bi-card.border-left-warning {
    border-left-color: #f6c23e;
}

.bi-card.border-left-danger {
    border-left-color: #e74a3b;
}

/* ============================================
   REPORT CARDS
   ============================================ */
.report-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 8px;
}

.report-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.report-card-icon {
    text-align: center;
    padding: 12px;
    background-color: #f8f9fc;
    border-radius: 8px;
    display: inline-block;
    width: 100%;
}

.report-card .card-title {
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    min-height: 2.4em;
}

.report-card .card-text {
    font-size: 0.8rem;
    margin-bottom: 1rem;
    min-height: 3em;
}

/* ============================================
   PROPERTIES PAGE ICON BUTTONS
   ============================================ */
.btn-icon-map {
    color: #495057;
}

.btn-icon-map:hover {
    color: #f6c23e;
    background-color: rgba(246, 194, 62, 0.1);
}

.btn-icon-rules {
    color: #1cc88a;
}

.btn-icon-rules:hover {
    color: #17a673;
    background-color: rgba(28, 200, 138, 0.15);
}

.btn-icon-edit {
    color: #495057;
}

.btn-icon-edit:hover {
    color: #337ab7;
    background-color: rgba(51, 122, 183, 0.1);
}

/* View icon - gray to blue on hover (alias for edit) */
.btn-icon-view {
    color: #495057;
}

.btn-icon-view:hover {
    color: #337ab7;
    background-color: rgba(51, 122, 183, 0.1);
}

/* Update icon - gray to green on hover */
.btn-icon-update {
    color: #495057;
}

.btn-icon-update:hover {
    color: #1cc88a;
    background-color: rgba(28, 200, 138, 0.1);
}

/* Remind icon - gray to info blue on hover */
.btn-icon-remind {
    color: #495057;
}

.btn-icon-remind:hover {
    color: #36b9cc;
    background-color: rgba(54, 185, 204, 0.1);
}

/* Process icon - gray to success green on hover */
.btn-icon-process {
    color: #495057;
}

.btn-icon-process:hover {
    color: #1cc88a;
    background-color: rgba(28, 200, 138, 0.1);
}

/* Processed icon - light green */
.btn-icon-processed {
    color: #1cc88a;
}

.btn-icon-processed:hover {
    color: #17a673;
    background-color: rgba(28, 200, 138, 0.15);
}

/* Released icon - gray to warning on hover */
.btn-icon-released {
    color: #495057;
}

.btn-icon-released:hover {
    color: #f6c23e;
    background-color: rgba(246, 194, 62, 0.1);
}

/* Action icon - gray to success green on hover */
.btn-icon-action {
    color: #495057;
}

.btn-icon-action:hover {
    color: #1cc88a;
    background-color: rgba(28, 200, 138, 0.1);
}

/* ============================================
   USERS PAGE — Badge sizing & checkbox hit area
   ============================================ */
.badge-user-type {
    font-size: 0.85em;
}

.user-checkbox,
#select-all-users {
    transform: scale(1.4);
    cursor: pointer;
}

/* ============================================
   PROPERTIES PAGE STRIPED ROWS
   ============================================ */
.table-properties-striped tbody tr:nth-of-type(odd) {
    background-color: #fafafa;
}

.table-properties-striped tbody tr:nth-of-type(even) {
    background-color: #ffffff;
}

/* ============================================
   CONSISTENT TABLE ROW HOVER HIGHLIGHT
   ============================================ */
.table.table-hover tbody tr:hover {
    background-color: #eef3ff !important;
}

/* ============================================
   MODAL SEVERITY — DESTRUCTIVE / OVERRIDE
   Opt in by adding `modal-severity-warning` to the
   outer .modal wrapper. Covers the enforcement-
   override confirm modal and the Option A rollout.
   ============================================ */
.modal-severity-warning .modal-header-warning-icon {
    color: #f0b400;
    margin-right: 0.5rem;
}

.modal-severity-warning .modal-body-warning-block {
    background-color: #fff7e0;
    border-left: 4px solid #f0b400;
    padding: 1rem 1.25rem;
    border-radius: 0.25rem;
}

/* ============================================
   STANDARD STICKY SAVE BAR
   Pilot: Organization Settings (General tab).
   Reusable across pages once approved for rollout.
   ============================================ */
.org-settings-save-bar {
    position: fixed;
    top: 74px;
    right: 30px;
    z-index: 1030;
}

.org-settings-save-bar .btn {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* ============================================
   ORG SETTINGS "BACK TO SETTINGS" LINK
   Lightweight text link replacing the solid
   btn-primary Back button on the org-settings
   pages (Asana 1216438663233515).
   ============================================ */
.org-settings-back-link {
    display: inline-block;
    color: #007bff;
    text-decoration: none;
    font-weight: 500;
}

.org-settings-back-link:hover,
.org-settings-back-link:focus {
    color: #0056b3;
    text-decoration: underline;
}

.org-settings-back-link i {
    margin-right: 0.35rem;
}

/*
 * Mobile fix for half-width admin modals (Asana 1216059159103215).
 * Several YES-staff modals (Company Enforcement Policy, Property Inspection Policy,
 * and siblings in organization-settings.php / organization-billing.php) set the dialog
 * to .w-50, which on a phone forces a 50%-wide box the content overflows out of.
 * Below the Bootstrap md breakpoint (all phone widths, portrait and landscape), let those
 * dialogs use the default responsive width instead. Unchanged at >=768px, so tablet and
 * desktop keep the 50% layout.
 */
@media (max-width: 767.98px) {
    .modal-dialog.w-50 {
        width: auto !important;
    }
}