/* ============================================================
   SHARED-DESIGN.CSS — Landing v2 философи ↔ Dashboard SSOT
   ============================================================
   Design tokens + shared component classes нь Landing v2 (src/index.html)
   ба Dashboard (src/dashboard.html, src/borrower.html) 2 контекстэд ижил
   төстэй "premium" харагдац өгнө.

   ЗАРЧИМ:
   • Light theme нь Dashboard-ийн DEFAULT (өөрчлөгдөөгүй)
   • Dark theme нь [data-theme="dark"] toggle-оор (одоо байгаа)
   • Landing v2-ийн card radius, hover, spotlight, typography, spacing —
     dashboard-т мөн ижил "мэдрэмж" төрүүлдэг паттерн болно
   • Тухайн pattern-ыг ss- prefix-тэй утилити class-аар нэвтрэх боломжтой
   • Одоо байгаа .dash-card / .d-form-card / .stat-card нь нэмэлт hover
     + shadow улам полишлагдана (admin.css-т patch хийгдсэн)

   Encoding: include after base.css (dashboard-т), landing v2-т нэмэлт биш.
   ============================================================ */

/* ─── Design tokens — Landing v2-той нийцсэн (Light default) ─────────── */
:root {
    /* Хуваарь бүхий (spacing/radius) — Landing v2-той ижил */
    --ss-radius-sm: 8px;
    --ss-radius: 12px;
    --ss-radius-lg: 20px;

    /* Shadow layered (Landing v2 hero-preview pattern) */
    --ss-shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 4px 20px -8px rgba(0,0,0,0.08);
    --ss-shadow-lift: 0 4px 12px -2px rgba(0,0,0,0.08), 0 12px 32px -8px rgba(0,0,0,0.12);
    --ss-shadow-inset-top: inset 0 1px 0 rgba(255,255,255,0.6);

    /* Accent — Landing v2 tri-tone (Light дэвсгэр дээр илүү бага opacity) */
    --ss-emerald: #10b981;
    --ss-emerald-bg: rgba(16, 185, 129, 0.08);
    --ss-emerald-border: rgba(16, 185, 129, 0.25);
    --ss-gold: #f9d71c;
    --ss-gold-bg: rgba(249, 215, 28, 0.1);
    --ss-gold-border: rgba(249, 215, 28, 0.35);
    --ss-indigo: #6366f1;
    --ss-indigo-bg: rgba(99, 102, 241, 0.08);
    --ss-indigo-border: rgba(99, 102, 241, 0.25);

    /* Card baseline (light) */
    --ss-card-bg: #ffffff;
    --ss-card-border: rgba(15, 23, 42, 0.08);
    --ss-card-border-hover: rgba(15, 23, 42, 0.16);
    --ss-card-spotlight: rgba(15, 23, 42, 0.04);
}

/* ─── Dark theme override (Landing v2 palette-той ижил) ────────────────
   Dashboard-т [data-theme="dark"] set хийгдвэл автомат landing харагдац. */
[data-theme="dark"] {
    --ss-card-bg: #171a22;
    --ss-card-border: rgba(255, 255, 255, 0.08);
    --ss-card-border-hover: rgba(255, 255, 255, 0.14);
    --ss-card-spotlight: rgba(255, 255, 255, 0.06);
    --ss-emerald-bg: rgba(16, 185, 129, 0.12);
    --ss-emerald-border: rgba(16, 185, 129, 0.3);
    --ss-gold-bg: rgba(249, 215, 28, 0.12);
    --ss-gold-border: rgba(249, 215, 28, 0.3);
    --ss-indigo-bg: rgba(99, 102, 241, 0.12);
    --ss-indigo-border: rgba(99, 102, 241, 0.3);
    --ss-shadow-card: 0 1px 0 rgba(255,255,255,0.05) inset, 0 20px 40px -20px rgba(0,0,0,0.5);
    --ss-shadow-lift: 0 1px 0 rgba(255,255,255,0.08) inset, 0 12px 32px -8px rgba(0,0,0,0.5);
    --ss-shadow-inset-top: inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ─── SS-CARD — Landing v2 bento card-тай ижил pattern ──────────────── */
.ss-card {
    position: relative;
    background: var(--ss-card-bg);
    border: 1px solid var(--ss-card-border);
    border-radius: var(--ss-radius-lg);
    padding: 24px 22px;
    box-shadow: var(--ss-shadow-card);
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    overflow: hidden;
}
.ss-card:hover {
    border-color: var(--ss-card-border-hover);
    transform: translateY(-2px);
    box-shadow: var(--ss-shadow-lift);
}
/* Cursor spotlight — landing bento-тэй ижил (JS optional: --mx, --my set хийнэ) */
.ss-card::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 50%),
                var(--ss-card-spotlight), transparent 70%);
    opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
}
.ss-card:hover::before { opacity: 1; }
.ss-card > * { position: relative; z-index: 1; }

