/* aff.top tools — общие utility классы
   Цель: вынести повторяющиеся inline-стили из resources/views/tools/*.blade.php
   Все классы с префиксом .tool-* чтобы не конфликтовать с .sp-* / Tailwind. */

/* ───────────────────────── Flex helpers ───────────────────────── */
.tool-row { display:flex; align-items:center; gap:8px; }
.tool-row-wrap { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tool-col { display:flex; flex-direction:column; gap:8px; }
.tool-between { display:flex; justify-content:space-between; align-items:center; gap:12px; }

/* ───────────────────────── Grid helpers ───────────────────────── */
.tool-grid-auto { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.tool-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.tool-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:640px) {
    .tool-grid-2, .tool-grid-3 { grid-template-columns:1fr; }
}

/* ───────────────────────── Spacing utilities ──────────────────── */
.tool-mb-8 { margin-bottom:8px; }
.tool-mb-12 { margin-bottom:12px; }
.tool-mb-16 { margin-bottom:16px; }
.tool-mt-8 { margin-top:8px; }
.tool-mt-12 { margin-top:12px; }

/* ───────────────────────── Inputs ─────────────────────────────── */
.tool-input {
    width:100%;
    padding:10px 14px;
    background:var(--sp-bg-nested);
    border:1px solid var(--sp-border-light);
    border-radius:10px;
    color:var(--sp-text-heading);
    font-size:14px;
    transition:border-color .15s;
    box-sizing:border-box;
}
.tool-input:focus { outline:none; border-color:var(--sp-accent); }

.tool-textarea {
    width:100%;
    padding:10px 14px;
    background:var(--sp-bg-nested);
    border:1px solid var(--sp-border-light);
    border-radius:10px;
    color:var(--sp-text-heading);
    font-size:13px;
    font-family:monospace;
    resize:vertical;
    min-height:100px;
    transition:border-color .15s;
    box-sizing:border-box;
}
.tool-textarea:focus { outline:none; border-color:var(--sp-accent); }

/* ───────────────────────── Buttons ────────────────────────────── */
.tool-btn-primary {
    padding:8px 16px;
    background:var(--sp-cta-bg);
    color:#fff;
    border:none;
    border-radius:10px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:opacity .15s;
}
.tool-btn-primary:hover:not(:disabled) { opacity:0.9; }
.tool-btn-primary:disabled { opacity:0.5; cursor:not-allowed; }

.tool-btn-secondary {
    padding:7px 12px;
    background:var(--sp-bg-nested);
    color:var(--sp-text-heading);
    border:1px solid var(--sp-border-light);
    border-radius:10px;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
    transition:background .15s;
}
.tool-btn-secondary:hover:not(:disabled) { background:var(--sp-border-light); }

/* ───────────────────────── Text helpers ───────────────────────── */
.tool-mono { font-family:monospace; font-size:12px; color:var(--sp-accent); word-break:break-all; }
.tool-muted { color:var(--sp-text-muted); font-size:12px; }
.tool-muted-sm { color:var(--sp-text-muted); font-size:11px; }

/* ───────────────────────── Badges ─────────────────────────────── */
.tool-badge { display:inline-block; padding:2px 8px; border-radius:6px; font-size:11px; font-weight:600; }
.tool-badge-green  { background:rgba(34,197,94,.12);  color:#22c55e; }
.tool-badge-orange { background:rgba(245,158,11,.12); color:#f59e0b; }
.tool-badge-red    { background:rgba(239,68,68,.12);  color:#ef4444; }
.tool-badge-blue   { background:rgba(59,130,246,.12); color:#3b82f6; }

/* ───────────────────────── Cards / layout ─────────────────────── */
.tool-card-inner { background:var(--sp-bg-nested); border-radius:12px; padding:12px 16px; }

/* Стандартный контейнер tools-страниц (max-width + auto margins) */
.tool-container { max-width:960px; margin:0 auto; }
.tool-container-wide { max-width:1080px; margin:0 auto; }
.tool-container-narrow { max-width:720px; margin:0 auto; }

/* Hero-декорации (иконка с glow, как у всех tool-страниц) */
.tool-hero-icon { display:inline-block; filter:drop-shadow(0 0 16px rgba(251,146,60,0.5)); }

/* Hero-заголовок — `font-size:clamp` паттерн */
.tool-hero-title { font-size:clamp(24px,4vw,38px); margin-bottom:10px; line-height:1.15; }
.tool-hero-desc { max-width:680px; margin:0 auto; }

/* ───────────────────────── Result row (label/value) ───────────── */
.tool-result-row { display:flex; padding:8px 16px; gap:10px; border-bottom:1px solid var(--sp-border-light); font-size:13px; }
.tool-result-row:last-child { border-bottom:none; }
.tool-result-label { flex:0 0 180px; color:var(--sp-text-muted); font-size:12px; }
.tool-result-value { flex:1; color:var(--sp-text-heading); word-break:break-all; }

@media (max-width:640px) {
    .tool-result-row { flex-direction:column; gap:4px; padding:8px 14px; }
    .tool-result-label { flex:0 0 auto; }
}

/* ───────────────────────── Error card ─────────────────────────── */
.tool-error-card {
    padding:16px 20px;
    margin-bottom:16px;
    border-left:3px solid #f87171;
}
.tool-error-text { font-size:13px; color:#f87171; }