/**
 * Dapu Affiliates - front-end dashboard + login.
 * Professional, RTL, icon-driven (SVG). No emojis.
 */

.dapu-wrap {
    --dapu-primary: #5FA886;       /* Mizrahnik green (overridden by settings) */
    --dapu-primary-2: #488f6e;     /* deeper green for the gradient */
    --dapu-ink: #0f172a;           /* slate 900 */
    --dapu-muted: #64748b;         /* slate 500 */
    --dapu-line: #e7e9f0;
    --dapu-bg: #f6f7fb;
    --dapu-card: #ffffff;
    --dapu-surface: #fbfbfe;       /* tinted input / panel background */
    --dapu-surface-2: #f1f2f7;     /* subtle dividers, mobile mini-stat bg */
    --dapu-soft-ink: #334155;      /* secondary text (field labels) */
    --dapu-soft: color-mix(in srgb, var(--dapu-primary) 10%, var(--dapu-card)); /* brand tint bg */
    --dapu-on-primary: #ffffff;    /* text/icon on a brand-colored surface (stays light in dark mode) */
    /* status palette (light) */
    --dapu-ok-bg: #dcfce7;   --dapu-ok-fg: #166534;   --dapu-ok-line: #bbf7d0;
    --dapu-warn-bg: #fef3c7; --dapu-warn-fg: #92400e; --dapu-warn-fg2: #b45309; --dapu-warn-soft-bg: #fff7ed;
    --dapu-info-bg: #dbeafe; --dapu-info-fg: #1e40af;
    --dapu-err-bg: #fef2f2;  --dapu-err-fg: #b91c1c;  --dapu-err-line: #fecaca;
    --dapu-neutral-bg: #f1f5f9;
    --dapu-radius: 16px;
    --dapu-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
    direction: rtl;
    text-align: right;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Rubik, Arial, sans-serif;
    color: var(--dapu-ink);
    max-width: 1100px;
    margin: 0 auto;
    padding: 8px;
    box-sizing: border-box;
}
.dapu-wrap *, .dapu-wrap *::before, .dapu-wrap *::after { box-sizing: border-box; }

.dapu-ico { width: 20px; height: 20px; flex: 0 0 auto; vertical-align: middle; }

/* ---------- Buttons ---------- */
.dapu-btn {
    display: inline-flex; align-items: center; gap: 8px;
    border: 0; border-radius: 12px; cursor: pointer;
    font-size: 15px; font-weight: 600; padding: 11px 18px;
    text-decoration: none; line-height: 1; transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
}
.dapu-btn:active { transform: translateY(1px); }
.dapu-btn-primary {
    width: 100%; justify-content: center; color: var(--dapu-on-primary);
    background: linear-gradient(135deg, var(--dapu-primary), var(--dapu-primary-2));
    box-shadow: 0 8px 20px color-mix(in srgb, var(--dapu-primary) 28%, transparent);
}
.dapu-btn-primary:hover { box-shadow: 0 10px 26px color-mix(in srgb, var(--dapu-primary) 38%, transparent); }
.dapu-btn-ghost {
    background: rgba(255, 255, 255, .15); color: var(--dapu-on-primary); border: 1px solid rgba(255, 255, 255, .35);
}
.dapu-btn-ghost:hover { background: rgba(255, 255, 255, .25); }
.dapu-btn-sm { padding: 8px 12px; font-size: 13px; border-radius: 10px; }
.dapu-btn-soft { background: var(--dapu-soft); background: color-mix(in srgb, var(--dapu-primary) 10%, var(--dapu-card)); color: var(--dapu-primary); }
.dapu-btn-soft .dapu-ico { width: 16px; height: 16px; }

/* ---------- Login ---------- */
.dapu-login-wrap { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 40px 12px; }
.dapu-login-card {
    width: 100%; max-width: 420px; background: var(--dapu-card);
    border-radius: 20px; box-shadow: var(--dapu-shadow); padding: 34px 30px; border: 1px solid var(--dapu-line);
}
.dapu-login-head { text-align: center; margin-bottom: 22px; }
.dapu-login-head .dapu-ico {
    width: 46px; height: 46px; color: var(--dapu-primary);
    padding: 12px; border-radius: 14px; margin-bottom: 8px;
    background: var(--dapu-soft); /* fallback */
    background: color-mix(in srgb, var(--dapu-primary) 10%, var(--dapu-card));
}
.dapu-login-head h1 { font-size: 22px; margin: 6px 0 4px; }
.dapu-login-head p { color: var(--dapu-muted); font-size: 14px; margin: 0; }
.dapu-form { display: flex; flex-direction: column; gap: 14px; }
.dapu-field { display: flex; flex-direction: column; gap: 6px; }
.dapu-field span { font-size: 13px; font-weight: 600; color: var(--dapu-soft-ink); }
.dapu-field input, .dapu-field textarea, .dapu-field select {
    width: 100%; padding: 12px 14px; border: 1px solid var(--dapu-line); border-radius: 12px;
    font-size: 16px; background: var(--dapu-surface); transition: border .15s ease, box-shadow .15s ease;
    font-family: inherit; resize: vertical;
}
.dapu-field input:focus, .dapu-field textarea:focus, .dapu-field select:focus { outline: 0; border-color: var(--dapu-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dapu-primary) 12%, transparent); background: var(--dapu-card); }
.dapu-register-card { margin-top: 18px; }
.dapu-register-card .dapu-login-head h2 { margin: 6px 0 4px; font-size: 20px; }
.dapu-remember { font-size: 13px; color: var(--dapu-muted); display: flex; align-items: center; gap: 6px; }
.dapu-bank-fields { display: flex; flex-direction: column; gap: 14px; padding: 14px; border: 1px solid var(--dapu-line); border-radius: 12px; background: var(--dapu-surface); }
.dapu-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--dapu-soft-ink); line-height: 1.5; }
.dapu-check input { margin-top: 3px; flex: 0 0 auto; }
.dapu-check a { color: var(--dapu-primary); font-weight: 600; }
.dapu-login-foot { text-align: center; font-size: 14px; color: var(--dapu-muted); margin: 18px 0 0; }
.dapu-lostpass { margin-top: 16px; border-top: 1px solid var(--dapu-line); padding-top: 14px; }
.dapu-lostpass summary { cursor: pointer; font-size: 14px; color: var(--dapu-primary); font-weight: 600; list-style: none; text-align: center; }
.dapu-lostpass summary::-webkit-details-marker { display: none; }
.dapu-chpwd-form { max-width: 360px; margin: 0 auto; }
.dapu-login-foot a { color: var(--dapu-primary); font-weight: 600; text-decoration: none; }

