/* =====================================================================
   Suivi Nutrition - Design system mobile-first
   ===================================================================== */

:root {
    --color-bg: #f5f7f6;
    --color-surface: #ffffff;
    --color-border: #e5e9e7;
    --color-text: #16211d;
    --color-text-muted: #6b7772;
    --color-primary: #1f8a5f;
    --color-primary-dark: #146a47;
    --color-primary-light: #e5f5ee;
    --color-danger: #d94b4b;
    --color-danger-light: #fbeaea;
    --color-warning: #d99a2b;
    --color-warning-light: #fbf3e1;
    --color-carbs: #3a86ff;
    --color-protein: #d94b4b;
    --color-fat: #d99a2b;
    --color-fiber: #6f42c1;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --shadow-card: 0 1px 3px rgba(16, 30, 24, 0.06), 0 1px 2px rgba(16, 30, 24, 0.08);
    --nav-height: 64px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg: #101513;
        --color-surface: #1a211e;
        --color-border: #2a332e;
        --color-text: #eef2f0;
        --color-text-muted: #8f9c96;
        --color-primary: #2fbb7d;
        --color-primary-dark: #1f8a5f;
        --color-primary-light: #143427;
        --color-danger-light: #3a1f1f;
        --color-warning-light: #3a2f18;
    }
}
:root[data-theme="dark"] {
    --color-bg: #101513;
    --color-surface: #1a211e;
    --color-border: #2a332e;
    --color-text: #eef2f0;
    --color-text-muted: #8f9c96;
    --color-primary: #2fbb7d;
    --color-primary-dark: #1f8a5f;
    --color-primary-light: #143427;
    --color-danger-light: #3a1f1f;
    --color-warning-light: #3a2f18;
}

* { box-sizing: border-box; }
html { scroll-padding-top: var(--safe-top); -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.45;
    padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 12px);
    padding-top: var(--safe-top);
}
h1, h2, h3 { margin: 0 0 8px; line-height: 1.25; }
h1 { font-size: 22px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
p { margin: 0 0 8px; }
a { color: var(--color-primary); text-decoration: none; }
.muted { color: var(--color-text-muted); font-size: 13px; }
button { font-family: inherit; }

/* --- Layout --- */
.page {
    max-width: 640px;
    margin: 0 auto;
    padding: 16px 16px 8px;
}
.app-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: calc(12px + var(--safe-top)) 16px 12px;
}
.app-header-inner {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.app-header h1 { font-size: 18px; margin: 0; }
.header-actions { display: flex; gap: 8px; align-items: center; }
.icon-btn {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 999px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: 18px;
}

/* --- Cards --- */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 16px;
    margin-bottom: 14px;
}
.card-title {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.card-title h2 { margin: 0; }

/* --- Grid summary (dashboard) --- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.stat-box {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 14px;
    box-shadow: var(--shadow-card);
}
.stat-box .label { font-size: 12px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.stat-box .value { font-size: 22px; font-weight: 700; margin-top: 4px; }
.stat-box .sub { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }

/* --- Ring / progress --- */
.ring-wrap { display: flex; align-items: center; gap: 16px; }
.ring-numbers { flex: 1; }
.ring-numbers .big { font-size: 26px; font-weight: 800; }
.ring-numbers .goal { color: var(--color-text-muted); font-size: 13px; }

.progress-bar {
    height: 10px;
    background: var(--color-bg);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--color-border);
}
.progress-bar > div {
    height: 100%;
    border-radius: 999px;
    background: var(--color-primary);
    transition: width .3s ease;
}
.progress-bar.over > div { background: var(--color-danger); }

