/* webapp/static/css/style.css */

/* Layout */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

/* Cards hover effect */
.hover-shadow {
    transition: transform 0.2s, box-shadow 0.2s;
}

.hover-shadow:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Chart containers */
.chart-container {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin: 20px 0;
}

/* HTMX loading indicator */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: block;
}

.htmx-request.htmx-indicator {
    display: block;
}

/* Chapter content styling */
.chapter-content h1 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #1266f1;
}

.chapter-content h2 {
    font-size: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #333;
}

.chapter-content h3 {
    font-size: 1.25rem;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.chapter-content p {
    line-height: 1.7;
    margin-bottom: 1rem;
}

.chapter-content table {
    width: 100%;
    margin: 1rem 0;
}

.chapter-content table th,
.chapter-content table td {
    padding: 0.75rem;
    border: 1px solid #dee2e6;
}

.chapter-content table th {
    background: #f8f9fa;
}

/* TOC sidebar */
.toc-wrapper {
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    padding-right: 10px;
}

/* Scrollbar styling dla TOC */
.toc-wrapper::-webkit-scrollbar {
    width: 6px;
}

.toc-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.toc-wrapper::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.toc-wrapper::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

.toc {
    font-size: 0.9rem;
}

.toc ul {
    list-style: none;
    padding-left: 1rem;
}

.toc a {
    color: #666;
    text-decoration: none;
}

.toc a:hover {
    color: #1266f1;
}

/* Controls styling */
.controls {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1rem;
}

.controls label {
    font-weight: 500;
    margin-bottom: 0.5rem;
}

/* Tooltip custom styling */
.tooltip-term {
    border-bottom: 1px dotted #1266f1;
    cursor: help;
}

/* Abbreviations - tooltips z markdown *[TERM]: definition */
abbr {
    border-bottom: 1px dotted #1266f1;
    cursor: help;
    text-decoration: none;
    position: relative;
}

abbr:hover {
    background-color: #e7f1ff;
}

/* Tooltip widoczny na hover (natywny title) + ulepszony styl */
abbr[title] {
    font-weight: 500;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .chapter-content h1 {
        font-size: 1.5rem;
    }

    .chart-container {
        padding: 10px;
    }
}

/* Loading spinner */
.loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

/* =============================================================================
   Rewizje i zmiany w treści - oznaczenia fioletowe
   ============================================================================= */

/* Inline style preservation - purple color for revisions */
.chapter-content span[style*="color: purple"],
.chapter-content span[style*="color:purple"] {
    color: #8B5CF6 !important;
    font-weight: 500;
    background-color: rgba(139, 92, 246, 0.08);
    padding: 0 2px;
    border-radius: 2px;
}

/* Klasa dla rewizji (alternatywa do inline styles) */
.revision,
.rev {
    color: #8B5CF6;
    font-weight: 500;
    background-color: rgba(139, 92, 246, 0.08);
    padding: 0 2px;
    border-radius: 2px;
}

/* Stare wartości - przekreślone brązowym */
.chapter-content s[style*="color: brown"],
.chapter-content s[style*="color:brown"],
.chapter-content del {
    color: #92400E !important;
    text-decoration: line-through;
    opacity: 0.7;
    font-size: 0.9em;
}

/* Strzałka między starą a nową wartością */
.rev-arrow {
    color: #6B7280;
    padding: 0 4px;
    font-size: 0.85em;
}

/* Tooltip przy hover na rewizji */
.chapter-content span[style*="color: purple"]:hover,
.chapter-content span[style*="color:purple"]:hover,
.revision:hover,
.rev:hover {
    background-color: rgba(139, 92, 246, 0.15);
    cursor: help;
}

/* Legenda rewizji (opcjonalna, do dodania w szablonie) */
.revision-legend {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border: 1px solid #c4b5fd;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 1rem 0;
    font-size: 0.9rem;
}

.revision-legend::before {
    content: "📝 ";
}

.revision-legend .sample {
    color: #8B5CF6;
    font-weight: 500;
    background-color: rgba(139, 92, 246, 0.1);
    padding: 0 4px;
    border-radius: 2px;
}

/* =============================================================================
   Przypisy - jednolity rozmiar i styl
   ============================================================================= */

/* Wszystkie superscripty w treści rozdziału */
.chapter-content sup {
    font-size: 0.75em !important;
    vertical-align: super;
    line-height: 0;
}

/* Linki do przypisów */
.chapter-content a[href^="#fn"] {
    text-decoration: none;
    color: #1266f1;
}

.chapter-content a[href^="#fn"]:hover {
    text-decoration: underline;
}

.chapter-content a[href^="#fn"] sup {
    font-size: 0.75em !important;
    font-weight: normal;
    padding: 0 1px;
}