/* ---------- Terms sign modal ---------- */
.dapu-terms-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.dapu-terms-status { font-size: 13px; color: var(--dapu-muted); }
.dapu-terms-status.signed { color: var(--dapu-ok-fg); font-weight: 700; }
body.dapu-modal-open { overflow: hidden !important; }
.dapu-modal { position: fixed; inset: 0; background: rgba(15, 23, 42, .55); display: none; align-items: center; justify-content: center; z-index: 99999; padding: 16px; overscroll-behavior: contain; }
.dapu-modal.open { display: flex; }
.dapu-modal-box { background: var(--dapu-card); border-radius: 16px; width: 100%; max-width: 560px; max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); direction: rtl; text-align: right; }
.dapu-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--dapu-line); }
.dapu-modal-head h3 { margin: 0; font-size: 18px; }
.dapu-modal-x { background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: var(--dapu-muted); padding: 0 4px; }
.dapu-terms-scroll { overflow-y: auto; padding: 16px 20px; flex: 1 1 auto; min-height: 0; max-height: 55vh; font-size: 14px; line-height: 1.7; color: var(--dapu-soft-ink); border-bottom: 1px solid var(--dapu-line); -webkit-overflow-scrolling: touch; }
.dapu-terms-scroll p { margin: 0 0 10px; }
.dapu-terms-hint { margin: 10px 20px 0; font-size: 12.5px; color: var(--dapu-warn-fg2); }
.dapu-sign { display: flex; gap: 12px; padding: 12px 20px 0; flex-wrap: wrap; }
.dapu-sign .dapu-field { flex: 1; min-width: 140px; }
.dapu-modal-foot { padding: 16px 20px 20px; }
.dapu-modal-foot .dapu-btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.dapu-alert { border-radius: 12px; padding: 12px 14px; font-size: 14px; margin-bottom: 16px; }
.dapu-alert-error { background: var(--dapu-err-bg); color: var(--dapu-err-fg); border: 1px solid var(--dapu-err-line); }

/* ---------- Hero ---------- */
.dapu-hero {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    background: linear-gradient(135deg, var(--dapu-primary), var(--dapu-primary-2));
    color: var(--dapu-on-primary); border-radius: var(--dapu-radius); padding: 26px 28px; margin: 8px 0 18px;
    box-shadow: 0 14px 34px color-mix(in srgb, var(--dapu-primary) 28%, transparent);
}
.dapu-hero h1 { font-size: 24px; margin: 4px 0 0; }
.dapu-hello { margin: 0; opacity: .85; font-size: 14px; }

/* ---------- Tabs ---------- */
/* Nav hidden until JS marks the dashboard tab-capable; without JS every card
   stays stacked and visible (progressive enhancement). */
.dapu-tabs { display: none; }
/* Classic underline tab strip: tabs sit ON a baseline; the active one is
   marked by a colored underline + colored text, not a filled button. */
