/* ============== Daily Graha Positions Card ============== */

.gt-card--graha .gt-card {
  background: #fbf7ff;
  border: 2px solid #a855f7;
  border-radius: 18px;
  padding: 14px 14px 10px;
}

.dg-legend {
  display: flex; gap: 10px; align-items: center;
  margin-top: 8px; font-size: 12px; color: #5b21b6;
}
.dg-legend__item { opacity: 0.9; }

.dg-updated { color: #6b7280; }

/* Grid (South: 4x4 with 12 sign slots + 4 voids) */
.dg-grid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.dg-cell {
  position: relative;
  border: 1px solid #eadcff;
  border-radius: 10px;
  min-height: 70px;
  padding: 6px 6px 4px;
  background: #ffffff;
}

.dg-cell--void {
  background: #faf5ff;
  border-style: dashed;
  opacity: 0.7;
}

.dg-sign-title {
  font-size: 11px;
  line-height: 1;
  margin-bottom: 4px;
  color: #7c3aed;
  font-weight: 600;
}

.dg-chip {
  display: inline-block;
  font: 600 11px/1.15 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  border: 1px solid #e9d5ff;
  border-radius: 8px;
  padding: 2px 6px;
  margin: 2px 4px 0 0;
  white-space: nowrap;
  background: #f9f5ff;
  color: #4c1d95;
}

.dg-chip[data-lagna="1"] {
  background: #ede9fe;
  color: #3730a3;
  border-color: #c4b5fd;
}

/* Small screens */
@media (max-width: 520px) {
  .dg-cell { min-height: 64px; }
  .dg-chip { font-size: 10px; }
  .dg-sign-title { font-size: 10px; }
}

/* keep graha header title + badge on one line, like other cards */
.gt-card--graha .banner-title { display:flex; justify-content:space-between; align-items:center; }

/* Lagna chip – green, bold */
.dg-chip.dg-lagna{
  background:#ecfdf5; border-color:#bbf7d0; color:#047857; font-weight:800;
}

  /* the chart grid */
.dg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 12px;                 /* whatever you’re using */
  position: relative;        /* allow z-index layering */
}

/* the four “void” cells are still rendered; they’re just blanks */
.dg-cell--void {
  border: 2px dashed var(--purple-200);
  background: rgba(124, 58, 237, 0.04);
}

/* the merged center label — lock it to rows 2–3, cols 2–3 */
.dg-center {
  grid-column: 2 / 4;
  grid-row: 2 / 4;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  font-weight: 700;
  color: var(--purple-500);
  background: transparent;
  border: 2px dashed var(--purple-200);
  border-radius: 14px;

  z-index: 1;                /* paint above void cells */
  pointer-events: none;      /* so clicks pass through if needed */
}

