/* =====================================================
   LITTLE BUDDY — Custom Stylesheet
   ===================================================== */

:root {
    --navy:       #0077b6;   /* primary blue */
    --navy-light: #0096d6;   /* lighter primary for hover states */
    --navy-dark:  #263d85;   /* deep secondary blue for active/dark */
    --teal:       #02d4b7;   /* brand teal accent */
    --blue-light: #97d8e8;   /* brand light blue */
    --blue-pale:  #ccebf3;   /* brand pale blue */
    --accent:     #f68b46;   /* brand orange accent */
    --accent-alt: #faa533;   /* brand amber accent */
    --app-bg:     #f1f3f5;   /* light gray background */

    /* Semantic status colors */
    --status-good:    #198754;
    --status-bad:     #dc3545;
    --status-warn:    #faa533;
    --status-neutral: #adb5bd;
}

/* Base */
body {
    font-size: 0.925rem;
    font-family: 'Manrope', sans-serif;
    overflow-x: hidden;  /* prevent horizontal scroll from badge/absolute overflow */
    min-height: 100dvh;  /* use dynamic viewport height on mobile (avoids iOS browser chrome issue) */
}

/* ── Headings ────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Domine', serif;
    color: var(--navy-dark);
}

.bg-app-light { background-color: var(--app-bg) !important; }

/* ── Hub color cascade ──────────────────────────────── */
.bg-hub        { background-color: var(--hub-color) !important; color: var(--hub-text) !important; }
.bg-hub-light  { background-color: color-mix(in srgb, var(--hub-color) 8%, white) !important; }
.text-hub      { color: var(--hub-color) !important; }
.border-hub    { border-color: var(--hub-color) !important; }
.btn-hub       { background-color: var(--hub-color); color: var(--hub-text); border: none; }
.btn-hub:hover { background-color: var(--hub-color); color: var(--hub-text); opacity: .85; }
.btn-outline-hub { color: var(--hub-color); border-color: var(--hub-color); background: transparent; }
.btn-outline-hub:hover { background-color: var(--hub-color); color: var(--hub-text); }

/* ── Navbar ──────────────────────────────────────── */
.bg-navy { background-color: var(--navy) !important; }
.navbar-nav .nav-link { font-weight: 500; letter-spacing: .02em; }
.navbar-nav .nav-link.active { background: rgba(255,255,255,.12); border-radius: 6px; }

/* ── Buttons ─────────────────────────────────────── */
.btn-navy {
    background-color: var(--navy);
    color: #fff;
    border-color: var(--navy);
}
.btn-navy:hover, .btn-navy:focus {
    background-color: var(--navy-dark);
    color: #fff;
    border-color: var(--navy-dark);
}
.btn-navy:active {
    background-color: var(--navy-dark);
    color: #fff;
}

/* Amber CTA button */
.btn-amber {
    background-color: var(--accent-alt);
    color: #1a1a1a;
    border-color: var(--accent-alt);
    font-weight: 600;
}
.btn-amber:hover, .btn-amber:focus {
    background-color: var(--accent);
    color: #1a1a1a;
    border-color: var(--accent);
}
.btn-amber:active {
    background-color: #e08a1a;
    color: #1a1a1a;
}

/* ── Page headings ───────────────────────────────── */
.page-header {
    border-bottom: 2px solid var(--navy);
    padding-bottom: .5rem;
    margin-bottom: 1.5rem;
    color: var(--navy-dark);
    font-family: 'Domine', serif;
}

/* ── Metric Cards ────────────────────────────────── */
.metric-card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    transition: transform .15s, box-shadow .15s;
}
.metric-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.metric-card .card-body { padding: 1.25rem; }
.metric-card .metric-label {
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6c757d;
    margin-bottom: .25rem;
}
.metric-card .metric-value {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--navy);
}
.metric-card .metric-goal {
    font-size: .8rem;
    margin-top: .35rem;
    color: #6c757d;
}

/* Colored top border by status */
.metric-card.status-good    { border-top: 4px solid var(--status-good); }
.metric-card.status-bad     { border-top: 4px solid var(--status-bad); }
.metric-card.status-warn    { border-top: 4px solid var(--status-warn); }
.metric-card.status-neutral { border-top: 4px solid var(--status-neutral); }

