/* ══════════════════════════════════════════════════════
   theme-utils.css — InvoiceFlow Pro v3
   Utilities, scrollbar, animations, print, responsive
   ══════════════════════════════════════════════════════ */

/* ══ LAYOUT UTILS ══ */
.flex { display: flex; }
.gap4 { gap: 4px; }
.gap6 { gap: 6px; }
.gap8 { gap: 8px; }
.gap10 { gap: 10px; }
.ic { align-items: center; }
.jb { justify-content: space-between; }
.fw { flex-wrap: wrap; }
.mt6 { margin-top: 6px; }
.mt10 { margin-top: 10px; }
.mt12 { margin-top: 12px; }
.w100 { width: 100%; }
.mono { font-family: var(--mono); }
.bold { font-weight: 700; }
.text-muted { color: var(--muted); }
.text-gr { color: var(--gr); }
.text-re { color: var(--re); }
.text-or { color: var(--pu); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ══ SCROLLBAR ══ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 10px; }

/* ══ SPINNER ══ */
.sp {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid var(--border);
  border-top-color: var(--pu);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: middle;
}

@keyframes spin { to { transform: rotate(360deg) } }

/* ══ PULSE ══ */
.sp-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gr);
  animation: pulse 1.5s infinite;
  flex-shrink: 0;
}

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

/* ══ ALERTS ══ */
.alert {
  padding: 8px 11px;
  border-radius: 8px;
  font-size: 11px;
  margin-bottom: 10px;
  border-width: 1px;
  border-style: solid;
}

.al-g { background: var(--gr-bg); color: #065F46; border-color: rgba(16,185,129,.25); }
.al-b { background: var(--in-bg); color: var(--in); border-color: rgba(79,70,229,.25); }
.al-a { background: var(--am-bg); color: #92400E; border-color: #FDE68A; }
.al-r { background: var(--re-bg); color: #991B1B; border-color: rgba(239,68,68,.25); }
.al-p { background: var(--pu-bg); color: var(--pu2); border-color: rgba(124,58,237,.25); }

/* ══ RESPONSIVE ══ */
@media (max-width: 768px) {
  .g3 { grid-template-columns: 1fr 1fr; }
  .g4 { grid-template-columns: 1fr 1fr; }
  .db-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .side-panels { grid-template-columns: 1fr; }
  .g2 { grid-template-columns: 1fr; }
  .g3 { grid-template-columns: 1fr; }
  .erp-grid { grid-template-columns: repeat(2, 1fr); }
  .db-stats { grid-template-columns: repeat(2, 1fr); }
  .db-panels { grid-template-columns: 1fr; }
  .gw-grid { grid-template-columns: repeat(2, 1fr); }
  .client-area.split { grid-template-columns: 1fr; }

  /* On narrow screens collapse to form-only */
  .body.view-split .fpane,
  .body.view-split .ppane { width: 100%; }
  .body.view-split .ppane { display: none; }
}

/* ══ PRINT ══ */
@media print {
  .top, .cstrip, .fpane, .nstack { display: none !important; }
  .ppane { width: 100% !important; border: none !important; }
  .pph { display: none !important; }
}

/* ══ RECEIPT PAGE ══ */
#page-receipt {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
  overflow-x: hidden;
}

#page-receipt .side-panel,
#page-receipt .card { max-width: 100%; }

#page-receipt table { width: 100%; max-width: 100%; }

@media screen and (max-width: 600px) {
  #page-receipt { zoom: 0.8; }
}