/* Habits: check-in cards, history strips and the habit pages. Bootstrap does the rest. */

.habits {
    --habit-muted: #6c757d;
    --habit-border: rgba(0, 0, 0, .08);
    --habit-success: #2f8f5b;
    --habit-on-track: #7fbf96;
    --habit-pending: #d9a441;
    --habit-fail: #c0392b;
    --habit-off: rgba(0, 0, 0, .07);
    max-width: 1280px;
    margin: 0 auto;
    padding: 1rem 1rem 3rem;
}

.habits-tabs { border-bottom: 1px solid var(--habit-border); margin-bottom: 1.25rem; }
.habits-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; }
.habits-header h1 { font-size: 1.75rem; margin: 0; line-height: 1.2; }
.habits-subtitle { color: var(--habit-muted); margin-top: .25rem; }
.habits-description { max-width: 60rem; }

.habit-daynav { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.habits-group { margin-bottom: 2rem; }
.habits-group h2 { font-size: 1.2rem; margin-bottom: .75rem; }
.habits-group h2 small { font-size: .85rem; font-weight: 400; color: var(--habit-muted); margin-left: .5rem; }

.habits-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1rem; }

.habits-empty { text-align: center; padding: 3rem 1rem; border: 1px dashed var(--habit-border); border-radius: .75rem; }
.habits-empty > .bi { font-size: 2.5rem; color: var(--habit-muted); }
.habits-empty p { color: var(--habit-muted); max-width: 32rem; margin: .5rem auto 1rem; }

/* ── Card ─────────────────────────────────────────────────────────── */
.habit-card {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1rem;
    background: #fff;
    border: 1px solid var(--habit-border);
    border-left: 4px solid var(--habit-off);
    border-radius: .75rem;
    transition: opacity .15s;
}
.habit-card[data-outcome="success"] { border-left-color: var(--habit-success); }
.habit-card[data-outcome="on_track"] { border-left-color: var(--habit-on-track); }
.habit-card[data-outcome="pending"] { border-left-color: var(--habit-pending); }
.habit-card[data-outcome="fail"] { border-left-color: var(--habit-fail); }
.habit-card[data-due] { box-shadow: 0 0 0 2px rgba(217, 164, 65, .25); }
.habit-card.is-busy { opacity: .6; pointer-events: none; }

.habit-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.habit-card__name { font-weight: 600; font-size: 1.05rem; color: inherit; text-decoration: none; }
.habit-card__name:hover { text-decoration: underline; }
.habit-card__rule { font-size: .85rem; color: var(--habit-muted); }
.habit-card__body { display: flex; align-items: center; gap: 1rem; }

.habit-streak { white-space: nowrap; font-size: .85rem; color: #b25d12; }

.habit-counter { display: flex; align-items: center; gap: .4rem; flex: none; }
/* Large touch targets for the iPad and phone. */
.habit-counter__btn { width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 50%; font-size: 1.1rem; }
.habit-counter__value { min-width: 2.2rem; text-align: center; font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.habit-progress { flex: 1; min-width: 0; font-size: .85rem; }
.habit-progress__text { display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: center; margin-bottom: .3rem; }
.habit-progress__bar { height: .4rem; border-radius: 1rem; background: var(--habit-off); overflow: hidden; }
.habit-progress__bar span { display: block; height: 100%; background: var(--habit-pending); }
.habit-progress[data-outcome="success"] .habit-progress__bar span { background: var(--habit-success); }
.habit-progress[data-outcome="on_track"] .habit-progress__bar span { background: var(--habit-on-track); }
.habit-progress[data-outcome="fail"] .habit-progress__bar span { background: var(--habit-fail); }

.habit-outcome { display: inline-block; padding: .05rem .45rem; border-radius: 1rem; font-size: .75rem; font-weight: 600; background: var(--habit-off); color: #444; }
.habit-outcome[data-outcome="success"] { background: rgba(47, 143, 91, .15); color: var(--habit-success); }
.habit-outcome[data-outcome="on_track"] { background: rgba(127, 191, 150, .2); color: #3d7a54; }
.habit-outcome[data-outcome="pending"] { background: rgba(217, 164, 65, .18); color: #8a6119; }
.habit-outcome[data-outcome="fail"] { background: rgba(192, 57, 43, .13); color: var(--habit-fail); }

.habit-kind { display: inline-block; padding: .05rem .5rem; border-radius: 1rem; font-size: .75rem; font-weight: 600; background: rgba(47, 143, 91, .12); color: var(--habit-success); }
.habit-kind[data-kind="avoid"] { background: rgba(192, 57, 43, .1); color: var(--habit-fail); }

/* ── History strip ───────────────────────────────────────────────── */
.habit-history { display: flex; gap: .25rem; padding: 0; margin: 0; list-style: none; flex-wrap: wrap; }
.habit-history__cell { width: 1.1rem; height: 1.1rem; border-radius: 4px; background: var(--habit-off); display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; color: #fff; font-weight: 600; }
.habit-history--sm .habit-history__cell { width: .8rem; height: .8rem; border-radius: 3px; }
.habit-history--lg .habit-history__cell { width: 1.9rem; height: 1.9rem; border-radius: 6px; }
.habit-history__cell[data-outcome="success"] { background: var(--habit-success); }
.habit-history__cell[data-outcome="on_track"] { background: var(--habit-on-track); }
.habit-history__cell[data-outcome="pending"] { background: var(--habit-pending); }
.habit-history__cell[data-outcome="fail"] { background: var(--habit-fail); }
.habit-history__cell[data-outcome="off"] { color: #555; }
.habit-history__cell[data-current] { outline: 2px solid rgba(0, 0, 0, .35); outline-offset: 1px; }

.habit-legend { display: flex; flex-wrap: wrap; gap: .5rem 1rem; padding: 0; margin: .75rem 0 0; list-style: none; font-size: .8rem; color: var(--habit-muted); }
.habit-legend li { display: flex; align-items: center; gap: .35rem; }

.habit-note summary { font-size: .85rem; color: var(--habit-muted); cursor: pointer; }
.habit-note textarea { margin-top: .4rem; }

/* ── Habit page ──────────────────────────────────────────────────── */
.habit-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.habit-stats > div { padding: 1rem; border: 1px solid var(--habit-border); border-radius: .75rem; background: #fff; }
.habit-stats strong { display: block; font-size: 1.6rem; }
.habit-stats span { font-size: .85rem; color: var(--habit-muted); }

.habits-table__inactive { opacity: .6; }

/* ── Form ────────────────────────────────────────────────────────── */
.habits-form-card { max-width: 46rem; padding: 1.25rem; border: 1px solid var(--habit-border); border-radius: .75rem; background: #fff; }
.habit-form__kind, .habit-form__days { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.habit-form__kind .form-check, .habit-form__days .form-check { margin: 0; }
.habits-danger { display: flex; align-items: center; gap: .75rem; margin-top: 2rem; max-width: 46rem; }

.habit-notes { padding-left: 1.1rem; }
.habit-notes li { margin-bottom: .35rem; }