/**
 * ══════════════════════════════════════════════════════════════
 * GLOBAL UNIFY v2 — Nepal Cooperative Platform
 * Public · Admin · Member · Verify — सबैमा एउटै
 *
 * Load order: design-tokens.css → _color-vars.php → global-unify-v2.css
 *
 * सबै color var(--primary-color) बाट आउँछ।
 * Admin Settings → Primary Color बदल्दा सबैतिर change हुन्छ।
 * ══════════════════════════════════════════════════════════════
 */

/* ──────────────────────────────────────────────
   1. FONT — Noto Sans Devanagari + Mukta global
   ────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@300;400;500;600;700;800&family=Noto+Sans+Devanagari:wght@300;400;500;600;700&display=swap');

html {
    font-size: 14px;
    scroll-behavior: smooth;
}

body,
.mem-wrapper,
.main-content,
.admin-shell {
    font-family: var(--font-primary, 'Mukta', 'Noto Sans Devanagari', 'Segoe UI', sans-serif) !important;
    color: var(--text-primary, #1a2e1f);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* All inputs/buttons inherit font */
input, select, textarea, button {
    font-family: inherit !important;
}

/* ──────────────────────────────────────────────
   2. TYPOGRAPHY SCALE — consistent across panels
   ────────────────────────────────────────────── */
h1 { font-size: clamp(1.4rem, 3.5vw, 2rem); font-weight: 700; line-height: 1.3; }
h2 { font-size: clamp(1.2rem, 3vw, 1.6rem); font-weight: 700; line-height: 1.35; }
h3 { font-size: clamp(1rem, 2.5vw, 1.3rem); font-weight: 600; line-height: 1.4; }
h4 { font-size: 1.05rem; font-weight: 600; }
h5 { font-size: .95rem;  font-weight: 600; }
h6 { font-size: .88rem;  font-weight: 600; }

/* ──────────────────────────────────────────────
   3. COLOR TOKENS — all from admin Settings
   ────────────────────────────────────────────── */

