/* ================================================================
   Seren — Self-Evolving Reflective Engine Network - Dashboard Styles
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600&family=DM+Mono:wght@400;500&display=swap');

.tie-dash {
    --tie-bg:       #FAFAFA;
    --tie-surface:  #FFFFFF;
    --tie-border:   #E8E8ED;
    --tie-text:     #1A1A2E;
    --tie-muted:    #6B7280;
    --tie-accent:   #2563EB;
    --tie-radius:   10px;
    --tie-shadow:   0 1px 3px rgba(0,0,0,.07);
    --dti-low:      #059669;
    --dti-low-bg:   #ECFDF5;
    --dti-mid:      #D97706;
    --dti-mid-bg:   #FFFBEB;
    --dti-high:     #DC2626;
    --dti-high-bg:  #FEF2F2;

    font-family:  'DM Sans', system-ui, sans-serif;
    color:        var(--tie-text);
    max-width:    760px;
    margin:       2rem auto;
}

.tie-dash * { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Header ────────────────────────────────────────────────────── */
.tie-dash-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    background:      var(--tie-surface);
    border:          1px solid var(--tie-border);
    border-radius:   12px;
    padding:         20px 24px;
    margin-bottom:   16px;
    box-shadow:      var(--tie-shadow);
}

.tie-dash-title {
    display:     flex;
    align-items: center;
    gap:         14px;
}

.tie-dash-mark {
    font-size:  28px;
    color:      var(--tie-accent);
    flex-shrink:0;
}

.tie-dash-title h2 {
    font-size:   17px;
    font-weight: 600;
    color:       var(--tie-text);
    letter-spacing: -.01em;
}

.tie-dash-title p {
    font-size:  12px;
    color:      var(--tie-muted);
    margin-top: 2px;
    font-style: italic;
}

.tie-dash-streak {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    background:     #EFF6FF;
    border:         1px solid #BFDBFE;
    border-radius:  8px;
    padding:        8px 16px;
    text-align:     center;
}

.tie-streak-num {
    font-size:   24px;
    font-weight: 600;
    color:       var(--tie-accent);
    font-family: 'DM Mono', monospace;
    line-height: 1;
}

.tie-streak-label {
    font-size:  10px;
    color:      var(--tie-muted);
    margin-top: 3px;
}

/* ── Stat row ──────────────────────────────────────────────────── */
.tie-dash-stats {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   12px;
    margin-bottom:         16px;
}

.tie-dash-stat {
    background:     var(--tie-surface);
    border:         1px solid var(--tie-border);
    border-radius:  var(--tie-radius);
    padding:        16px;
    text-align:     center;
    box-shadow:     var(--tie-shadow);
    display:        flex;
    flex-direction: column;
    align-items:    center;
}

.tie-stat-val {
    font-size:   26px;
    font-weight: 600;
    font-family: 'DM Mono', monospace;
    color:       var(--tie-text);
    line-height: 1;
}

.tie-stat-lbl {
    font-size:  11px;
    color:      var(--tie-muted);
    margin-top: 6px;
    line-height:1.3;
    text-align: center;
}

/* DTI colour classes */
.tie-dti-col-low  { color: var(--dti-low) !important; }
.tie-dti-col-mid  { color: var(--dti-mid) !important; }
.tie-dti-col-high { color: var(--dti-high) !important; }

/* ── Sections ──────────────────────────────────────────────────── */
.tie-dash-section {
    background:    var(--tie-surface);
    border:        1px solid var(--tie-border);
    border-radius: var(--tie-radius);
    padding:       20px 24px;
    margin-bottom: 16px;
    box-shadow:    var(--tie-shadow);
}

.tie-dash-section-title {
    font-size:     14px !important;
    font-weight:   600 !important;
    color:         var(--tie-text) !important;
    margin-bottom: 4px !important;
    padding:       0 !important;
    border:        none !important;
}

.tie-dash-section-sub {
    font-size:     12px;
    color:         var(--tie-muted);
    margin-bottom: 16px;
    line-height:   1.5;
}