/* ─── SS-ICON — colored chip (landing bento icon-тэй ижил) ────────────── */
.ss-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 10px;
    background: var(--ss-indigo-bg);
    border: 1px solid var(--ss-indigo-border);
    color: var(--ss-indigo);
    margin-bottom: 16px;
}
.ss-icon.ss-icon-emerald { background: var(--ss-emerald-bg); border-color: var(--ss-emerald-border); color: var(--ss-emerald); }
.ss-icon.ss-icon-gold { background: var(--ss-gold-bg); border-color: var(--ss-gold-border); color: #b58900; }
[data-theme="dark"] .ss-icon.ss-icon-gold { color: #fde68a; }
[data-theme="dark"] .ss-icon.ss-icon-emerald { color: #6ee7b7; }
[data-theme="dark"] .ss-icon { color: #a5b4fc; }
.ss-icon svg { width: 22px; height: 22px; }

/* ─── SS-EYEBROW — Landing v2 section eyebrow subtle uppercase label ─── */
.ss-eyebrow {
    display: inline-block;
    padding: 4px 12px; border-radius: 100px;
    background: rgba(15,23,42,0.04);
    border: 1px solid rgba(15,23,42,0.06);
    color: rgba(15,23,42,0.5);
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
    margin-bottom: 14px;
}
[data-theme="dark"] .ss-eyebrow {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.5);
}

/* ─── SS-BTN — Landing v2 button hierarchy ────────────────────────────── */
.ss-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 18px; border-radius: 10px;
    font-family: inherit; font-size: 0.875rem; font-weight: 600;
    border: 1px solid transparent; cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
    white-space: nowrap;
}
.ss-btn-gold {
    background: linear-gradient(135deg, #f9d71c 0%, #eab308 100%);
    color: #0a0b0f;
    box-shadow: 0 2px 8px rgba(249,215,28,0.25), 0 1px 0 rgba(255,255,255,0.4) inset;
}
.ss-btn-gold:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(249,215,28,0.35), 0 1px 0 rgba(255,255,255,0.5) inset;
}
.ss-btn-outline {
    background: transparent;
    border-color: var(--ss-card-border);
    color: inherit;
}
.ss-btn-outline:hover:not(:disabled) {
    border-color: var(--ss-card-border-hover);
    background: var(--ss-card-spotlight);
}
.ss-btn-lg { padding: 13px 22px; font-size: 0.9375rem; }

/* ─── Existing admin.css/borrower.css components-т nemel enhance ─────── */
/* .dash-card + .d-form-card + .b-loan-card бүгд hover lift + subtle spotlight
   авах — admin.css/borrower.css-т class нэмэхгүйгээр глобал ажиллана.
   User-т одоо байгаа class хэвээр, зөвхөн харагдац сайжирна. */

.dash-card, .d-form-card {
    transition: transform 0.25s cubic-bezier(0.16,1,0.3,1),
                box-shadow 0.25s ease, border-color 0.25s ease;
    position: relative; overflow: hidden;
}
.dash-card:hover, .d-form-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ss-shadow-lift);
    border-color: var(--ss-card-border-hover);
}

/* Stat card ирсэн ч landing v2 aesthetic-тай нийцүүлсэн hover */
.stat-card {
    transition: transform 0.25s cubic-bezier(0.16,1,0.3,1),
                box-shadow 0.25s ease, border-color 0.25s ease;
}
.stat-card:hover {
    /* admin.css-т аль хэдийн бий, override биш reinforce */
    transform: translateY(-2px);
    border-color: var(--ss-card-border-hover);
}

/* ─── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ss-card, .dash-card, .d-form-card, .stat-card { transition: none; }
    .ss-card:hover, .dash-card:hover, .d-form-card:hover, .stat-card:hover { transform: none; }
    .ss-btn-gold:hover:not(:disabled) { transform: none; }
}