/* --- Custom Components --- */
.feature-icon {
    width: 4rem;
    height: 4rem;
}
.sortable-item, .card {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
/* Task Card Hover Effect */
.task-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer;
}

.task-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Project "What do I want from this?" list: the first (lowest-position) motivation renders
   emphasised as the main payoff - an accent left edge plus a slightly larger note - so no
   separate "primary"/"goal" control is needed. Drag-reorder (projectMotivations.js) moves the
   .motivation-lead class, and with it the emphasis, to whatever row ends up on top. The accent
   color is the theme's --bs-primary, so this stays correct across every light/dark/alt theme. */
.motivation-lead {
    border-left: 3px solid var(--bs-primary);
}

.motivation-lead .motivation-note {
    font-size: 1.05rem;
}

/* Dashboard "Why you're doing these" card: a deliberately dense, low-profile list so the
   grouped-by-motivation projects read as a quiet reference in the side column, not another stack
   of full-size rows. Tighter padding, a thinner accent edge (4px vs .hobby-edge's 9px - this
   class loads after theme.css so it wins), and no per-row shadow. Rows carry the .bg-light
   utility (like every other dashboard list row) so they track each theme identically rather than
   sitting on the darker recessed --bs-tertiary-bg tier. */
.mreason-group + .mreason-group {
    margin-top: .7rem;
}

.mreason-kind {
    display: inline-flex;
    align-items: center;
    gap: .3em;
    font-size: .8rem;
    font-weight: 700;
    padding: .28em .62em;
    border-radius: .375rem;
    margin-bottom: .35rem;
}

.mreason-row {
    display: block;
    text-decoration: none;
    border-left-width: 4px;
    border-radius: .375rem;
    padding: .3rem .55rem;
    margin-bottom: .25rem;
}

.mreason-row:last-child {
    margin-bottom: 0;
}

.mreason-row .mreason-title {
    font-weight: 600;
    font-size: .82rem;
    color: var(--bs-body-color);
    line-height: 1.3;
}