/* Bootstrap .btn-primary → brand */
.btn-primary,
.bg-primary {
    background-color: var(--primary-color, #1a5f2a) !important;
    border-color: var(--primary-color, #1a5f2a) !important;
    color: var(--text-on-primary, #fff) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--primary-dark, #144a21) !important;
    border-color: var(--primary-dark, #144a21) !important;
    color: var(--text-on-primary, #fff) !important;
}
.btn-outline-primary {
    color: var(--primary-color, #1a5f2a) !important;
    border-color: var(--primary-color, #1a5f2a) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--primary-color, #1a5f2a) !important;
    color: var(--text-on-primary, #fff) !important;
}

/* Bootstrap .btn-secondary → brand secondary */
.btn-secondary,
.bg-secondary {
    background-color: var(--secondary-color, #c0392b) !important;
    border-color: var(--secondary-color, #c0392b) !important;
    color: var(--text-on-secondary, #fff) !important;
}
.btn-secondary:hover {
    background-color: var(--secondary-dark, #922b21) !important;
    border-color: var(--secondary-dark, #922b21) !important;
    color: var(--text-on-secondary, #fff) !important;
}

/* text-primary → brand */
.text-primary { color: var(--primary-color, #1a5f2a) !important; }

/* focus ring across all panels */
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.admin-input:focus,
.admin-select:focus,
.mem-form-control:focus {
    border-color: var(--primary-color, #1a5f2a) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 26,95,42), .14) !important;
    outline: none !important;
}
.form-check-input:checked {
    background-color: var(--primary-color, #1a5f2a) !important;
    border-color: var(--primary-color, #1a5f2a) !important;
}

/* nav pills/tabs active — admin pages are excluded (admin-modern.css handles tabs there) */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--primary-color, #1a5f2a) !important;
    border-color: var(--primary-color, #1a5f2a) !important;
    color: var(--text-on-primary, #fff) !important;
}
/* Public + member tab active: filled pill style */
body:not([class*="admin-page-"]) .nav-tabs .nav-link.active {
    background-color: var(--primary-color, #1a5f2a) !important;
    border-color: var(--primary-color, #1a5f2a) !important;
    color: var(--text-on-primary, #fff) !important;
}
.nav-link { color: var(--primary-color, #1a5f2a); }

/* badges */
.badge.bg-primary { background-color: var(--primary-color, #1a5f2a) !important; color: var(--text-on-primary, #fff) !important; }
.badge.bg-secondary { background-color: var(--secondary-color, #c0392b) !important; color: var(--text-on-secondary, #fff) !important; }

/* topbar / header strip */
.top-bar, .topbar, .header-top, .site-topbar, .quick-links-bar {
    background-color: var(--header-color, var(--secondary-color, #c0392b)) !important;
    color: var(--text-on-header, #fff) !important;
}
.top-bar a, .topbar a, .header-top a, .site-topbar a, .quick-links-bar a {
    color: inherit !important;
}

/* footer */
footer, .site-footer, .footer, .footer-section {
    background-color: var(--footer-color, var(--primary-color, #1a5f2a)) !important;
    color: var(--text-on-footer, #fff) !important;
}
footer a, .site-footer a, .footer a {
    color: color-mix(in srgb, var(--text-on-footer, #fff) 90%, transparent) !important;
}
footer a:hover, .site-footer a:hover, .footer a:hover {
    color: var(--text-on-footer, #fff) !important;
}

/* ──────────────────────────────────────────────
   4. ADMIN PANEL — brand gradient topbar
   ────────────────────────────────────────────── */
.admin-shell body,
body.admin-shell {
    background: var(--bg-page, #f8faf9) !important;
}

/* Admin brand-gradient → uses bridged --brand-primary = --primary-color */
/* already set in admin/assets/design-tokens.css — nothing extra needed */

/* Admin table head → brand */
.admin-table thead th {
    background: var(--primary-color, #1a5f2a) !important;
    color: var(--text-on-primary, #fff) !important;
}

/* Admin sidebar active item */
.sidebar-nav li.active > a,
.sidebar-nav a.active,
.sidebar-nav a:hover {
    color: var(--primary-color, #1a5f2a) !important;
}
.sidebar-nav li.active > a,
.sidebar-nav a.active {
    background: color-mix(in srgb, var(--primary-color, #1a5f2a) 10%, white) !important;
}

/* ──────────────────────────────────────────────
   5. FORMS — global consistent field style
   ────────────────────────────────────────────── */
.form-control,
.form-select {
    font-family: inherit !important;
    font-size: .9rem !important;
    border-radius: 8px !important;
    border-color: var(--border-color, #d1d5db) !important;
    background: #fafbfa !important;
    color: var(--text-primary, #1a2e1f) !important;
    min-height: 42px;
    transition: border-color .18s, box-shadow .18s !important;
}
.form-label,
label {
    font-size: .82rem !important;
    font-weight: 600 !important;
    color: var(--text-secondary, #374151) !important;
    margin-bottom: 4px !important;
}

/* readonly / disabled */
.form-control[readonly],
.form-control:disabled,
.form-select:disabled {
    background: color-mix(in srgb, var(--primary-color, #1a5f2a) 5%, #f9fafb) !important;
    color: var(--text-muted, #6b7280) !important;
    border-style: dashed !important;
    cursor: default !important;
}

/* ──────────────────────────────────────────────
   6. BUTTONS — global consistent style
   ────────────────────────────────────────────── */
.btn {
    font-family: inherit !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    transition: all .18s ease !important;
}
.btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 26,95,42), .2) !important;
    outline: none !important;
}

/* ──────────────────────────────────────────────
   7. CARDS — consistent across panels
   ────────────────────────────────────────────── */
.card {
    border-radius: 12px !important;
    border-color: var(--border-color, #e5e7eb) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.05), 0 4px 16px rgba(var(--primary-rgb, 26,95,42), .05) !important;
}
.card-header {
    background: color-mix(in srgb, var(--primary-color, #1a5f2a) 5%, white) !important;
    border-bottom-color: var(--border-color, #e5e7eb) !important;
    font-weight: 600 !important;
    font-size: .9rem !important;
}

/* ──────────────────────────────────────────────
   8. ALERTS — theme-aligned soft pills
   ────────────────────────────────────────────── */
.alert { border-radius: 10px !important; font-size: .88rem !important; }
.alert-success, .alert-primary {
    background: #f0fdf4 !important; color: var(--primary-color, #1a5f2a) !important; border-color: #86efac !important;
}
.alert-info {
    background: #ecfeff !important; color: #0e7490 !important; border-color: #a5f3fc !important;
}
.alert-warning {
    background: #fffbeb !important; color: #92400e !important; border-color: #fde68a !important;
}
.alert-danger {
    background: #fef2f2 !important; color: #b91c1c !important; border-color: #fecaca !important;
}

/* ──────────────────────────────────────────────
   9. TABLES — global consistent
   ────────────────────────────────────────────── */
.table {
    font-size: .88rem !important;
    color: var(--text-primary, #1a2e1f) !important;
}
.table thead th {
    font-size: .72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    background: color-mix(in srgb, var(--primary-color, #1a5f2a) 8%, white) !important;
    color: var(--primary-color, #1a5f2a) !important;
    border-color: var(--border-color, #e5e7eb) !important;
}
.table tbody tr:hover td {
    background: color-mix(in srgb, var(--primary-color, #1a5f2a) 4%, white) !important;
}

/* ──────────────────────────────────────────────
   10. PAGINATION
   ────────────────────────────────────────────── */
.page-item.active .page-link {
    background-color: var(--primary-color, #1a5f2a) !important;
    border-color: var(--primary-color, #1a5f2a) !important;
    color: var(--text-on-primary, #fff) !important;
}
.page-link { color: var(--primary-color, #1a5f2a) !important; border-radius: 6px !important; }
.page-link:hover { background: color-mix(in srgb, var(--primary-color, #1a5f2a) 10%, white) !important; }

/* ──────────────────────────────────────────────
   11. MODAL
   ────────────────────────────────────────────── */
.modal-content { border-radius: 14px !important; border: none !important; }
.modal-header {
    background: linear-gradient(135deg, var(--primary-color, #1a5f2a), var(--primary-light, #2e8b4a)) !important;
    color: var(--text-on-primary, #fff) !important;
    border-radius: 14px 14px 0 0 !important;
}
.modal-header .btn-close { filter: invert(1) brightness(2); }
.modal-title { font-weight: 700 !important; }

/* ──────────────────────────────────────────────
   12. PROGRESS / SPINNER
   ────────────────────────────────────────────── */
.progress-bar { background-color: var(--primary-color, #1a5f2a) !important; }
.spinner-border.text-primary,
.spinner-grow.text-primary { color: var(--primary-color, #1a5f2a) !important; }

/* ──────────────────────────────────────────────
   13. LINK HOVER — consistent
   ────────────────────────────────────────────── */
a { color: var(--primary-color, #1a5f2a); }
a:hover { color: var(--primary-dark, #144a21); }
/* Override for white-on-dark contexts */
.btn-primary a, .bg-primary a,
header a, .mem-topbar a,
footer a, .site-footer a { color: inherit !important; }

/* ──────────────────────────────────────────────
   14. RESPONSIVE
   ────────────────────────────────────────────── */
@media (max-width: 768px) {
    html { font-size: 14px; }
    h1 { font-size: 1.35rem; }
    h2 { font-size: 1.15rem; }
    .table-responsive-stack thead { display: none; }
    .table-responsive-stack tbody td {
        display: flex; justify-content: space-between;
        padding: 6px 10px; font-size: .82rem;
        border-bottom: 1px solid var(--border-color, #e5e7eb);
    }
    .table-responsive-stack tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-muted, #6b7280);
        font-size: .72rem;
        text-transform: uppercase;
    }
}

@media (max-width: 480px) {
    html { font-size: 13px; }
}

/* ──────────────────────────────────────────────
   15. HERO TEXT SAFETY (public homepage)
   ────────────────────────────────────────────── */
.hero-title-modern,
.slider-content h1,
.hero-title-modern *,
.slider-content h1 * {
    color: #fff !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.4) !important;
}
.hero-subtitle-modern,
.slider-content p {
    color: rgba(255,255,255,.92) !important;
}

/* ──────────────────────────────────────────────
   16. PRINT
   ────────────────────────────────────────────── */
@media print {
    .no-print, .mem-topbar, .mem-nav, .mp-bottom-nav,
    .admin-sidebar, .mem-submit-btn { display: none !important; }
    body { font-size: 12pt !important; color: #000 !important; }
    a { color: inherit !important; text-decoration: none !important; }
}