/* ═══════════════════════════════════════════════════════════════
   offline.css — Offline-First POS styles
   Covers: offline banner, sync widget, connectivity indicators,
   invoice print, and POS offline-mode overrides.
   ═══════════════════════════════════════════════════════════════ */

/* ── Offline banner ──────────────────────────────────────────── */
#offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: #E74C3C;
  color: #fff;
  text-align: center;
  padding: 8px 16px;
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .01em;
  animation: slideDown .3s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
#offline-banner.server-down {
  background: #E67E22;
}
#offline-banner.syncing {
  background: #3498DB;
}
#offline-banner.hidden { display: none; }

@keyframes slideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* Push page content below banner when visible */
body.has-offline-banner { padding-top: 40px; }

/* ── Sync widget (fixed bottom-right) ────────────────────────── */
#sync-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9000;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: .75rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  padding: .6rem 1rem;
  min-width: 180px;
  font-size: .8rem;
  display: none;
  flex-direction: column;
  gap: .3rem;
}
#sync-widget.visible { display: flex; }

#sync-widget .sw-title {
  font-weight: 700;
  color: #374151;
  font-size: .82rem;
}
#sync-widget .sw-row {
  display: flex;
  justify-content: space-between;
  color: #6b7280;
}
#sync-widget .sw-row span:last-child { font-weight: 600; }
#sync-widget .sw-progress {
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
  overflow: hidden;
  margin-top: .2rem;
}
#sync-widget .sw-progress-bar {
  height: 100%;
  background: #3b82f6;
  border-radius: 2px;
  transition: width .4s ease;
}

/* ── Connectivity dot indicator ──────────────────────────────── */
.conn-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
}
.conn-dot.offline  { background: #E74C3C; }
.conn-dot.degraded { background: #E67E22; }
.conn-dot.syncing  { background: #3b82f6; animation: pulse 1.2s infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .35; }
}

/* ── Sync badge on nav buttons ───────────────────────────────── */
.sync-badge {
  display: inline-block;
  background: #E74C3C;
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  padding: .1rem .4rem;
  border-radius: 999px;
  margin-left: .3rem;
  vertical-align: middle;
  min-width: 18px;
  text-align: center;
}
.sync-badge:empty,
.sync-badge[data-count="0"] { display: none; }

/* ── Toast notifications ─────────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  pointer-events: none;
}
.toast-item {
  pointer-events: auto;
  background: #1f2937;
  color: #fff;
  padding: .7rem 1.1rem;
  border-radius: .5rem;
  font-size: .83rem;
  font-weight: 500;
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
  max-width: 320px;
  opacity: 0;
  transform: translateX(20px);
  animation: toastIn .25s forwards;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.toast-item.toast-success { border-left: 3px solid #22c55e; }
.toast-item.toast-warning { border-left: 3px solid #f97316; }
.toast-item.toast-error   { border-left: 3px solid #ef4444; }
.toast-item.toast-info    { border-left: 3px solid #3b82f6; }
.toast-item.toast-out     { animation: toastOut .25s forwards; }

@keyframes toastIn  { to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(20px); } }

/* ── POS offline-mode header indicator ──────────────────────── */
.offline-mode .pos-header {
  border-left: 4px solid #E74C3C;
}
.offline-mode .pos-header::before {
  content: '⚡ OFFLINE MODE';
  display: block;
  font-size: .68rem;
  font-weight: 700;
  color: #E74C3C;
  letter-spacing: .05em;
  margin-bottom: .15rem;
}

/* ── Offline sale watermark on pending rows ──────────────────── */
.offline-sale-row {
  position: relative;
}
.offline-sale-row::after {
  content: 'OFFLINE';
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%) rotate(-8deg);
  font-size: .62rem;
  font-weight: 800;
  color: #fbbf24;
  letter-spacing: .08em;
  opacity: .7;
  pointer-events: none;
}

/* ── Invoice OFFLINE watermark ───────────────────────────────── */
.invoice-offline-stamp {
  display: inline-block;
  background: #fef3c7;
  color: #92400e;
  font-size: .72rem;
  font-weight: 700;
  padding: .15rem .5rem;
  border: 1.5px solid #fde68a;
  border-radius: 4px;
  letter-spacing: .06em;
  margin-left: .4rem;
  vertical-align: middle;
}

/* ── Print styles ────────────────────────────────────────────── */
@media print {
  /* Hide all chrome when printing invoices */
  #offline-banner,
  #sync-widget,
  #toast-container,
  nav,
  .sidebar,
  .navbar,
  .pos-products,
  #btn-checkout,
  #btn-manual-sync {
    display: none !important;
  }

  body {
    padding: 0 !important;
    margin: 0 !important;
  }

  .invoice-container {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  /* Thermal receipt layout */
  .invoice-thermal {
    width: 80mm;
    font-size: 10pt;
    font-family: 'Courier New', monospace;
  }
  .invoice-thermal.narrow {
    width: 58mm;
    font-size: 9pt;
  }

  /* A4 invoice layout */
  .invoice-a4 {
    width: 210mm;
    min-height: 297mm;
    padding: 15mm 20mm;
    font-family: Arial, sans-serif;
    font-size: 11pt;
  }

  @page {
    margin: 0;
  }
}

/* ── Conflict notification badge ─────────────────────────────── */
.conflict-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: #fef3c7;
  border: 1px solid #fbbf24;
  color: #92400e;
  font-size: .75rem;
  font-weight: 600;
  padding: .25rem .6rem;
  border-radius: .35rem;
}

/* ── Responsive adjustments ─────────────────────────────────── */
@media (max-width: 576px) {
  #sync-widget { bottom: 10px; right: 10px; min-width: 150px; }
  #offline-banner { font-size: .78rem; padding: 6px 12px; }
}