/* Frontend styling for VOSH70 Reports (shortcode/template) */

.vosh70rpt-front{max-width:1400px; margin:20px auto; padding:0 12px; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial}
.vosh70rpt-front-head{display:flex; flex-direction:column; gap:6px; margin:10px 0 14px}
.vosh70rpt-front-title{margin:0; font-weight:800; letter-spacing:-.02em}
.vosh70rpt-front-sub{color:#64748b; font-size:14px}

/* Tabs */
.vosh70rpt-tabs{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 14px}
.vosh70rpt-tab{display:inline-flex; align-items:center; height:34px; padding:0 12px; border-radius:999px; border:1px solid #e2e8f0; color:#0f172a; text-decoration:none; background:#fff}
.vosh70rpt-tab.active{border-color:#0f172a; font-weight:700}

/* Filters (same layout as admin) */
.vosh70rpt-filters{background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:14px; margin:0 0 14px; box-shadow:0 1px 6px rgba(0,0,0,.04)}
.vosh70rpt-filter-row{display:flex; flex-wrap:wrap; gap:10px}
.vosh70rpt-field{min-width:140px; display:flex; flex-direction:column}
.vosh70rpt-field label{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:#64748b; margin:0 0 4px}
.vosh70rpt-field input,
.vosh70rpt-field select{height:36px; border-radius:10px; border:1px solid #e2e8f0; padding:0 10px; background:#fff; font-size:14px}
.vosh70rpt-search{flex:1; min-width:240px}

.vosh70rpt-filter-actions{margin-top:10px; display:flex; gap:8px; align-items:center; flex-wrap:wrap}

/* Cards and grids */
.vosh70rpt-grid-4{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin:12px 0}
.vosh70rpt-grid-3{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin:12px 0}
.vosh70rpt-grid-2{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; margin:12px 0}

@media (max-width:1200px){
  .vosh70rpt-grid-4{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width:782px){
  .vosh70rpt-grid-4,.vosh70rpt-grid-3,.vosh70rpt-grid-2{grid-template-columns:1fr}
}

.vosh70rpt-card{background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:14px; box-shadow:0 1px 10px rgba(0,0,0,.05)}
.vosh70rpt-card-h{font-weight:800; margin-bottom:10px}
.vosh70rpt-muted{color:#64748b}

.vosh70rpt-stat{display:flex; flex-direction:column; gap:4px}
.vosh70rpt-stat .label{font-size:12px; color:#64748b}
.vosh70rpt-stat .value{font-size:22px; font-weight:900}

.vosh70rpt-chart-wrap{position:relative; min-height:220px}

/* Tables */
.vosh70rpt-table-wrap{overflow:auto; border-radius:12px; border:1px solid #eef2f7}
.vosh70rpt-table{width:100%; border-collapse:collapse; min-width:960px}
.vosh70rpt-table th,
.vosh70rpt-table td{padding:10px 8px; border-top:1px solid #eef2f7; vertical-align:top; text-align:left}
.vosh70rpt-table th{font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:#475569; background:#fafafa; position:sticky; top:0}
.vosh70rpt-table td{font-size:13px}

/* Badges */
.vosh70rpt-badge{display:inline-block; padding:2px 8px; border-radius:999px; background:#f1f5f9; color:#0f172a; font-size:12px}
.vosh70rpt-badge.paid{background:#dcfce7; color:#14532d}
.vosh70rpt-badge.pending{background:#fff7ed; color:#9a3412}
.vosh70rpt-badge.failed{background:#fee2e2; color:#7f1d1d}

/* Buttons */
.vosh70rpt-btn{display:inline-flex; align-items:center; justify-content:center; height:36px; padding:0 12px; border-radius:10px; border:1px solid #e2e8f0; background:#fff; color:#0f172a; text-decoration:none; cursor:pointer; font-weight:600}
.vosh70rpt-btn.primary{border-color:#0f172a; background:#0f172a; color:#fff}
.vosh70rpt-btn:hover{filter:brightness(.98)}

/* Pagination */
.vosh70rpt-pagination{margin-top:12px; display:flex; gap:10px; align-items:center; flex-wrap:wrap}

/* Password gate */
.vosh70rpt-alert{margin-top:10px; padding:10px 12px; border-radius:12px; border:1px solid #fecaca; background:#fff1f2; color:#7f1d1d}
.vosh70rpt-pass{height:36px; border-radius:10px; border:1px solid #e2e8f0; padding:0 10px; min-width:220px}

/* Modal (payload viewer) */
.vosh70rpt-modal{position:fixed; inset:0; z-index:99999}
.vosh70rpt-modal-backdrop{position:absolute; inset:0; background:rgba(2,6,23,.55)}
.vosh70rpt-modal-card{position:relative; width:min(880px, calc(100% - 24px)); margin:50px auto; background:#fff; border-radius:16px; padding:14px; box-shadow:0 20px 60px rgba(0,0,0,.25)}
.vosh70rpt-modal-close{position:absolute; right:12px; top:8px; width:36px; height:36px; border-radius:10px; border:1px solid #e2e8f0; background:#fff; cursor:pointer; font-size:22px; line-height:1}
.vosh70rpt-modal pre{max-height:60vh; overflow:auto; background:#0b1220; color:#e2e8f0; padding:12px; border-radius:12px; white-space:pre-wrap; word-break:break-word}