.dapu-dash.has-tabs .dapu-tabs {
    display: flex; flex-wrap: nowrap; gap: 2px;
    margin: 0 0 22px; padding: 0;
    background: transparent; border: 0;
    border-bottom: 2px solid var(--dapu-line); border-radius: 0;
    box-shadow: none; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.dapu-dash.has-tabs .dapu-tabs::-webkit-scrollbar { height: 0; display: none; }
.dapu-tab {
    display: inline-flex; align-items: center; gap: 8px;
    flex: 0 0 auto; justify-content: center; white-space: nowrap;
    padding: 12px 18px; border: 0; border-radius: 0;
    border-bottom: 2px solid transparent; margin-bottom: -2px; /* overlap the strip line */
    background: transparent; color: var(--dapu-muted, #64748b);
    font-family: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
.dapu-tab .dapu-ico { width: 17px; height: 17px; }
.dapu-tab:hover { color: var(--dapu-primary); }
.dapu-tab.dapu-tab-on {
    color: var(--dapu-primary);
    background: transparent;
    border-bottom-color: var(--dapu-primary);
    box-shadow: none;
}
/* Show only the active tab's blocks (JS sets the tab-* class on the wrapper). */
.dapu-dash.has-tabs.tab-overview  [data-tab]:not([data-tab="overview"]),
.dapu-dash.has-tabs.tab-campaigns [data-tab]:not([data-tab="campaigns"]),
.dapu-dash.has-tabs.tab-money     [data-tab]:not([data-tab="money"]),
.dapu-dash.has-tabs.tab-account   [data-tab]:not([data-tab="account"]) { display: none; }

/* ---------- Overview chart ---------- */
.dapu-chart-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.dapu-chip {
    border: 1px solid var(--dapu-line); border-radius: 999px;
    padding: 8px 13px; font-size: 13px; font-weight: 600; font-family: inherit;
    background: var(--dapu-card); color: var(--dapu-muted, #64748b); cursor: pointer;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.dapu-chip:hover { color: var(--dapu-primary); border-color: var(--dapu-primary); }
.dapu-chip-on { color: var(--dapu-on-primary); background: var(--dapu-primary); border-color: var(--dapu-primary); }
.dapu-chart-canvas { width: 100%; }
.dapu-chart-svg { width: 100%; height: auto; display: block; }
.dapu-chart-svg .dapu-bar { fill: var(--dapu-primary); cursor: pointer; transition: fill .15s ease; }
.dapu-chart-svg .dapu-bar:hover { fill: var(--dapu-primary-2); }
.dapu-chart-svg .dapu-bar-x { font-size: 12px; fill: var(--dapu-muted); font-family: inherit; }
.dapu-chart-svg .dapu-chart-grid { stroke: var(--dapu-line); stroke-width: 1; }
.dapu-chart-svg .dapu-chart-y { font-size: 12px; fill: var(--dapu-muted); font-family: inherit; }
.dapu-chart-cap { text-align: center; margin: 10px 0 0; font-size: 13.5px; font-weight: 700; color: var(--dapu-primary); }

/* ---------- Stats month filter ---------- */
.dapu-stats-filter { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 13.5px; color: var(--dapu-muted); flex-wrap: wrap; }
.dapu-stats-filter select { padding: 8px 12px; border: 1px solid var(--dapu-line); border-radius: 9px; font-size: 14px; background: var(--dapu-card); font-family: inherit; }
.dapu-stats-filter select:focus { outline: 0; border-color: var(--dapu-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dapu-primary) 12%, transparent); }

/* ---------- Stat cards ---------- */
.dapu-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.dapu-stat {
    background: var(--dapu-card); border: 1px solid var(--dapu-line); border-radius: var(--dapu-radius);
    padding: 18px; display: flex; align-items: center; gap: 14px; box-shadow: var(--dapu-shadow);
}
.dapu-stat-ico {
    width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
    background: var(--dapu-soft); /* fallback */
    background: color-mix(in srgb, var(--dapu-primary) 10%, var(--dapu-card));
    color: var(--dapu-primary); flex: 0 0 auto;
}
.dapu-stat-ico .dapu-ico { width: 24px; height: 24px; }
.dapu-stat-body { display: flex; flex-direction: column; min-width: 0; }
.dapu-stat-value { font-size: 22px; font-weight: 800; line-height: 1.1; }
.dapu-stat-label { font-size: 12.5px; color: var(--dapu-muted); margin-top: 3px; }
.dapu-stat-accent {
    background: linear-gradient(135deg, #111827, #1f2937); border-color: transparent; color: var(--dapu-on-primary);
}
.dapu-stat-accent .dapu-stat-label { color: rgba(255, 255, 255, .7); }
.dapu-stat-accent .dapu-stat-ico { background: rgba(255, 255, 255, .14); color: var(--dapu-on-primary); }

/* ---------- Layout cards ---------- */
.dapu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dapu-card {
    background: var(--dapu-card); border: 1px solid var(--dapu-line); border-radius: var(--dapu-radius);
    padding: 22px; box-shadow: var(--dapu-shadow);
}
.dapu-card h2 { font-size: 17px; margin: 0 0 16px; display: flex; align-items: center; gap: 8px; }
.dapu-card h2 .dapu-ico { color: var(--dapu-primary); }
.dapu-muted { color: var(--dapu-muted); font-size: 14px; }

/* ---------- Coupons ---------- */
.dapu-coupon { border: 1px dashed var(--dapu-line); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; background: var(--dapu-surface); }
.dapu-coupon-code { font-weight: 800; letter-spacing: .5px; font-size: 16px; margin-bottom: 8px; color: var(--dapu-primary); display: flex; align-items: center; gap: 6px; }
.dapu-coupon-code .dapu-ico { width: 17px; height: 17px; }
.dapu-coupon-personal {
    border-style: solid;
    border-color: var(--dapu-primary);
    background: var(--dapu-soft);
    background: color-mix(in srgb, var(--dapu-primary) 7%, var(--dapu-card));
}
.dapu-coupon-actions { display: flex; gap: 8px; align-items: center; }
.dapu-copy-src {
    flex: 1; min-width: 0; font-size: 12.5px; color: var(--dapu-soft-ink); padding: 8px 10px;
    border: 1px solid var(--dapu-line); border-radius: 10px; background: var(--dapu-card);
}
.dapu-copy { background: var(--dapu-soft); background: color-mix(in srgb, var(--dapu-primary) 10%, var(--dapu-card)); color: var(--dapu-primary); }
.dapu-copy.copied { background: var(--dapu-ok-bg); color: var(--dapu-ok-fg); }

/* ---------- Table ---------- */
.dapu-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dapu-table th { text-align: right; font-size: 12px; color: var(--dapu-muted); font-weight: 600; padding: 8px 6px; border-bottom: 1px solid var(--dapu-line); }
.dapu-table td { padding: 11px 6px; border-bottom: 1px solid var(--dapu-surface-2); }
.dapu-table tr:last-child td { border-bottom: 0; }
.dapu-strong { font-weight: 800; }

.dapu-badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.dapu-badge-pending   { background: var(--dapu-warn-bg); color: var(--dapu-warn-fg); }
.dapu-badge-approved  { background: var(--dapu-info-bg); color: var(--dapu-info-fg); }
.dapu-badge-paid      { background: var(--dapu-ok-bg); color: var(--dapu-ok-fg); }
.dapu-badge-cancelled { background: var(--dapu-neutral-bg); color: #64748b; }

/* ---------- Pending ---------- */
.dapu-pending { text-align: center; max-width: 520px; margin: 40px auto; }
.dapu-pending .dapu-ico { width: 48px; height: 48px; color: var(--dapu-warn-fg2); background: var(--dapu-warn-bg); padding: 12px; border-radius: 14px; }
.dapu-pending h2 { margin: 14px 0 8px; }
.dapu-pending p { color: var(--dapu-muted); margin: 0 0 18px; }
.dapu-pending .dapu-btn-ghost { background: var(--dapu-soft); color: var(--dapu-primary); border-color: transparent; display: inline-flex; }

/* ---------- Commission tiers ---------- */
.dapu-tiers-card { margin-bottom: 18px; }
.dapu-tier-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.dapu-tier-block { display: flex; flex-direction: column; gap: 2px; }
.dapu-tier-rate { text-align: left; }
.dapu-tier-k { font-size: 13px; color: var(--dapu-muted); }
.dapu-tier-v { font-size: 26px; font-weight: 800; line-height: 1.1; }
.dapu-tier-rate .dapu-tier-v { color: var(--dapu-primary); }
.dapu-tier-bar { height: 12px; border-radius: 999px; background: var(--dapu-surface-2); overflow: hidden; }
.dapu-tier-bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--dapu-primary), var(--dapu-primary-2)); transition: width .5s ease; }
.dapu-tier-hint { font-size: 14px; color: var(--dapu-muted); margin: 10px 0 0; }
.dapu-tier-maxed { color: var(--dapu-ok-fg); font-weight: 600; }
.dapu-tier-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dapu-tier-list li { display: flex; align-items: baseline; gap: 6px; border: 1px solid var(--dapu-line); border-radius: 999px; padding: 6px 14px; font-size: 13px; background: var(--dapu-surface); }
.dapu-tier-list .dapu-tier-li-pc { font-weight: 800; }
.dapu-tier-list li.dapu-tier-on {
    border-color: var(--dapu-primary); color: var(--dapu-primary);
    background: var(--dapu-soft); /* fallback */
    background: color-mix(in srgb, var(--dapu-primary) 10%, var(--dapu-card));
}

/* ---------- Campaigns ---------- */
.dapu-campaigns-card { margin-bottom: 18px; }
.dapu-camp-form { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.dapu-camp-form input[type="text"] {
    flex: 1; min-width: 200px; padding: 12px 14px; border: 1px solid var(--dapu-line);
    border-radius: 12px; font-size: 15px; background: var(--dapu-surface); font-family: inherit;
}
.dapu-camp-form input[type="text"]:focus { outline: 0; border-color: var(--dapu-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dapu-primary) 12%, transparent); background: var(--dapu-card); }
.dapu-couponreq-type, .dapu-couponreq-amount {
    padding: 12px 14px; border: 1px solid var(--dapu-line); border-radius: 12px;
    font-size: 15px; background: var(--dapu-surface); font-family: inherit;
}
.dapu-couponreq-type { flex: 0 0 auto; }
.dapu-couponreq-amount { flex: 0 1 160px; min-width: 120px; }
.dapu-couponreq-type:focus, .dapu-couponreq-amount:focus { outline: 0; border-color: var(--dapu-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dapu-primary) 12%, transparent); background: var(--dapu-card); }
.dapu-btn-inline { width: auto; }
.dapu-camp-table .dapu-coupon-actions { min-width: 220px; }
.dapu-camp-act { display: inline-flex; color: var(--dapu-muted); padding: 6px; border-radius: 8px; transition: color .15s ease, background .15s ease; }
.dapu-camp-act:hover { color: var(--dapu-primary); background: color-mix(in srgb, var(--dapu-primary) 8%, var(--dapu-card)); }
.dapu-camp-act .dapu-ico { width: 18px; height: 18px; }
.dapu-camp-del { display: inline-flex; color: var(--dapu-muted); padding: 6px; border-radius: 8px; transition: color .15s ease, background .15s ease; }
.dapu-camp-del:hover { color: var(--dapu-err-fg); background: var(--dapu-err-bg); }
.dapu-camp-del .dapu-ico { width: 18px; height: 18px; }
.dapu-camp-del-cell { white-space: nowrap; }
.dapu-camp-paused { opacity: .65; }
.dapu-camp-tag { font-size: 11px; font-weight: 700; background: var(--dapu-warn-soft-bg); color: var(--dapu-warn-fg2); border-radius: 999px; padding: 2px 8px; margin-inline-start: 6px; }
.dapu-camp-editbtn { background: none; border: 0; cursor: pointer; color: var(--dapu-muted); padding: 2px 4px; margin-inline-start: 4px; vertical-align: middle; }
.dapu-camp-editbtn:hover { color: var(--dapu-primary); }
.dapu-camp-editbtn .dapu-ico { width: 15px; height: 15px; }
.dapu-camp-rename { gap: 6px; margin-top: 8px; }
.dapu-camp-rename input[type="text"] { flex: 1; min-width: 120px; padding: 8px 10px; border: 1px solid var(--dapu-line); border-radius: 9px; font-size: 14px; background: var(--dapu-surface); font-family: inherit; }

.dapu-alert-success { background: var(--dapu-ok-bg); color: var(--dapu-ok-fg); border: 1px solid var(--dapu-ok-line); }

/* Conversions date filter + view-all (affiliate dashboard). */
.dapu-conv-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin: 0 0 14px; font-size: 12.5px; color: var(--dapu-soft-ink); }
.dapu-conv-filter label { display: flex; flex-direction: column; gap: 3px; }
.dapu-conv-filter input[type="date"] { padding: 7px 9px; border: 1px solid var(--dapu-line); border-radius: 9px; font-size: 13px; background: var(--dapu-surface); font-family: inherit; }
.dapu-conv-filter input[type="date"]:focus { outline: 0; border-color: var(--dapu-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dapu-primary) 12%, transparent); background: var(--dapu-card); }
.dapu-conv-filter .dapu-btn-sm { align-self: flex-end; }
.dapu-conv-clear { align-self: flex-end; display: inline-flex; align-items: center; min-height: 32px; color: var(--dapu-muted); font-size: 13px; text-decoration: underline; }

