/**
 * panel-tools.css — RiskAsistan Suite v5
 * Panel 2: ISG Araç Kutusu stilleri.
 * Bu modül sadece Araç Kutusu workspace'i aktifken çalışır.
 */

.tools-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-4, 16px);
    width: 100%;
}

#panel-2 .workspace-head {
    gap: 12px;
}

#panel-2 .workspace-search {
    position: sticky;
    top: 0;
    z-index: 4;
    background: linear-gradient(180deg, rgba(8,12,22,0.96), rgba(8,12,22,0.82));
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 10px;
}

.premium-tool-card {
    background: var(--surface-2, rgba(22,27,34,0.95));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    cursor: pointer;
    transition: all 250ms cubic-bezier(0.25,0.46,0.45,0.94);
    animation: svFadeUp 0.4s ease both;
}
.premium-tool-card:hover {
    border-color: rgba(var(--copper-rgb),0.3);
    background: rgba(28,33,40,0.98);
    transform: translateY(-2px);
    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}

.premium-tool-card:focus-visible {
    outline: 2px solid rgba(45,212,191,0.55);
    outline-offset: 2px;
    border-color: rgba(45,212,191,0.32);
    box-shadow: 0 0 0 4px rgba(45,212,191,0.12);
}

.premium-tool-card--action {
    background: linear-gradient(145deg, rgba(16,25,34,0.96), rgba(11,18,29,0.9));
}

.premium-tool-card--action .tool-launch-chip {
    color: #7ef1df;
    border-color: rgba(45,212,191,0.24);
    background: rgba(45,212,191,0.08);
}

.premium-tool-card--action:hover {
    border-color: rgba(45,212,191,0.34);
    box-shadow: 0 10px 28px rgba(7, 14, 26, 0.46), 0 0 0 1px rgba(45,212,191,0.12);
}

.tool-card-inner {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 88px;
}
.tool-icon-wrap {
    width: 40px; height: 40px;
    border-radius: 6px;
    border: 1px solid transparent;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.tool-body { flex: 1; min-width: 0; }
.tool-title { color: var(--color-text-1, #f5f0eb); font-size: 12px; font-weight: 600; margin-bottom: 2px; }
.tool-desc  { color: var(--color-text-2, #9ca3af); font-size: 11px; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tool-footer { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.active-status { font-size: 9px; font-family: var(--font-mono, monospace); color: var(--green, #22c55e); letter-spacing: 0.06em; }
.beta-status   { font-size: 9px; font-family: var(--font-mono, monospace); color: var(--yellow, #f59e0b); letter-spacing: 0.06em; }

.tool-launch-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: var(--copper-light, #e8a96a);
    font-size: 10px;
    font-family: var(--font-mono, monospace);
    font-weight: 700;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.premium-tool-card--skeleton {
    pointer-events: none;
    opacity: 0.85;
}
.tool-skeleton-block,
.tool-skeleton-line {
    background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(200,117,51,0.18), rgba(255,255,255,0.05));
    background-size: 200% 100%;
    animation: toolSkeleton 1.3s ease-in-out infinite;
}
.tool-skeleton-block {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.04);
}
.tool-skeleton-line {
    height: 10px;
    border-radius: 5px;
    margin-bottom: 8px;
}
@keyframes toolSkeleton {
    0% { background-position: 160% 0; }
    100% { background-position: -40% 0; }
}

@media (max-width: 900px) {
    .tools-grid-container {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }
}

@media (max-width: 640px) {
    #panel-2 .workspace-search {
        padding-bottom: 8px;
    }

    .tools-grid-container {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .premium-tool-card {
        border-radius: 14px;
    }

    .tool-card-inner {
        min-height: 96px;
        padding: 14px;
        gap: 10px;
    }

    .tool-icon-wrap {
        width: 44px;
        height: 44px;
    }

    .tool-title {
        font-size: 13px;
    }

    .tool-desc {
        font-size: 12px;
        -webkit-line-clamp: 3;
    }

    .tool-footer {
        align-items: stretch;
    }

    .tool-launch-chip {
        min-height: 32px;
        justify-content: center;
    }
}