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


    /* ---- Tabs (.nav-tabs-custom): the smooth look first made for /franchisor/backup
       (owner 2026-11-04: "check in my core that work like this style") -- no box around
       the open tab, a rounded line under it that grows out from the middle, a soft tint
       on hover, and the pane fades in. A page colours its own tab with
       `.nav-tabs-custom > .nav-tabs > li.active > a[href="#x"]` (color + :after background). */
    .nav-tabs-custom > .nav-tabs { display:flex; flex-wrap:wrap; gap:4px; padding:6px 10px 0;
        border-bottom:1px solid var(--mk-slate-200,#e2e8f0) !important; }
    .nav-tabs-custom > .nav-tabs > li { float:none; border:0 !important; margin:0 0 -1px !important; }
    .nav-tabs-custom > .nav-tabs > li > a { position:relative; border:0 !important;
        border-radius:10px 10px 0 0 !important; background:transparent !important;
        color:var(--mk-slate-500,#64748b) !important; font-weight:600;
        padding:12px 16px !important; margin:0 !important;
        transition:color .25s ease, background-color .25s ease; }
    .nav-tabs-custom > .nav-tabs > li > a:after { content:''; position:absolute; left:14px; right:14px;
        bottom:0; height:3px; border-radius:3px 3px 0 0; background:var(--mk-blue-500,#3b82f6);
        transform:scaleX(0); transition:transform .3s cubic-bezier(.4,0,.2,1); }
    .nav-tabs-custom > .nav-tabs > li > a:hover { background:var(--mk-slate-50,#f8fafc) !important;
        color:var(--mk-blue-950,#10192b) !important; }
    .nav-tabs-custom > .nav-tabs > li.active > a { color:var(--mk-blue-600,#2563eb) !important; }
    .nav-tabs-custom > .nav-tabs > li.active > a:after { transform:scaleX(1); }
    .nav-tabs-custom > .tab-content > .tab-pane.active { animation:mkTabFade .25s ease; }
    @keyframes mkTabFade { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }

    /* ---- Filter cards: a switch / checkbox sits in a bordered box the height of the
       dropdowns beside it (owner 2026-11-04, /users then /customer) -- for every
       filter card, so no page draws its own. Green while it is on. */
    .compact-filter-body .form-group > label:has(input[type="checkbox"]),
    .compact-filter-body .form-group > .checkbox > label:has(input[type="checkbox"]) {
        display: flex !important; align-items: center; gap: 10px; width: 100%;
        min-height: 38px; margin: 0; padding: 6px 12px; cursor: pointer; font-weight: 600;
        border: 1px solid var(--mk-slate-300-2, #cbd5e1); border-radius: 8px;
        background: var(--mk-white, #fff); transition: border-color .15s, background .15s;
    }
    .compact-filter-body .form-group > label:has(input[type="checkbox"]):hover,
    .compact-filter-body .form-group > .checkbox > label:has(input[type="checkbox"]):hover {
        border-color: var(--mk-blue-400, #60a5fa); }
    .compact-filter-body .form-group > label:has(input[type="checkbox"]:checked),
    .compact-filter-body .form-group > .checkbox > label:has(input[type="checkbox"]:checked) {
        border-color: var(--mk-green-600, #16a34a); background: var(--mk-green-50, #f0fdf4); }

    /* Pinned table header (common.js slides the thead down while its table scrolls
       past the top bar): above the rows, with a soft shadow under it. */
    table.dataTable > thead.mk-thead-pinned { position: relative; z-index: 6; will-change: transform; }
    table.dataTable > thead.mk-thead-pinned > tr > th { box-shadow: 0 4px 8px -4px rgba(15, 23, 42, .35); }

    /* Group the right-side buttons (Settings > Table Style; common.js adds the toggle). */
    @media (min-width: 992px) {
        body.tbl-group-tools .box-tools[data-mk-tools="closed"][class][class][class][class][class][class][class][class][class][class] > *:not(.mk-tools-toggle) { display: none !important; }
        body.tbl-group-tools .box-tools[data-mk-tools] > .mk-tools-toggle { order: -10; }
    }
    @media (max-width: 991px) { .mk-tools-toggle { display: none !important; } }
    .mk-tools-toggle {
        display: inline-flex; align-items: center; gap: .4rem; flex: 0 0 auto; cursor: pointer;
        height: 38px; padding: 0 .8rem; border-radius: 10px; font-size: .9rem; font-weight: 600;
        border: 1px solid var(--mk-slate-200, #e2e8f0); background: var(--mk-white, #fff);
        color: var(--mk-slate-700-2, #334155);
    }
    .mk-tools-toggle:hover { background: var(--mk-slate-100, #f1f5f9); }
    .mk-tools-toggle .mk-tools-n { color: var(--mk-slate-500, #64748b); font-weight: 400; }
    [data-mk-tools="open"] .mk-tools-n { display: none; }


    /* ============================================================
       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; }