/* Numbered pager */
.dapu-pager { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; margin-top: 16px; }
.dapu-page { min-width: 34px; height: 34px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--dapu-line); border-radius: 9px; background: var(--dapu-card); color: var(--dapu-ink); font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; }
.dapu-page:hover { border-color: var(--dapu-primary); color: var(--dapu-primary); }
.dapu-page-on { background: var(--dapu-primary); border-color: var(--dapu-primary); color: var(--dapu-on-primary); cursor: default; }
.dapu-page-nav { font-size: 18px; line-height: 1; }
.dapu-page-off { opacity: .4; pointer-events: none; }
.dapu-page-gap { color: var(--dapu-muted); padding: 0 2px; }

/* Affiliate notification preference (under recent conversions). */
.dapu-prefs { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--dapu-line); font-size: 13.5px; color: var(--dapu-soft-ink); }
.dapu-prefs label { display: flex; align-items: center; gap: 7px; }

/* Campaigns table -> clean cards on phones: name header, a 3-up stats row
   (clicks / sales / commission), then a full-width copy-link, delete in the
   corner. A real table is too wide for the link column on small screens. */
@media (max-width: 600px) {
    .dapu-camp-table thead { display: none; }
    .dapu-camp-table, .dapu-camp-table tbody { display: block; width: 100%; }
    .dapu-camp-table tr {
        display: flex; flex-wrap: wrap; gap: 8px; position: relative;
        border: 1px solid var(--dapu-line); border-radius: 14px;
        background: var(--dapu-card); box-shadow: var(--dapu-shadow);
        padding: 14px; margin-bottom: 12px;
    }
    .dapu-camp-table td { border: 0 !important; padding: 0; }

    /* Name = card title (room kept on the left for the delete icon). */
    .dapu-camp-table td.dapu-camp-name { flex: 1 1 100%; font-size: 16px; font-weight: 800; padding-left: 30px; }

    /* The three stat cells share one row as centered mini-stats. */
    .dapu-camp-table td[data-label]:not(.dapu-camp-link) {
        flex: 1 1 0; min-width: 0; text-align: center;
        display: flex; flex-direction: column-reverse; gap: 3px;
        background: var(--dapu-surface); border-radius: 10px; padding: 10px 4px;
        font-size: 17px; font-weight: 800;
    }
    .dapu-camp-table td[data-label]:not(.dapu-camp-link)::before {
        content: attr(data-label); color: var(--dapu-muted); font-size: 11.5px; font-weight: 600;
    }

    /* Tracking link spans the full width below the stats. */
    .dapu-camp-table td.dapu-camp-link { flex: 1 1 100%; }
    .dapu-camp-table td.dapu-camp-link::before { content: attr(data-label); display: block; color: var(--dapu-muted); font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
    .dapu-camp-table td.dapu-camp-link .dapu-coupon-actions { min-width: 0; }

    .dapu-camp-table td.dapu-camp-del-cell { position: absolute; top: 12px; left: 12px; }

    /* Generic stacked table: each row becomes a clean white card, each cell a
       labeled line. Backgrounds forced white/transparent so theme table
       striping (the stray gray) can't show through. */
    .dapu-wrap .dapu-stack,
    .dapu-wrap .dapu-stack thead,
    .dapu-wrap .dapu-stack tbody { display: block !important; width: 100%; background: transparent !important; }
    .dapu-wrap .dapu-stack thead { display: none !important; }
    .dapu-wrap .dapu-stack tr {
        display: block !important;
        border: 1px solid var(--dapu-line) !important; border-radius: 12px !important;
        padding: 6px 14px !important; margin-bottom: 10px !important;
        background: var(--dapu-card) !important;
    }
    .dapu-wrap .dapu-stack tr:last-child { margin-bottom: 0 !important; }
    .dapu-wrap .dapu-stack td {
        display: flex !important; justify-content: space-between; align-items: center; gap: 14px;
        border: 0 !important; border-bottom: 1px solid var(--dapu-surface-2) !important;
        padding: 9px 0 !important; background: transparent !important;
        font-size: 14px; text-align: start;
    }
    .dapu-wrap .dapu-stack td:last-child { border-bottom: 0 !important; }
    .dapu-stack td::before {
        content: attr(data-label); flex: 0 0 auto;
        color: var(--dapu-muted); font-size: 12px; font-weight: 600;
    }
    /* Long free-text note: label on its own line, value wraps below. */
    .dapu-wrap .dapu-stack td.dapu-cr-note { display: block !important; }
    .dapu-stack td.dapu-cr-note::before { display: block; margin-bottom: 3px; }

}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
    .dapu-stats { grid-template-columns: repeat(2, 1fr); }
    .dapu-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .dapu-stats { grid-template-columns: 1fr; }
    .dapu-hero { flex-direction: column; align-items: flex-start; }
    .dapu-hero h1 { font-size: 20px; }
}

