TNI TOOLKIT

.panel {
    background: rgba(22, 27, 34, 0.8);
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 16px;
}

.panel h2 {
    margin: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #30363d;
    color: #58a6ff;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Spacing between elements */
.panel h2 + * { margin-top: 12px; }

/* Symmetric padding */
.panel > *:last-child { margin-bottom: 0; }

<div class="panel">
    <h2>Panel Header</h2>
    <p>Panel content goes here.</p>
</div>

.card {
    background: rgba(22, 27, 34, 0.8);
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.card:hover {
    border-color: #58a6ff;
    background: rgba(88, 166, 255, 0.08);
}

.card.selected {
    border-color: #00ff88;
    background: rgba(0, 255, 136, 0.1);
}

.card.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

<!-- Default card -->
<div class="card">
    <div class="card-name">Server Name</div>
    <div class="card-meta">💰 500</div>
</div>

<!-- Selected state -->
<div class="card selected">...</div>

<!-- Disabled state -->
<div class="card disabled">...</div>

/* Primary Button (Green) */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 4px;
    font-size: 11px;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    background: rgba(0, 255, 136, 0.15);
    border: 1px solid #00ff88;
    color: #00ff88;
}

.btn-primary:hover {
    background: rgba(0, 255, 136, 0.25);
    box-shadow: 0 0 12px rgba(0, 255, 136, 0.3);
}

/* Secondary Button (Subtle) */
.btn-secondary {
    background: rgba(88, 166, 255, 0.1);
    border: 1px solid #30363d;
    color: #8b949e;
}

.btn-secondary:hover {
    border-color: #58a6ff;
    color: #58a6ff;
}

/* Danger Button (Red) */
.btn-danger {
    background: rgba(248, 81, 73, 0.15);
    border: 1px solid #f85149;
    color: #f85149;
}

.btn-danger:hover {
    background: rgba(248, 81, 73, 0.25);
    box-shadow: 0 0 12px rgba(248, 81, 73, 0.3);
}

<button class="btn-primary">Primary Button</button>
<button class="btn-secondary">Secondary Button</button>
<button class="btn-danger">Danger Button</button>

.tag {
    background: rgba(0, 255, 136, 0.15);
    border: 1px solid #00ff88;
    color: #00ff88;
    padding: 6px 12px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tag .remove {
    cursor: pointer;
    opacity: 0.7;
}

.tag .remove:hover {
    opacity: 1;
}

<!-- Simple tag -->
<span class="tag">Selected</span>

<!-- Dismissible tag -->
<span class="tag">
    DNS-Lite
    <span class="remove">✕</span>
</span>

/* Text Input */
input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #30363d;
    background: rgba(22, 27, 34, 0.8);
    color: #c9d1d9;
    font-size: 12px;
    font-family: inherit;
}

input:focus {
    outline: none;
    border-color: #58a6ff;
}

/* Custom Dropdown Container */
.dropdown {
    position: relative;
}

.dropdown-selected {
    padding: 10px 32px 10px 12px;
    border: 1px solid #30363d;
    border-radius: 6px;
    background: rgba(22, 27, 34, 0.8);
    color: #c9d1d9;
    cursor: pointer;
}

.dropdown-selected::after {
    content: "▼";
    position: absolute;
    right: 12px;
    color: #8b949e;
}

.dropdown-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(22, 27, 34, 0.95);
    border: 1px solid #58a6ff;
    border-top: none;
    max-height: 150px;
    overflow-y: auto;
    display: none;
}

.dropdown.open .dropdown-options {
    display: block;
}

.dropdown-option {
    padding: 10px 12px;
    cursor: pointer;
}

.dropdown-option:hover {
    background: rgba(88, 166, 255, 0.15);
}

.dropdown-option.selected {
    background: rgba(0, 255, 136, 0.15);
    color: #00ff88;
}

<!-- Text input -->
<input type="text" placeholder="Enter text...">

<!-- Custom dropdown -->
<div class="dropdown">
    <div class="dropdown-selected">Select option...</div>
    <div class="dropdown-options">
        <div class="dropdown-option">Option 1</div>
        <div class="dropdown-option selected">Option 2</div>
        <div class="dropdown-option">Option 3</div>
    </div>
