/* ================================================
   TASKS CLASSIC FIX — tasks-2.0-supreme.css
   override pour restaurer les 3 colonnes classiques
   Date: 2026-03-18
   ================================================ */

#view-tasks.active .tasks-view.columns-view {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg, 20px);
    margin-bottom: var(--space-xl, 32px);
}

#view-tasks.active .tasks-view.bubbles-view {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg, 20px);
    margin-bottom: var(--space-xl, 32px);
}

#view-tasks.active .tasks-view.columns-view.hidden,
#view-tasks.active .tasks-view.bubbles-view.hidden,
#view-tasks.active .tasks-view.hidden {
    display: none !important;
}

/* Fix lisibilite texte taches - theme Academie */
[data-theme=academie] .bubble .bubble-text,
[data-theme=academie] .bubble.inprogress .bubble-text,
[data-theme=academie] .task-bubble .task-text,
[data-theme=academie] .task-bubble.inprogress .task-text {
    color: var(--bubble-text-color, #1a1510) !important;
}
[data-theme=academie] .bubble.done .bubble-text,
[data-theme=academie] .task-bubble.done .task-text {
    color: var(--bubble-done-text, #292b4f) !important;
}

/* dpf-filter sous le column-header */
#done-period-filter {
    margin-bottom: 8px;
}
#done-period-filter .dpf-trigger {
    width: 100%;
    box-sizing: border-box;
    justify-content: space-between;
}

/* FIX: le badge count depasse du bord droit de la colonne.
   Le column-header utilise justify-content:space-between.
   Le h2 doit pouvoir se retrecir (min-width:0) pour laisser de la place au badge. */
.task-column .column-header {
    min-width: 0;
    width: 100%;
}
.task-column .column-header h2 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
}
.task-column .column-count {
    flex: 0 0 auto;
    margin-left: 8px;
}
/* FIX VIEWPORT: la 3e colonne touche le bord droit du viewport.
   Ajouter du padding-right pour garantir un espace minimum. */
#view-tasks.view-container {
    padding-right: 24px !important;
}
/* Extra padding-right pour la colonne done pour que le badge ne soit pas coupé */
.task-column[data-status="done"] {
    padding-right: 24px !important;
}

/* FIX: badge count coupé — overflow:hidden sur .task-column coupe le badge
   On override en overflow:visible et on met overflow:hidden sur la task-list seulement */
.task-column {
    overflow: visible !important;
}
.task-column .task-list {
    overflow: hidden;
}

/* FIX: journal-section visible par-dessus le panel achievements fullscreen */
#achievements-view:not(.hidden) ~ .journal-section,
#view-tasks .journal-section {
    position: relative;
    z-index: 1;
}
#achievements-view {
    z-index: 9000 !important;
}

/* ================================================
   SIDEBAR DESIGN FIXES — 2026-03-22
   ================================================ */

/* 1. Active indicator: smooth pill instead of boxy square */
.sidebar-item.active {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 12px !important;
}

.sidebar-item.active::before {
    width: 3px !important;
    height: 60% !important;
    min-height: 18px !important;
    max-height: 28px !important;
    border-radius: 0 6px 6px 0 !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: linear-gradient(180deg, var(--sb-accent), color-mix(in srgb, var(--sb-accent) 60%, transparent)) !important;
    box-shadow: none !important;
}

/* Remove the inset border that creates the "square" look */
.sidebar-item.active::after {
    display: none !important;
}

/* 2. Help "?" button: more spacing from text */
.sidebar-item-info {
    right: 6px !important;
    margin-left: 8px !important;
}

/* ================================================
   TASKS VIEW FIXES — 2026-03-22
   ================================================ */

/* 3. Hide journal section from tasks view */
#view-tasks .journal-section {
    display: none !important;
}

/* 4. Task columns: no height limit, scroll freely */
.task-column .task-list {
    overflow: visible !important;
    max-height: none !important;
}

/* Ensure columns-view scrolls naturally */
#view-tasks.view-container {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.tasks-view.columns-view {
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
    align-items: start !important;
}

/* Task columns align to top, grow naturally */
.task-column {
    align-self: start !important;
    min-height: 200px !important;
    height: auto !important;
    max-height: none !important;
}