/* ---------- Theme armor ----------
   Many themes (and the EastVisa global CSS) apply !important rules to bare
   element selectors - e.g. `button, span, div, a, input { font-weight:400
   !important }` and Elementor button sizing. Those override our design.
   We re-assert the dashboard's typography + sizing here with matching
   !important and higher specificity (`.dapu-wrap .x` beats `button`), so the
   dashboard looks the same regardless of the active theme. Scoped under
   .dapu-wrap so nothing leaks to the rest of the site. */
.dapu-wrap .dapu-btn {
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    padding: 11px 18px !important;
    width: auto;
    min-height: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.dapu-wrap .dapu-btn-primary { width: 100% !important; color: var(--dapu-on-primary) !important; }
.dapu-wrap .dapu-btn-inline { width: auto !important; }
/* Logout/ghost button is an <a>, so the theme's blue link color overrides our
   white. Force the right text color per context (currentColor also fixes the
   SVG stroke). */
.dapu-wrap .dapu-hero .dapu-btn-ghost { color: var(--dapu-on-primary) !important; }
.dapu-wrap .dapu-pending .dapu-btn-ghost { color: var(--dapu-primary) !important; }
.dapu-wrap .dapu-login-foot a { color: var(--dapu-primary) !important; }
.dapu-wrap .dapu-lostpass summary { color: var(--dapu-primary) !important; font-weight: 600 !important; }
/* Force the soft button's light background too: the site's global CSS sets a
   solid (blue) background on submit buttons with !important, which left blue
   text on a blue background. Re-assert the tint so text stays readable. */
.dapu-wrap .dapu-btn-soft {
    color: var(--dapu-primary) !important;
    width: auto !important;
    background: var(--dapu-soft) !important;
    background: color-mix(in srgb, var(--dapu-primary) 10%, var(--dapu-card)) !important;
    border: 0 !important;
}
.dapu-wrap .dapu-conv-clear { color: var(--dapu-muted) !important; }
/* The modal close (X) is a <button>; neutralize the theme's global button sizing. */
.dapu-wrap .dapu-modal-x {
    width: auto !important;
    min-height: 0 !important;
    padding: 0 4px !important;
    font-size: 26px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--dapu-muted) !important;
}
.dapu-wrap .dapu-modal-x:hover { color: var(--dapu-ink) !important; background: none !important; }
.dapu-wrap .dapu-page { color: var(--dapu-ink) !important; font-weight: 600 !important; background: var(--dapu-card) !important; }
.dapu-wrap a.dapu-page:hover { color: var(--dapu-primary) !important; }
.dapu-wrap .dapu-page-on { color: var(--dapu-on-primary) !important; background: var(--dapu-primary) !important; }
.dapu-wrap .dapu-camp-del { color: var(--dapu-muted) !important; }
.dapu-wrap .dapu-camp-act { color: var(--dapu-muted) !important; }
.dapu-wrap .dapu-camp-act:hover { color: var(--dapu-primary) !important; }
.dapu-wrap .dapu-camp-del:hover { color: var(--dapu-err-fg) !important; }
/* Inline pencil "edit name" toggle is a bare <button>; strip the theme's global
   button look so it stays a small transparent icon, not a big blue button. */
