* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: system-ui, -apple-system, sans-serif;
    line-height: 1.5;
    padding: 1rem;
    max-width: 100vw;
    overflow-x: hidden;
}

main {
    max-width: 1200px;
    margin: 0 auto;
}

h1 {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    margin-bottom: 1rem;
    color: #000;
    /* Sikrer tilstrekkelig kontrast */
}

.page-hero {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.hero-actions button {
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
    border-radius: 4px;
    border: 2px solid #000;
    background: #000;
    color: #fff;
    cursor: pointer;
}

.hero-actions .trend-button {
    border-color: #666;
    color: #000;
    background: #fff;
}
.hero-actions button:hover {
    background-color: #333;
    border-color: #333;
}

.hero-actions .trend-button:hover {
    background-color: #f2f2f2;
    border-color: #444;
}

.navigation-section,
.view-section,
.reports-section {
    margin-bottom: 1.5rem;
}

/* Forbedret tabellinnpakning med synlig rullefelt */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    border: 1px solid #ddd;
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

/* Rullefeltstiler for WebKit-nettlesere */
.table-wrapper::-webkit-scrollbar {
    height: 12px;
}

.table-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 0 0 8px 8px;
}

.table-wrapper::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 6px;
    border: 3px solid #f1f1f1;
}

.table-wrapper::-webkit-scrollbar-thumb:hover {
    background: #666;
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

th,
td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #ddd;
    font-size: clamp(0.875rem, 2vw, 1rem);
}

/* Sort icon styles */
th.sortable {
    padding: 0;
    position: relative;
}

th.sortable button {
    width: 100%;
    height: 100%;
    padding: 0.75rem;
    background: none;
    border: none;
    text-align: left;
    font-size: inherit;
    font-family: inherit;
    cursor: pointer;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
}

th.sortable button:hover {
    background-color: #f8f9fa;
}

th.sortable button:focus {
    outline: 2px solid #0066cc;
    outline-offset: -2px;
    background-color: #f0f8ff;
}

.sort-icon {
    display: inline-block;
    margin-left: 0.5rem;
    font-size: 0.8em;
    flex-shrink: 0;
    color: #000;
}

.sort-icon::before {
    opacity: 1;
    color: #000;
}

th.sort-asc .sort-icon::before {
    content: "▲";
}

th.sort-desc .sort-icon::before {
    content: "▼";
}

th:not(.sort-asc):not(.sort-desc) .sort-icon::before {
    content: "⇅";
    opacity: 0.6;
}

/* Enhanced focus styles for better accessibility */
th:focus,
td:focus,
button:focus,
a:focus {
    outline: 2px solid #0066cc;
    outline-offset: -2px;
}

/* Improved dialog positioning and styling */
.details-dialog {
    padding: 1.5rem;
    max-width: min(90vw, 600px);
    width: 90vw;
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    background: #fff;
    max-height: 90vh;
    overflow-y: auto;
}

.details-dialog[open] {
    display: flex;
    flex-direction: column;
}

.details-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

.violation-nodes {
    margin-top: 1rem;
    padding-left: 1rem;
    border-left: 3px solid #eee;
}

.violation-node {
    margin-bottom: 1rem;
}

.node-details {
    background: #f5f5f5;
    padding: 1rem;
    border-radius: 4px;
    margin-top: 0.5rem;
}

.node-details pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    background: #fff;
    padding: 0.5rem;
    border-radius: 3px;
    margin: 0.5rem 0;
}

details summary {
    cursor: pointer;
    color: #0b3d91;
    padding: 0.5rem 0;
}

details summary:hover {
    color: #0D47A1;
}

/* Invalid URLs dialog styles */
.invalid-urls-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 10px;
}

.invalid-urls-summary {
    font-weight: bold;
    color: #333;
}

.invalid-urls-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.invalid-urls-source {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
}

.invalid-urls-source h3 {
    margin-bottom: 0.5rem;
    color: #0b3d91;
}

.invalid-urls-source details {
    margin-left: 1rem;
}

.invalid-urls-source summary {
    cursor: pointer;
    color: #444;
    padding: 0.5rem 0;
    font-weight: 500;
}

.invalid-urls-source summary:hover {
    color: #0b3d91;
}

.invalid-urls-list {
    margin-left: 1.5rem;
    margin-top: 0.5rem;
}

.invalid-url-item {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background-color: #f8f8f8;
    border-left: 3px solid #ff5252;
    border-radius: 0 4px 4px 0;
}

