/* ==========================================================================
   HobbyManager — "Soft Muted" theme
   Layer this AFTER stock bootstrap.min.css (not the Lumen build) and main.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ROOT TOKENS
   These are Bootstrap 5.3 CSS variables that utility classes (.shadow-sm,
   .rounded-pill, .text-muted, .bg-info-subtle, etc.) read at runtime, so
   overriding them retints/recalms those utilities app-wide with no template
   changes required.
   -------------------------------------------------------------------------- */
:root {
    /* Accent (used by .text-primary/.bg-primary/.border-primary utilities,
       form focus rings, accent-color on checkboxes/switches) */
    --bs-primary: #4C5FD5;
    --bs-primary-rgb: 76, 95, 213;

    /* Status palette — mapped to the same Bootstrap color slots the app
       already uses for TaskStatus (secondary/info/success/danger). "dark"
       (DONE) is left at Bootstrap's default; it's already a quiet neutral
       gray and doesn't need retinting. */
    --bs-secondary: #8A94A6; /* UNPLANNED */
    --bs-secondary-rgb: 138, 148, 166;
    --bs-secondary-text-emphasis: #5B6472;
    --bs-secondary-bg-subtle: #EEF0F3;
    --bs-secondary-border-subtle: #DCE0E6;

    --bs-info: #3D5AC2; /* TODO */
    --bs-info-rgb: 61, 90, 194;
    --bs-info-text-emphasis: #33468F;
    --bs-info-bg-subtle: #E9EDFA;
    --bs-info-border-subtle: #D3DAF3;

    --bs-success: #3F8F63; /* IN_PROGRESS */
    --bs-success-rgb: 63, 143, 99;
    --bs-success-text-emphasis: #2F6B4A;
    --bs-success-bg-subtle: #E9F5EE;
    --bs-success-border-subtle: #CFE9DA;

    --bs-danger: #C1633F; /* ON_HOLD — muted terracotta, not alarm-red */
    --bs-danger-rgb: 193, 99, 63;
    --bs-danger-text-emphasis: #954C31;
    --bs-danger-bg-subtle: #FBEEE7;
    --bs-danger-border-subtle: #F1D6C6;

    /* Generic body / muted text — .text-muted reads --bs-secondary-color */
    --bs-body-bg: #FFFFFF; /* unified with header/nav — no separate page tint */
    --bs-tertiary-bg: #E7E9ED; /* inputs, .btn-light, board columns — the only "recessed" tier now */
    --bs-body-color: #1F2933;
    --bs-secondary-color: #6B7280;
    --bs-border-color: #C9CFD8;
    --bs-border-color-translucent: rgba(31, 41, 51, .08);

    /* Radius scale — smaller, and .rounded-pill no longer renders as a true
       pill (it now resolves to the same soft radius as everything else) */
    --bs-border-radius: .5rem;
    --bs-border-radius-sm: .375rem;
    --bs-border-radius-lg: .625rem;
    --bs-border-radius-xl: .75rem;
    --bs-border-radius-pill: .5rem;

    /* Shadows — this single change is most of the "everything is floating"
       fix, since .shadow-sm is used on nearly every card/select/button */
    --bs-box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
    --bs-box-shadow-sm: 0 1px 2px rgba(16, 24, 40, .04);
    --bs-box-shadow-lg: 0 4px 16px rgba(16, 24, 40, .08);

    --bs-link-color: var(--bs-primary);
    --bs-link-hover-color: #3F51C4;
    --bs-focus-ring-color: rgba(76, 95, 213, .25);
}

body {
    background-color: var(--bs-body-bg);
}

/* --------------------------------------------------------------------------
   2. COMPONENT OVERRIDES
   Buttons, form controls and a few others don't read root color variables
   at runtime in 5.3 — their colors are compiled in. Overriding explicitly.
   -------------------------------------------------------------------------- */

/* Buttons: smaller, and scale down further as the viewport narrows, via Bootstrap's own
   --bs-btn-padding-y/-x/--bs-btn-font-size (the same mechanism already used below for
   .btn-primary/.btn-outline-*'s colors) rather than raw padding/font-size - clamp() with a
   vw-relative middle term means one rule covers desktop down to mobile with no media query.
   Roughly 25-30% smaller than Bootstrap's defaults even at the desktop ceiling. */
.btn {
    --bs-btn-padding-y: clamp(0.28rem, 0.22rem + 0.3vw, 0.375rem);
    --bs-btn-padding-x: clamp(0.55rem, 0.35rem + 0.7vw, 0.9rem);
    --bs-btn-font-size: clamp(0.72rem, 0.64rem + 0.35vw, 0.85rem);
    font-weight: 600;
    box-shadow: none;
}

.btn-sm {
    --bs-btn-padding-y: clamp(0.18rem, 0.14rem + 0.2vw, 0.25rem);
    --bs-btn-padding-x: clamp(0.4rem, 0.28rem + 0.4vw, 0.6rem);
    --bs-btn-font-size: clamp(0.68rem, 0.62rem + 0.25vw, 0.78rem);
}

