/* Tender Funnel — UI стили в стиле «архивная картотека»: бумага, чернила, штампы */

.tf-app {
    --paper: #f7f2e7;
    --paper-dim: #efe8d6;
    --ink: #1f1a14;
    --ink-soft: #4a3f2f;
    --stamp-red: #b8362a;
    --stamp-olive: #5b6b3b;
    --stamp-gold: #a37e2c;
    --rule: #c9b78c;
    --shadow: rgba(0,0,0,.08);
    font-family: 'PT Serif', Georgia, serif;
    color: var(--ink);
    background: var(--paper);
    padding: 18px;
    border: 1px solid var(--rule);
    border-radius: 4px;
}

.tf-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--paper-dim);
    border: 1px solid var(--rule);
    border-radius: 3px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
}

.tf-counters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
}

.tf-counters .tf-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border: 1px solid var(--rule);
    background: var(--paper);
    border-radius: 12px;
}

.tf-counters .tf-pill strong {
    color: var(--stamp-red);
    font-weight: 700;
}

.tf-btn {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    padding: 6px 12px;
    border: 1px solid var(--ink);
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.tf-btn:hover { background: var(--ink); color: var(--paper); }
.tf-btn-primary { background: var(--stamp-olive); color: var(--paper); border-color: var(--stamp-olive); }
.tf-btn-primary:hover { background: #3d4827; border-color: #3d4827; }
.tf-btn-danger { background: var(--stamp-red); color: var(--paper); border-color: var(--stamp-red); }
.tf-btn-danger:hover { background: #872217; border-color: #872217; }
.tf-btn-secondary { background: var(--paper-dim); }
.tf-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.tf-board {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

@media (max-width: 1100px) {
    .tf-board { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .tf-board { grid-template-columns: 1fr; }
}

.tf-column {
    background: var(--paper-dim);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: 8px;
    min-height: 200px;
}

.tf-column-header {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ink-soft);
    border-bottom: 2px solid var(--ink);
    padding-bottom: 4px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tf-column-header .tf-count {
    background: var(--ink);
    color: var(--paper);
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
}

.tf-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 2px;
    box-shadow: 1px 1px 0 var(--shadow);
    position: relative;
    transition: transform .1s;
}
.tf-card:hover { transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--shadow); }

.tf-card-stamp {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
    line-height: 1;
    transform: rotate(-12deg);
    opacity: 0.85;
    letter-spacing: 0.5px;
    padding: 4px;
}
.tf-stamp-new { color: var(--stamp-gold); border-color: var(--stamp-gold); }
.tf-stamp-interesting { color: var(--stamp-red); border-color: var(--stamp-red); }
.tf-stamp-review { color: var(--stamp-olive); border-color: var(--stamp-olive); }
.tf-stamp-files { color: var(--ink); border-color: var(--ink); }
.tf-stamp-rejected { color: #888; border-color: #888; }

.tf-card-num {
    font-family: 'PT Mono', monospace;
    font-size: 10px;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.tf-card-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 6px;
    padding-right: 56px;
}

.tf-card-meta {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    color: var(--ink-soft);
    line-height: 1.5;
    margin-bottom: 6px;
}

.tf-card-meta strong { color: var(--ink); }

.tf-card-summary {
    font-size: 12px;
    line-height: 1.4;
    color: var(--ink-soft);
    margin: 6px 0;
    padding: 6px;
    background: var(--paper-dim);
    border-left: 2px solid var(--rule);
    font-style: italic;
}

.tf-card-files {
    margin: 8px 0;
    padding: 6px 8px;
    background: var(--paper-dim);
    border: 1px dashed var(--rule);
    border-radius: 2px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
}

.tf-card-files a {
    display: block;
    padding: 2px 0;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px dotted var(--rule);
}
.tf-card-files a:last-child { border-bottom: none; }
.tf-card-files a:hover { color: var(--stamp-red); }
.tf-card-files a::before { content: "📎 "; }

.tf-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}
.tf-card-actions .tf-btn { font-size: 10px; padding: 4px 8px; }

.tf-loading, .tf-empty {
    text-align: center;
    padding: 24px;
    color: var(--ink-soft);
    font-style: italic;
}

.tf-error {
    background: #f8e0db;
    border: 1px solid var(--stamp-red);
    color: var(--stamp-red);
    padding: 8px 12px;
    border-radius: 2px;
    margin-bottom: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
}

/* Clusters */
.tf-clusters { font-family: 'Inter', sans-serif; }
.tf-cluster-form {
    display: flex;
    gap: 8px;
    margin: 12px 0;
    flex-wrap: wrap;
}
.tf-cluster-form input {
    flex: 1;
    min-width: 200px;
    padding: 8px 10px;
    border: 1px solid var(--rule);
    background: var(--paper);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
}
.tf-cluster-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 8px;
}
.tf-cluster-item {
    background: var(--paper);
    border: 1px solid var(--rule);
    padding: 10px;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tf-cluster-item code {
    font-family: 'PT Mono', monospace;
    font-size: 10px;
    color: var(--ink-soft);
    word-break: break-all;
}
.tf-cluster-item .tf-cluster-actions { display: flex; gap: 4px; }