/* ════════════════════════════════════════════════════════════════════
   THEME GUARD — defensive baseline so host-theme CSS can't reshape the
   plugin UI.

   Why this exists: the plugin renders inside arbitrary WordPress themes.
   Themes routinely style GENERIC selectors — `.btn`, `[type=submit]`,
   `button`, `input`, `th, td` — at low specificity (0,1,0). Those tie with
   the plugin's own element rules and win on source order whenever the theme
   stylesheet loads after ours, hijacking geometry (padding, border-radius,
   min-height) and sometimes color.

   Strategy: re-assert the plugin's design baseline, SCOPED under the four
   plugin wrapper classes. That lifts every rule here to >= (0,2,0), which
   beats a theme's bare (0,1,0) selectors on specificity regardless of load
   order. `!important` is added only on the handful of properties themes push
   through `var(--theme-*)` tokens / `.woocommerce button.button` (0,2,1)
   style selectors — centralized here, not scattered across the codebase.

   Loaded LAST (depends on the dashboard + registration stylesheets) so it is
   the final word. Scope roots:
     .dimi-affiliate-dashboard-container   — logged-in dashboard
     .dimi-affiliate-login-screen          — logged-out login
     .dimi-affiliate-register-wrap         — registration page
     .dimi-affiliate-registration-form     — register/login split card
   ════════════════════════════════════════════════════════════════════ */

/* ---- Box model: themes love to set their own box-sizing/line-height ---- */
.dimi-affiliate-dashboard-container,
.dimi-affiliate-dashboard-container *,
.dimi-affiliate-dashboard-container *::before,
.dimi-affiliate-dashboard-container *::after,
.dimi-affiliate-login-screen,
.dimi-affiliate-login-screen *,
.dimi-affiliate-login-screen *::before,
.dimi-affiliate-login-screen *::after,
.dimi-affiliate-register-wrap,
.dimi-affiliate-register-wrap *,
.dimi-affiliate-register-wrap *::before,
.dimi-affiliate-register-wrap *::after {
    box-sizing: border-box;
}

/* ─────────────────────────────────────────────────────────────────
   PRIMARY BUTTONS — .btn/.btn-primary, the reg/login submits, and the
   legacy action buttons that also carry these classes. Themes force
   padding/border-radius/min-height via design tokens; pin the plugin's.
   ───────────────────────────────────────────────────────────────── */
.dimi-affiliate-dashboard-container .btn,
.dimi-affiliate-dashboard-container .btn-primary,
.dimi-affiliate-dashboard-container .btn-secondary,
.dimi-affiliate-dashboard-container .copy-btn,
.dimi-affiliate-dashboard-container .request-payout-btn,
.dimi-affiliate-dashboard-container .action-btn,
.dimi-affiliate-dashboard-container .add-payment-method,
.dimi-affiliate-login-screen .reg-submit,
.dimi-affiliate-register-wrap .reg-submit {
    min-height: 0 !important;
    height: auto !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    background-image: none !important;
    font-family: inherit !important;
    width: auto;
}

/* Geometry baseline for ALL plugin buttons (not just primary) — themes set
   padding/border-radius on bare `.btn`/`button` via design tokens. Pin the
   plugin's shape so every button keeps it. (.btn base = 0.75rem 1.5rem / 6px;
   the accent block below re-pins primary/submit to their 13px/10px look.) */
.dimi-affiliate-dashboard-container .btn,
.dimi-affiliate-dashboard-container .btn-secondary,
.dimi-affiliate-dashboard-container .action-btn,
.dimi-affiliate-dashboard-container .add-payment-method {
    padding: 0.75rem 1.5rem !important;
    border-radius: 6px !important;
}
.dimi-affiliate-dashboard-container .btn-large {
    padding: 1rem 2rem !important;
}

/* Accent FILL only — color/border, never geometry. Geometry for dashboard
   buttons is the plugin's .btn baseline (0.75rem 1.5rem / 6px), pinned above;
   the reg/login submits get their own 13px/10px geometry below. Putting
   padding/radius here was the bug that inflated dashboard .btn-primary. */
.dimi-affiliate-dashboard-container .btn-primary,
.dimi-affiliate-dashboard-container button.btn.btn-primary,
.dimi-affiliate-dashboard-container .copy-btn,
.dimi-affiliate-dashboard-container .request-payout-btn,
.dimi-affiliate-login-screen .reg-submit,
.dimi-affiliate-register-wrap .reg-submit {
    background: var(--di-primary, #2563EB) !important;
    background-color: var(--di-primary, #2563EB) !important;
    color: #fff !important;
    border: 0 !important;
    font-weight: 600 !important;
}
.dimi-affiliate-dashboard-container .btn-primary:hover,
.dimi-affiliate-dashboard-container button.btn.btn-primary:hover,
.dimi-affiliate-dashboard-container .copy-btn:hover,
.dimi-affiliate-dashboard-container .request-payout-btn:hover,
.dimi-affiliate-login-screen .reg-submit:hover,
.dimi-affiliate-register-wrap .reg-submit:hover {
    background: var(--di-primary-hover, #1D4ED8) !important;
    background-color: var(--di-primary-hover, #1D4ED8) !important;
    color: #fff !important;
}
.dimi-affiliate-dashboard-container .btn-primary *,
.dimi-affiliate-login-screen .reg-submit *,
.dimi-affiliate-register-wrap .reg-submit * {
    color: #fff !important;
}

/* Full-width submits keep their own geometry (taller, more rounded than the
   compact dashboard .btn). */
.dimi-affiliate-login-screen .reg-submit,
.dimi-affiliate-register-wrap .reg-submit {
    width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 0.9375rem !important;
    padding: 13px 20px !important;
    border-radius: 10px !important;
}

/* ─────────────────────────────────────────────────────────────────
   FORM CONTROLS — themes set their own input padding/height/border.
   ───────────────────────────────────────────────────────────────── */
.dimi-affiliate-dashboard-container input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.dimi-affiliate-dashboard-container select,
.dimi-affiliate-dashboard-container textarea,
.dimi-affiliate-login-screen .reg-field input,
.dimi-affiliate-login-screen .reg-field textarea,
.dimi-affiliate-register-wrap .reg-field input,
.dimi-affiliate-register-wrap .reg-field textarea {
    font-family: inherit;
    line-height: 1.4;
    box-shadow: none;
}

/* The reg/login inputs have a specific look (left icon padding, radius); make
   sure a theme's generic input rule can't flatten it. */
.dimi-affiliate-login-screen .reg-field input,
.dimi-affiliate-register-wrap .reg-field input {
    min-height: 0 !important;
    border-radius: 10px !important;
    background: var(--di-surface, #FFFFFF) !important;
}

/* ─────────────────────────────────────────────────────────────────
   TABLES — themes apply `th, td { padding }` which bloats our compact
   data tables and any embedded widget (e.g. the date picker).
   ───────────────────────────────────────────────────────────────── */
.dimi-affiliate-dashboard-container table {
    border-collapse: collapse;
}

/* ─────────────────────────────────────────────────────────────────
   LINKS — themes set link color/underline globally.
   ───────────────────────────────────────────────────────────────── */
.dimi-affiliate-dashboard-container a.btn,
.dimi-affiliate-login-screen a.reg-submit {
    text-decoration: none !important;
}