/* =========================================================
   OYAFI CUSTOMER THEME SYSTEM
   Dark is the default. Light is applied globally with
   html[data-theme="light"].
   ========================================================= */

html[data-theme="light"] {
    color-scheme: light;
    --oyafi-light-bg: #f4f7fb;
    --oyafi-light-surface: #ffffff;
    --oyafi-light-surface-2: #eef3f8;
    --oyafi-light-border: #d9e1ea;
    --oyafi-light-text: #17202a;
    --oyafi-light-muted: #667487;
    --oyafi-light-input: #ffffff;
    --oyafi-light-shadow: 0 18px 45px rgba(31, 45, 61, .08);
}

html[data-theme="light"] body.dashboard-body,
html[data-theme="light"] .dashboard-body {
    background: var(--oyafi-light-bg) !important;
    color: var(--oyafi-light-text) !important;
}

/* Main customer shell */
html[data-theme="light"] .dashboard-main {
    background:
        radial-gradient(circle at 80% 0%, rgba(0,196,204,.08), transparent 30%),
        var(--oyafi-light-bg) !important;
}

html[data-theme="light"] .dashboard-sidebar {
    background: rgba(255,255,255,.96) !important;
    border-right-color: var(--oyafi-light-border) !important;
    box-shadow: 8px 0 30px rgba(31,45,61,.04);
}

html[data-theme="light"] .dashboard-nav-link {
    color: #667080 !important;
}

html[data-theme="light"] .dashboard-nav-link:hover {
    background: #eef3f7 !important;
    color: #17202a !important;
}

html[data-theme="light"] .dashboard-nav-link.is-active {
    background: rgba(0,196,204,.10) !important;
    color: #009ca4 !important;
}

html[data-theme="light"] .dashboard-topbar h1,
html[data-theme="light"] .dashboard-section-heading h2,
html[data-theme="light"] .dashboard-panel-heading h2,
html[data-theme="light"] .dashboard-section-heading,
html[data-theme="light"] .dashboard-topbar,
html[data-theme="light"] .dashboard-content-grid {
    color: var(--oyafi-light-text) !important;
}

html[data-theme="light"] .dashboard-muted,
html[data-theme="light"] .dashboard-wallet-note {
    color: var(--oyafi-light-muted) !important;
}

/* Common customer surfaces */
html[data-theme="light"] .dashboard-panel,
html[data-theme="light"] .dashboard-service-card,
html[data-theme="light"] .dashboard-reward-card,
html[data-theme="light"] .dashboard-account-strip,
html[data-theme="light"] .dashboard-padi,
html[data-theme="light"] .dashboard-wallet,
html[data-theme="light"] .dashboard-stat-card,
html[data-theme="light"] .wallet-balance-card,
html[data-theme="light"] .wallet-fund-card,
html[data-theme="light"] .wallet-stat-card,
html[data-theme="light"] .wallet-activity-panel,
html[data-theme="light"] .wallet-security,
html[data-theme="light"] .tx-card,
html[data-theme="light"] .panel,
html[data-theme="light"] .transaction-detail,
html[data-theme="light"] .notification-card,
html[data-theme="light"] .notifications-empty,
html[data-theme="light"] .reward-card,
html[data-theme="light"] .reward-item,
html[data-theme="light"] .referral-hero,
html[data-theme="light"] .referral-link-box,
html[data-theme="light"] .referral-row,
html[data-theme="light"] .coupon-row,
html[data-theme="light"] .spin-banner,
html[data-theme="light"] .wheel-card,
html[data-theme="light"] .product-modal,
html[data-theme="light"] .product-result,
html[data-theme="light"] .product-result-overlay,
html[data-theme="light"] .customer-product-card {
    background: var(--oyafi-light-surface) !important;
    color: var(--oyafi-light-text) !important;
    border-color: var(--oyafi-light-border) !important;
    box-shadow: var(--oyafi-light-shadow);
}

html[data-theme="light"] .dashboard-service-icon,
html[data-theme="light"] .dashboard-reward-icon,
html[data-theme="light"] .notification-icon,
html[data-theme="light"] .reward-icon {
    background: #edf3f8 !important;
}

