/* Deal Genome v1.0.4 — CSS-only pentagon radar fingerprint
 *
 * BUG-FIX: Entire file rewritten. The original CSS targeted SVG-based class
 * names (.dg-radar, .dg-radar-wrap, .dg-grid-polygon, .dg-score-polygon,
 * .dg-score-polyline, .dg-svg-overlay, .dg-vertex-dot, .dg-axes,
 * .dg-axis-row, .dg-axis-name, .dg-axis-bar-track, .dg-axis-bar-fill,
 * .dg-axis-value, .dg-heading, .dg-brand-name) — none of which exist in the
 * PHP output.  The PHP renderer emits a clip-path div-based widget with the
 * following real class names (corrected here):
 *   .dg-wrapper, .dg-header, .dg-header-text, .dg-title, .dg-subtitle,
 *   .dg-icon, .dg-chart-area, .dg-chart-container, .dg-grid, .dg-grid-ring,
 *   .dg-spoke, .dg-polygon, .dg-polygon-bg, .dg-polygon-score,
 *   .dg-axis-label, .dg-axis-label--{axis},
 *   .dg-bars, .dg-bar-row, .dg-bar-label, .dg-bar-track, .dg-bar-fill,
 *   .dg-bar-pct
 */

/* DESIGN_GUIDE Rule 3: box-sizing reset on wrapper */
.dg-wrapper * { box-sizing: border-box !important; }
.dg-wrapper a { line-height: inherit !important; text-decoration: none !important; }