.mreason-row .mreason-note {
    font-size: .74rem;
    color: var(--bs-secondary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Global Utilities --- */
html, body {
    height: 100%;
}

header, footer {
    flex: 0 0 auto !important;
    width: 100%;
}

footer {
    /* margin-top: auto; removed to avoid issues with flex-grow containers */
}

.overflow-y-auto::-webkit-scrollbar {
    width: 5px;
}

.overflow-y-auto::-webkit-scrollbar-thumb {
    background-color: #e2e8f0;
    border-radius: 10px;
}

/* Workboard Specific Layout Adjustments */
.workboard-container {
    padding: 0 !important;
}

.board-column {
    min-height: 0;
}

[x-cloak] {
    display: none !important;
}

/* HTMX Loading Indicators: hidden by default, faded in while a request is in-flight. */
.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms ease-in;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
}

/* Sidebar navigation: a fixed-width flex item. Collapsing only ever changes width/flex-basis -
   never display or the row's cross-axis sizing - so the aside's height (stretched to match the
   row) and its position in the flex flow stay identical whether expanded or collapsed.
   The responsive default (collapsed under the md breakpoint, expanded at/above it) is expressed
   as a plain CSS media query rather than JS applied on load, so it's already correct at first
   paint - an Alpine class added a tick after initial render would otherwise trigger the width
   transition below and produce a visible expanded->collapsed flash on mobile page loads.
   .sidenav-force-collapsed/.sidenav-force-expanded are added by Alpine only once the user
   actually clicks the toggle, overriding the responsive default in either direction. */
.sidenav-aside {
    flex: 0 0 220px;
    width: 220px;
    overflow: hidden;
    transition: flex-basis 0.25s ease, width 0.25s ease;
}

@media (max-width: 767.98px) {
    .sidenav-aside:not(.sidenav-force-expanded) {
        flex-basis: 64px;
        width: 64px;
    }
}

.sidenav-aside.sidenav-force-collapsed {
    flex-basis: 64px !important;
    width: 64px !important;
}

.sidenav-aside .nav-link {
    white-space: nowrap;
    overflow: hidden;
}

.sidenav-toggle-btn {
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
}

/* Collapsed state (auto on mobile, or forced): icon-only rail, labels hidden, icons centered */
@media (max-width: 767.98px) {
    .sidenav-aside:not(.sidenav-force-expanded) .nav-link {
        justify-content: center;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .sidenav-aside:not(.sidenav-force-expanded) .nav-link i {
        margin-right: 0 !important;
    }

    .sidenav-aside:not(.sidenav-force-expanded) .nav-link span {
        display: none;
    }
}

.sidenav-aside.sidenav-force-collapsed .nav-link {
    justify-content: center;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.sidenav-aside.sidenav-force-collapsed .nav-link i {
    margin-right: 0 !important;
}

.sidenav-aside.sidenav-force-collapsed .nav-link span {
    display: none;
}

.sidenav-aside.sidenav-collapsed .nav-link span {
    display: none;
}

/* Board column responsiveness for mobile */
@media (max-width: 767.98px) {
    .board-column {
        min-height: 500px !important;
        margin-bottom: 1rem;
    }
}

/* Mobile list cards (tasks/projects list pages, shown below md instead of the table - see
   .table-responsive's d-none d-md-block sibling in tasks.html/projects.html). Title, status,
   and row actions stay visible; secondary fields (project/hobby, task count/progress) collapse
   behind a tap using Bootstrap's own collapse plugin rather than a fixed table column set, since
   below md the sidenav rail (see .sidenav-aside above) plus a full row of columns no longer fits
   without horizontal scroll. */
.mobile-list-card {
    padding: 1rem 1.1rem;
}

.mobile-list-card + .mobile-list-card {
    border-top: 1px solid var(--bs-border-color);
}

.mobile-list-card-toggle {
    cursor: pointer;
}

.mobile-list-card-toggle .bi-chevron-down {
    transition: transform .15s ease;
}

.mobile-list-card-toggle[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
}

.mobile-list-card-detail {
    border-top: 1px dashed var(--bs-border-color);
    margin-top: .75rem;
    padding-top: .75rem;
}

/* Idea board canvas (see ideaBoard.js). touch-action:none is scoped to just the drag handle and
   resize handle - not the whole card, and not the canvas - so one-finger panning on empty canvas
   still scrolls on touch devices while dragging a card/resizing doesn't fight the browser's own
   gesture handling. */
.board-canvas-viewport {
    -webkit-overflow-scrolling: touch;
    /* Without this, this flex item's default min-height:auto would still try to grow to fit the
       2000px canvas inside it, defeating its own overflow:auto and forcing the whole page to
       scroll instead - see the min-height:0 chain explained in layout.html/board.html. */
    min-height: 0;
}

.board-card {
    touch-action: pan-x pan-y;
}

.board-card-header {
    touch-action: none;
    cursor: move;
    user-select: none;
}

.board-card-body {
    height: calc(100% - 2.25rem);
    overflow: auto;
}

.board-card-content {
    outline: none;
    font-size: 13.5px;
    white-space: pre-wrap;
    word-break: break-word;
}

.board-card-content:empty::before {
    content: attr(data-placeholder);
    color: var(--bs-secondary-color);
}

.board-card-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Brief flash on a failed autosave (e.g. content over the length limit) - see
   ideaBoardHandler.flashSaveError() in ideaBoard.js. Transition makes the removal fade rather than
   cut, since the class is only applied for ~1.2s. */
.board-card-save-error {
    box-shadow: 0 0 0 2px var(--bs-danger) !important;
    transition: box-shadow 0.3s ease-out;
}

/* "Project created from this" marker (see fragments/boardCard.html). Sits above the card body but
   must not intercept pointer events - a drag or resize started near the card's bottom edge should
   still work through it. Kept small so it doesn't crowd a 220px-wide card's content. */
.board-card-spawned-badge {
    pointer-events: none;
    font-size: 0.65rem;
    font-weight: 500;
    max-width: calc(100% - 1.5rem);
}

.board-card-spawned-badge span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board-resize-handle {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 16px;
    height: 16px;
    touch-action: none;
    cursor: nwse-resize;
    background:
        linear-gradient(135deg, transparent 0 40%, var(--bs-border-color) 40% 55%, transparent 55% 60%,
        var(--bs-border-color) 60% 75%, transparent 75%);
}

/* Mobile: card content needs >=16px font to avoid iOS Safari's zoom-on-input-focus behavior when
   a contenteditable card is tapped. */
@media (max-width: 767.98px) {
    .board-card-content {
        font-size: 16px;
    }
}