.btn-lg {
    --bs-btn-padding-y: clamp(0.45rem, 0.35rem + 0.5vw, 0.6rem);
    --bs-btn-padding-x: clamp(1rem, 0.7rem + 1.2vw, 1.5rem);
    --bs-btn-font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.1rem);
}

/* Every other button relies purely on .btn/.btn-sm/.btn-lg's own padding above now - the px-2/3/4/5
   utilities that used to be stacked on top of them (redundantly duplicating what .btn's own padding
   is already responsible for) were removed from the templates rather than fought here. The one
   exception is the workboard's "Archive All" column-header action (pages/workboard.html), which
   deliberately wants to be tighter than .btn-sm alone allows; px-2's Bootstrap default would fight
   --bs-btn-padding-x via !important, so it's reapplied proportionally, same mechanism as before. */
.btn.px-2 { padding-left: calc(var(--bs-btn-padding-x) * .7) !important; padding-right: calc(var(--bs-btn-padding-x) * .7) !important; }

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: #3F51C4;
    --bs-btn-hover-border-color: #3F51C4;
    --bs-btn-active-bg: #37479E;
    --bs-btn-active-border-color: #37479E;
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
}

.btn-outline-secondary {
    --bs-btn-color: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-bg: var(--bs-secondary);
    --bs-btn-hover-border-color: var(--bs-secondary);
    --bs-btn-active-bg: var(--bs-secondary);
    --bs-btn-active-border-color: var(--bs-secondary);
}

.btn-light {
    --bs-btn-bg: var(--bs-tertiary-bg);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-bg: #DCDFE4;
    --bs-btn-hover-border-color: var(--bs-border-color);
    box-shadow: none !important;
}

/* A flush list-group's items default to --bs-list-group-bg, which itself defaults to
   --bs-body-bg (the page background) - fine when nested in a white/light-mode card since that
   happens to match, but our dark-mode .card gets its own explicit --bs-secondary-bg, so a
   list-group-item would render as a visibly mismatched rectangle against it. list-group-flush
   is only ever used for dividers inside an existing surface (a card body), never as its own
   surface, so it should just be transparent regardless of theme. */
.list-group-flush .list-group-item {
    background-color: transparent;
}

/* Form controls: filled with the recessed tertiary tone (darker than the
   page) plus a border, so they read as inputs rather than blending in */
.form-select,
.form-control {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
    box-shadow: none !important;
    font-size: .875rem;
}

.form-select:focus,
.form-control:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(76, 95, 213, .15) !important;
}

/* contenteditable has no native placeholder attribute (unlike input/textarea/select above) */
[contenteditable]:empty:before {
    content: attr(data-placeholder);
    color: var(--bs-secondary-color);
}

/* A detail page's description editor (fragments/richTextEditor.html) has no rows="" attribute to
   size it like the old textarea did - applied alongside its own editorClass so its edit-mode
   height matches the view-mode <p>'s min-height (see pages/hobbyDetail.html etc), avoiding a
   layout jump on click-to-edit. */
.description-editor-tall {
    min-height: 8rem;
}

/* List page tables (hobbies/projects/tasks): the Title column is the only one left unconstrained,
   so table auto-layout gives it whatever space these shrink-wrapped columns don't need - badges,
   the row-actions kebab, etc. never need more than their own content's width, and forcing a fixed
   percentage on them (as before) left leftover space distributed unpredictably, which is what made
   the actions column look oversized/misaligned once the description column was removed. */
.col-shrink {
    width: 1%;
    white-space: nowrap;
}

/* Any element still carrying Bootstrap's shadow utilities gets the
   quieter values from the root tokens above, but explicitly zero out
   the worst offenders (selects/buttons that had shadow-sm baked in) */
.shadow-sm {
    box-shadow: var(--bs-box-shadow-sm) !important;
}

.shadow {
    box-shadow: var(--bs-box-shadow) !important;
}

.shadow-lg {
    box-shadow: var(--bs-box-shadow-lg) !important;
}

/* Headings/labels: dial back boldness/uppercase slightly */
h1, h2, h3, .fw-bold {
    font-weight: 600 !important;
}

.text-uppercase {
    letter-spacing: .02em;
}

/* --------------------------------------------------------------------------
   3. WORKBOARD-SPECIFIC OVERRIDES
   These target the exact classes workboard.html already outputs
   (card-header bg-{color}-subtle, task-card border-start border-4)
   so no template edit is required — but see the note at the bottom
   about what still needs a small template change to fully match the mock.
   -------------------------------------------------------------------------- */

/* Column header: no longer a bold full-width color block */
.workboard-container .card-header {
    background-color: #fff !important;
    border-bottom: 1px solid var(--bs-border-color) !important;
}

.workboard-container .card-header h6 {
    font-weight: 600;
    text-transform: none !important;
    font-size: .8rem;
    letter-spacing: .01em;
}

/* Task card: left accent instead of all-around thick border, no shadow
   until hover */
