/* Daily Kuladeivam Report Page
   C:\xampp\htdocs\jathagam.ai\frontend\static\css\reports\daily_kuladeivam_report.css */

.dkr-wrapper {
  background: linear-gradient(135deg, #fdf6ff 0%, #f3eaff 100%);
  border-radius: 16px;
  margin: 8px auto 16px;
  animation: dkr-subtle-glow 6s ease-in-out infinite;
}

.dkr-page {
  max-width: 920px;
  margin: 0 auto;
  padding: 12px;
}

/* Header */
.dkr-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  margin: 10px 0 10px;
  align-items: flex-start;
}

.dkr-head-main {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
}

.dkr-title {
  font-size: 1.25rem;
  font-weight: 900;
  color: #7b2cbf;
  margin: 6px 0 2px;
  text-align: center;
  position: relative;
}

.dkr-title::after {
  content: '';
  display: block;
  height: 3px;
  width: 52px;
  background: linear-gradient(90deg, #ffd54a, #ffd54a 60%, rgba(123, 44, 191, 0));
  border-radius: 2px;
  margin: 6px auto 0;
  opacity: .95;
}

.dkr-title.dkr-glow {
  text-shadow: 0 6px 18px rgba(123, 44, 191, 0.08),
               0 2px 6px rgba(123, 44, 191, 0.04);
}

/* Date */
.dkr-date {
  width: 100%;
  text-align: right;
  margin-top: 4px;
  font-size: .82rem;
  color: #6b5c7b;
}

.dkr-date-chip {
  display: inline-block;
  background: rgba(123, 44, 191, 0.08);
  color: #4b2166;
  padding: .24rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(123, 44, 191, 0.18);
  font-weight: 700;
  font-size: .82rem;
  transform-origin: center;
  animation: dkr-heartbeat 4s ease-in-out infinite;
}

/* Chips row (mood + archetype) */
.dkr-top-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: 2px;
}

.dkr-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: .35rem;
  border-radius: 999px;
  padding: .22rem .6rem !important;
  font-size: .72rem;
  background: #ffffff;
  border: 1px solid #ead8ff;
  color: #4b2166;
  box-shadow: 0 1px 4px rgba(123, 44, 191, 0.08);
  min-width: 0;
}

.dkr-chip-label {
  white-space: nowrap;
  font-weight: 700;
}

.dkr-chip-text {
  white-space: normal;
  overflow-wrap: anywhere;
}

.dkr-chip-mood {
  background: rgba(139, 92, 246, .04);
  border-color: rgba(139, 92, 246, .4);
  color: #4c1d95;
}

.dkr-chip-archetype {
  background: rgba(16, 185, 129, .04);
  border-color: rgba(16, 185, 129, .4);
  color: #065f46;
}

/* Share button area */
.dkr-share-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
  justify-content: flex-start;
}

.btn-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .3rem .75rem;
  border-radius: 999px;
  border: 1px solid #e0c7ff;
  background: #ffffff;
  color: #4b2166;
  font-size: .8rem;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease, transform .1s ease;
}

.btn-share:hover {
  background: #f3e8ff;
  box-shadow: 0 2px 8px rgba(123, 44, 191, 0.16);
  transform: translateY(-1px);
}

.dkr-share-msg {
  font-size: .78rem;
  color: #4b5563;
  opacity: 0;
  transition: opacity .18s ease;
}

.dkr-share-msg.is-visible {
  opacity: 1;
}

/* Layout tweak on wider screens */
@media (min-width: 760px) {
  .dkr-head {
    /* Use a two-column, two-row grid so we can place the title centered on
       the left column, the date chip right on the right column, and the
       chips row below the title (left-aligned). */
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "main date"
      "chips date";
    align-items: center;
    gap: 0.6rem;
  }
  .dkr-title {
    font-size: 1.15rem;
    margin-bottom: 0;
  }

  /* Place and align areas */
  .dkr-head-main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .dkr-date {
    grid-area: date;
    justify-self: end;
    text-align: right;
  }
  .dkr-top-chips {
    grid-area: chips;
    justify-self: start;
  }
}

/* Content blocks */
.dkr-block {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #ead8ff;
  padding: .8rem .9rem;
  margin-bottom: 10px;
}

.dkr-block-title {
  margin: 0 0 .45rem 0;
  font-size: .96rem;
  font-weight: 800;
  color: #7b2cbf;
}

.dkr-text {
  margin: 0;
  font-size: .9rem;
  color: #2f2349;
  line-height: 1.7;
}

.dkr-text.muted {
  color: #6b5c7b;
}