.invalid-url-item div {
    margin-bottom: 0.25rem;
}

.invalid-link {
    color: #ff5252;
    word-break: break-all;
}

/* Special styling for failed accessibility testing projects */
.invalid-url-item:has(div:contains("Accessibility Testing (FAILED)")) {
    background-color: #fff3cd;
    border-left-color: #ffc107;
}

/* Fallback styling for failed projects when :has() is not supported */
.invalid-url-item.failed-project {
    background-color: #fff3cd;
    border-left-color: #ffc107;
}

.invalid-url-item.failed-project .invalid-link {
    color: #856404;
}

/* Improved button styling for better accessibility */
.navigation-controls button,
.view-controls button {
    padding: 0.5rem 1rem;
    background-color: #f8f9fa;
    border: 2px solid #666;
    border-radius: 4px;
    cursor: pointer;
    font-size: clamp(0.875rem, 2vw, 1rem);
    color: #000;
    min-height: 44px;
    /* Ensuring touch target size */
}

.navigation-controls button:hover,
.view-controls button:hover {
    background-color: #e9ecef;
}

.navigation-controls button:focus,
.view-controls button:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

.navigation-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem 0;
}

.navigation-controls #current-date {
    padding-left: 10px;
    padding-right: 10px;
}

.view-controls {
    margin: 1rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.view-controls select {
    padding: 0.5rem;
    border: 2px solid #666;
    border-radius: 4px;
    font-size: clamp(0.875rem, 2vw, 1rem);
    background-color: #fff;
    min-height: 44px;
}

.view-controls select:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

.view-controls label {
    font-weight: bold;
    color: #000;
}

/* Dialog close button enhancement */
.dialog-close {
    padding: 0.5rem;
    min-width: 44px;
    min-height: 44px;
    background: none;
    border: 2px solid #666;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.5rem;
    color: #000;
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.dialog-close:hover {
    background-color: #f8f9fa;
}

.error-message {
    background-color: #ffdddd;
    color: #d8000c;
    border: 1px solid #d8000c;
    padding: 15px;
    margin: 10px 0;
    border-radius: 4px;
}

.data-warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffc107;
    padding: 15px;
    margin: 10px 0 20px 0;
    border-radius: 4px;
    border-left: 4px solid #ffc107;
}

.data-warning details {
    margin-top: 10px;
}

.data-warning summary {
    cursor: pointer;
    color: #6c5400;
    font-weight: 500;
}

.data-warning summary:hover {
    color: #4a3a00;
}

.data-warning ul {
    margin: 10px 0 0 20px;
    padding: 0;
}

.data-warning li {
    margin-bottom: 5px;
    font-family: monospace;
    font-size: 0.9em;
}

/* Tag summary dialog specific styles */
.tag-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-top: 10px;
}

.tag-summary-date {
    font-weight: bold;
    color: #333;
}

.tag-summary-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.expand-all-button,
.download-button,
.view-toggle-button {
    background-color: #f8f9fa;
    border: 2px solid #666;
    border-radius: 4px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-size: 0.9rem;
    min-height: 36px;
}

.expand-all-button:hover,
.download-button:hover,
.view-toggle-button:hover {
    background-color: #e9ecef;
}

/* Rule description styling */
.rule-description {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 0.5rem;
}

.rule-help {
    font-size: 0.85rem;
    color: #666;
    font-style: italic;
    margin-bottom: 1rem;
}

.tag-summary-item {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
}

.tag-summary-item h3 {
    margin-bottom: 0.5rem;
    color: #0b3d91;
}

.tag-summary-item details {
    margin-left: 1rem;
}

.tag-summary-item summary {
    cursor: pointer;
    color: #444;
    padding: 0.5rem 0;
    font-weight: 500;
}

.tag-summary-item summary:hover {
    color: #0b3d91;
}

.tag-urls-list {
    margin-left: 1.5rem;
    margin-top: 0.5rem;
}

.tag-urls-list li {
    margin-bottom: 0.25rem;
}

@media (max-width: 768px) {
    body {
        padding: 0.5rem;
    }

    .details-dialog {
        width: calc(100% - 2rem);
        margin: 1rem;
        padding: 1rem;
    }

    .dialog-content {
        padding-right: 0;
        padding-top: 2rem;
    }

    th,
    td {
        padding: 0.5rem;
    }

    .view-controls {
        flex-direction: column;
        align-items: flex-start;
    }
}