html[data-theme="light"] .dashboard-panel-heading,
html[data-theme="light"] .dashboard-panel-link,
html[data-theme="light"] .dashboard-service-card,
html[data-theme="light"] .dashboard-service-card strong,
html[data-theme="light"] .dashboard-reward-card,
html[data-theme="light"] .dashboard-reward-card strong,
html[data-theme="light"] .wallet-panel-heading,
html[data-theme="light"] .wallet-panel-link,
html[data-theme="light"] .tx-type,
html[data-theme="light"] .tx-sub,
html[data-theme="light"] .tx-field,
html[data-theme="light"] .detail-key,
html[data-theme="light"] .detail-value,
html[data-theme="light"] .notification-head h3,
html[data-theme="light"] .notification-body p,
html[data-theme="light"] .reward-card,
html[data-theme="light"] .reward-item,
html[data-theme="light"] .referral-row,
html[data-theme="light"] .product-modal-copy,
html[data-theme="light"] .product-provider,
html[data-theme="light"] .product-description,
html[data-theme="light"] .product-price {
    color: var(--oyafi-light-text) !important;
}

html[data-theme="light"] .dashboard-service-card small,
html[data-theme="light"] .dashboard-reward-card small,
html[data-theme="light"] .wallet-page-description,
html[data-theme="light"] .wallet-balance-note,
html[data-theme="light"] .wallet-stat-label,
html[data-theme="light"] .tx-meta,
html[data-theme="light"] .tx-ref,
html[data-theme="light"] .notification-meta,
html[data-theme="light"] .notifications-page-copy,
html[data-theme="light"] .reward-type,
html[data-theme="light"] .result-secondary,
html[data-theme="light"] .product-description {
    color: var(--oyafi-light-muted) !important;
}

/* Inputs across the customer app */
html[data-theme="light"] input:not([type="radio"]):not([type="checkbox"]),
html[data-theme="light"] textarea,
html[data-theme="light"] select,
html[data-theme="light"] .product-field input,
html[data-theme="light"] .product-field select,
html[data-theme="light"] .padi-form textarea {
    color: var(--oyafi-light-text) !important;
    background: var(--oyafi-light-input) !important;
    border-color: var(--oyafi-light-border) !important;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
    color: #8a96a5 !important;
}

/* Dashboard top actions / bell / avatar */
html[data-theme="light"] .dashboard-icon-button,
html[data-theme="light"] .dashboard-avatar {
    background: var(--oyafi-light-surface) !important;
    border-color: var(--oyafi-light-border) !important;
    color: var(--oyafi-light-text) !important;
}

html[data-theme="light"] .dashboard-account-link {
    color: #17202a !important;
}

/* Mobile bottom navigation and menu sheet */
html[data-theme="light"] .dashboard-mobile-nav {
    background: rgba(255,255,255,.96) !important;
    border-color: var(--oyafi-light-border) !important;
    box-shadow: 0 15px 45px rgba(31,45,61,.15) !important;
}

html[data-theme="light"] .dashboard-mobile-nav-item,
html[data-theme="light"] .dashboard-mobile-nav-icon {
    color: #697587 !important;
}

html[data-theme="light"] .dashboard-mobile-nav-item.is-active,
html[data-theme="light"] .dashboard-mobile-nav-item.is-active .dashboard-mobile-nav-icon {
    color: #009ca4 !important;
}

html[data-theme="light"] .dashboard-mobile-sheet {
    background: #ffffff !important;
    border-color: var(--oyafi-light-border) !important;
    box-shadow: 0 25px 80px rgba(31,45,61,.22) !important;
}

html[data-theme="light"] .dashboard-mobile-sheet-header h2,
html[data-theme="light"] .dashboard-mobile-sheet-grid strong,
html[data-theme="light"] .dashboard-mobile-menu-list a span {
    color: var(--oyafi-light-text) !important;
}

html[data-theme="light"] .dashboard-mobile-sheet-close {
    background: #eef3f7 !important;
    border-color: var(--oyafi-light-border) !important;
    color: #536174 !important;
}

html[data-theme="light"] .dashboard-mobile-sheet-grid a,
html[data-theme="light"] .dashboard-mobile-menu-list a {
    background: #f6f8fb !important;
    border-color: var(--oyafi-light-border) !important;
    color: var(--oyafi-light-text) !important;
}

