/* ═══════════════════════════════════════════════════════════════
   THEME OVERRIDES v3 — Phase 3 visual unification
   Catches off-theme colors, fonts, and spacing across:
   - member-welfare.php (claim type icons)
   - online-kyc.php (wizard step buttons)
   - छिटो लिंक quick-link dropdown
   - notice cards, top-bar, mobile fonts
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. CLAIM TYPE ICONS (member-welfare.php) ─────────────────
   Inline background-color attrs override theme; we use !important
   to recolor them as soft theme-derived tints with subtle hue shift
   for distinction (still semantic but no longer rainbow). */
.claim-types-list .claim-type-item .type-icon {
    background-color: var(--primary-color) !important;
    color: var(--text-on-primary, #fff) !important;
    box-shadow: 0 2px 6px rgba(var(--primary-rgb,26,95,42), .25);
    border-radius: 10px;
}
.claim-types-list .claim-type-item[data-type="death"]     .type-icon { background-color: #475569 !important; }
.claim-types-list .claim-type-item[data-type="accident"]  .type-icon { background-color: var(--color-warning, #d97706) !important; }
.claim-types-list .claim-type-item[data-type="medical"]   .type-icon { background-color: var(--color-success, #16a34a) !important; }
.claim-types-list .claim-type-item[data-type="insurance"] .type-icon { background-color: var(--color-info, #0891b2) !important; }
.claim-types-list .claim-type-item[data-type="maternity"] .type-icon { background-color: #db2777 !important; }
.claim-types-list .claim-type-item[data-type="other"]     .type-icon { background-color: var(--primary-color) !important; }

/* Radio-card type-box — outline + theme-tinted hover */
.claim-type-selector .type-option .type-box {
    border: 1.5px solid var(--border-color, #e5e7eb);
    border-radius: var(--radius-md, 10px);
    padding: 10px 12px;
    transition: all .18s ease;
    background: #fff;
}
.claim-type-selector .type-option:hover .type-box,
.claim-type-selector .type-option input:checked + .type-box {
    border-color: var(--primary-color);
    background: rgba(var(--primary-rgb,26,95,42), .06);
    color: var(--primary-dark);
    box-shadow: var(--shadow-focus);
}

/* ─── 2. ONLINE KYC — wizard step pills visibility fix ─────── */
#kymWizardNav.kym-wizard-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
#kymWizardNav .kym-step-btn {
    border-radius: 999px !important;
    flex-shrink: 0;
    font-family: var(--font-primary);
}
#kymWizardNav .kym-step-btn .kym-step-num {
    margin-right: 4px;
}
#kymWizardNav .kym-step-label {
    max-width: 140px;
}
@media (max-width: 576px) {
    #kymWizardNav .kym-step-label { max-width: 90px; }
}

/* ─── 3. QUICK-LINK (छिटो लिंक) DROPDOWN — kill red, use theme ─ */
.dropdown-menu.quick-link-menu,
.quick-links-dropdown .dropdown-menu,
.dropdown-menu[data-quick="links"],
.topbar .dropdown-menu {
    background: #fff !important;
    color: var(--text-primary, #1a2e1f) !important;
    border: 1px solid var(--border-color, #e5e7eb) !important;
    border-radius: var(--radius-md, 10px) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 6px !important;
}
.topbar .dropdown-menu .dropdown-item,
.quick-links-dropdown .dropdown-menu .dropdown-item {
    color: var(--text-primary, #1a2e1f) !important;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: var(--font-size-sm, .875rem);
}
.topbar .dropdown-menu .dropdown-item:hover,
.quick-links-dropdown .dropdown-menu .dropdown-item:hover {
    background: rgba(var(--primary-rgb,26,95,42), .08) !important;
    color: var(--primary-dark) !important;
}
.topbar .dropdown-menu .dropdown-item i,
.quick-links-dropdown .dropdown-menu .dropdown-item i {
    color: var(--primary-color);
    width: 18px;
    text-align: center;
}

/* ─── 4. NOTICE LIST CARDS — homepage सूचनाहरू unify gradient ── */
.notices-box-enhanced .notices-header,
.notice-card .notice-card-header,
.notices-section .section-header,
.notice-list-card > .card-header {
    background: linear-gradient(135deg,
        var(--primary-dark, #144a21),
        var(--primary-color, #1a5f2a)) !important;
    color: var(--text-on-primary, #fff) !important;
}
.notices-box-enhanced .notices-header h3,
.notices-box-enhanced .notices-header h3 i { color: #fff !important; }

/* Date pill — theme-tinted instead of orange */
.notice-date-box,
.notice-date,
.notice-item .date-badge {
    background: rgba(var(--primary-rgb,26,95,42), .10) !important;
    color: var(--primary-dark) !important;
}
.notice-date-box .day,
.notice-date .day { color: var(--primary-color) !important; }

/* ─── 5. FONT SIZE — bump small/cramped text on mobile ──────── */
@media (max-width: 768px) {
    body, .form-control, .form-select {
        font-size: var(--font-size-base, 0.9375rem);
    }
    .small, small { font-size: 0.825rem; }
    .breadcrumb, .breadcrumb-modern { font-size: 0.8rem; }
    .page-title-modern { font-size: clamp(1.4rem, 5vw, 2rem) !important; }
    h1 { font-size: clamp(1.5rem, 5.5vw, 2.2rem); }
    h2 { font-size: clamp(1.25rem, 4.5vw, 1.75rem); }
    h3 { font-size: clamp(1.05rem, 4vw, 1.4rem); }
}

/* ─── 6. TABLE LIST — consistent header/row styling ─────────── */
.table.table-modern thead th,
.admin-table thead th,
.member-table thead th {
    background: rgba(var(--primary-rgb,26,95,42), .08);
    color: var(--primary-dark);
    font-weight: 700;
    font-size: var(--font-size-sm);
    border-bottom: 2px solid var(--primary-color);
}
.table.table-modern tbody tr:hover,
.admin-table tbody tr:hover,
.member-table tbody tr:hover {
    background: rgba(var(--primary-rgb,26,95,42), .04);
}

/* ─── 7. TABS — unified theme look ──────────────────────────── */
.nav-tabs .nav-link {
    color: var(--text-secondary);
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    font-size: var(--font-size-sm);
}
.nav-tabs .nav-link.active {
    color: var(--primary-color);
    border-color: var(--border-color) var(--border-color) #fff;
    border-bottom: 2px solid var(--primary-color);
    background: #fff;
}
.nav-pills .nav-link.active {
    background: var(--primary-color) !important;
    color: var(--text-on-primary) !important;
}

/* ─── 8. ICONS in cards — match brand ───────────────────────── */
.feature-card .icon, .service-card .icon, .stat-card .icon,
.info-card i:first-child, .quick-action i {
    color: var(--primary-color);
}

/* ─── 9. FORM controls — consistent on every panel ──────────── */
.form-control, .form-select, .input-group-text {
    border-radius: var(--radius-sm, 6px);
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
}
.form-label { font-weight: 600; color: var(--text-primary); font-size: var(--font-size-sm); }

/* ─── 10. BUTTONS — kill stray bootstrap red/yellow on brand ── */
.btn-warning.btn-brand-override,
.btn-danger.btn-brand-override {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-on-primary) !important;
}