/* ═══════════════════════════════════════════════════════════════════
   OPENCLAW TOKEN TRACKER v5 - Styles
═══════════════════════════════════════════════════════════════════ */

/* Progress Bars */
.tt-progress-bar {
    width: 100%;
    height: 6px;
    background: var(--md-surface-container-highest);
    border-radius: 3px;
    overflow: hidden;
    margin: 4px 0;
}

.tt-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* Limit Rows */
.tt-limit-row {
    margin-bottom: 12px;
    padding: 8px 10px;
    background: var(--md-surface-container-high);
    border-radius: var(--md-shape-small);
}

.tt-limit-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.tt-limit-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--md-on-surface);
}

.tt-limit-value {
    font-size: 0.75rem;
    font-weight: 600;
    font-family: var(--font-display);
}

.tt-limit-value.tt-ok {
    color: #22c55e;
}

.tt-limit-value.tt-warning {
    color: #ef4444;
}

.tt-limit-reset {
    font-size: 0.6875rem;
    color: var(--md-on-surface-variant);
    display: block;
    margin-top: 2px;
}

/* Context Row */
.tt-context-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.tt-context-label {
    font-size: 0.8125rem;
    color: var(--md-on-surface);
}

.tt-context-pct {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--md-on-surface-variant);
    font-family: var(--font-display);
}

/* Cache Row */
.tt-cache-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: var(--md-surface-container-high);
    border-radius: var(--md-shape-small);
}

.tt-cache-label {
    font-size: 0.8125rem;
    color: var(--md-on-surface);
}

.tt-cache-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--md-primary);
    font-family: var(--font-display);
}