.macro-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0; }
.macro-row .macro-label { width: 78px; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.macro-row .macro-bar { flex: 1; }
.macro-row .macro-val { width: 92px; text-align: right; font-size: 12px; color: var(--color-text-muted); flex-shrink: 0; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.dot-protein { background: var(--color-protein); }
.dot-carbs { background: var(--color-carbs); }
.dot-fat { background: var(--color-fat); }
.dot-fiber { background: var(--color-fiber); }

/* --- Buttons --- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    min-height: 44px;
    text-decoration: none;
}
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:active { background: var(--color-primary-dark); }
.btn-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
.btn-danger { background: var(--color-danger-light); color: var(--color-danger); }
.btn-ghost { background: transparent; color: var(--color-primary); padding: 8px 10px; min-height: auto; }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 12px; font-size: 13px; min-height: 36px; }
.btn-row { display: flex; gap: 8px; }
.fab {
    position: fixed;
    right: 16px;
    bottom: calc(var(--nav-height) + var(--safe-bottom) + 16px);
    width: 56px; height: 56px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-size: 28px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(31, 138, 95, .4);
    z-index: 30;
    border: none;
}

/* --- Forms --- */
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 12px; }
label > span, label > .label-text { display: block; margin-bottom: 5px; }
input, select, textarea {
    width: 100%;
    font-size: 16px; /* évite le zoom auto iOS */
    padding: 11px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-family: inherit;
}
textarea { resize: vertical; min-height: 70px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field-hint { font-size: 12px; color: var(--color-text-muted); font-weight: 400; margin-top: 4px; }
.radio-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.radio-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 10px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.radio-card input { display: none; }
.radio-card.checked { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-primary-dark); }

/* --- Alerts / flash --- */
.alert { padding: 12px 14px; border-radius: var(--radius-sm); margin-bottom: 12px; font-size: 14px; }
.alert-error { background: var(--color-danger-light); color: var(--color-danger); }
.alert-success { background: var(--color-primary-light); color: var(--color-primary-dark); }
.alert-warning { background: var(--color-warning-light); color: #7a5713; }
.alert-info { background: #e6f0fb; color: #1b558f; }

/* --- Lists --- */
.list { display: flex; flex-direction: column; gap: 8px; }
.list-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.list-item .li-main { flex: 1; min-width: 0; }
.list-item .li-title { font-weight: 600; font-size: 14px; }
.list-item .li-sub { font-size: 12px; color: var(--color-text-muted); }
.list-item .li-val { font-weight: 700; font-size: 14px; white-space: nowrap; }
.swipe-actions { display: flex; gap: 6px; }

.meal-group { margin-bottom: 16px; }
.meal-group-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.meal-group-header h3 { display: flex; align-items: center; gap: 6px; }
.meal-group-header .kcal { font-size: 13px; color: var(--color-text-muted); }

/* --- Bottom navigation --- */
.bottom-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: calc(var(--nav-height) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    display: flex;
    z-index: 25;
}
.bottom-nav a {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    color: var(--color-text-muted);
    font-size: 10.5px;
    font-weight: 600;
}
.bottom-nav a .icon { font-size: 20px; }
.bottom-nav a.active { color: var(--color-primary); }

/* --- Tabs --- */
.tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; }
.tabs a, .tabs button {
    flex-shrink: 0;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
}
.tabs a.active, .tabs button.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* --- Auth pages --- */
.auth-wrap, .install-wrap {
    max-width: 400px;
    margin: 40px auto;
    padding: 0 20px;
}
.install-wrap { max-width: 480px; }
.auth-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-card);
}
.auth-logo { text-align: center; font-size: 40px; margin-bottom: 6px; }
.install-body { padding-bottom: 40px; }
.install-form h2 { margin-top: 20px; font-size: 15px; color: var(--color-primary-dark); }
.install-done { text-align: center; }

/* --- Empty states --- */
.empty-state { text-align: center; padding: 30px 16px; color: var(--color-text-muted); }
.empty-state .icon { font-size: 38px; margin-bottom: 8px; }

/* --- Meal photo --- */
.photo-upload-zone {
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    padding: 24px;
    text-align: center;
    color: var(--color-text-muted);
}
.meal-photo-thumb { width: 100%; max-height: 220px; object-fit: cover; border-radius: var(--radius-md); margin-bottom: 10px; }
.ai-item-row { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 10px; margin-bottom: 8px; }
.confidence-badge { font-size: 10px; padding: 2px 7px; border-radius: 999px; font-weight: 700; text-transform: uppercase; }
.confidence-haute { background: var(--color-primary-light); color: var(--color-primary-dark); }
.confidence-moyenne { background: var(--color-warning-light); color: #7a5713; }
.confidence-faible { background: var(--color-danger-light); color: var(--color-danger); }

/* --- Chart canvas wrapper --- */
.chart-wrap { width: 100%; overflow-x: auto; }
canvas { max-width: 100%; }

/* --- Misc --- */
.section-title { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); margin: 18px 0 8px; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--color-primary-light); color: var(--color-primary-dark); }
.divider { height: 1px; background: var(--color-border); margin: 14px 0; border: none; }
.link-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--color-border); font-size: 14px; }
.link-row:last-child { border-bottom: none; }

@media (min-width: 700px) {
    .page { padding: 24px 16px; }
    .stat-grid { grid-template-columns: repeat(4, 1fr); }
}