/* Miva Report Engine — Frontend Styles v1.0.2 */

/* ─── Reset scope ────────────────────────────────────────────────────── */
.mre-fe-wrap * { box-sizing: border-box; }
.mre-fe-wrap { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; color: #1d2327; }

/* ─── Auth card ──────────────────────────────────────────────────────── */
.mre-auth-wrap { display: flex; justify-content: center; align-items: flex-start; padding: 40px 16px; min-height: 400px; }
.mre-auth-card { background: #fff; border: 1px solid #dcdcde; border-radius: 12px; padding: 40px; max-width: 420px; width: 100%; box-shadow: 0 4px 24px rgba(0,0,0,.08); text-align: center; }
.mre-auth-logo { font-size: 48px; margin-bottom: 12px; line-height: 1; }
.mre-auth-card h2 { font-size: 22px; font-weight: 700; margin: 0 0 8px; color: #1d2327; }
.mre-auth-card p { color: #646970; margin: 0 0 24px; line-height: 1.5; }
.mre-form-group { text-align: left; margin-bottom: 16px; }
.mre-form-group label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; color: #3c434a; }
.mre-form-group input { width: 100%; border: 1px solid #dcdcde; border-radius: 6px; padding: 10px 14px; font-size: 15px; outline: none; transition: border-color .15s; }
.mre-form-group input:focus { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,.15); }
.mre-auth-msg { margin-top: 14px; padding: 10px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; }
.mre-auth-msg--success { background: #e6f4ea; color: #00a32a; }
.mre-auth-msg--error   { background: #fce8e8; color: #d63638; }

/* ─── Buttons ────────────────────────────────────────────────────────── */
.mre-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; border: none; padding: 10px 20px; transition: background .15s, opacity .15s; width: 100%; margin-top: 8px; }
.mre-btn--primary { background: #4f46e5; color: #fff; }
.mre-btn--primary:hover { background: #4338ca; color: #fff; }
.mre-btn--ghost { background: transparent; color: #646970; border: 1px solid #dcdcde; }
.mre-btn--ghost:hover { background: #f0f0f1; color: #1d2327; text-decoration: none; }
.mre-btn--sm { width: auto; padding: 5px 12px; font-size: 12px; margin-top: 0; }
.mre-btn:disabled { opacity: .55; cursor: not-allowed; }

/* ─── Top bar ────────────────────────────────────────────────────────── */
.mre-fe-topbar { display: flex; justify-content: flex-end; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid #dcdcde; margin-bottom: 16px; font-size: 13px; color: #646970; }
.mre-fe-logout { color: #d63638; font-weight: 600; text-decoration: none; font-size: 13px; }
.mre-fe-logout:hover { text-decoration: underline; }

/* ─── Tab nav ────────────────────────────────────────────────────────── */
.mre-fe-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; border-bottom: 2px solid #dcdcde; padding-bottom: 0; }
.mre-fe-tab { display: inline-block; padding: 8px 16px; text-decoration: none; color: #50575e; font-weight: 600; font-size: 13px; border-radius: 6px 6px 0 0; border: 1px solid transparent; border-bottom: none; margin-bottom: -2px; transition: background .15s, color .15s; }
.mre-fe-tab:hover { background: #f0f0f1; color: #1d2327; }
.mre-fe-tab--active { background: #fff; border-color: #dcdcde; color: #4f46e5; border-bottom-color: #fff; }

/* ─── Date filter ────────────────────────────────────────────────────── */
.mre-fe-filter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #fff; border: 1px solid #dcdcde; border-radius: 6px; padding: 10px 14px; margin-bottom: 20px; font-size: 13px; }
.mre-fe-filter label { display: flex; align-items: center; gap: 6px; font-weight: 600; color: #3c434a; }
.mre-fe-filter input[type="date"] { border: 1px solid #dcdcde; border-radius: 4px; padding: 5px 8px; font-size: 13px; }
.mre-fe-select { border: 1px solid #dcdcde; border-radius: 4px; padding: 5px 8px; font-size: 13px; background: #fff; }
.mre-fe-presets { display: flex; gap: 6px; }
.mre-fe-presets a { font-size: 12px; padding: 4px 8px; border-radius: 4px; background: #f0f0f1; text-decoration: none; color: #50575e; border: 1px solid #dcdcde; }
.mre-fe-presets a:hover { background: #dcdcde; color: #1d2327; }

/* ─── KPI cards (reuse admin styles with fe prefix override) ─────────── */
.mre-fe-wrap .mre-kpi-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 12px; margin-bottom: 20px; }
.mre-fe-wrap .mre-kpi-card { background:#fff; border:1px solid #dcdcde; border-radius:8px; padding:14px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.mre-fe-wrap .mre-kpi-icon { font-size:20px; margin-bottom:4px; }
.mre-fe-wrap .mre-kpi-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.6px; color:#646970; margin-bottom:4px; }
.mre-fe-wrap .mre-kpi-value { font-size:22px; font-weight:700; color:#1d2327; line-height:1.1; }
.mre-fe-wrap .mre-kpi-trend { margin-top:4px; font-size:11px; }
.mre-fe-wrap .mre-trend--up   { color:#00a32a; font-weight:700; }
.mre-fe-wrap .mre-trend--down { color:#d63638; font-weight:700; }
.mre-fe-wrap .mre-prev { color:#8c8f94; font-size:10px; display:block; }

/* ─── Cards ──────────────────────────────────────────────────────────── */
.mre-fe-wrap .mre-card { background:#fff; border:1px solid #dcdcde; border-radius:8px; padding:18px; margin-bottom:18px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.mre-fe-wrap .mre-card h2 { font-size:15px; font-weight:600; margin:0 0 14px; color:#1d2327; }
.mre-fe-wrap .mre-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.mre-fe-wrap .mre-card-header h2 { margin:0; }
.mre-fe-wrap .mre-two-col { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.mre-fe-wrap .mre-card--subsidized { border-color:#f0b849; background:linear-gradient(135deg,#fffbee,#fff); }
.mre-fe-wrap .mre-card--subsidized h2 { color:#856404; }

/* ─── Tables ─────────────────────────────────────────────────────────── */
.mre-fe-datatable { width:100%; border-collapse:collapse; font-size:13px; }
.mre-fe-datatable thead th { background:#f8f9fa; color:#1d2327; font-weight:600; padding:8px 10px; text-align:left; border-bottom:2px solid #dcdcde; white-space:nowrap; }
.mre-fe-datatable tbody td { padding:7px 10px; border-bottom:1px solid #f0f0f1; vertical-align:middle; }
.mre-fe-datatable tbody tr:hover td { background:#f8f9fe; }
.mre-fe-wrap code { background:#f0f0f1; padding:1px 5px; border-radius:3px; font-size:12px; font-family:monospace; }

/* ─── Status badges & stock ──────────────────────────────────────────── */
.mre-fe-wrap .mre-status-badge { display:inline-block; padding:2px 8px; border-radius:20px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.mre-fe-wrap .mre-status-pending      { background:#f0f0f1; color:#50575e; }
.mre-fe-wrap .mre-status-processing   { background:#e8f0ff; color:#2271b1; }
.mre-fe-wrap .mre-status-shipped      { background:#e6f4ea; color:#00a32a; }
.mre-fe-wrap .mre-status-partial-ship { background:#fff3cd; color:#856404; }
.mre-fe-wrap .mre-status-cancelled    { background:#fce8e8; color:#d63638; }
.mre-fe-wrap .mre-status-backorder    { background:#fff0e5; color:#c77b00; }
.mre-fe-wrap .mre-refund-amt { color:#d63638; font-weight:600; }

/* ─── DataTables overrides ───────────────────────────────────────────── */
.mre-fe-wrap .dataTables_wrapper { font-size:13px; margin-top:8px; }
.mre-fe-wrap .dataTables_filter input { border:1px solid #dcdcde; border-radius:4px; padding:4px 8px; }
.mre-fe-wrap .dataTables_length select { border:1px solid #dcdcde; border-radius:4px; padding:3px 6px; }

/* ─── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .mre-fe-wrap .mre-two-col { grid-template-columns: 1fr; }
    .mre-fe-wrap .mre-kpi-row { grid-template-columns: 1fr 1fr; }
    .mre-fe-tabs { overflow-x: auto; flex-wrap: nowrap; }
}