#teacera-offline-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 1050; text-align:center; pointer-events: none; }
.teacera-offline-inner { display:inline-block; padding:8px 18px; background:#ff9800; color:#fff; font-weight:700; border-radius:0 0 8px 8px; pointer-events: auto; font-size:14px; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.teacera-offline-hidden { display:none; }
.teacera-offline-visible { display:block; }
/* Admin backoffice: higher z-index to show above admin header */
body.ps_back-office #teacera-offline-banner { z-index: 100050; }

/* Modal styles for offline TRA registration */
.teacera-offline-modal { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 10000; display:flex; align-items:center; justify-content:center; padding:12px; }
.teacera-offline-modal-dialog { background: #fff; border-radius:8px; width: 680px; max-width:100%; max-height:90vh; box-shadow: 0 6px 24px rgba(0,0,0,0.2); display:flex; flex-direction:column; }
.teacera-offline-modal-header { padding:12px 16px; border-bottom:1px solid #eee; display:flex; justify-content:space-between; align-items:center; flex-shrink:0; }
.teacera-offline-modal-body { padding:14px 16px; overflow-y:auto; flex:1; }
.teacera-offline-modal .form-control { width:100%; padding:6px 8px; margin-top:4px; }
.teacera-offline-modal .btn { margin-left:6px; }

/* Offline TRA form grid */
.tof-section { margin-bottom:14px; }
.tof-section-title { color:#0891b2; border-bottom:2px solid #0891b2; padding-bottom:6px; margin-bottom:12px; font-size:15px; font-weight:700; }
.tof-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:10px; margin-bottom:10px; }
.tof-field label { display:block; font-size:12px; font-weight:600; color:#555; margin-bottom:4px; }
.tof-field input, .tof-field select { width:100%; padding:8px 10px; border:1.5px solid #e0e0e0; border-radius:6px; font-size:13px; background:#fff; box-sizing:border-box; }
.tof-field input:focus, .tof-field select:focus { border-color:#0891b2; outline:none; }

/* Toast animation for offline navigation guard */
@keyframes teacera-toast-in { from { opacity:0; transform:translateX(-50%) translateY(20px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }

/* Offline state: keep page looking normal, only the banner indicates offline */