/* shared.css — extracted from inline <style> blocks repeated across pages.
 * Keep this file additive: do not change selectors or specificities, only
 * deduplicate. Page-specific tweaks remain inline in their respective files.
 */

/* ───── Password strength meter (register, reset-password) ───── */
.pw-meter { display:flex; gap:4px; margin-top:6px; }
.pw-meter .pw-bar { flex:1; height:4px; border-radius:4px; background:var(--glass-border); transition:all .2s; }
.pw-meter .pw-bar.active.weak   { background:#ff453a; }
.pw-meter .pw-bar.active.medium { background:#ff9f0a; }
.pw-meter .pw-bar.active.strong { background:#30d158; }
.pw-label { font-size:0.75rem; margin-top:4px; min-height:1.2em; }

/* ───── QR card (admin/whatsapp-qr, store/whatsapp-qr) ───── */
.qr-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(var(--glass-blur));
}
.qr-placeholder {
    text-align: center;
    padding: 32px 16px;
    border: 2px dashed var(--glass-border);
    border-radius: 12px;
    margin: 16px 0;
    background: rgba(255,255,255,0.02);
}
.qr-actions { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:12px; }

/* ───── Diagnostic / optimization grids (diagnostics, optimize) ───── */
.diag-grid,
.stat-grid-sm {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.diag-grid { grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); }
.diag-card,
.opt-card {
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
}
.opt-card { padding: 20px; text-align: center; }

/* ───── Backup management table (admin/backup) ───── */
.backup-filename { font-family: monospace; font-size: 0.8rem; }
.backup-size     { font-size: 0.75rem; color: var(--text-secondary); }

/* ───── Translation table (admin/translations) ───── */
.translation-row:hover { background: rgba(255,255,255,0.03); }
.key-cell { font-family: monospace; font-size: 0.78rem; color: var(--accent); word-break: break-all; }

/* ───── Campaign preview pane (admin/campaigns) ───── */
.campaign-preview {
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 20px;
    background: #fff;
    color: #000;
    max-width: 600px;
}

/* ───── Analytics page tweaks (analytics.php) ───── */
.stat-card .stat-change { margin-top: 4px; }
.date-picker-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ───── Apex chart text contrast (dashboard) ───── */
#leadDistributionChart .apexcharts-text,
#fosGaugeChart .apexcharts-text,
#categoryChart .apexcharts-text {
    fill: var(--text-secondary) !important;
}
#fosGaugeChart .apexcharts-radialbar-hollow { fill: transparent; }

/* ───── Skeleton loading (UI placeholders) ───── */
.skeleton {
    position: relative;
    overflow: hidden;
    background: var(--glass-bg);
}
.skeleton::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: skeleton-shimmer 1.5s infinite;
}
@keyframes skeleton-shimmer {
    0% { transform: translateX(0); }
    100% { transform: translateX(300%); }
}