.badge-good    { background-color: #d1e7dd; color: #0f5132; }
.badge-bad     { background-color: #f8d7da; color: #842029; }
.badge-warn    { background-color: #fff3cd; color: #664d03; }
.badge-neutral { background-color: #e9ecef; color: #495057; }

/* ── Week navigation ─────────────────────────────── */
.week-nav {
    background: #fff;
    border-radius: 10px;
    padding: 1rem 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
    margin-bottom: 1.5rem;
}
.week-nav .week-label {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--navy);
}
.week-nav .week-sub {
    font-size: .85rem;
    color: #6c757d;
}

/* ── Section cards ───────────────────────────────── */
.section-card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    margin-bottom: 1.5rem;
}
.section-card .card-header {
    background: var(--navy);
    color: #fff;
    font-weight: 600;
    border-radius: 10px 10px 0 0 !important;
    padding: .75rem 1.25rem;
}

/* ── Tables ──────────────────────────────────────── */
.table-hover > tbody > tr:hover td { background-color: var(--blue-pale); }
thead th { background-color: var(--navy-dark) !important; color: #fff !important; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }

/* ── Form styles ─────────────────────────────────── */
.form-label { font-weight: 600; font-size: .85rem; color: #333; }
.form-control:focus, .form-select:focus { border-color: var(--navy); box-shadow: 0 0 0 .2rem rgba(0,119,182,.18); }
.input-group-text { background: #e9ecef; border-color: #ced4da; color: #495057; }

.calc-display {
    background: var(--blue-pale);
    border: 1px solid var(--blue-light);
    border-radius: 6px;
    padding: .5rem .75rem;
    font-weight: 700;
    color: var(--navy-dark);
    font-size: 1.05rem;
}

/* ── Login page ──────────────────────────────────── */
.card-header.bg-navy small { font-size: .8rem; }
.card-header.bg-navy h5,
.card-header.bg-navy h6 { color: #fff; }

/* ── Responsive tweaks ───────────────────────────── */
@media (max-width: 767px) {
    .metric-card .metric-value { font-size: 1.3rem; }
    thead th { font-size: .72rem; }
}

/* =====================================================
   DASHBOARD LAYOUT
   ===================================================== */

/* Override main padding so dashboard fills edge-to-edge */
main:has(.dashboard-wrapper) { padding: 0 !important; }

.dashboard-wrapper {
    min-height: calc(100vh - 58px);
    align-items: stretch;
}

/* ── Left Stats Panel ────────────────────────────── */
.dash-left {
    width: 210px;
    min-width: 210px;
    max-width: 210px;
    background: #fff;
    border-right: 1px solid #dee2e6;
    overflow-y: auto;
    font-size: .79rem;
    flex-shrink: 0;
}

.dash-hdr {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #fff;
    background: var(--navy);
    padding: .18rem .6rem;
    margin-top: .15rem;
}

.dash-div {
    border-top: 1px solid #e9ecef;
    margin: .25rem .5rem;
}

.dash-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: .08rem .6rem;
    line-height: 1.35;
    color: #444;
    font-size: .79rem;
}
.dash-row span:first-child { color: #555; }
.dash-row span:last-child  { font-weight: 600; color: #212529; text-align: right; }

.dash-two-hdr {
    display: flex;
    justify-content: space-between;
    padding: .1rem .6rem 0;
    font-size: .7rem;
    color: #888;
}
.dash-two-val {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: .02rem .6rem .15rem;
}
.dash-big {
    font-size: .95rem;
    font-weight: 700;
    color: var(--navy);
}
.dash-pct {
    font-size: .95rem;
    font-weight: 700;
}
.dash-pct.on-goal  { color: var(--status-good); }
.dash-pct.off-goal { color: var(--status-bad); }

/* PPOH highlight when on goal */
.ppoh-hit {
    background: var(--teal);
    color: #fff !important;
    padding: 0 5px;
    border-radius: 3px;
    font-size: .85rem;
}

/* ── Right Charts Panel ──────────────────────────── */
.dash-right {
    background: var(--app-bg);
    padding: .6rem .75rem;
    overflow-y: auto;
    min-width: 0;
}

/* Week selector bar */
.week-sel-bar {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    background: #fff;
    border-radius: 8px;
    padding: .4rem .75rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
}

/* ── Chart cards ─────────────────────────────────── */
.chart-card {
    background: #fff;
    border-radius: 8px;
    padding: .4rem .5rem .3rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
}
.chart-title {
    font-size: .78rem;
    font-weight: 700;
    text-align: center;
    color: #333;
    margin-bottom: .15rem;
}

/* ── Dashboard landing tiles ─────────────────────── */
.dashboard-tile {
    transition: transform .15s, box-shadow .15s;
    cursor: pointer;
}
.dashboard-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,.14) !important;
}

/* ── Hide left panel on mobile ───────────────────── */
@media (max-width: 991px) {
    .dash-left { display: none !important; }
    .dash-right { padding: .4rem; }
}

/* =====================================================
   CHAT — Full-page & Widget
   ===================================================== */

/* ── Full-page chat bubbles ─────────────────────────── */
.chat-bubble-row { display:flex; margin-bottom:.75rem; }
.chat-bubble-user { justify-content:flex-end; }
.chat-bubble-assistant { justify-content:flex-start; }

.chat-bubble {
    max-width:75%; padding:.6rem .9rem; border-radius:.75rem;
    font-size:.9rem; line-height:1.5;
}
.chat-bubble-user .chat-bubble {
    background:var(--navy); color:#fff; border-bottom-right-radius:.2rem;
}
.chat-bubble-assistant .chat-bubble {
    background:#fff; border:1px solid #dee2e6; border-bottom-left-radius:.2rem;
}
.chat-bubble-header {
    font-size:.7rem; font-weight:600; text-transform:uppercase;
    letter-spacing:.04em; margin-bottom:.25rem; opacity:.65;
}
.chat-bubble-text pre { background:#f4f4f4; padding:.5rem; border-radius:.4rem; overflow-x:auto; font-size:.82rem; }
.chat-bubble-text code { font-size:.85em; color:var(--navy-dark); }
.chat-bubble-text ul { margin:.25rem 0; padding-left:1.2rem; }
.chat-typing { opacity:.5; font-style:italic; }

@media (max-width: 767px) {
    .chat-bubble { max-width:90%; }
}

/* ── Floating widget ────────────────────────────────── */
.cw-bubble {
    position:fixed; bottom:24px; right:24px; z-index:1080;
    width:56px; height:56px; border-radius:50%; border:none;
    background:var(--navy); color:#fff; font-size:1.4rem;
    box-shadow:0 4px 16px rgba(0,0,0,.25); cursor:pointer;
    transition:transform .2s, background .2s;
    display:flex; align-items:center; justify-content:center;
}
.cw-bubble:hover { background:var(--navy-light); transform:scale(1.08); }
.cw-bubble-active { background:var(--navy-dark); }

.cw-panel {
    position:fixed; bottom:92px; right:24px; z-index:1081;
    width:380px; max-height:min(520px, calc(100vh - 120px)); border-radius:.75rem;
    background:#fff; box-shadow:0 8px 32px rgba(0,0,0,.18);
    display:flex; flex-direction:column; overflow:hidden;
    transition:opacity .2s, transform .2s;
}
.cw-hidden { display:none !important; }

.cw-header {
    background:var(--navy); color:#fff; padding:.6rem .8rem;
    font-weight:600; font-size:.9rem; display:flex; align-items:center;
}
.cw-header-btn {
    background:none; border:none; color:rgba(255,255,255,.8);
    font-size:.85rem; cursor:pointer; padding:.15rem .3rem; border-radius:.25rem;
}
.cw-header-btn:hover { color:#fff; background:rgba(255,255,255,.15); }

.cw-messages {
    flex:1; overflow-y:auto; padding:.6rem; background:var(--app-bg);
    min-height:120px;
}

.cw-row { display:flex; margin-bottom:.5rem; }
.cw-row-user { justify-content:flex-end; }
.cw-row-bot  { justify-content:flex-start; }

.cw-bub {
    max-width:85%; padding:.45rem .7rem; border-radius:.6rem;
    font-size:.82rem; line-height:1.45;
}
.cw-row-user .cw-bub {
    background:var(--navy); color:#fff; border-bottom-right-radius:.15rem;
}
.cw-row-bot .cw-bub {
    background:#fff; border:1px solid #dee2e6; border-bottom-left-radius:.15rem;
}
.cw-bub pre { background:#f4f4f4; padding:.4rem; border-radius:.3rem; overflow-x:auto; font-size:.78rem; }
.cw-bub code { font-size:.85em; }

.cw-input {
    display:flex; gap:.35rem; padding:.5rem; border-top:1px solid #dee2e6;
    background:#fff;
}
.cw-input textarea {
    flex:1; border:1px solid #dee2e6; border-radius:.5rem; padding:.35rem .55rem;
    font-size:.85rem; resize:none; max-height:80px; font-family:inherit;
    outline:none;
}
.cw-input textarea:focus { border-color:var(--navy); box-shadow:0 0 0 2px rgba(0,119,182,.15); }
.cw-input button {
    background:var(--navy); color:#fff; border:none; border-radius:.5rem;
    width:36px; display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:.85rem;
}
.cw-input button:hover { background:var(--navy-light); }

@media (max-width: 480px) {
    .cw-panel { right:8px; left:8px; width:auto; bottom:84px; }
    .cw-bubble { bottom:16px; right:16px; }
}

/* ── No-print for widget ────────────────────────────── */
@media print { #chatWidget { display:none !important; } }

/* ── Collapsible card chevron ──────────────────────── */
.collapse-chevron {
    transition: transform .25s ease;
    font-size: .75rem;
}
.collapsible-header[aria-expanded="false"] .collapse-chevron {
    transform: rotate(-90deg);
}