</div>

// Toggle dropdown on click
document.querySelectorAll('.dropdown').forEach(dropdown => {
    dropdown.addEventListener('click', () => {
        dropdown.classList.toggle('open');
    });
});

// Close dropdown when clicking outside
document.addEventListener('click', (e) => {
    if (!e.target.closest('.dropdown')) {
        document.querySelectorAll('.dropdown.open')
            .forEach(d => d.classList.remove('open'));
    }
});

// Handle option selection
document.querySelectorAll('.dropdown-option').forEach(option => {
    option.addEventListener('click', (e) => {
        e.stopPropagation();
        const dropdown = option.closest('.dropdown');
        const selected = dropdown.querySelector('.dropdown-selected');
        selected.textContent = option.textContent;
        dropdown.querySelectorAll('.dropdown-option')
            .forEach(o => o.classList.remove('selected'));
        option.classList.add('selected');
        dropdown.classList.remove('open');
    });
});

/* Stepper Container */
.stepper {
    display: flex;
    align-items: center;
    gap: 0;
    background: #21262d;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #30363d;
}

.stepper button {
    width: 28px;
    height: 26px;
    border: none;
    background: linear-gradient(180deg, #2d333b 0%, #22272e 100%);
    color: #58a6ff;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.15s;
}

.stepper button:hover:not(:disabled) {
    background: linear-gradient(180deg, #3d444d 0%, #2d333b 100%);
    color: #00ff88;
}

.stepper button:disabled {
    color: #484f58;
    cursor: not-allowed;
    background: #21262d;
}

.stepper-value {
    min-width: 40px;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #00ff88;
    padding: 0 6px;
    background: rgba(0, 255, 136, 0.05);
}

/* Optional: Row wrapper with label */
.stepper-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(22, 27, 34, 0.8);
    border: 1px solid #30363d;
    border-radius: 6px;
}

<div class="stepper-row">
    <span class="stepper-label">Quantity</span>
    <div class="stepper">
        <button class="stepper-minus">−</button>
        <span class="stepper-value">3</span>
        <button class="stepper-plus">+</button>
    </div>
    <span class="stepper-info">(0-10 available)</span>
</div>

function updateStepper(btn, delta) {
    const container = btn.parentElement;
    const valueEl = container.querySelector('.stepper-value');
    const parts = valueEl.textContent.split('/');
    let current = parseInt(parts[0]);
    const max = parseInt(parts[1]);
    current = Math.max(0, Math.min(max, current + delta));
    valueEl.textContent = current + '/' + max;
}

/* Collapsible section */
.collapsible {
    border: 1px solid #30363d;
    border-radius: 6px;
    margin-bottom: 8px;
    overflow: hidden;
}

.collapsible-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.collapsible-header:hover {
    background: rgba(0, 0, 0, 0.5);
}

.collapsible-arrow {
    color: #8b949e;
    font-size: 10px;
    transition: transform 0.2s;
    width: 12px;
}

.collapsible.open .collapsible-arrow {
    transform: rotate(90deg);
}

.collapsible-title {
    color: #c9d1d9;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.collapsible-spacer { flex: 1; }

.collapsible-copy {
    padding: 4px 8px;
    background: rgba(88, 166, 255, 0.1);
    border: 1px solid #30363d;
    border-radius: 4px;
    color: #8b949e;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.15s;
}

.collapsible-copy:hover {
    border-color: #58a6ff;
    color: #58a6ff;
}

.collapsible-copy.copied {
    border-color: #00ff88;
    color: #00ff88;
}

.collapsible-content {
    display: none;
    border-top: 1px solid #30363d;
}

.collapsible.open .collapsible-content {
    display: block;
}

.collapsible-content pre {
    margin: 0;
    border: none;
    border-radius: 0;
    max-height: 250px;
    overflow-y: auto;
}

<div class="collapsible">
    <div class="collapsible-header">
        <span class="collapsible-arrow">▶</span>
        <span class="collapsible-title">Section Title</span>
        <span class="collapsible-spacer"></span>
        <button class="collapsible-copy">📋 Copy</button>
    </div>
    <div class="collapsible-content">
        <pre><code>Your code here...</code></pre>
    </div>
</div>

// Toggle collapsible on header click
document.querySelectorAll('.collapsible-header').forEach(header => {
    header.addEventListener('click', function(e) {
        // Don't toggle if clicking the copy button
        if (e.target.closest('.collapsible-copy')) return;
        
        const collapsible = this.closest('.collapsible');
        collapsible.classList.toggle('open');
    });
});

// Copy button functionality
document.querySelectorAll('.collapsible-copy').forEach(btn => {
    btn.addEventListener('click', function(e) {
        e.stopPropagation();
        const collapsible = this.closest('.collapsible');
        const codeEl = collapsible.querySelector('code');
        const text = codeEl.textContent;
        
        navigator.clipboard.writeText(text).then(() => {
            const originalText = this.innerHTML;
            this.innerHTML = '✓ Copied';
            this.classList.add('copied');
            setTimeout(() => {
                this.innerHTML = originalText;
                this.classList.remove('copied');
            }, 2000);
        });
    });
});

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    line-height: 1.3;
    margin: 0;
}

.table th {
    text-align: left;
    color: #58a6ff;
    font-weight: 600;
    padding: 0 12px 10px 12px;
    border-bottom: 1px solid #30363d;
    font-size: 11px;
    text-transform: uppercase;
}

.table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(48, 54, 61, 0.5);
    vertical-align: top;
}