/* Padi */
html[data-theme="light"] .padi-page {
    background:
        radial-gradient(circle at 8% 2%, rgba(0,196,204,.12), transparent 31%),
        radial-gradient(circle at 96% 92%, rgba(78,79,255,.08), transparent 34%),
        var(--oyafi-light-bg) !important;
}

html[data-theme="light"] .padi-card {
    background: rgba(255,255,255,.97) !important;
    border-color: var(--oyafi-light-border) !important;
}

html[data-theme="light"] .padi-header {
    background: linear-gradient(118deg, rgba(0,196,204,.09), rgba(255,255,255,.5) 50%, rgba(78,79,255,.07)) !important;
    border-bottom-color: var(--oyafi-light-border) !important;
}

html[data-theme="light"] .padi-header h1,
html[data-theme="light"] .padi-message,
html[data-theme="light"] .padi-message.assistant {
    color: var(--oyafi-light-text) !important;
}

html[data-theme="light"] .padi-header p,
html[data-theme="light"] .padi-escalation,
html[data-theme="light"] .padi-form label {
    color: var(--oyafi-light-muted) !important;
}

html[data-theme="light"] .padi-chat,
html[data-theme="light"] .padi-actions {
    background-color: #f4f7fb !important;
}

html[data-theme="light"] .padi-message.assistant {
    background: #ffffff !important;
    border-color: var(--oyafi-light-border) !important;
}

html[data-theme="light"] .padi-form {
    background: #ffffff !important;
    border-top-color: var(--oyafi-light-border) !important;
}

/* Notifications / bell panel */
html[data-theme="light"] .notification-card.is-unread {
    border-color: #00bfc8 !important;
}

html[data-theme="light"] .notification-icon {
    color: #009ca4 !important;
}

/* Product modal */
html[data-theme="light"] .product-modal-overlay,
html[data-theme="light"] .reward-modal-overlay,
html[data-theme="light"] .reward-result-overlay {
    background: rgba(18,28,40,.42) !important;
}

html[data-theme="light"] .product-modal-close,
html[data-theme="light"] .modal-close {
    background: #eef3f7 !important;
    color: #536174 !important;
    border-color: var(--oyafi-light-border) !important;
}

/* Reward/referral secondary surfaces */
html[data-theme="light"] .reward-tabs,
html[data-theme="light"] .reward-tab-panel,
html[data-theme="light"] .reward-choice,
html[data-theme="light"] .claim-fields,
html[data-theme="light"] .referral-actions {
    background: var(--oyafi-light-surface-2) !important;
    color: var(--oyafi-light-text) !important;
    border-color: var(--oyafi-light-border) !important;
}

/* Generic dark secondary blocks used by customer pages */
html[data-theme="light"] .dashboard-empty,
html[data-theme="light"] .product-empty,
html[data-theme="light"] .wallet-empty,
html[data-theme="light"] .json-pre,
html[data-theme="light"] .tx-json,
html[data-theme="light"] .result-mini-detail,
html[data-theme="light"] .product-summary,
html[data-theme="light"] .product-summary-row {
    background: var(--oyafi-light-surface-2) !important;
    color: var(--oyafi-light-text) !important;
    border-color: var(--oyafi-light-border) !important;
}

/* Links */
html[data-theme="light"] a:not(.dashboard-primary-button):not(.dashboard-secondary-button):not(.product-primary):not(.primary):not(.button) {
    color: inherit;
}

/* Keep teal action controls intact */
html[data-theme="light"] .dashboard-primary-button,
html[data-theme="light"] .product-primary,
html[data-theme="light"] .primary,
html[data-theme="light"] .button-primary,
html[data-theme="light"] .wallet-primary-button,
html[data-theme="light"] .wallet-fund-submit,
html[data-theme="light"] .reward-button,
html[data-theme="light"] .spin-big-button {
    color: #061114 !important;
}

/* Settings page is also covered by the global theme */
html[data-theme="light"] .account-page {
    background: var(--oyafi-light-bg) !important;
    color: var(--oyafi-light-text) !important;
}