/* Filename: style.css */

/* Global Reset & Base */
body {
    font-family: 'Inter', sans-serif;
    background-color: #0B0F15;
    color: #ffffff;
}

/* Scrollbar Customization */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #0B0F15;
}

::-webkit-scrollbar-thumb {
    background: #374151;
    border-radius: 5px;
}

/* UI Components */
.glass-panel {
    background: #161B22;
    border: 1px solid #30363d;
}

/* Loading Animation */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.spinner {
    animation: spin 1s linear infinite;
}

/* Custom Checkbox */
.custom-checkbox {
    cursor: pointer;
    appearance: none;
    background-color: #1f2937;
    border: 1px solid #374151;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.25rem;
    display: inline-grid;
    place-content: center;
}

.custom-checkbox:checked {
    background-color: #3b82f6;
    border-color: #3b82f6;
}

.custom-checkbox:checked::before {
    content: "";
    width: 0.6em;
    height: 0.6em;
    background-color: white;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

/* Content Editable Focus State */
[contenteditable]:focus {
    outline: 2px solid #3b82f6;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 4px;
    padding: 4px;
}

/* Table Headers */
th {
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

th:hover {
    background-color: #1f2937;
}

/* Diff Engine Styles (QC Module) */
.diff-ins {
    color: #4ade80;
    background-color: rgba(74, 222, 128, 0.1);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
    border-radius: 2px;
    padding: 0 2px;
}

.diff-del {
    color: #f87171;
    text-decoration: line-through;
    opacity: 0.6;
    font-size: 0.9em;
    margin-right: 2px;
}

/* Toast Notifications */
#toast-container {
    pointer-events: none;
}

#toast-container>div {
    pointer-events: auto;
}