/* =========================================================
   Sidebar widgets / popular / new entries
   Explicitly resets Cocoon's float/width rules to prevent
   the narrow vertical-title issue seen in the screenshot.
   ========================================================= */
body.bz-dashboard-ui :is(#sidebar, .sidebar, .widget-area) .widget {
  overflow: hidden;
  margin-bottom: 22px !important;
  padding: 18px !important;
  border: 1px solid var(--bz-border) !important;
  border-radius: var(--bz-radius) !important;
  background: var(--bz-surface) !important;
  box-shadow: var(--bz-shadow-soft) !important;
}

body.bz-dashboard-ui :is(#sidebar, .sidebar, .widget-area) :is(.widget-title, .widget > h2, .widget > h3) {
  position: relative;
  margin: 0 0 15px !important;
  padding: 2px 0 2px 18px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--bz-text) !important;
  box-shadow: none !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1.45 !important;
}

body.bz-dashboard-ui :is(#sidebar, .sidebar, .widget-area) :is(.widget-title, .widget > h2, .widget > h3)::before {
  content: "" !important;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--bz-primary), var(--bz-accent)) !important;
}

body.bz-dashboard-ui :is(#sidebar, .sidebar, .widget-area) :is(.widget-title, .widget > h2, .widget > h3)::after {
  content: none !important;
}

/* Popular / new widget list spacing */
body.bz-dashboard-ui :is(#sidebar, .sidebar, .widget-area) .widget-entry-cards {
  display: grid !important;
  gap: 12px !important;
}

/* Link is just the outer card. Do NOT use flex here. */
body.bz-dashboard-ui :is(#sidebar, .sidebar, .widget-area) :is(
  .widget-entry-cards .a-wrap,
  a.widget-entry-card-link,
  a.new-entry-card-link,
  a.popular-entry-card-link
) {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 10px !important;
  border: 1px solid var(--bz-border-soft) !important;
  border-radius: 17px !important;
  background: #fff !important;
  color: var(--bz-text) !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

body.bz-dashboard-ui :is(#sidebar, .sidebar, .widget-area) :is(
  .widget-entry-cards .a-wrap,
  a.widget-entry-card-link,
  a.new-entry-card-link,
  a.popular-entry-card-link
):hover {
  transform: translateY(-3px) !important;
  border-color: color-mix(in srgb, var(--bz-primary) 30%, var(--bz-border)) !important;
  background: linear-gradient(135deg, #fff, #f8f9ff) !important;
  box-shadow: var(--bz-shadow-soft) !important;
}

/* This is the actual thumbnail + title row in Cocoon. */
body.bz-dashboard-ui :is(#sidebar, .sidebar, .widget-area) :is(
  .widget-entry-card,
  .new-entry-card,
  .popular-entry-card
) {
  display: grid !important;
  grid-template-columns: 104px minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  gap: 12px !important;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 78px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  float: none !important;
}

/* Thumbnail: kill Cocoon floats and percentage widths. */
body.bz-dashboard-ui :is(#sidebar, .sidebar, .widget-area) :is(
  .widget-entry-card-thumb,
  .new-entry-card-thumb,
  .popular-entry-card-thumb,
  .card-thumb
) {
  position: relative !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  overflow: hidden !important;
  float: none !important;
  width: 104px !important;
  min-width: 104px !important;
  max-width: 104px !important;
  height: 76px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 13px !important;
  background: var(--bz-surface-tint) !important;
}

body.bz-dashboard-ui :is(#sidebar, .sidebar, .widget-area) :is(
  .widget-entry-card-thumb,
  .new-entry-card-thumb,
  .popular-entry-card-thumb,
  .card-thumb
) img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: cover !important;
  border-radius: inherit !important;
  transition: transform .3s ease !important;
}

/* Content: critical reset for screenshot issue. */
body.bz-dashboard-ui :is(#sidebar, .sidebar, .widget-area) :is(
  .widget-entry-card-content,
  .new-entry-card-content,
  .popular-entry-card-content,
  .card-content
) {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  margin-left: 0 !important;
  padding: 0 !important;
  position: static !important;
}

body.bz-dashboard-ui :is(#sidebar, .sidebar, .widget-area) :is(
  .widget-entry-card-title,
  .new-entry-card-title,
  .popular-entry-card-title,
  .card-title
) {
  display: -webkit-box !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--bz-text) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
}

body.bz-dashboard-ui :is(#sidebar, .sidebar, .widget-area) :is(
  .widget-entry-card-date,
  .widget-entry-card-pv,
  .new-entry-card-date,
  .popular-entry-card-date,
  .popular-entry-card-pv
) {
  margin-top: 5px !important;
  color: #98A2B9 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

body.bz-dashboard-ui :is(#sidebar, .sidebar, .widget-area) :is(
  .widget-entry-cards .a-wrap,
  a.widget-entry-card-link,
  a.new-entry-card-link,
  a.popular-entry-card-link
):hover img {
  transform: scale(1.04) !important;
}

/* Ranking number */
body.bz-dashboard-ui .popular-entry-card-rank {
  display: grid !important;
  place-items: center !important;
  top: 0 !important;
  left: 0 !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 8px !important;
  border-radius: 0 0 9px 0 !important;
  background: rgba(36,49,79,.72) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

body.bz-dashboard-ui .popular-entry-card-link:first-child .popular-entry-card-rank {
  background: linear-gradient(135deg, #D7A617, #E0BC36) !important;
}

/* Search */
body.bz-dashboard-ui :is(#sidebar, .sidebar, .widget-area) .search-box {
  overflow: hidden !important;
  border: 1px solid var(--bz-border) !important;
  border-radius: 14px !important;
  background: #fff !important;
}

/* Category/archive/menu widgets */
body.bz-dashboard-ui :is(#sidebar, .sidebar, .widget-area) :is(.widget_categories, .widget_archive, .widget_pages, .widget_nav_menu) ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body.bz-dashboard-ui :is(#sidebar, .sidebar, .widget-area) :is(.widget_categories, .widget_archive, .widget_pages, .widget_nav_menu) li + li {
  margin-top: 7px !important;
}

body.bz-dashboard-ui :is(#sidebar, .sidebar, .widget-area) :is(.widget_categories, .widget_archive, .widget_pages, .widget_nav_menu) li > a {
  display: flex !important;
  align-items: center !important;
  min-height: 42px !important;
  padding: 9px 12px !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  background: var(--bz-surface-soft) !important;
  color: var(--bz-text) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body.bz-dashboard-ui :is(#sidebar, .sidebar, .widget-area) :is(.widget_categories, .widget_archive, .widget_pages, .widget_nav_menu) li > a:hover {
  transform: translateX(3px) !important;
  border-color: var(--bz-border) !important;
  background: var(--bz-surface-tint) !important;
  color: var(--bz-primary) !important;
}