.workboard-container .task-card.border-4 {
    border-width: 1px !important;
    border-left-width: 3px !important;
    box-shadow: none !important;
    transition: box-shadow .12s ease, border-color .12s ease;
}

.workboard-container .task-card:hover {
    box-shadow: var(--bs-box-shadow-sm) !important;
}

/* Column body: recessed tertiary tone (same tier as inputs) with a real
   border so each column reads as its own region. */
.workboard-container .sortable-list {
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    min-height: 120px;
}

/* --------------------------------------------------------------------------
   4. TASK LIST (tasks.html) — table header, less shouty
   -------------------------------------------------------------------------- */
table thead.bg-light {
    background-color: var(--bs-body-bg) !important;
}

table thead th {
    text-transform: none !important;
    font-weight: 600 !important;
    color: var(--bs-secondary-color) !important;
    font-size: .75rem;
}

/* --------------------------------------------------------------------------
   5. OFFCANVAS / BADGES / MISC
   -------------------------------------------------------------------------- */
.offcanvas {
    border: none;
    box-shadow: var(--bs-box-shadow-lg) !important;
}

.badge {
    font-weight: 600;
    letter-spacing: .01em;
}

/* rounded-pill badges/chips (e.g. project/hobby tags) keep a touch more
   roundness than the general radius scale so they still read as "chips" */
.badge.rounded-pill {
    border-radius: 1rem !important;
}

/* Highlighted text: a translucent tint of the accent so it reads clearly
   against the page yet keeps the selected text legible. --bs-info-bg-subtle
   was too close to the white body-bg to notice. Same rgba(primary) approach
   as the IDE themes in theme-ide.css; dark mode re-tunes the alpha/text
   color in theme-dark.css. */
::selection {
    background: rgba(var(--bs-primary-rgb), .28);
    color: var(--bs-emphasis-color);
}

/* --------------------------------------------------------------------------
   6. HOBBY ACCENT COLOR
   A hobby's color is a single hue (0-359), applied inline as --h on whatever
   element carries .hobby-edge or .hobby-dot (e.g. th:style="'--h:' + ${hobby.colorHue}").
   No hobby-name-specific classes - production doesn't know hobby names ahead
   of time, so every hobby-colored element goes through this one generic pair
   of rules plus its own inline --h value. See theme-dark.css for the
   dark-mode redefinition of --hobby-accent (same hue, different lightness).
   -------------------------------------------------------------------------- */
.hobby-edge,
.hobby-dot {
    --hobby-accent: hsl(var(--h, 0), 55%, 45%);
}

/* Leading-edge accent for rows/cards. A real border, not box-shadow: Bootstrap's
   own table cells (.table>:not(caption)>*>*, used for striping/hover) already
   set box-shadow:inset 0 0 0 9999px ... at higher specificity than a single
   class selector - shorthand properties don't merge, so a box-shadow approach
   here would either lose to that rule outright or (if forced with !important)
   silently kill the .table-hover fill on this one cell. border-left is a
   different property entirely, so it can't conflict - and since Bootstrap's
   reboot sets box-sizing:border-box globally, it doesn't shift layout either. */
.hobby-edge {
    border-left: 9px solid var(--hobby-accent);
}

/* Small dot for contexts with no free edge (chips, and workboard task cards
   specifically - their left edge is already the task-status color). */
.hobby-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--hobby-accent);
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   7. ACCOMPLISHMENTS PAGE
   Most of this page's components (period toggle, stat icons, hobby bars,
   effort chips, highlight list, closing callout) are just Bootstrap defaults
   - .btn-group, .progress, .list-group, .alert - composed with utility
   classes directly in pages/accomplishments.html, not bespoke CSS. What's
   left here is the trend bar chart (no Bootstrap chart primitive exists)
   plus a few fixed-width/numeric-alignment/divider-color tweaks that
   utilities can't express.
   -------------------------------------------------------------------------- */
.acc-bar-chart {
    height: 120px;
    padding-top: 1.4rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.acc-bar-val {
    font-variant-numeric: tabular-nums;
    height: 1em;
}

.acc-bar {
    width: 60%;
    min-width: 12px;
    background: var(--bs-primary);
    border-radius: .3rem .3rem 0 0;
}

.acc-bar.zero {
    height: 3px !important;
    background: var(--bs-border-color);
    border-radius: 2px;
}

.acc-hobby-name {
    width: 92px;
}

.acc-hobby-count {
    width: 20px;
    font-variant-numeric: tabular-nums;
}

/* Reuse the same --hobby-accent mechanism .hobby-edge/.hobby-dot use (section 6 above) rather
   than computing hsl() colors inline in the template - that would bake in this theme's lightness
   value and go stale/illegible the moment dark mode redefines --hobby-accent below. Shared by the
   hobby-breakdown .progress-bar and the project-momentum .progress-bar (see the template). */
.acc-momentum-fill {
    --hobby-accent: hsl(var(--h, 0), 55%, 45%);
    background-color: var(--hobby-accent);
}

.acc-effort-chips {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color-translucent);
}