/* Last row: no border, no bottom padding */
.table tr:last-child td {
    border-bottom: none;
    padding-bottom: 0;
}

.table tr:hover td {
    background: rgba(88, 166, 255, 0.05);
}

<table class="table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Type</th>
            <th>Cost</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Server 01</td>
            <td>Rack</td>
            <td>$500</td>
        </tr>
    </tbody>
</table>

/* Warning/Info Callout (default) */
.callout {
    background: rgba(240, 136, 62, 0.08);
    border: 1px solid #f0883e;
    border-radius: 6px;
    padding: 16px;
}

/* Success Callout */
.callout.success {
    background: rgba(0, 255, 136, 0.08);
    border-color: #00ff88;
}

/* Error Callout */
.callout.error {
    background: rgba(248, 81, 73, 0.08);
    border-color: #f85149;
}

<!-- Warning (default) -->
<div class="callout">
    <strong>⚠️ Warning</strong>
    <p>This action cannot be undone.</p>
</div>

<!-- Success -->
<div class="callout success">...</div>

<!-- Error -->
<div class="callout error">...</div>

.tooltip {
    position: fixed;
    background: #238636;
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 11px;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}

.tooltip.show {
    opacity: 1;
}

<div class="tooltip" id="tooltip">Copied!</div>

function showTooltip(x, y, text) {
    const tooltip = document.getElementById('tooltip');
    tooltip.textContent = text;
    tooltip.style.left = x + 'px';
    tooltip.style.top = y + 'px';
    tooltip.classList.add('show');
    setTimeout(() => {
        tooltip.classList.remove('show');
    }, 1500);
}

.stat-bar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stat-track {
    flex: 1;
    height: 8px;
    background: rgba(22, 27, 34, 0.8);
    border-radius: 4px;
    overflow: hidden;
}

.stat-fill {
    height: 100%;
    background: #00ff88;
    transition: width 0.3s;
}