.dapu-wrap .dapu-camp-editbtn {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 2px 4px !important;
    margin-inline-start: 4px !important;
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    color: var(--dapu-muted) !important;
    font-size: inherit !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}
.dapu-wrap .dapu-camp-editbtn:hover { color: var(--dapu-primary) !important; background: none !important; }
.dapu-wrap .dapu-camp-editbtn .dapu-ico { width: 15px !important; height: 15px !important; }
.dapu-wrap .dapu-camp-del:hover { color: var(--dapu-err-fg) !important; }
.dapu-wrap .dapu-btn-sm { font-size: 13px !important; padding: 8px 12px !important; }
.dapu-wrap .dapu-stat-value { font-weight: 800 !important; font-size: 22px !important; }
.dapu-wrap .dapu-stat-label { font-size: 12.5px !important; }
.dapu-wrap .dapu-coupon-code { font-weight: 800 !important; font-size: 16px !important; }
.dapu-wrap .dapu-badge { font-weight: 700 !important; font-size: 12px !important; }
.dapu-wrap .dapu-strong { font-weight: 800 !important; }
.dapu-wrap .dapu-tier-v { font-weight: 800 !important; font-size: 26px !important; }
.dapu-wrap .dapu-tier-list .dapu-tier-li-pc { font-weight: 800 !important; }
.dapu-wrap .dapu-hero h1 { font-size: 24px !important; }
.dapu-wrap .dapu-login-head h1 { font-size: 22px !important; }
.dapu-wrap .dapu-card h2 { font-size: 17px !important; }
.dapu-wrap .dapu-copy-src { font-size: 12.5px !important; font-weight: 400 !important; }
/* Tab buttons are <button> elements - neutralize theme button sizing/colors so
   they render as flat underline tabs, never as the site's global buttons. */