/* Astro hint pills */
.dkr-astro-hint {
  margin-top: .45rem;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.dkr-astro-pill {
  font-size: .78rem;
  padding: .2rem .5rem;
  border-radius: 999px;
  background: rgba(123, 44, 191, 0.04);
  border: 1px dashed rgba(123, 44, 191, 0.3);
  color: #4b2166;
}

/* Proverb card */
.dkr-proverb-card {
  position: relative;
  margin: 0;
  /* Slightly tighter vertical padding and room for the decorative mark on left. */
  padding: .65rem 1rem .65rem 3.6rem;
  background: linear-gradient(180deg,#fff,#fbf8ff);
  border: 1px solid #ead8ff;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(123,44,191,0.04);
  overflow: visible;
  display: flex;
  align-items: center; /* vertically center the blockquote/text */
  min-height: 64px; /* ensure enough height for vertical centering */
}

/* Story paragraphs: indent first line and add spacing between paragraphs */
.dkr-story-block .dkr-text {
  margin: 0 0 .8rem 0;
  font-size: .95rem;
  line-height: 1.65;
  color: #2f2349;
  text-indent: 1.1em; /* first-line indent for a printed-paragraph look */
}
.dkr-story-block .dkr-text:last-child {
  margin-bottom: 0;
}

/* Decorative mark to draw attention (uses emoji so no template change required) */
.dkr-proverb-card::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  line-height: .9;
  color: rgba(123,44,191,0.95);
}

.dkr-proverb-text {
  margin: 0;
  font-size: .88rem; /* slightly reduced for better fit */
  color: #7b2cbf; /* use site brand color for better consistency */
  line-height: 1.25;
  font-style: italic;
  padding: 0;
  display: block;
  word-break: break-word;
}

/* Tighter spacing above first line and a subtle left accent bar for non-emoji support */
.dkr-proverb-card::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, #ffd54a, rgba(123,44,191,0.08));
  opacity: 0.95;
}

@media (max-width: 520px) {
  .dkr-proverb-card { padding-left: 3.2rem; }
  .dkr-proverb-card::before { left: 10px; top: 10px; }
  .dkr-proverb-card::after { left: 6px; }
}

/* Empty state */
.dkr-empty {
  margin: 10px 0;
  padding: .8rem .9rem;
  border-radius: 12px;
  border: 1px dashed #d4bfff;
  background: rgba(248, 250, 252, 0.7);
  font-size: .9rem;
  color: #4b5563;
}

/* Bottom CTAs (reuse style pattern from daily graha) */
.dkr-bottom-ctas {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  justify-content: center;
  align-items: stretch;
}

.dkr-bottom-ctas .btn-back {
  flex: 1 1 0;
  min-width: 0;
  max-width: 340px;
  text-align: center;
}

@media (max-width: 520px) {
  .dkr-bottom-ctas {
    flex-direction: column;
    gap: .6rem;
  }
  .dkr-bottom-ctas .btn-back {
    width: 100%;
    max-width: 100%;
  }
}

.btn-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .35rem .8rem;
  border-radius: 999px;
  border: 1px solid #e0c7ff;
  background: #faf5ff;
  color: #4b2166;
  font-size: .85rem;
  text-decoration: none;
  font-weight: 600;
  transition: background .15s ease, box-shadow .15s ease, transform .1s ease;
}

.btn-back:hover {
  background: #f3e8ff;
  box-shadow: 0 2px 8px rgba(123, 44, 191, 0.16);
  transform: translateY(-1px);
}

/* Disclaimer */
.dkr-disclaimer {
  margin-top: 8px;
  font-size: .8rem;
  color: #4b5563;
}

/* Utilities */
.preline {
  white-space: pre-line;
}

/* Animations */
@keyframes dkr-subtle-glow {
  0%   { box-shadow: 0 2px 10px rgba(123, 44, 191, 0.03); }
  50%  { box-shadow: 0 6px 22px rgba(123, 44, 191, 0.06); }
  100% { box-shadow: 0 2px 10px rgba(123, 44, 191, 0.03); }
}

@keyframes dkr-heartbeat {
  0%   { transform: scale(1); }
  10%  { transform: scale(1.06); }
  20%  { transform: scale(1); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .dkr-wrapper {
    animation: none;
  }
  .dkr-date-chip {
    animation: none;
  }
}

/* Breadcrumb micro (same as daily graha, kept for consistency) */
.breadcrumb-nav.micro {
  margin: 8px 0 6px;
  font-size: 0.75rem;
  color: var(--muted, #6f6a80);
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .5rem;
}
.breadcrumb-nav.micro a {
  color: var(--brand-700, #6b21a8);
  text-decoration: none;
}
.breadcrumb-nav.micro .sep {
  opacity: .6;
}

/* Generic breadcrumb tweak */
.breadcrumb-nav,
.breadcrumb-nav.micro {
  margin-top: 4px !important;
  margin-bottom: 6px !important;
}