/**
 * Bariboost Tracker — Front-end app styles
 *
 * Calm, mobile-first design for [bariboost_app] shortcode.
 * Protein is visually primary; calories are muted.
 *
 * @package Bariboost_Tracker
 * @since   0.1.0
 */

/* ── Scope reset ─────────────────────────────────────────────────────────── */
#bariboost-tracker-app,
#bariboost-tracker-app *,
#bariboost-tracker-app *::before,
#bariboost-tracker-app *::after {
    box-sizing: border-box;
}

#bariboost-tracker-app.bb-app {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #1d2327;
    max-width: 520px;
    margin: 0 auto;
    padding: 1.25rem 1rem 2rem;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.bb-app__header {
    margin-bottom: 1.5rem;
}

.bb-app__title {
    margin: 0 0 .35rem;
    font-size: 1.35rem;
    font-weight: 600;
    color: #1d2327;
}

.bb-app__intro,
.bb-app__hint {
    margin: 0;
    font-size: .9rem;
    color: #666;
    line-height: 1.55;
}

.bb-app__section-title {
    margin: 0 0 .75rem;
    font-size: 1rem;
    font-weight: 600;
    color: #1d2327;
}

.bb-app__section {
    margin-bottom: 1.75rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #ececec;
}

.bb-app__section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* ── Notices ──────────────────────────────────────────────────────────────── */
.bb-app__notice {
    padding: .75rem 1rem;
    margin: 0 0 1rem;
    border-radius: 4px;
    font-size: .9rem;
    background: #eff6ff;
    border-left: 3px solid #2563eb;
    color: #1d2327;
}

.bb-app__notice--warn {
    background: #fffbeb;
    border-left-color: #d97706;
}

.bb-app__notice a {
    color: #1a6b3e;
    font-weight: 500;
}

/* ── Form controls ──────────────────────────────────────────────────────────── */
.bb-search-bar,
.bb-weight-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: stretch;
}

.bb-search-bar .bb-input[type="search"] {
    flex: 1 1 100%;
    min-width: 0;
}

.bb-input,
.bb-select {
    padding: .55rem .75rem;
    font-size: 1rem;
    line-height: 1.4;
    border: 1px solid #dcdcde;
    border-radius: 4px;
    background: #fff;
    color: #1d2327;
}

.bb-input:focus,
.bb-select:focus {
    border-color: #1a6b3e;
    outline: 2px solid rgba(26, 107, 62, 0.2);
    outline-offset: 0;
}

.bb-input--date {
    flex: 1 1 auto;
    min-width: 130px;
}

.bb-input--number {
    width: 5.5rem;
}

.bb-select {
    flex: 0 0 auto;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.bb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .55rem 1rem;
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.4;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    background: #f0f0f1;
    color: #1d2327;
}

.bb-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.bb-btn--primary {
    background: #1a6b3e;
    color: #fff;
    border-color: #1a6b3e;
}

.bb-btn--primary:hover:not(:disabled),
.bb-btn--primary:focus:not(:disabled) {
    background: #155a34;
    border-color: #155a34;
}

.bb-btn--ghost {
    background: transparent;
    border-color: #dcdcde;
    color: #666;
    font-size: .8rem;
    padding: .35rem .65rem;
}

.bb-btn--ghost:hover:not(:disabled),
.bb-btn--ghost:focus:not(:disabled) {
    color: #b32d2e;
    border-color: #b32d2e;
}

/* ── Status & feedback ────────────────────────────────────────────────────── */
.bb-status {
    min-height: 1.25rem;
    margin: .35rem 0 .5rem;
    font-size: .875rem;
    color: #666;
}

.bb-feedback {
    margin-top: .5rem;
    font-size: .875rem;
}

.bb-feedback.is-success {
    color: #1a6b3e;
}

.bb-feedback.is-error {
    color: #b32d2e;
}

/* ── Diary date toolbar (view today or past days) ─────────────────────────── */
.bb-diary-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .35rem;
}

.bb-diary-toolbar__title {
    margin: 0;
}

.bb-diary-toolbar__date-label {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    font-size: .75rem;
    color: #666;
}

.bb-diary-toolbar__date-text {
    font-weight: 500;
}

.bb-diary-date-label {
    margin-bottom: .75rem;
}

/* ── Food log list ──────────────────────────────────────────────────────────── */
.bb-today-log__list {
    min-height: 1.5rem;
}

.bb-today-log__empty {
    margin: 0;
    font-size: .9rem;
    color: #888;
}

.bb-today-log__totals {
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid #ececec;
    font-size: .875rem;
    color: #555;
}

/* ── Results table ────────────────────────────────────────────────────────── */
#bariboost-tracker-app .bb-results-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: .5rem;
    font-size: .875rem;
}

#bariboost-tracker-app .bb-results-table th {
    text-align: left;
    font-weight: 600;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #666;
    padding: .5rem .4rem;
    border-bottom: 1px solid #e0e0e0;
}

#bariboost-tracker-app .bb-results-table td {
    padding: .6rem .4rem;
    vertical-align: middle;
    border-bottom: 1px solid #f0f0f0;
}

#bariboost-tracker-app .bb-results-table tbody tr:last-child td {
    border-bottom: none;
}

.bb-food-name {
    display: block;
    font-weight: 600;
    color: #1d2327;
}

.bb-food-type {
    display: block;
    font-size: .75rem;
    color: #999;
    margin-top: 2px;
}

.bb-protein-value {
    color: #1a6b3e;
    font-weight: 600;
    white-space: nowrap;
}

.bb-calories-value {
    color: #888;
    white-space: nowrap;
}

.bb-log-status {
    display: inline-block;
    margin-left: .35rem;
    font-size: .75rem;
    color: #1a6b3e;
}

.bb-log-status.is-error {
    color: #b32d2e;
}

/* ── Wider screens ────────────────────────────────────────────────────────── */
@media (min-width: 480px) {
    .bb-search-bar .bb-input[type="search"] {
        flex: 1 1 12rem;
    }

    .bb-search-bar .bb-btn--primary {
        flex: 0 0 auto;
    }
}