.dapu-wrap .dapu-tab {
    font-family: inherit !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    min-height: 0 !important;
    width: auto !important;
    height: auto !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    color: var(--dapu-muted) !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
}
/* Chart metric chips are <button> elements - neutralize theme button styling. */
.dapu-wrap .dapu-chip {
    width: auto !important; min-height: 0 !important; height: auto !important;
    font-family: inherit !important; font-size: 13px !important; font-weight: 600 !important;
    line-height: 1 !important; padding: 8px 13px !important;
    text-transform: none !important; letter-spacing: normal !important;
    border: 1px solid var(--dapu-line) !important; border-radius: 999px !important;
    background: var(--dapu-card) !important; background-image: none !important;
    color: var(--dapu-muted) !important; box-shadow: none !important;
}
.dapu-wrap .dapu-chip.dapu-chip-on {
    color: var(--dapu-on-primary) !important; background: var(--dapu-primary) !important;
    background-image: none !important; border-color: var(--dapu-primary) !important;
}
.dapu-wrap .dapu-tab:hover { color: var(--dapu-primary) !important; background: transparent !important; }
.dapu-wrap .dapu-tab.dapu-tab-on {
    color: var(--dapu-primary) !important;
    background: transparent !important;
    background-image: none !important;
    border-bottom: 2px solid var(--dapu-primary) !important;
    box-shadow: none !important;
}
@media (max-width: 520px) {
    .dapu-wrap .dapu-hero h1 { font-size: 20px !important; }
}

/* Mobile tabs: a fixed 2x2 grid of chip tabs instead of a horizontally
   scrolling strip (the scroll made the row feel jumpy). Placed last + with
   !important so it overrides the desktop underline armor above. */
@media (max-width: 600px) {
    .dapu-dash.has-tabs .dapu-tabs {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin: 0 0 18px !important;
        padding: 0 !important;
        border: 0 !important;
        border-bottom: 0 !important;
        overflow: visible !important;
    }
    .dapu-wrap .dapu-tab {
        flex: none !important;
        flex-direction: column !important;
        gap: 6px !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 13px 8px !important;
        margin: 0 !important;
        border: 1px solid var(--dapu-line) !important;
        border-radius: 12px !important;
        background: var(--dapu-card) !important;
        background-image: none !important;
        color: var(--dapu-muted) !important;
        font-size: 12.5px !important;
        line-height: 1.2 !important;
    }
    .dapu-wrap .dapu-tab.dapu-tab-on {
        color: var(--dapu-primary) !important;
        border-color: var(--dapu-primary) !important;
        background: color-mix(in srgb, var(--dapu-primary) 9%, var(--dapu-card)) !important;
    }
    .dapu-wrap .dapu-tab .dapu-ico { width: 19px !important; height: 19px !important; }
}

/* iOS zooms into ANY focused input whose font-size is < 16px - this happens at
   every viewport width, so force 16px GLOBALLY on every text-entry control in
   the plugin (login, register, terms signature, change password, my details,
   coupon request, filters, etc.). Highest practical specificity + !important so
   no per-component rule can drop it back below 16px and re-trigger the zoom. */
.dapu-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]),
.dapu-wrap select,
.dapu-wrap textarea,
.dapu-modal input:not([type="checkbox"]):not([type="radio"]),
.dapu-modal select,
.dapu-modal textarea {
    font-size: 16px !important;
}

/* ---------- Dark mode ----------
   Mizrahnik (and similar) flips html[data-theme="dark"] site-wide. We only
   re-point the dashboard's tokens here; every rule above already consumes them,
   so surfaces, text, brand tints, shadows and status colors all adapt. The
   brand color itself (var(--dapu-primary), from settings) is unchanged, and
   white-on-brand text stays light via --dapu-on-primary. The terms modal is
   nested inside .dapu-wrap, so it inherits these too. Scoped, nothing leaks. */
