/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root { --bg:#0d1117; --panel:#161b22; --text:#e6edf3; --muted:#8b949e;
        --green:#3fb950; --red:#f85149; --blue:#58a6ff; --amber:#d29922; }
body { background:var(--bg); color:var(--text); font-family:-apple-system,system-ui,sans-serif;
       max-width:960px; margin:0 auto; padding:16px; }
.panel { background:var(--panel); border-radius:12px; padding:16px; margin:12px 0; }
.bar { background:#21262d; border-radius:6px; height:14px; overflow:hidden; }
.bar-fill { height:100%; background:var(--green); }
.bar-fill.over { background:var(--red); }
.bar-fill.protein { background:var(--blue); }
.muted { color:var(--muted); font-size:0.85em; }
.meal-row { display:flex; justify-content:space-between; gap:8px; padding:8px 0; border-bottom:1px solid #21262d; }
.chart { display:flex; align-items:flex-end; gap:3px; height:140px; }
.chart .col { flex:1; display:flex; flex-direction:column; justify-content:flex-end; }
.chart .col > div { border-radius:2px 2px 0 0; }

.app-header { display:flex; align-items:center; justify-content:space-between; }
.link-button { background:none; border:none; color:var(--blue); cursor:pointer; font-size:0.85em; padding:0; }
a { color:var(--blue); }