/* Weeklift — shared styles for GSC CSV-based tools (diff tool, zero-click calculator,
   hidden-query gap calculator, etc.). Loaded alongside the sitewide /styles.css.
   Reuses the same color tokens: bg #17191D, card #22262C, border #343A43,
   text #F7F4ED, muted #AEB5BF, amber accent #F4B942. */

/* --- Input panels --- */
.gsc-input-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 640px) {
    .gsc-input-grid { grid-template-columns: 1fr; }
}
.gsc-input-panel h3 {
    margin: 0 0 0.35rem 0;
    font-size: 1rem;
}
.gsc-input-panel .hint {
    color: #AEB5BF;
    font-size: 0.78rem;
    margin: 0 0 0.75rem 0;
}
.gsc-textarea {
    width: 100%;
    box-sizing: border-box;
    background: #17191D;
    border: 1px solid #343A43;
    border-radius: 8px;
    color: #F7F4ED;
    padding: 0.75rem;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.78rem;
    min-height: 9rem;
    resize: vertical;
}
.gsc-textarea:focus { outline: none; border-color: #F4B942; }
.gsc-file-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.6rem;
    flex-wrap: wrap;
}
.gsc-file-label {
    display: inline-block;
    background: none;
    border: 1px dashed #343A43;
    color: #F4B942;
    padding: 0.45rem 0.9rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.8rem;
}
.gsc-file-label:hover { border-color: #F4B942; }
.gsc-file-label input[type="file"] { display: none; }
.gsc-status {
    font-size: 0.78rem;
    margin-top: 0.6rem;
    min-height: 1.1rem;
}
.gsc-status.ok { color: #4ade80; }
.gsc-status.error { color: #f87171; }
.gsc-status.idle { color: #AEB5BF; }

/* --- Warning / error banners --- */
.gsc-warning-box, .gsc-error-box {
    border-radius: 10px;
    padding: 1rem 1.25rem;
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
}
.gsc-warning-box {
    background: rgba(244, 185, 66, 0.08);
    border: 1px solid rgba(244, 185, 66, 0.3);
    color: #F4B942;
}
.gsc-error-box {
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.3);
    color: #f87171;
}

/* --- Summary stat cards --- */
.gsc-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}
.gsc-stat-card {
    background: #22262C;
    border: 1px solid #343A43;
    border-radius: 10px;
    padding: 1rem 1.1rem;
}
.gsc-stat-card .stat-label {
    color: #AEB5BF;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.35rem 0;
}
.gsc-stat-card .stat-value {
    font-size: 1.3rem;
    font-weight: bold;
    color: #F7F4ED;
    margin: 0;
}
.gsc-stat-card .stat-delta {
    font-size: 0.78rem;
    margin-top: 0.25rem;
}

/* --- Category filter chips (reuses .preset-btn look from robots-generator) --- */
.gsc-chip-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.gsc-chip {
    background: #22262C;
    border: 1px solid #343A43;
    color: #AEB5BF;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.8rem;
    font-family: inherit;
}
.gsc-chip:hover { border-color: #F4B942; }
.gsc-chip.active {
    border-color: #F4B942;
    color: #F4B942;
    background: rgba(244, 185, 66, 0.1);
}
.gsc-chip .chip-count { color: inherit; opacity: 0.75; }

/* --- Sensitivity controls --- */
.gsc-sensitivity-row {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 1.25rem;
    font-size: 0.82rem;
    color: #AEB5BF;
}
.gsc-sensitivity-row label {
    display: block;
    margin-bottom: 0.3rem;
    color: #F7F4ED;
}
.gsc-sensitivity-row input[type="number"] {
    width: 5.5rem;
    background: #17191D;
    border: 1px solid #343A43;
    border-radius: 6px;
    color: #F7F4ED;
    padding: 0.4rem 0.6rem;
    font-family: inherit;
    font-size: 0.85rem;
}
.gsc-sensitivity-row input[type="number"]:focus { outline: none; border-color: #F4B942; }

/* --- Table --- */
.gsc-table-wrap { overflow-x: auto; }
.gsc-search-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.gsc-search-input {
    background: #17191D;
    border: 1px solid #343A43;
    border-radius: 8px;
    color: #F7F4ED;
    padding: 0.5rem 0.85rem;
    font-size: 0.85rem;
    font-family: inherit;
    min-width: 220px;
    flex: 1;
}
.gsc-search-input:focus { outline: none; border-color: #F4B942; }
.gsc-row-count {
    color: #AEB5BF;
    font-size: 0.78rem;
    white-space: nowrap;
}
table.gsc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    min-width: 640px;
}
table.gsc-table th {
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #343A43;
    color: #F7F4ED;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
table.gsc-table th.sortable { cursor: pointer; user-select: none; }
table.gsc-table th.sortable:hover { color: #F4B942; }
table.gsc-table th.sort-asc::after { content: ' \25B2'; font-size: 0.7em; }
table.gsc-table th.sort-desc::after { content: ' \25BC'; font-size: 0.7em; }
table.gsc-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #343A43;
    color: #AEB5BF;
    vertical-align: top;
}
table.gsc-table tbody tr:hover { background: rgba(244, 185, 66, 0.04); }
table.gsc-table .gsc-key-cell { color: #F7F4ED; font-weight: 600; }
.gsc-empty-cell { text-align: center; color: #AEB5BF; padding: 1.5rem !important; }

/* --- Status badges --- */
.gsc-badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.gsc-badge-new { background: rgba(96, 165, 250, 0.15); color: #60a5fa; border: 1px solid rgba(96, 165, 250, 0.4); }
.gsc-badge-lost { background: rgba(248, 113, 113, 0.15); color: #f87171; border: 1px solid rgba(248, 113, 113, 0.4); }
.gsc-badge-rising { background: rgba(74, 222, 128, 0.15); color: #4ade80; border: 1px solid rgba(74, 222, 128, 0.4); }
.gsc-badge-falling { background: rgba(244, 185, 66, 0.15); color: #F4B942; border: 1px solid rgba(244, 185, 66, 0.4); }
.gsc-badge-unchanged { background: rgba(174, 181, 191, 0.12); color: #AEB5BF; border: 1px solid rgba(174, 181, 191, 0.3); }

/* --- Delta text coloring --- */
.delta-up { color: #4ade80; }
.delta-down { color: #f87171; }
.delta-flat { color: #AEB5BF; }

/* --- Metric transition cell, e.g. "120 → 145" --- */
.gsc-transition { white-space: nowrap; }
.gsc-transition .arrow { color: #AEB5BF; margin: 0 0.25rem; }

.gsc-actions-row {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin: 0.75rem 0 1.5rem 0;
}