/**
 * Chakula Smart — shared Bootstrap + Font Awesome UI patterns
 */

:root {
    --ui-green: var(--brand-800, #1b4332);
    --ui-green-mid: var(--brand-600, #2d6a4f);
    --ui-green-light: var(--brand-500, #40916c);
    --ui-gold: var(--accent-500, #d4a017);
}

/* ── Icon primitives ── */
.ui-icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(45, 106, 79, 0.1);
    color: var(--ui-green-mid);
    flex-shrink: 0;
}
.ui-icon-circle--sm { width: 2.25rem; height: 2.25rem; font-size: 0.95rem; }
.ui-icon-circle--md { width: 3rem; height: 3rem; font-size: 1.25rem; }
.ui-icon-circle--lg { width: 3.75rem; height: 3.75rem; font-size: 1.6rem; }
.ui-icon-circle.text-success { background: rgba(45, 106, 79, 0.12); color: var(--ui-green-mid); }
.ui-icon-circle.text-warning { background: rgba(212, 175, 55, 0.15); color: var(--ui-gold); }
.ui-icon-circle.text-primary { background: rgba(13, 110, 253, 0.1); }

.ui-badge-icon i { font-size: 0.75em; vertical-align: -0.05em; }

.ui-stars { color: var(--ui-gold); letter-spacing: 0.05em; }
.ui-stars .ui-star { font-size: 0.85rem; }

.ui-food-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: linear-gradient(145deg, #e8f5e9, #fff);
    color: var(--ui-green-mid);
    font-size: 1.35rem;
    box-shadow: 0 2px 10px rgba(27, 67, 50, 0.1);
}
.ui-food-icon--lg { width: 4rem; height: 4rem; font-size: 1.75rem; }

.ui-heading { display: flex; align-items: center; gap: 0.35rem; font-weight: 700; }

/* ── Trust bar (landing) ── */
.trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.95rem;
    color: var(--ui-green-mid);
}

/* ── Stat / dashboard tiles ── */
.ui-stat-tile {
    border: 0;
    border-radius: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ui-stat-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 40, 28, 0.1) !important;
}
.ui-stat-tile .ui-stat-icon {
    font-size: 1.5rem;
    color: var(--ui-green-mid);
    margin-bottom: 0.5rem;
}

/* ── Achievement cards ── */
.ui-ach-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(45, 106, 79, 0.1);
    color: var(--ui-green-mid);
    font-size: 1.1rem;
}

/* ── Mood / quick-log buttons ── */
.ui-mood-btn i { font-size: 1.25rem; display: block; margin-bottom: 0.25rem; }

/* ── Share action row ── */
.ui-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
}

/* ── Sidebar nav — Font Awesome alignment ── */
.dash-nav-link i.fa-solid,
.dash-nav-link i.fa-brands {
    width: 1.15rem;
    text-align: center;
    font-size: 0.95rem;
    opacity: 0.9;
}
.dash-icon-btn i.fa-solid { font-size: 1rem; }
.navbar-app .nav-link i.fa-solid,
.navbar-app .nav-link i.fa-regular {
    margin-right: 0.35rem;
    font-size: 0.85rem;
    opacity: 0.9;
}

.lang-switcher i.fa-solid { font-size: 0.95rem; }

.lang-switcher .dropdown-item.active {
    font-weight: 600;
    color: var(--primary-green, #2d6a4f);
}

html[data-theme="dark"] .lang-switcher .dropdown-item.active {
    color: #b7e4c7;
}

/* ── Page headers ── */
.app-page-header h1 i { font-size: 0.85em; vertical-align: 0.05em; }

/* ── Feature cards (landing) ── */
.ui-feature-icon { margin-bottom: 1rem; }

/* ── Empty states ── */
.ui-empty-icon {
    font-size: 2.5rem;
    color: rgba(45, 106, 79, 0.35);
    margin-bottom: 0.75rem;
}

/* ── Coach tip indicators ── */
.ui-coach-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
}
.ui-coach-mark--ok { background: rgba(25, 135, 84, 0.15); color: #198754; }
.ui-coach-mark--warn { background: rgba(255, 193, 7, 0.2); color: #997404; }
.ui-coach-mark--info { background: rgba(13, 110, 253, 0.12); color: #0d6efd; }