/* ============================================================
 * TYPOGRAPHY DASHBOARD PREVIEW
 * assets/css/pages/typography-builder/preview/dashboard-preview.css
 * ------------------------------------------------------------
 * Dense application layout for evaluating typography in SaaS interfaces.
 * Typography is sourced from --te-text-<role>-* CSS variables written
 * onto .tb-dp by dashboard-preview.js.
 * ============================================================ */


/* ── Fixed neutral chrome palette ──────────────────────────── */

.tb-dp {
    --dp-bg:        var(--preview-bg);
    --dp-surface:   var(--preview-surface);
    --dp-text:      var(--preview-text);
    --dp-muted:     var(--preview-muted);
    --dp-border:    var(--preview-border);
    --dp-accent:    var(--preview-accent);
    --dp-accent-ct: var(--preview-accent-ct);

    background: var(--dp-bg);
    color: var(--dp-text);
    display: flex;
    flex-direction: column;
    min-height: 100%;
}


/* ── Role classes — typography sourced from tokens ─────────── */

.tb-dp-h1 {
    font-family:    var(--te-text-h1-font-family, inherit);
    font-size:      var(--te-text-h1-font-size, 1.875rem);
    font-weight:    var(--te-text-h1-font-weight, 700);
    line-height:    var(--te-text-h1-line-height, 1.2);
    letter-spacing: var(--te-text-h1-letter-spacing, -0.02em);
    margin: 0;
}
.tb-dp-h2 {
    font-family:    var(--te-text-h2-font-family, inherit);
    font-size:      var(--te-text-h2-font-size, 1.25rem);
    font-weight:    var(--te-text-h2-font-weight, 600);
    line-height:    var(--te-text-h2-line-height, 1.3);
    letter-spacing: var(--te-text-h2-letter-spacing, -0.01em);
    margin: 0;
}
.tb-dp-h3 {
    font-family:    var(--te-text-h3-font-family, inherit);
    font-size:      var(--te-text-h3-font-size, 1.125rem);
    font-weight:    var(--te-text-h3-font-weight, 700);
    line-height:    var(--te-text-h3-line-height, 1.2);
    letter-spacing: var(--te-text-h3-letter-spacing, -0.01em);
    margin: 0;
}
.tb-dp-body {
    font-family:    var(--te-text-body-font-family, inherit);
    font-size:      var(--te-text-body-font-size, 1rem);
    font-weight:    var(--te-text-body-font-weight, 400);
    line-height:    var(--te-text-body-line-height, 1.6);
    letter-spacing: var(--te-text-body-letter-spacing, 0em);
    margin: 0;
}
.tb-dp-body-sm {
    font-family:    var(--te-text-body-sm-font-family, inherit);
    font-size:      var(--te-text-body-sm-font-size, 0.875rem);
    font-weight:    var(--te-text-body-sm-font-weight, 400);
    line-height:    var(--te-text-body-sm-line-height, 1.5);
    letter-spacing: var(--te-text-body-sm-letter-spacing, 0em);
    margin: 0;
}
.tb-dp-label {
    font-family:    var(--te-text-label-font-family, inherit);
    font-size:      var(--te-text-label-font-size, 0.875rem);
    font-weight:    var(--te-text-label-font-weight, 500);
    line-height:    var(--te-text-label-line-height, 1.5);
    letter-spacing: var(--te-text-label-letter-spacing, 0em);
    margin: 0;
}
.tb-dp-button {
    font-family:    var(--te-text-button-font-family, inherit);
    font-size:      var(--te-text-button-font-size, 0.875rem);
    font-weight:    var(--te-text-button-font-weight, 600);
    line-height:    var(--te-text-button-line-height, 1);
    letter-spacing: var(--te-text-button-letter-spacing, 0.01em);
}
.tb-dp-caption {
    font-family:    var(--te-text-caption-font-family, inherit);
    font-size:      var(--te-text-caption-font-size, 0.75rem);
    font-weight:    var(--te-text-caption-font-weight, 400);
    line-height:    var(--te-text-caption-line-height, 1.5);
    letter-spacing: var(--te-text-caption-letter-spacing, 0.02em);
    margin: 0;
}


/* ── Buttons ────────────────────────────────────────────────── */