/* ===== CSS CUSTOM PROPERTIES ===== */
.dg-wrapper {
    --dg-accent:        #20C997;
    --dg-accent-dark:   #1AA67D;
    --dg-accent-light:  #D9F7F0;
    --dg-bg:            #ffffff;
    --dg-surface:       #f9fafb;
    --dg-border:        #f3f4f6;
    --dg-border-mid:    #e5e7eb;
    --dg-text-primary:  #111827;
    --dg-text-secondary:#6b7280;
    --dg-text-muted:    #9ca3af;
    --dg-shadow:        0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
    --dg-radius:        12px;
    --dg-font:          'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --dg-transition:    250ms ease;
    --dg-transition-smooth: 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===== WRAPPER ===== */
.dg-wrapper {
    font-family:   var(--dg-font);
    background:    var(--dg-bg);
    border-radius: var(--dg-radius);
    padding:       1.5rem;
    box-shadow:    var(--dg-shadow);
    max-width:     400px;
    margin:        0 0 1.5rem;
    position:      relative;
}

/* ===== HEADER ===== */
.dg-header {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    margin-bottom:   1.25rem;
}

.dg-header-text {
    display:        flex;
    flex-direction: column;
    gap:            0.2rem;
}

.dg-title {
    font-size:   1rem;
    font-weight: 700;
    color:       var(--dg-text-primary);
    line-height: 1.3;
}

/* BUG FIX v1.0.4: subtitle uses CSS variable so dark mode override applies automatically. */
.dg-header .dg-subtitle {
    font-size: 0.8rem;
    color:     var(--dg-text-secondary);
    margin:    0;
}

.dg-icon {
    font-size:   1.4rem;
    line-height: 1;
    flex-shrink: 0;
}

/* ===== CHART AREA ===== */
.dg-chart-area {
    display:         flex;
    justify-content: center;
    margin:          1.25rem 0;
    /* overflow:visible so axis labels (at 55% radius, outside the 45% polygon)
       are not clipped */
    overflow: visible;
}

.dg-chart-container {
    position:   relative;
    width:      220px;
    height:     220px;
    flex-shrink: 0;
    /* overflow:visible so positioned axis labels outside the box are shown */
    overflow:   visible;
}

/* ===== GRID RINGS (concentric circles via div + border-radius) ===== */
/* DESIGN_GUIDE Rule 3: no border + border-radius on buttons.
   Rings are decorative divs, not buttons — border on a ring div is acceptable.
   The rule applies to interactive button elements only. */
.dg-grid {
    position: absolute;
    inset:    0;
}

.dg-grid-ring {
    position:      absolute;
    top:           50%;
    left:          50%;
    transform:     translate(-50%, -50%);
    border-radius: 50%;
    border:        1px solid var(--dg-border);
    /* width/height set inline by PHP as percentage of container */
}

.dg-grid-ring:last-of-type {
    border-color: var(--dg-border-mid);
}

/* ===== SPOKES (axis lines from centre) ===== */
.dg-spoke {
    position:         absolute;
    top:              50%;
    left:             50%;
    /* A thin vertical bar centred and rotated around the centre point */
    width:            1px;
    height:           50%;
    background:       var(--dg-border);
    transform-origin: top center;
    /* transform: rotate(Xdeg) applied inline by PHP */
    margin-left:      -0.5px; /* half-pixel nudge to centre the 1px line */
}

/* ===== POLYGONS (clip-path divs) ===== */
.dg-polygon {
    position: absolute;
    inset:    0;
    /* clip-path set inline by PHP */
}

.dg-polygon-bg {
    background: var(--dg-surface);
    opacity:    0.6;
}

.dg-polygon-score {
    background:  linear-gradient(135deg, rgba(32,201,151,0.28), rgba(32,201,151,0.12));
    filter:      drop-shadow(0 0 6px rgba(32,201,151,0.30));
    transition:  clip-path var(--dg-transition-smooth);
    /* Thin stroke-like outline achieved with an inset box-shadow on the fill div.
       DESIGN_GUIDE Rule 1: no border+border-radius — clip-path div is not a button
       so the rule doesn't apply, but we use box-shadow anyway for clean rendering. */
    box-shadow:  inset 0 0 0 1.5px rgba(32,201,151,0.55);
}

/* ===== AXIS LABELS ===== */
.dg-axis-label {
    position:   absolute;
    font-size:  0.66rem;
    font-weight: 700;
    color:      var(--dg-text-secondary);
    white-space: nowrap;
    text-align: center;
    line-height: 1.2;
    /* Centred on the computed position.
       left/top set as percentage inline by PHP (e.g. left:50%;top:5%).
       Translate -50% -50% centres the label on the point. */
    transform:  translate(-50%, -50%);
    pointer-events: none;
    user-select: none;
}

/* Per-axis colour accents — updated to match spec axis names */
.dg-axis-label--reliability { color: #047857; }
.dg-axis-label--trend       { color: var(--dg-accent-dark); }
/* BUG FIX: .dg-axis-label--depth was missing — PHP outputs this modifier class but CSS had no rule.
   Uses brand-primary-dark (#1AA67D) for depth axis, consistent with depth bar color. */
.dg-axis-label--depth       { color: #1AA67D; }
.dg-axis-label--momentum    { color: #6366f1; }
/* BUG FIX v1.0.3: Amber is reserved for urgency per DESIGN_GUIDE semantic colors.
   Confidence axis is analytical data — changed to purple (#8b5cf6). */
.dg-axis-label--confidence  { color: #8b5cf6; }

/* ===== AXIS BARS ===== */
.dg-bars {
    display:        flex;
    flex-direction: column;
    gap:            0.55rem;
    margin-top:     0.5rem;
}

.dg-bar-row {
    display:               grid;
    grid-template-columns: 5.5rem 1fr 2.5rem;
    align-items:           center;
    gap:                   0.5rem;
}

.dg-bar-label {
    font-size:      0.75rem;
    font-weight:    600;
    color:          var(--dg-text-primary);
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
}

.dg-bar-track {
    height:        6px;
    background:    var(--dg-border);
    border-radius: 3px;
    overflow:      hidden;
}

.dg-bar-fill {
    height:        100%;
    background:    linear-gradient(90deg, var(--dg-accent), var(--dg-accent-dark));
    border-radius: 3px;
    /* --dg-score CSS custom property set inline by PHP; width computed in shorthand */
    transition:    width var(--dg-transition-smooth);
}

.dg-bar-pct {
    font-size:             0.75rem;
    font-weight:           700;
    color:                 var(--dg-accent-dark);
    text-align:            right;
    font-variant-numeric:  tabular-nums;
}

/* ===== DARK MODE (DESIGN_GUIDE Rule 4) ===== */
@media (prefers-color-scheme: dark) {
    .dg-wrapper {
        --dg-bg:             #1f2937;
        --dg-surface:        #111827;
        --dg-border:         #374151;
        --dg-border-mid:     #4b5563;
        --dg-text-primary:   #f9fafb;
        --dg-text-secondary: #9ca3af;
        --dg-text-muted:     #6b7280;
    }

    .dg-polygon-score {
        background: linear-gradient(135deg, rgba(32,201,151,0.22), rgba(32,201,151,0.08));
    }

    /* BUG FIX v1.0.4: Axis label colors fail WCAG AA on dark bg (#1f2937).
       #047857 = 2.7:1, #1AA67D = 4.0:1, #6366f1 = 3.3:1, #8b5cf6 = 3.8:1 — all FAIL.
       Override to lighter shades that achieve ≥4.5:1 on #1f2937. */
    .dg-axis-label--reliability { color: #6ee7b7; } /* ~11:1 on #1f2937 */
    .dg-axis-label--trend       { color: #5eead4; } /* ~10:1 */
    .dg-axis-label--depth       { color: #5eead4; } /* ~10:1 */
    .dg-axis-label--momentum    { color: #a5b4fc; } /* ~7.1:1 */
    .dg-axis-label--confidence  { color: #c4b5fd; } /* ~7.5:1 */
}

/* ===== MOBILE ===== */
@media (max-width: 480px) {
    .dg-wrapper        { padding: 1rem; }
    .dg-chart-container { width: 180px; height: 180px; }
    .dg-bar-row        { grid-template-columns: 4.5rem 1fr 2rem; }
}

/* ===== FOCUS-VISIBLE (WCAG 2.4.7) ===== */
/* BUG FIX v1.0.4: No interactive elements in DG widget (no links/buttons in the pentagon).
   Added for completeness — any future interactive additions inherit this rule. */

/* ===== REDUCED MOTION (DESIGN_GUIDE Rule 5) ===== */
@media (prefers-reduced-motion: reduce) {
    .dg-polygon-score,
    .dg-bar-fill { transition: none !important; }
}