/* chips: keep your special colors */
.dg-chip[data-retro="1"] .dg-retro { color: #e11d48; font-weight: 800; } /* ℞ red + bold */
.dg-lagna { color: #059669; font-weight: 800; }                           /* L green + bold */

/* make void cells truly invisible but still reserve space to keep the ring */
.dg-cell--void{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  pointer-events: none;
}

/* center label stays as a dashed rounded box overlay */
.dg-center{
  grid-column: 2 / 4;
  grid-row: 2 / 4;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-weight:700;color:var(--purple-500);
  background: transparent;
  border: 2px dashed var(--purple-200);
  border-radius: 14px;
  z-index: 2;              /* above the (now invisible) voids */
  pointer-events: none;
}

/* grid stays 4×4, but center cells are just borderless "pads" */
.dg-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(84px, 1fr);
  gap: 14px;
  position: relative; /* for overlay title */
}

.dg-cell {
  background: #fff;
  border: 1px solid rgba(141, 91, 255, .25);
  border-radius: 12px;
  padding: 8px 10px 10px;
  box-sizing: border-box;
  overflow: hidden;
}

.dg-cell--center {
  background: transparent;
  border: 0;
  pointer-events: none;
  padding: 0;
}

/* centered “D1 …” label — not a grid item, so it never creates gaps */
.dg-center-title {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-weight: 700;
  color: #3b0764;
  opacity: .9;
  white-space: nowrap;
}

/* sign title */
.dg-sign-title {
  font-weight: 700;
  color: #6d28d9;
  margin-bottom: 6px;
}

/* planet icons row */
.dg-icons { display: flex; flex-wrap: wrap; gap: 6px; }
.dg-ico-wrap { position: relative; display: inline-flex; align-items: center; }
.dg-ico { width: 20px; height: 20px; border-radius: 4px; display: block; }

/* tiny ℞ badge on icon corner */
.dg-retro-dot {
  position: absolute;
  right: -6px; top: -6px;
  font-size: 11px; line-height: 1;
  color: #7c3aed;
  background: #fff; border-radius: 10px; padding: 0 2px;
  border: 1px solid #e9d5ff;
}

/* legend that lives inside each center cell */
.dg-legend-grid {
  display: flex; flex-direction: column; gap: 6px;
  align-items: center; justify-content: center;
  height: 100%;
}
.dg-legend-item { display: inline-flex; align-items: center; gap: 6px; opacity: .9; }
.dg-legend-item small { font-size: 11px; color: #5b21b6; }

/* Lagna badge kept from earlier code */
.dg-chip.dg-lagna { /* if you still use it somewhere */
  background: #eafff4; color: #059669;
  border: 1px solid #bbf7d0;
  font-weight: 700;
}

/* Mobile tweaks */
@media (max-width: 480px) {
  .dg-grid { gap: 10px; grid-auto-rows: minmax(72px, 1fr); }
  .dg-sign-title { font-size: 14px; margin-bottom: 4px; }
  .dg-ico { width: 18px; height: 18px; }
  .dg-center-title { font-size: 16px; }
}

/* grid */
.dg-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(84px, 1fr);
  gap: 14px;
  position: relative; /* for the overlay frame */
}

.dg-cell {
  position: relative;
  background: #fff;
  border: 1px solid rgba(141, 91, 255, .25);
  border-radius: 12px;
  padding: 8px 10px;
  box-sizing: border-box;
  overflow: hidden;
}

/* the 4 middle cells: borderless pads (but keep space) */
.dg-cell--center {
  background: transparent;
  border: 0;
  pointer-events: none;
  padding: 0;
}

/* rasi name: small, not bold, left-center */
.dg-sign-title {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;           /* tiny */
  font-weight: 400;          /* no bold */
  color: #6d28d9;
  white-space: nowrap;
}

/* graha icons: center-center */
.dg-icons {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* icon + retro */
.dg-ico { width: 22px; height: 22px; border-radius: 4px; display: block; }
.dg-retro-dot {
  position: absolute;
  right: -6px; top: -6px;
  font-size: 12px; line-height: 1;
  color: #dc2626;             /* 🔴 retro in red */
  background: #fff; border-radius: 10px; padding: 0 2px;
  border: 1px solid #fecaca;
}

/* legends inside center cells */
.dg-legend-grid { display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center; height: 100%; }
.dg-legend-item { display: inline-flex; align-items: center; gap: 6px; opacity: .95; }
.dg-legend-item small { font-size: 7px; color: #5b21b6; }

/* one combined outline for the inner 2×2 cells (grid overlay) */
.dg-center-frame {
  position: absolute;
  grid-column: 2 / 4;  /* use grid lines */
  grid-row: 2 / 4;
  inset: 0;            /* stretch to the chosen grid area */
  border: 1.5px solid rgba(124, 58, 237, .35);
  border-radius: 14px;
  pointer-events: none;
}

/* mobile tweaks */
@media (max-width: 520px) {
  .dg-grid { gap: 10px; grid-auto-rows: minmax(72px, 1fr); }
  .dg-ico { width: 20px; height: 20px; }
  .dg-sign-title { font-size: 11px; }
}

/* Rasi name: tiny, NOT bold, left–top */
.dg-sign-title{
  position:absolute;
  left:8px; top:8px;
  transform:none;
  font-size:12px;
  font-weight:400;
  color:#6d28d9;
  white-space:normal;       /* allow long Malayalam to wrap */
  line-height:1.05;
  max-width:55%;            /* keeps it away from center icons */
}

/* Center of each sign-cell shows graha icons, 2 per row, centered */
.dg-icons{
  height:100%;
  display:grid;
  grid-template-columns: repeat(2, min-content); /* 2 per row */
  grid-auto-rows:min-content;
  justify-content:center;   /* center the rows horizontally */
  align-content:center;     /* center vertically inside cell */
  column-gap:8px;           /* small horizontal gap */
  row-gap:6px;              /* small vertical gap */
  padding:2px 0 0 0;
}

/* Icon sizes */
.dg-ico{ width:22px; height:22px; border-radius:4px; display:block; }

/* Retro mark in red (on icon corner) */
.dg-ico-wrap{ position:relative; display:inline-flex; align-items:center; }
.dg-retro-dot{
  position:absolute; right:-6px; top:-6px;
  font-size:12px; line-height:1;
  color:#dc2626;                 /* red */
  background:#fff; border-radius:10px; padding:0 2px;
  border:1px solid #fecaca;
}

/* Inner 4 “legend” cells: left–center text, tiny images, zero gap between img & text */
.dg-cell--center .dg-legend-grid{
  display:flex; flex-direction:column;
  align-items:flex-start;        /* left aligned */
  justify-content:center;        /* vertically centered */
  gap:6px;                       /* rows gap */
  height:100%;
  padding-left:6px;
}
.dg-legend-item{
  display:inline-flex; align-items:center;
  gap:0;                          /* image & text touching */
}
.dg-legend-item small{
  font-size:10px;                 /* tiny */
  margin-left:3px;                /* a hairline breathing space */
  color:#5b21b6;
}
.dg-ico--legend{ width:14px; height:14px; }  /* tiny legend icon */

/* One outer frame around the inner 2×2 area (you already append .dg-center-frame in JS) */
.dg-center-frame{
  position:absolute;
  inset:auto;                     /* allow grid placement below */
  pointer-events:none;
  border:1.5px solid rgba(124,58,237,.35);
  border-radius:14px;
  /* place it to rows 2–3 and cols 2–3 */
  left: calc(25% + var(--dg-gap,14px)/1);  /* safe defaults if variables not set */
  right: calc(25% + var(--dg-gap,14px)/1);
  top: calc(25% + var(--dg-gap,14px)/1);
  bottom: calc(25% + var(--dg-gap,14px)/1);
}

/* Mobile tweaks */
@media (max-width:520px){
  .dg-ico{ width:20px; height:20px; }
  .dg-ico--legend{ width:13px; height:13px; }
  .dg-sign-title{ font-size:11px; max-width:60%; }
  .dg-icons{ column-gap:6px; row-gap:6px; }
}

/* Grid + cell base (unchanged where already present) */
.dg-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(76px, 1fr);
  gap: 12px;
  position: relative;
}

.dg-cell {
  position: relative;
  background: #fff;
  border: 1px solid rgba(141, 91, 255, .25);
  border-radius: 12px;
  padding: 8px 10px;
  box-sizing: border-box;
  overflow: hidden;
}

/* the 4 middle cells: borderless pads (hold legends) */
.dg-cell--center { background: transparent; border: 0; pointer-events: none; padding: 0; }

/* Rasi name: tiny, NOT bold, top-left; can wrap (Malayalam etc.) */
.dg-sign-title{
  position:absolute; left:8px; top:8px;
  transform:none;
  font-size:12px; font-weight:400; color:#6d28d9;
  white-space:normal; line-height:1.05; max-width:55%;
}

/* Center of each sign-cell shows graha icons in 2-per-row, centered */
.dg-icons{
  height:100%;
  display:grid;
  grid-template-columns: repeat(2, min-content);
  grid-auto-rows:min-content;
  justify-content:center;   /* center rows horizontally */
  align-content:center;     /* center vertically in cell */
  column-gap:6px; row-gap:6px;
  padding-top:2px;
}

/* Graha icon + retro badge (smaller = more compact) */
.dg-ico{ width:20px; height:20px; border-radius:4px; display:block; }
.dg-ico-wrap{ position:relative; display:inline-flex; align-items:center; }
.dg-retro-dot{
  position:absolute; right:-6px; top:-6px;
  font-size:12px; line-height:1;
  color:#dc2626;                       /* red retro */
  background:#fff; border-radius:10px; padding:0 2px;
  border:1px solid #fecaca;
}

/* Lagna “L” badge — bottom-right of the sign cell */
.dg-lagna-dot{
  position:absolute; right:6px; bottom:6px;
  font: 800 11px/1 ui-sans-serif, system-ui;
  color:#065f46; background:#ecfdf5; border:1px solid #bbf7d0;
  border-radius:8px; padding:2px 6px;
}

/* Legends inside the 4 center cells — left-center, tiny text, almost no gap */
.dg-cell--center .dg-legend-grid{
  display:flex; flex-direction:column;
  align-items:flex-start; justify-content:center;
  gap:6px; height:100%; padding-left:6px;
}
.dg-legend-item{ display:inline-flex; align-items:center; gap:0; }
.dg-legend-item small{ font-size:9.5px; margin-left:2px; color:#5b21b6; }
.dg-ico--legend{ width:12px; height:12px; }

/* One outer frame around inner 2×2 area — we size it in JS */
.dg-center-frame{
  position:absolute; pointer-events:none;
  border:1.5px solid rgba(124,58,237,.35);
  border-radius:14px;
}

/* Mobile tightening */
@media (max-width:520px){
  .dg-grid{ gap:10px; grid-auto-rows:minmax(68px,1fr); }
  .dg-ico{ width:18px; height:18px; }
  .dg-ico--legend{ width:11px; height:11px; }
  .dg-sign-title{ font-size:9.5px; max-width:60%; }
}

/* Rasi name: tiny, NOT bold, top-left; can wrap for long Malayalam etc. */
.dg-sign-title{
  position:absolute; left:3px; top:2px;      /* closer to the top */
  transform:none;
  font-size:9.5px;                             /* a bit smaller */
  background-color: #f7f7fa;
  font-weight:400; color:#6d28d9;
  white-space:normal; line-height:1.05; max-width:55%;
}

/* Center of each sign-cell shows graha icons in 2-per-row, centered */
.dg-icons{
  height:100%;
  display:grid;
  grid-template-columns: repeat(2, min-content); /* 2 per row */
  grid-auto-rows:min-content;
  justify-content:center;   /* center rows horizontally */
  align-content:center;     /* center vertically in cell */
  column-gap:6px; row-gap:6px;
  padding-top:2px;
}

/* Graha icon + retro badge (smaller = more compact) */
.dg-ico{ width:18px; height:18px; border-radius:4px; display:block; }   /* was 20–22 */
.dg-ico-wrap{ position:relative; display:inline-flex; align-items:center; }
.dg-retro-dot{
  position:absolute; right:-6px; top:-6px;
  font-size:12px; line-height:1;
  color:#dc2626;                       /* red retro */
  background:#fff; border-radius:10px; padding:0 2px;
  border:1px solid #fecaca;
}

/* Lagna “L” badge — bottom-right of the sign cell */
.dg-lagna-dot{
  position:absolute; right:6px; bottom:6px;
  font: 800 11px/1 ui-sans-serif, system-ui;
  color:#065f46; background:#ecfdf5; border:1px solid #bbf7d0;
  border-radius:8px; padding:2px 6px;
}

/* NEW: green border on the Lagna sign cell */
.dg-cell--lagna{
  border-color:#10b981 !important;
  box-shadow: inset 0 0 0 2px rgba(16,185,129,.15);
}

/* Legends inside the 4 center cells — left-center, tiny text, minimal gap */
.dg-cell--center .dg-legend-grid{
  display:flex; flex-direction:column;
  align-items:flex-start; justify-content:center;
  gap:6px; height:100%; padding-left:6px;
}
.dg-legend-item{ display:inline-flex; align-items:center; gap:0; }
.dg-legend-item small{ font-size:9px; margin-left:2px; color:#5b21b6; }
.dg-ico--legend{ width:10px; height:10px; }  /* smaller legend icons */

/* One outer frame around inner 2×2 area — sized in JS only */
.dg-center-frame{
  position:absolute; pointer-events:none;
  border:0px solid rgba(124,58,237,.35);
  border-radius:14px;
}

/* Extra tightening on small screens */
@media (max-width:520px){
  .dg-grid{ gap:10px; grid-auto-rows:minmax(68px,1fr); }
  .dg-ico{ width:16px; height:16px; }        /* even smaller on mobile */
  .dg-ico--legend{ width:9px; height:9px; }
  .dg-sign-title{ font-size:9.5px; max-width:60%; }
}