/* ShopView PowerTools - Centralized Application Styles */

/* Base Layout Styles */
.fade-in { 
    opacity: 0; 
    transition: opacity 250ms ease-in; 
}
.fade-in.ready { 
    opacity: 1; 
}

/* Diff pre */
.diff-pre { 
    white-space: pre-wrap; 
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 
}

/* Diff syntax highlighting */
.diff-header {
    color: #666;
    font-weight: bold;
}

.diff-hunk {
    color: #00f;
    font-weight: bold;
}

.diff-added {
    background-color: #e6ffed;
    color: #24292e;
}

.diff-removed {
    background-color: #ffeef0;
    color: #24292e;
}

/* Dark mode diff styles */
.dark .diff-added {
    background-color: #0d4c1a;
    color: #adbac7;
}

.dark .diff-removed {
    background-color: #67060c;
    color: #adbac7;
}

.dark .diff-header {
    color: #768390;
    font-weight: bold;
}

.dark .diff-hunk {
    color: #539bf5;
    font-weight: bold;
}

/* Spinner animation */
.spinner { 
    animation: spin 1s linear infinite; 
}
@keyframes spin { 
    from { transform: rotate(0deg); } 
    to { transform: rotate(360deg); } 
}

/* Ensure prose elements are styled properly */
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
    font-weight: 600;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1.2;
}

.prose h1 { font-size: 1.5em; }
.prose h2 { font-size: 1.3em; }
.prose h3 { font-size: 1.1em; }
.prose h4, .prose h5, .prose h6 { font-size: 1em; }

.prose ul, .prose ol {
    margin: 1em 0;
    padding-left: 1.5em;
}

.prose li {
    margin: 0.25em 0;
}

.prose ul li {
    list-style-type: disc;
}

.prose ol li {
    list-style-type: decimal;
}

.prose p {
    margin: 0.75em 0;
}

.prose strong {
    font-weight: 600;
}

.prose em {
    font-style: italic;
}

/* Dark mode overrides */
.dark .prose h1, .dark .prose h2, .dark .prose h3, 
.dark .prose h4, .dark .prose h5, .dark .prose h6 {
    color: rgb(248 250 252); /* slate-50 */
}

.dark .prose p, .dark .prose li {
    color: rgb(203 213 225); /* slate-300 */
}

.dark .prose strong {
    color: rgb(248 250 252); /* slate-50 */
}