/* 5. Scroll-to-bottom button for tasks view */
.tasks-scroll-bottom-btn {
    position: fixed;
    bottom: 24px;
    right: 32px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent, #8b5cf6), color-mix(in srgb, var(--accent, #8b5cf6) 70%, #000));
    border: 2px solid color-mix(in srgb, var(--accent, #8b5cf6) 40%, transparent);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    z-index: 100;
    transition: transform 0.2s ease, opacity 0.2s ease;
    opacity: 0;
    pointer-events: none;
}

.tasks-scroll-bottom-btn.visible {
    opacity: 1;
    pointer-events: auto;
}

.tasks-scroll-bottom-btn:hover {
    transform: scale(1.1);
}


/* ================================================
   GLOBAL — Anti-overscroll & background fix — 2026-03-22
   ================================================ */

/* Prevent rubber-band overscroll revealing background */
html, body {
    overscroll-behavior: none !important;
}

/* Fix background to cover all scrollable area */
html {
    background-attachment: fixed !important;
    background-size: cover !important;
}


/* ================================================
   SIDEBAR HEADER & COLLAPSE — Refined design — 2026-03-22
   ================================================ */

/* Collapse button: subtle, only visible on sidebar hover */
.sidebar-collapse-btn {
    width: 24px !important;
    height: 24px !important;
    border-radius: 6px !important;
    background: transparent !important;
    border: 1px solid color-mix(in srgb, var(--sb-text, #999) 20%, transparent) !important;
    color: var(--sb-text, #999) !important;
    box-shadow: none !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease, background 0.2s ease !important;
}

#app-sidebar:hover .sidebar-collapse-btn {
    opacity: 0.6 !important;
}

.sidebar-collapse-btn:hover {
    opacity: 1 !important;
    background: color-mix(in srgb, var(--sb-accent, #8b5cf6) 12%, transparent) !important;
    color: var(--sb-accent, #8b5cf6) !important;
    border-color: color-mix(in srgb, var(--sb-accent, #8b5cf6) 30%, transparent) !important;
}

.sidebar-collapse-btn svg {
    width: 14px !important;
    height: 14px !important;
}

/* Section label header — remove stray tiret/dash */
.sidebar-section-label {
    letter-spacing: 0.03em !important;
}

/* Hide ALL sidebar-item-info (the ? buttons) permanently */
.sidebar-item-info {
    display: none !important;
    visibility: hidden !important;
}
.sidebar-item:hover .sidebar-item-info {
    display: none !important;
    visibility: hidden !important;
}

/* ================================================
   GALAXY ICON — Remove purple blob overlay — 2026-03-22
   ================================================ */

/* Kill the purple radial-gradient blob on galaxy icon */
.sidebar-item[data-id="galaxy"] .sidebar-item-icon::after {
    display: none !important;
}

/* Active galaxy: clean glow, no blob */
.sidebar-item[data-id="galaxy"].active .sidebar-item-icon {
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--sb-accent, #8b5cf6) 50%, transparent)) !important;
}

.sidebar-item[data-id="galaxy"].active::before {
    background: linear-gradient(180deg, var(--sb-accent), color-mix(in srgb, var(--sb-accent) 60%, transparent)) !important;
    box-shadow: none !important;
}

/* ── TasksReport — Bouton centré dans la colonne ── */
.done-col-header { width: 100%; }
.done-top-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
}
.done-top-row h2 {
    margin: 0;
    flex: 0 0 auto;
    white-space: nowrap;
}
.done-top-row .column-count { flex: 0 0 auto; }

.task-column[data-status="done"] .column-header { position: relative; }

.dr-open-btn {
    position: absolute;
    left: 42%;
    transform: translateX(-50%);
    overflow: hidden;
    padding: 0px 10px;
    line-height: 1.4;
    background: transparent;
    border: 1px solid rgba(212,175,55,.22);
    border-radius: 5px;
    color: #f5efe0;
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .20em;
    text-transform: uppercase;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    transition: color .2s, border-color .2s;
    z-index: 1;
}
.dr-open-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212,175,55,.10), transparent);
    animation: drBtnShimmer 3.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes drBtnShimmer {
    0%        { left: -100% }
    60%, 100% { left: 150% }
}
.dr-open-btn:hover {
    color: #fffdf8;
    border-color: rgba(212,175,55,.50);
}
.dr-open-btn:active { opacity: .75; }