/* =====================================================================
   GLOBAL FIXED ACTION BAR (sticky bottom)
   ---------------------------------------------------------------------
   Reusable di semua form module. Pakai pattern:
     <div class="app-action-bar">
         <a class="btn btn-outline-secondary app-btn-resp" title="Back">
             <i class="fas fa-arrow-left me-1"></i><span>Back to List</span>
         </a>
         <button class="btn btn-theme app-btn-resp" title="Save">
             <i class="fas fa-save me-1"></i><span>Save</span>
         </button>
     </div>

   Plus add body class `has-app-action-bar` saat page punya bar
   supaya konten tidak ketutup (padding-bottom).
   Helper JS auto-toggle: see app-action-bar.js (optional, atau panggil
   `document.body.classList.add('has-app-action-bar')` manual).

   Mobile (<576px): tombol jadi icon-only — `<span>` di-hide, `me-1` di-zero.
   ===================================================================== */

.app-action-bar {
    position: fixed;
    left: var(--app-sidebar-width, 15rem);
    right: 0; bottom: 0;
    background: #fff;
    padding: 10px 24px;
    border-top: 1px solid #e5e7eb;
    display: flex; gap: .5rem;
    justify-content: flex-end; align-items: center;
    flex-wrap: wrap;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, .06);
    z-index: 1030;
}

/* prevent page content hidden under fixed action bar */
body.has-app-action-bar { padding-bottom: 72px; }

/* Mobile: icon-only buttons */
@media (max-width: 576px) {
    .app-action-bar {
        padding: 8px 12px;
        left: 0;
    }
    .app-action-bar .app-btn-resp span { display: none; }
    .app-action-bar .app-btn-resp i { margin-right: 0 !important; }
    .app-action-bar .app-btn-resp {
        min-width: 36px;
        padding-left: 8px;
        padding-right: 8px;
    }
}