/* Torn Spy Network CSS
  Version: 1.0.0
  Author: GNSC4 [268863]
*/

body {
    font-family: 'Inter', sans-serif;
    background-color: #1a202c; /* Equivalent to bg-gray-900 */
}
.glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.btn-primary {
    background-color: #4a5568; /* bg-gray-700 */
    transition: background-color 0.3s ease;
}
.btn-primary:hover {
    background-color: #2d3748; /* bg-gray-800 */
}
.modal {
    display: none;
    position: fixed;
    z-index: 50;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto; /* Make the modal itself scrollable */
    background-color: rgba(0,0,0,0.6);
    padding-top: 2rem; /* Add padding for spacing */
    padding-bottom: 2rem;
}
.modal-content {
    background-color: #2d3748;
    padding: 2rem;
    border-radius: 0.5rem;
    width: 90%;
    max-width: 800px;
    margin: auto; /* Center horizontally */
}
/* Spinner for loading state */
.loader {
    border: 4px solid #f3f3f3;
    border-radius: 50%;
    border-top: 4px solid #ef4444; /* red-500 */
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}
.item-card {
    background-color: #374151; /* bg-gray-700 */
    border-radius: 0.5rem;
    padding: 1rem;
    border-left-width: 4px;
    border-color: #4b5563; /* Default border color */
}
.item-card.rarity-red { border-color: #ef4444; }
.item-card.rarity-yellow { border-color: #facc15; }
.item-card.rarity-orange { border-color: #f97316; }
.item-card.rarity-green { border-color: #22c55e; }

.armor-bonus-hover {
    cursor: help;
    border-bottom: 1px dotted #48bb78; /* green-400 */
}

/* Debug Console Styles */
#debug-console {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #111827;
    color: #d1d5db;
    height: 0;
    transition: height 0.3s ease-in-out;
    z-index: 100;
    display: flex;
    flex-direction: column;
    border-top: 2px solid #ef4444;
}
#debug-console.open {
    height: 300px;
}
#debug-output {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0.5rem;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.875rem;
    white-space: pre-wrap;
    word-break: break-all;
}
.log-error { color: #f87171; }
.log-warn { color: #facc15; }
.log-info { color: #38bdf8; }
.log-debug { color: #a78bfa; }