.stat-fill.warning { background: #f0883e; }
.stat-fill.danger { background: #f85149; }

<div class="stat-bar">
    <span class="stat-label">CPU</span>
    <div class="stat-track">
        <div class="stat-fill" style="width: 45%"></div>
    </div>
    <span class="stat-value">7/16</span>
</div>

<!-- Warning state (orange) -->
<div class="stat-fill warning" style="width: 75%"></div>

<!-- Danger state (red) -->
<div class="stat-fill danger" style="width: 92%"></div>

.empty-state {
    text-align: center;
    color: #8b949e;
    padding: 40px;
    font-size: 12px;
}

.empty-state small {
    display: block;
    margin-top: 8px;
    color: #7d8590;
}

<div class="empty-state">
    No programs selected
    <small>Click programs above to add them</small>
</div>

/* ─────────────────────────────────────────────────────────
   DEPENDENCY: Tooltip (see UI Components › Tooltip)
   Include once per page. Skip if already defined elsewhere.
   ───────────────────────────────────────────────────────── */
.tooltip {
    position: fixed;
    background: #238636;
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 11px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 1000;
}
.tooltip.show { opacity: 1; }

/* ─────────────────────────────────────────────────────────
   Copyable Element
   ───────────────────────────────────────────────────────── */
.copyable {
    cursor: pointer;
    transition: background 0.15s;
}

.copyable:hover {
    background: rgba(0, 255, 136, 0.15);
}

.copyable.copied {
    background: rgba(35, 134, 54, 0.3);
}

<!-- DEPENDENCY: Tooltip (see UI Components › Tooltip)
     Include once per page. Skip if already defined elsewhere. -->
<div class="tooltip" id="tooltip">Copied!</div>

<!-- Copyable element -->
<code class="copyable" onclick="copyValue(this)">SEED-12345</code>

// Requires: Tooltip HTML element with id="tooltip"
function copyValue(el) {
    navigator.clipboard.writeText(el.textContent.trim()).then(() => {
        el.classList.add('copied');
        const tooltip = document.getElementById('tooltip');
        const rect = el.getBoundingClientRect();
        tooltip.style.left = rect.left + rect.width/2 - 40 + 'px';
        tooltip.style.top = rect.top - 40 + 'px';
        tooltip.classList.add('show');
        setTimeout(() => {
            el.classList.remove('copied');
            tooltip.classList.remove('show');
        }, 1500);
    });
}

<div class="grid">
    <div class="card" onclick="this.classList.toggle('selected')">
        <div class="card-name">Item Name</div>
        <div class="card-meta">💰 500</div>
    </div>
</div>

// Toggle selection on click
document.querySelectorAll('.card:not(.disabled)').forEach(card => {
    card.addEventListener('click', () => {
        card.classList.toggle('selected');
    });
});

/* ─────────────────────────────────────────────────────────
   DEPENDENCY: Tooltip (see UI Components › Tooltip)
   Include once per page. Skip if already defined elsewhere.
   ───────────────────────────────────────────────────────── */
.tooltip {
    position: fixed;
    background: #238636;
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 11px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 1000;
}
.tooltip.show { opacity: 1; }

/* ─────────────────────────────────────────────────────────
   Copyable Code Value
   ───────────────────────────────────────────────────────── */
.code-value {
    font-size: 1.4em;
    font-weight: 600;
    color: #00ff88;
    text-align: center;
    padding: 10px 20px;
    background: rgba(0, 255, 136, 0.08);
    border: 1px solid #238636;
    border-radius: 4px;
    letter-spacing: 4px;
    cursor: pointer;
    transition: background 0.15s;
}

.code-value:hover {
    background: rgba(0, 255, 136, 0.15);
}

.code-value.copied {
    background: rgba(35, 134, 54, 0.3);
}

<!-- DEPENDENCY: Tooltip (see UI Components › Tooltip)
     Include once per page. Skip if already defined elsewhere. -->
<div class="tooltip" id="tooltip">Copied!</div>

<!-- Copyable Code Value -->
<div class="code-value" onclick="copyValue(this)">SEED-7X9K2</div>

// Requires: Tooltip HTML element with id="tooltip"
function copyValue(el) {
    navigator.clipboard.writeText(el.textContent.trim()).then(() => {
        el.classList.add('copied');
        const tooltip = document.getElementById('tooltip');
        const rect = el.getBoundingClientRect();
        tooltip.style.left = rect.left + rect.width/2 - 40 + 'px';
        tooltip.style.top = rect.top - 40 + 'px';
        tooltip.classList.add('show');
        setTimeout(() => {
            el.classList.remove('copied');
            tooltip.classList.remove('show');
        }, 1500);
    });
}

code {
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    color: #00ff88;
}

<p>Edit <code>tni-store.json</code> to add items</p>

<input 
    type="text" 
    id="search"
    class="input"
    placeholder="🔍 Filter programs..."
    oninput="filterItems(this.value)"
>

function filterItems(query) {
    const lower = query.toLowerCase();
    document.querySelectorAll('.card').forEach(card => {
        const name = card.querySelector('.card-name').textContent.toLowerCase();
        card.style.display = name.includes(lower) ? 'block' : 'none';
    });
}