/* Shared blog-like item styling for Diary and To-Do */
.blog-item {
  position: relative;
  transition: background-color .2s, box-shadow .2s, transform .06s;
  cursor: pointer;
}

.blog-item.card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
}

.blog-item.card:hover {
  background-color: var(--hover-bg);
  box-shadow: var(--shadow-sm);
  border-color: rgba(var(--accent-primary-rgb), .25);
}

body.dark-mode .blog-item.card:hover {
  background-color: rgba(255, 255, 255, 0.03);
  box-shadow: var(--shadow-md);
}

/* Shared tag badge base (used across Diary & To-Do) */
.tag-badge {
  border: 1px solid var(--border-color);
  font-weight: 600;
}

/* Horizontally scrollable chips/badges container */
.chips-scroll {
  display: flex;
  flex-wrap: nowrap;
  gap: .25rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; /* Firefox */
  /* Firefox thumb + track colors */
  scrollbar-color: var(--chip-scroll-thumb) var(--chip-scroll-track);
  max-width: 100%;
}
.chips-scroll > * {
  flex: 0 0 auto;
  white-space: nowrap;
}
/* Diary list: category starts on next line under title and scrolls within */
.blog-item .diary-category {
  display: block;
  flex: 0 0 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden; /* inner chips-scroller handles horizontal scroll */
  margin-top: .25rem;
}
/* Modern, subtle scrollbar styling (WebKit/Blink) */
/* Apply legacy WebKit scrollbar styling only when standard props are unsupported */
@supports not (scrollbar-color: auto) {
  .chips-scroll::-webkit-scrollbar {
    height: 8px;
  }
  .chips-scroll::-webkit-scrollbar-track {
    background: var(--chip-scroll-track);
    border-radius: 999px;
  }
  .chips-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background-color: var(--chip-scroll-thumb);
    background-image: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.12));
    border: 2px solid transparent; /* creates a pill look */
    background-clip: padding-box;
  }
  .chips-scroll:hover::-webkit-scrollbar-thumb {
    background-color: var(--chip-scroll-thumb-hover);
    background-image: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.16));
  }
  .chips-scroll::-webkit-scrollbar-thumb:active {
    background-color: var(--chip-scroll-thumb-active);
    background-image: linear-gradient(180deg, rgba(255,255,255,.1), rgba(0,0,0,.2));
  }
  .chips-scroll::-webkit-scrollbar-corner {
    background: var(--chip-scroll-track);
  }
}

/* Prevent right-side actions from being pushed out by left content */
.blog-item .d-flex > .flex-grow-1 {
  min-width: 0; /* allow left column to shrink below its min-content width */
}

/* Make todo list category area behave like diary (no wrap, scroll chips) */
.blog-item .todo-category {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

/* To-Do: outer scroll container that holds stage badge + category chips */
.todo-chip-scroll {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

/* In To-Do detail header, allow category area to grow/shrink and scroll within */
.todo-detail-card-title [data-todo-detail-category] {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  display: block; /* ensure it behaves well inside flex rows */
}

/* Deterministic tag colors (10-color palette) shared */
:root {
  --tag-0: #6ea8fe;
  --tag-1: #f5b971;
  --tag-2: #9ad0f5;
  --tag-3: #b69df7;
  --tag-4: #6edff6;
  --tag-5: #ffb3c7;
  --tag-6: #95e0a8;
  --tag-7: #ffd778;
  --tag-8: #e5a6ff;
  --tag-9: #9ad5b3;
  --tag-ink: #0b1324;
  /* Chips scrollbar palette (light) */
  --chip-scroll-thumb: rgba(127, 127, 127, .45);
  --chip-scroll-thumb-hover: rgba(110, 110, 110, .6);
  --chip-scroll-thumb-active: rgba(95, 95, 95, .75);
  --chip-scroll-track: rgba(127, 127, 127, .1);
}
body.dark-mode {
  --tag-0: #3a78ff;
  --tag-1: #d3944c;
  --tag-2: #5fb2e3;
  --tag-3: #8a70ea;
  --tag-4: #3fcfe6;
  --tag-5: #e982a0;
  --tag-6: #4cc57a;
  --tag-7: #e2b341;
  --tag-8: #c078ee;
  --tag-9: #63c192;
  --tag-ink: #0e1726;
  /* Chips scrollbar palette (dark) */
  --chip-scroll-thumb: color-mix(in srgb, rgba(180, 180, 200, .55), transparent 0%);
  --chip-scroll-thumb-hover: color-mix(in srgb, rgba(200, 200, 220, .7), transparent 0%);
  --chip-scroll-thumb-active: color-mix(in srgb, rgba(220, 220, 240, .85), transparent 0%);
  --chip-scroll-track: rgba(255, 255, 255, .06);
}

.tag-color-0 { background: color-mix(in srgb, var(--tag-0), transparent 10%); color: #0b0f14; border-color: color-mix(in srgb, var(--tag-0), black 75%); }
.tag-color-1 { background: color-mix(in srgb, var(--tag-1), transparent 10%); color: #23160a; border-color: color-mix(in srgb, var(--tag-1), black 75%); }
.tag-color-2 { background: color-mix(in srgb, var(--tag-2), transparent 10%); color: #08151c; border-color: color-mix(in srgb, var(--tag-2), black 75%); }
.tag-color-3 { background: color-mix(in srgb, var(--tag-3), transparent 10%); color: #130f1b; border-color: color-mix(in srgb, var(--tag-3), black 75%); }
.tag-color-4 { background: color-mix(in srgb, var(--tag-4), transparent 10%); color: #051617; border-color: color-mix(in srgb, var(--tag-4), black 75%); }
.tag-color-5 { background: color-mix(in srgb, var(--tag-5), transparent 10%); color: #1e0d12; border-color: color-mix(in srgb, var(--tag-5), black 75%); }
.tag-color-6 { background: color-mix(in srgb, var(--tag-6), transparent 10%); color: #0d1710; border-color: color-mix(in srgb, var(--tag-6), black 75%); }
.tag-color-7 { background: color-mix(in srgb, var(--tag-7), transparent 10%); color: #211a0a; border-color: color-mix(in srgb, var(--tag-7), black 75%); }
.tag-color-8 { background: color-mix(in srgb, var(--tag-8), transparent 10%); color: #1b0f21; border-color: color-mix(in srgb, var(--tag-8), black 75%); }
.tag-color-9 { background: color-mix(in srgb, var(--tag-9), transparent 10%); color: #0f1b14; border-color: color-mix(in srgb, var(--tag-9), black 75%); }

body.dark-mode .tag-color-0,
body.dark-mode .tag-color-1,
body.dark-mode .tag-color-2,
body.dark-mode .tag-color-3,
body.dark-mode .tag-color-4,
body.dark-mode .tag-color-5,
body.dark-mode .tag-color-6,
body.dark-mode .tag-color-7,
body.dark-mode .tag-color-8,
body.dark-mode .tag-color-9 {
  color: #e9eef8;
  border-color: color-mix(in srgb, currentColor, transparent 65%);
}


/* Pinned visuals */
.blog-item.pinned {
  border-right: 4px solid var(--bs-warning) !important;
}
.blog-item .btn-pin i { transform: rotate(20deg); }

/* Title hover cue for both Diary and To-Do (use shared .blog-title) */
.blog-item:hover .blog-title {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Shared grid for blog-like lists */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: .75rem;
  align-items: start;
}

@media (max-width:575.98px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
}