@keyframes audit-pending-pulse {
        0%   { box-shadow: 0 0 0 0 rgba(241, 196, 15, 0.7); transform: scale(1); }
        70%  { box-shadow: 0 0 0 8px rgba(241, 196, 15, 0); transform: scale(1.06); }
        100% { box-shadow: 0 0 0 0 rgba(241, 196, 15, 0); transform: scale(1); }
    }
    .audit-pending-pulse {
        animation: audit-pending-pulse 1.4s infinite;
        display: inline-block;
        border-radius: 4px;
    }

    /* ── Center popup that drops in from the top, for FORM popups ──
       Applies to any modal carrying class "right-drawer" OR any modal that
       contains a <form> (so Add/Edit/Create popups appear as a centered
       drop-from-top modal). Modals without a form (confirmations, how-to
       guides, image viewers, etc.) stay default-centered. */
    .modal:is(.right-drawer, :has(form)):not(.no-drawer) { padding:0 !important; }
    .modal:is(.right-drawer, :has(form)):not(.no-drawer) .modal-dialog {
        margin:30px auto !important;
        /* !important so per-form inline widths don't make popups different sizes */
        width:94vw !important; max-width:820px !important;
        transform:translateY(-48px) !important; opacity:0;
        transition:transform .28s ease, opacity .28s ease !important;
    }
    .modal:is(.right-drawer, :has(form)):not(.no-drawer).in .modal-dialog,
    .modal:is(.right-drawer, :has(form)):not(.no-drawer).show .modal-dialog { transform:translateY(0) !important; opacity:1 !important; }
    .modal:is(.right-drawer, :has(form)):not(.no-drawer) .modal-content {
        max-height:calc(100vh - 60px); border:0; border-radius:14px;
        display:flex; flex-direction:column;
        box-shadow:0 24px 60px rgba(0,0,0,.28);
    }
    .modal:is(.right-drawer, :has(form)):not(.no-drawer) .modal-content > form { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }
    .modal:is(.right-drawer, :has(form)):not(.no-drawer) .modal-header { flex:0 0 auto; }
    .modal:is(.right-drawer, :has(form)):not(.no-drawer) .modal-body { flex:1 1 auto; overflow-y:auto; min-height:0 !important; display:flex; flex-direction:column; }
    .modal:is(.right-drawer, :has(form)):not(.no-drawer) .modal-body > form { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }
    .modal:is(.right-drawer, :has(form)):not(.no-drawer) .modal-footer { flex:0 0 auto; }
    .modal:is(.right-drawer, :has(form)):not(.no-drawer) .modal-body .text-right:last-child { margin-top:auto; position:sticky; bottom:0; background:#fff; padding:14px 0 6px; border-top:1px solid #e5e7eb; z-index:2; }

    /* Clickable rows: any table row that has a "View" action (eye icon) becomes
       clickable (the global handler in app.js opens that row's View). */
    table.table > tbody > tr:has(.fa-eye),
    table.table > tbody > tr:has(.fa-eye-open),
    table.table > tbody > tr:has(.glyphicon-eye-open),
    table.dataTable > tbody > tr:has(.fa-eye),
    table.dataTable > tbody > tr:has(.fa-eye-open),
    table.dataTable > tbody > tr:has(.glyphicon-eye-open) { cursor: pointer; }
    table.table > tbody > tr:has(.fa-eye):hover,
    table.table > tbody > tr:has(.glyphicon-eye-open):hover,
    table.dataTable > tbody > tr:has(.fa-eye):hover,
    table.dataTable > tbody > tr:has(.glyphicon-eye-open):hover { background-color:#f1f5f9 !important; }



    /* ============================================================
       Business Settings tabs — uniform input / select / addon style
       so every field on every settings child has the same height & look.
       Scoped to .business-tab-content (the rendered settings tab wrapper).
       ============================================================ */
    .business-tab-content .form-control:not(textarea),
    .business-tab-content .input-group-addon {
        height: 38px !important;
        min-height: 38px !important;
    }
    .business-tab-content .input-group-addon {
        display: inline-flex !important; align-items: center; justify-content: center;
        min-width: 40px; background: #f3f4f6; border-color: #d1d5db; color: #6b7280;
    }
    /* The inline-flex addon above pulls the addon out of Bootstrap 3's
       table-cell flow, so make the input-group itself flex to keep the
       addon and the field on one line (plain inputs as well as select2). */
    .business-tab-content .input-group { display: flex !important; align-items: stretch; width: 100%; max-width: 100%; }
    .business-tab-content .input-group > .form-control { flex: 1 1 auto; width: 1% !important; }
    .business-tab-content .input-group > .input-group-addon,
    .business-tab-content .input-group > .input-group-btn { flex: 0 0 auto; }
    .business-tab-content .form-group { margin-bottom: 14px; }
    .business-tab-content label { font-weight: 600; }
    /* select2 single → match the 38px field height */
    .business-tab-content .select2-container--default .select2-selection--single {
        height: 38px !important; border-color: #d1d5db;
    }
    .business-tab-content .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 38px !important;
    }
    .business-tab-content .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 36px !important;
    }
    .business-tab-content .select2-container { width: 100% !important; }