/* ── Summary ───────────────────────────────────────────────────── */
.tie-summary-text {
    font-size:     14px;
    color:         var(--tie-muted);
    line-height:   1.65;
    margin-bottom: 14px;
}

.tie-suit-banner {
    display:       flex;
    align-items:   center;
    gap:           12px;
    background:    #F0F4FF;
    border:        1px solid #C7D7FD;
    border-radius: 8px;
    padding:       10px 14px;
}

.tie-suit-name {
    font-size:   12px;
    font-weight: 600;
    color:       var(--tie-accent);
    white-space: nowrap;
    font-family: 'DM Mono', monospace;
    letter-spacing:.05em;
}

.tie-suit-meaning {
    font-size:  13px;
    color:      var(--tie-muted);
    line-height:1.4;
}

/* ── Heatmap ───────────────────────────────────────────────────── */
.tie-heatmap { }

.tie-heatmap-labels {
    display:               grid;
    grid-template-columns: repeat(7, 1fr);
    gap:                   4px;
    margin-bottom:         4px;
}

.tie-heatmap-labels span {
    font-size:  10px;
    color:      var(--tie-muted);
    text-align: center;
    font-family:'DM Mono', monospace;
}

.tie-heatmap-grid {
    display:               grid;
    grid-template-columns: repeat(7, 1fr);
    gap:                   4px;
}

.tie-heat-cell {
    aspect-ratio:  1;
    border-radius: 3px;
    cursor:        default;
    transition:    transform .1s;
}

.tie-heat-cell:hover { transform: scale(1.2); }