.tb-dp-btn {
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 8px 16px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.tb-dp-btn-primary {
    background: var(--dp-accent);
    color: var(--dp-accent-ct);
    border-color: var(--dp-accent);
}


/* ── Top navigation ─────────────────────────────────────────── */

.tb-dp-topnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0 24px;
    height: 52px;
    border-bottom: 1px solid var(--dp-border);
    background: var(--dp-bg);
    flex-shrink: 0;
}
.tb-dp-nav-left {
    display: flex;
    align-items: center;
    gap: 32px;
}
.tb-dp-nav-brand {
    color: var(--dp-text);
    font-weight: 700;
    white-space: nowrap;
}
.tb-dp-nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
}
.tb-dp-nav-link {
    color: var(--dp-muted);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 6px;
}
.tb-dp-nav-link:first-child {
    color: var(--dp-text);
    background: var(--dp-surface);
}
.tb-dp-nav-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tb-dp-nav-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--dp-accent);
    color: var(--dp-accent-ct);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}


/* ── Main content area — full width, direct child of .tb-dp ─── */

.tb-dp-main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    padding: 28px 32px 40px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.tb-dp-main::-webkit-scrollbar {
    display: none;
}


/* ── Dashboard page header ──────────────────────────────────── */

.tb-dp-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}
.tb-dp-page-copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tb-dp-page-desc {
    color: var(--dp-muted);
}


/* ── KPI cards ──────────────────────────────────────────────── */