html[data-theme="dark"] .dapu-wrap,
body[data-theme="dark"] .dapu-wrap {
    --dapu-ink: #e5e7eb;
    --dapu-muted: #9ca3af;
    --dapu-soft-ink: #cbd5e1;
    --dapu-line: rgba(229, 231, 235, .14);
    --dapu-bg: #0b1220;
    --dapu-card: #111827;
    --dapu-surface: #0f172a;
    --dapu-surface-2: rgba(229, 231, 235, .06);
    --dapu-shadow: 0 8px 30px rgba(0, 0, 0, .45);
    /* status: translucent dark fills + lighter text for AA contrast */
    --dapu-ok-bg: rgba(34, 197, 94, .16);    --dapu-ok-fg: #86efac;  --dapu-ok-line: rgba(34, 197, 94, .30);
    --dapu-warn-bg: rgba(245, 158, 11, .16); --dapu-warn-fg: #fcd34d; --dapu-warn-fg2: #fbbf24; --dapu-warn-soft-bg: rgba(245, 158, 11, .14);
    --dapu-info-bg: rgba(59, 130, 246, .16); --dapu-info-fg: #93c5fd;
    --dapu-err-bg: rgba(239, 68, 68, .16);   --dapu-err-fg: #fca5a5; --dapu-err-line: rgba(239, 68, 68, .30);
    --dapu-neutral-bg: rgba(229, 231, 235, .08);
}
/* The "accent" stat is a deliberately dark card in light mode; in dark mode
   give it a brand-tinted fill so it reads as a card, not a void. */
html[data-theme="dark"] .dapu-wrap .dapu-stat-accent,
body[data-theme="dark"] .dapu-wrap .dapu-stat-accent {
    background: linear-gradient(135deg, color-mix(in srgb, var(--dapu-primary) 24%, #0b1220), #0b1220);
    border: 1px solid var(--dapu-line);
}

/* ---------- Host-theme button armor (borders / shadows / outlines) ----------
   Elementor and many themes paint bare <button>/<a> with their own border,
   box-shadow and outline (on Mizrahnik this showed as a stray red ring around
   every button, and white text on the copy button). Strip all of it and
   re-assert each dapu button's own chrome, so only the configured brand color
   shows. Placed last so it wins. */
.dapu-wrap .dapu-btn,
.dapu-wrap .dapu-copy {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
/* Primary keeps its brand-tinted lift; ghost keeps its translucent hero border. */
.dapu-wrap .dapu-btn-primary {
    box-shadow: 0 8px 20px color-mix(in srgb, var(--dapu-primary) 28%, transparent) !important;
}
.dapu-wrap .dapu-hero .dapu-btn-ghost {
    border: 1px solid rgba(255, 255, 255, .35) !important;
}
/* Copy-link button: force its tint + brand text (theme tried white-on-nothing). */
.dapu-wrap .dapu-copy {
    color: var(--dapu-primary) !important;
    background: var(--dapu-soft) !important;
}
.dapu-wrap .dapu-copy.copied {
    color: var(--dapu-ok-fg) !important;
    background: var(--dapu-ok-bg) !important;
}
/* Keyboard focus stays visible and on-brand, never the theme's color. */
.dapu-wrap .dapu-btn:focus-visible,
.dapu-wrap .dapu-copy:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--dapu-primary) 45%, transparent) !important;
    outline-offset: 2px;
}

/* ---------- Soft/secondary buttons: force brand color on text + icon --------
   The soft buttons (סינון, CSV, העתק לינק, שמירה) sit on a light brand tint, so
   their text/icon must be the brand color, never white. An earlier rule set this
   with !important but at a lower specificity (2 classes) and something in the
   host stack still won, leaving white-on-light (unreadable) in light mode. This
   block wins for good: 3 classes + !important, placed last in the cascade, and
   it also pins the SVG stroke directly (the icon is stroke="currentColor", so a
   stray white `color` upstream painted the icon white too). Primary buttons are
   untouched: they keep white text on the green fill. */
.dapu-wrap .dapu-btn.dapu-btn-soft,
.dapu-wrap a.dapu-btn.dapu-btn-soft,
.dapu-wrap button.dapu-btn.dapu-btn-soft,
.dapu-wrap .dapu-btn.dapu-copy,
.dapu-wrap a.dapu-btn.dapu-copy,
.dapu-wrap button.dapu-btn.dapu-copy {
    color: var(--dapu-primary) !important;
}
.dapu-wrap .dapu-btn.dapu-btn-soft .dapu-ico,
.dapu-wrap .dapu-btn.dapu-copy .dapu-ico {
    stroke: var(--dapu-primary) !important;
    color: var(--dapu-primary) !important;
}

/* ---------- Conversions/payouts date filter: keep it inside the card ---------
   The date filter (מתאריך / עד תאריך / סינון) is a wrapping flex row. On the
   Mizrahnik site a global theme rule forces a wide fixed width on <input>, so on
   phones the two date fields overflowed the card and visually stacked on top of
   each other (eastvisa has no such global rule, so it was fine there). Pin the
   inputs to their container and, under 560px, give each date field its own full
   row so the layout always stays clean regardless of the host's input styling. */
.dapu-wrap .dapu-conv-filter input[type="date"] {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
@media (max-width: 560px) {
    .dapu-wrap .dapu-conv-filter label {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }
    .dapu-wrap .dapu-conv-filter input[type="date"] { width: 100% !important; }
    .dapu-wrap .dapu-conv-filter .dapu-btn-sm,
    .dapu-wrap .dapu-conv-filter .dapu-conv-clear { align-self: flex-start !important; }
}