.tie-heat-cell.empty   { background: #F1EFE8; }
.tie-heat-cell.future  { background: #F7F7FA; opacity: .4; }
.tie-heat-cell.level-1 { background: #ECFDF5; }
.tie-heat-cell.level-2 { background: #6EE7B7; }
.tie-heat-cell.level-3 { background: #FBBF24; }
.tie-heat-cell.level-4 { background: #F97316; }
.tie-heat-cell.level-5 { background: #DC2626; }

.tie-heatmap-legend {
    display:     flex;
    align-items: center;
    gap:         8px;
    margin-top:  10px;
    font-size:   11px;
    color:       var(--tie-muted);
}

.tie-legend-cells {
    display: flex;
    gap:     3px;
}

.tie-legend-cells .tie-heat-cell {
    width:  16px;
    height: 16px;
}

/* ── Card frequency chart ──────────────────────────────────────── */
.tie-freq-chart {
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

.tie-freq-row {
    display:     grid;
    align-items: center;
    gap:         10px;
    grid-template-columns: 160px 1fr 28px;
}

.tie-freq-label {
    font-size:  13px;
    color:      var(--tie-text);
    white-space:nowrap;
    overflow:   hidden;
    text-overflow:ellipsis;
}

.tie-freq-bar-wrap {
    background:    #F1EFE8;
    border-radius: 4px;
    height:        10px;
    overflow:      hidden;
}

.tie-freq-bar {
    height:        100%;
    border-radius: 4px;
    transition:    width .6s ease;
    min-width:     4px;
}

.tie-freq-count {
    font-size:   12px;
    font-weight: 500;
    color:       var(--tie-muted);
    font-family: 'DM Mono', monospace;
    text-align:  right;
}

/* ── Event stress chart ────────────────────────────────────────── */
.tie-event-chart {
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

.tie-event-row {
    display:     grid;
    align-items: center;
    gap:         10px;
    grid-template-columns: 120px 1fr 36px;
}

.tie-event-label {
    font-size:  13px;
    color:      var(--tie-text);
    white-space:nowrap;
    overflow:   hidden;
    text-overflow:ellipsis;
}

.tie-event-bar-wrap {
    background:    #F1EFE8;
    border-radius: 4px;
    height:        10px;
    overflow:      hidden;
}

.tie-event-bar {
    height:        100%;
    border-radius: 4px;
    transition:    width .6s ease;
    min-width:     4px;
}

.tie-event-low  { background: var(--dti-low); }
.tie-event-mid  { background: var(--dti-mid); }
.tie-event-high { background: var(--dti-high); }

.tie-event-score {
    font-size:   13px;
    font-weight: 600;
    font-family: 'DM Mono', monospace;
    text-align:  right;
}

/* ── Pattern cards ─────────────────────────────────────────────── */
.tie-patterns {
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

.tie-pattern-card {
    border-radius: var(--tie-radius);
    padding:       14px 16px;
    border:        1px solid;
}

.tie-pattern-card.sev-high   { background: var(--dti-high-bg); border-color: #FECACA; }
.tie-pattern-card.sev-medium { background: var(--dti-mid-bg);  border-color: #FDE68A; }
.tie-pattern-card.sev-low    { background: var(--dti-low-bg);  border-color: #A7F3D0; }

.tie-pattern-title {
    font-size:     13px;
    font-weight:   600;
    color:         var(--tie-text);
    margin-bottom: 5px;
}

.tie-pattern-body {
    font-size:  13px;
    color:      var(--tie-muted);
    line-height:1.55;
}

/* ── Card chips ────────────────────────────────────────────────── */
.tie-card-chips {
    display:   flex;
    flex-wrap: wrap;
    gap:       8px;
}

.tie-card-chip-dash {
    display:       flex;
    align-items:   center;
    gap:           6px;
    background:    #F0F4FF;
    border:        1px solid #C7D7FD;
    border-radius: 8px;
    padding:       6px 12px;
}

.tie-chip-card-name {
    font-size:  13px;
    font-weight:500;
    color:      var(--tie-accent);
}

.tie-chip-count {
    font-size:  11px;
    color:      var(--tie-muted);
    font-family:'DM Mono', monospace;
}

/* ── Empty / login states ──────────────────────────────────────── */
.tie-dash-empty,
.tie-login-notice {
    background:    var(--tie-surface);
    border:        1px solid var(--tie-border);
    border-radius: 12px;
    padding:       32px;
    text-align:    center;
    font-family:   'DM Sans', sans-serif;
    font-size:     14px;
    color:         var(--tie-muted);
    max-width:     480px;
    margin:        2rem auto;
}

.tie-dash-empty a,
.tie-login-notice a { color: var(--tie-accent); }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .tie-dash-stats         { grid-template-columns: repeat(2, 1fr); }
    .tie-dash-header        { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px; }
    .tie-dash-section       { padding: 16px 18px; }
    .tie-freq-row           { grid-template-columns: 120px 1fr 24px; }
    .tie-event-row          { grid-template-columns: 90px 1fr 32px; }
}

@media (max-width: 400px) {
    .tie-dash-stats         { grid-template-columns: 1fr 1fr; }
    .tie-heatmap-labels span { font-size: 8px; }
}

/* ── Heatmap tooltip ───────────────────────────────────────────── */
.tie-heat-tip {
    position:      fixed;
    background:    #1A1A2E;
    color:         #fff;
    font-size:     11px;
    padding:       5px 10px;
    border-radius: 5px;
    pointer-events:none;
    z-index:       9999;
    white-space:   nowrap;
    font-family:   'DM Sans', sans-serif;
}

/* ── Cross-page navigation ─────────────────────────────────────── */
.tie-dash-nav {
    display:         flex;
    gap:             8px;
    margin-bottom:   20px;
    padding:         4px;
    background:      #F7F7FA;
    border:          1px solid var(--tie-border, #E8E8ED);
    border-radius:   10px;
}

.tie-dash-nav-item {
    display:         flex;
    align-items:     center;
    gap:             7px;
    flex:            1;
    padding:         10px 14px;
    border-radius:   7px;
    text-decoration: none;
    font-size:       13px;
    font-weight:     500;
    color:           #6B7280;
    transition:      background .15s, color .15s;
    justify-content: center;
}

.tie-dash-nav-item:hover {
    background: #EDEDF2;
    color:      #1A1A2E;
}

.tie-dash-nav-active {
    background: #1A1A2E !important;
    color:      #fff !important;
}

.tie-dash-nav-icon {
    font-size: 10px;
    opacity:   0.8;
}