.tb-dp-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.tb-dp-kpi-card {
    border: 1px solid var(--dp-border);
    border-radius: 8px;
    padding: 16px 20px;
    background: var(--dp-bg);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tb-dp-kpi-label {
    color: var(--dp-muted);
}
.tb-dp-kpi-metric {
    color: var(--dp-text);
}
.tb-dp-kpi-change {
    display: block;
}
.tb-dp-kpi-change--up   { color: #16a34a; }
.tb-dp-kpi-change--down { color: #dc2626; }
.tb-dp-kpi-period {
    color: var(--dp-muted);
}


/* ── Content sections ───────────────────────────────────────── */

.tb-dp-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.tb-dp-section .tb-dp-h2 {
    color: var(--dp-text);
}
.tb-dp-section-desc {
    color: var(--dp-muted);
}


/* ── Analytics ──────────────────────────────────────────────── */

.tb-dp-chart {
    border: 1px solid var(--dp-border);
    border-radius: 8px;
    background: var(--dp-surface);
    padding: 16px 16px 0;
    overflow: hidden;
}
.tb-dp-chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 88px;
    border-bottom: 1px solid var(--dp-border);
}
.tb-dp-chart-col {
    flex: 1;
    display: flex;
    align-items: flex-end;
    height: 100%;
}
.tb-dp-chart-bar {
    width: 100%;
    background: var(--dp-accent);
    opacity: 0.72;
    border-radius: 3px 3px 0 0;
    min-height: 4px;
    transition: opacity 0.15s;
}
.tb-dp-chart-bar:hover {
    opacity: 1;
}
.tb-dp-chart-axis {
    display: flex;
    gap: 6px;
    padding: 5px 0 8px;
}
.tb-dp-chart-label {
    flex: 1;
    text-align: center;
    color: var(--dp-muted);
}
.tb-dp-analytics-stats {
    display: flex;
    gap: 32px;
}
.tb-dp-analytics-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tb-dp-stat-label {
    color: var(--dp-muted);
}
.tb-dp-stat-value {
    color: var(--dp-text);
    font-weight: 600;
}


/* ── Data table ─────────────────────────────────────────────── */

.tb-dp-table-wrap {
    border: 1px solid var(--dp-border);
    border-radius: 8px;
    overflow: hidden;
}
.tb-dp-table {
    width: 100%;
    border-collapse: collapse;
}
.tb-dp-th {
    font-family:    var(--te-text-label-font-family, inherit);
    font-size:      var(--te-text-label-font-size, 0.875rem);
    font-weight:    var(--te-text-label-font-weight, 500);
    line-height:    var(--te-text-label-line-height, 1.5);
    letter-spacing: var(--te-text-label-letter-spacing, 0em);
    text-align: left;
    padding: 10px 16px;
    color: var(--dp-muted);
    background: var(--dp-surface);
    border-bottom: 1px solid var(--dp-border);
    white-space: nowrap;
}
.tb-dp-td {
    font-family:    var(--te-text-body-sm-font-family, inherit);
    font-size:      var(--te-text-body-sm-font-size, 0.875rem);
    font-weight:    var(--te-text-body-sm-font-weight, 400);
    line-height:    var(--te-text-body-sm-line-height, 1.5);
    letter-spacing: var(--te-text-body-sm-letter-spacing, 0em);
    padding: 11px 16px;
    color: var(--dp-muted);
    border-bottom: 1px solid var(--dp-border);
    vertical-align: middle;
}
.tb-dp-tr:last-child .tb-dp-td {
    border-bottom: none;
}
.tb-dp-tr:nth-child(even) .tb-dp-td {
    background: var(--dp-surface);
}
.tb-dp-td--name {
    color: var(--dp-text);
    font-weight: 500;
}
.tb-dp-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid;
}
.tb-dp-status--active   { color: #16a34a; background: #f0fdf4; border-color: #bbf7d0; }
.tb-dp-status--trial    { color: #d97706; background: #fffbeb; border-color: #fde68a; }
.tb-dp-status--inactive { color: #64748b; background: #f8fafc; border-color: #e2e8f0; }


/* ── Bottom row (form + feed) ───────────────────────────────── */

.tb-dp-bottom-row {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 32px;
    align-items: start;
}


/* ── Form ───────────────────────────────────────────────────── */

.tb-dp-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.tb-dp-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tb-dp-field-label {
    color: var(--dp-text);
}
.tb-dp-input,
.tb-dp-select {
    font-family:    var(--te-text-body-sm-font-family, inherit);
    font-size:      var(--te-text-body-sm-font-size, 0.875rem);
    font-weight:    var(--te-text-body-sm-font-weight, 400);
    line-height:    var(--te-text-body-sm-line-height, 1.5);
    letter-spacing: var(--te-text-body-sm-letter-spacing, 0em);
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--dp-border);
    border-radius: 6px;
    background: var(--dp-bg);
    color: var(--dp-text);
    box-sizing: border-box;
}
.tb-dp-input:focus,
.tb-dp-select:focus {
    outline: 2px solid var(--dp-accent);
    outline-offset: 0;
    border-color: var(--dp-accent);
}
.tb-dp-field-helper {
    color: var(--dp-muted);
}
.tb-dp-field-caption {
    color: var(--dp-muted);
    font-style: italic;
}


/* ── Activity feed ──────────────────────────────────────────── */

.tb-dp-feed {
    display: flex;
    flex-direction: column;
}
.tb-dp-feed-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 9px 0;
    border-bottom: 1px solid var(--dp-border);
}
.tb-dp-feed-item:last-child {
    border-bottom: none;
}
.tb-dp-feed-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dp-accent);
    margin-top: 5px;
    flex-shrink: 0;
}
.tb-dp-feed-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.tb-dp-feed-text {
    color: var(--dp-text);
}
.tb-dp-feed-time {
    color: var(--dp-muted);
}


/* ── Dark mode ───────────────────────────────────────────────────
   Chrome follows --preview-* (themed centrally). Override the light
   status-pill tints and lighten the trend colors for contrast. */
[data-theme="dark"] [data-page="typography-builder"] .tb-dp-kpi-change--up   { color: #4ade80; }
[data-theme="dark"] [data-page="typography-builder"] .tb-dp-kpi-change--down { color: #f87171; }

[data-theme="dark"] [data-page="typography-builder"] .tb-dp-status--active {
    color: #4ade80; background: rgba(34, 197, 94, 0.14); border-color: rgba(34, 197, 94, 0.30);
}
[data-theme="dark"] [data-page="typography-builder"] .tb-dp-status--trial {
    color: #fbbf24; background: rgba(217, 119, 6, 0.16); border-color: rgba(217, 119, 6, 0.32);
}
[data-theme="dark"] [data-page="typography-builder"] .tb-dp-status--inactive {
    color: var(--dp-muted); background: var(--dp-surface); border-color: var(--dp-border);
}