/* High-contrast accessibility stylesheet (vakbarát, nagy kontraszt)
   Usage: Include after Bootstrap and the main style.css so the overrides take effect.
   Focus: very high contrast, clear focus outlines, larger readable text, minimal decoration.
*/

/* Root variables for quick theming */
:root {
   --hc-bg: #000000;
   --hc-surface: #0d0d0d;
   --hc-surface-2: #111111;
   --hc-text: #ffffff;
   --hc-muted: #cfcfcf;
   --hc-dim: #aaaaaa;
   --hc-link: #ffd400;        /* yellow on black for maximum visibility */
   --hc-link-hover: #ffea70;
   --hc-border: #999999;
   --hc-border-strong: #cccccc;
   --hc-focus: #ffd400;
   --hc-danger: #ff4d4d;
   --hc-success: #17ff8a;
   --hc-warning: #ffb000;
   --hc-info: #37d9ff;

   /* Bootstrap 5 CSS variables where applicable */
   --bs-body-bg: var(--hc-bg);
   --bs-body-color: var(--hc-text);
   --bs-link-color: var(--hc-link);
   --bs-link-hover-color: var(--hc-link-hover);
   --bs-border-color: var(--hc-border);
}

/* Base and typography */
html,
body {
   background: var(--hc-bg) !important;
   color: var(--hc-text) !important;
   font-size: 18px;              /* better readability */
   line-height: 1.6;             /* comfortable line height */
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
}

body * {
   text-shadow: none !important; /* avoid fuzzy edges on high-contrast */
   box-shadow: none !important;  /* remove decorative shadows */
}

h1, h2, h3, h4, h5, h6 {
   color: var(--hc-text) !important;
   line-height: 1.3;
}

p, small, strong, em, mark, code, pre, blockquote, figcaption {
   color: var(--hc-text) !important;
}

small {
   color: var(--hc-muted) !important;
}

/* Links */
a,
a:visited {
   color: var(--hc-link) !important;
   text-decoration: underline;
   text-underline-offset: 2px;
}

a:hover,
a:focus,
a:active {
   color: var(--hc-link-hover) !important;
   text-decoration: underline;
}

/* Global focus visibility */
:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.page-link:focus-visible,
.dropdown-item:focus-visible,
.nav-link:focus-visible,
a:focus-visible {
   outline: 3px dashed var(--hc-focus) !important;
   outline-offset: 2px !important;
}

/* Provide focus fallback if :focus-visible not supported */
:focus {
   outline: 3px dashed var(--hc-focus);
   outline-offset: 2px;
}

/* Selections */
::selection {
   color: #000;
   background: var(--hc-link);
}
::-moz-selection {
   color: #000;
   background: var(--hc-link);
}

/* Images and media */
img, svg, video, canvas {
   filter: none !important; /* avoid unintended inversions */
   background: transparent;
}

/* HR and borders */
hr {
   border: 0;
   border-top: 2px solid var(--hc-border-strong) !important;
   opacity: 1 !important;
}

#history,
.bg-green {
   background-color: unset;
}

.card-body:hover,
.list-item:hover {
   background-color: #3E454D;
}


/* Containers and generic surfaces */
.container,
.container-fluid,
.card,
.modal-content,
.dropdown-menu,
.list-group-item,
.alert,
.toast,
.badge,
.table,
.table-striped,
.navbar,
.footer,
.header {
   color: var(--hc-text) !important;
   border-color: var(--hc-border) !important;
}

/* Navbar and navigation */
.navbar,
.navbar-nav,
.navbar-collapse {
   background-color: var(--hc-bg) !important;
   border-bottom: 2px solid var(--hc-border) !important;
}

.navbar .navbar-brand,
.navbar .navbar-text {
   color: var(--hc-text) !important;
}

.navbar .nav-link {
   color: var(--hc-text) !important;
   padding: 0.75rem 1rem !important; /* bigger touch targets */
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active,
.navbar .show > .nav-link {
   color: var(--hc-link) !important;
   background: transparent !important;
   text-decoration: underline;
}

.dropdown-menu {
   background-color: var(--hc-bg) !important;
   border: 2px solid var(--hc-border) !important;
}

.dropdown-item {
   color: var(--hc-text) !important;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
   color: var(--hc-text) !important;
   background-color: var(--hc-surface-2) !important;
}

/* Buttons */
.btn {
   color: #000 !important;
   background-color: var(--hc-link) !important;
   border: 2px solid var(--hc-border-strong) !important;
   font-weight: 700;
   padding: 0.6rem 1.1rem; /* min 44px height approximated */
}

.btn:hover,
.btn:focus,
.btn:active {
   background-color: var(--hc-link-hover) !important;
   color: #000 !important;
}

/* Specific button variants with high contrast */
.btn-primary {
   background-color: #00d4ff !important;
   border-color: #9beaff !important;
   color: #000 !important;
}
.btn-secondary {
   background-color: #ffffff !important;
   border-color: #cccccc !important;
   color: #000 !important;
}
.btn-success {
   background-color: var(--hc-success) !important;
   border-color: #baffda !important;
   color: #000 !important;
}
.btn-danger {
   background-color: var(--hc-danger) !important;
   border-color: #ffc2c2 !important;
   color: #000 !important;
}
.btn-warning {
   background-color: var(--hc-warning) !important;
   border-color: #ffe3a6 !important;
   color: #000 !important;
}
.btn-info {
   background-color: var(--hc-info) !important;
   border-color: #bff3ff !important;
   color: #000 !important;
}
.btn-light {
   background-color: #ffffff !important;
   border-color: #cccccc !important;
   color: #000 !important;
}
.btn-dark {
   background-color: #222222 !important;
   border-color: var(--hc-border-strong) !important;
   color: var(--hc-text) !important;
}

.btn-link {
   color: var(--hc-link) !important;
   text-decoration: underline;
}

/* Forms */
label,
.form-label,
.form-text,
.form-check-label {
   color: var(--hc-text) !important;
}

.form-control,
.form-select,
.input-group-text,
.form-check-input {
   background-color: var(--hc-bg) !important;
   color: var(--hc-text) !important;
   border: 2px solid var(--hc-border-strong) !important;
}

.form-control::placeholder {
   color: var(--hc-dim) !important;
   opacity: 1 !important;
}

.form-control:focus,
.form-select:focus {
   border-color: var(--hc-focus) !important;
}

.form-check-input:checked {
   background-color: var(--hc-link) !important;
   border-color: var(--hc-border-strong) !important;
}

.input-group-text {
   background-color: var(--hc-surface-2) !important;
}

/* Tables */
.table {
   color: var(--hc-text) !important;
   background-color: var(--hc-bg) !important;
   border-color: var(--hc-border) !important;
}

.table > :not(caption) > * > * {
   background-color: var(--hc-bg) !important;
   color: var(--hc-text) !important;
   border-color: var(--hc-border) !important;
}

.table thead th {
   color: var(--hc-text) !important;
   background-color: var(--hc-surface) !important;
   border-bottom: 2px solid var(--hc-border-strong) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
   background-color: var(--hc-surface-2) !important;
}

.table-hover > tbody > tr:hover > * {
   color: var(--hc-text) !important;
   background-color: #1a1a1a !important;
}

/* Alerts */
.alert {
   border: 2px solid var(--hc-border-strong) !important;
   color: var(--hc-text) !important;
}

.alert-primary { background-color: #002b36 !important; border-left: 6px solid #00d4ff !important; }
.alert-secondary { background-color: #1a1a1a !important; border-left: 6px solid #ffffff !important; }
.alert-success { background-color: #002a1f !important; border-left: 6px solid var(--hc-success) !important; }
.alert-danger { background-color: #2a0000 !important; border-left: 6px solid var(--hc-danger) !important; }
.alert-warning { background-color: #2a1e00 !important; border-left: 6px solid var(--hc-warning) !important; color: #fff !important; }
.alert-info { background-color: #00212a !important; border-left: 6px solid var(--hc-info) !important; }
.alert-light { background-color: #0d0d0d !important; border-left: 6px solid #ffffff !important; color: #ffffff !important; }
.alert-dark { background-color: #000000 !important; border-left: 6px solid #cccccc !important; }

/* Cards */
.card {
   background-color: var(--hc-surface) !important;
   border: 2px solid var(--hc-border) !important;
}

.card-header,
.card-footer {
   background-color: var(--hc-surface-2) !important;
   color: var(--hc-text) !important;
   border-color: var(--hc-border) !important;
}

/* Badges */
.badge {
   font-weight: 800;
   border: 2px solid var(--hc-border-strong) !important;
}

.badge.bg-primary { background-color: #00d4ff !important; color: #000 !important; }
.badge.bg-secondary { background-color: #ffffff !important; color: #000 !important; }
.badge.bg-success { background-color: var(--hc-success) !important; color: #000 !important; }
.badge.bg-danger { background-color: var(--hc-danger) !important; color: #000 !important; }
.badge.bg-warning { background-color: var(--hc-warning) !important; color: #000 !important; }
.badge.bg-info { background-color: var(--hc-info) !important; color: #000 !important; }
.badge.bg-light { background-color: #ffffff !important; color: #000 !important; }
.badge.bg-dark { background-color: #222222 !important; color: #fff !important; }

/* Pagination */
.pagination {
   --bs-pagination-bg: var(--hc-bg);
   --bs-pagination-color: var(--hc-text);
   --bs-pagination-hover-color: var(--hc-link);
   --bs-pagination-focus-color: var(--hc-text);
   --bs-pagination-active-bg: var(--hc-link);
   --bs-pagination-active-color: #000;
   --bs-pagination-border-color: var(--hc-border-strong);
}

.page-link {
   color: var(--hc-text) !important;
   background-color: var(--hc-bg) !important;
   border: 2px solid var(--hc-border-strong) !important;
}

.page-link:hover {
   color: var(--hc-link) !important;
   background-color: var(--hc-surface-2) !important;
}

.page-item.active .page-link {
   background-color: var(--hc-link) !important;
   color: #000 !important;
   border-color: var(--hc-border-strong) !important;
}

/* Breadcrumbs, list group */
.breadcrumb {
   background: var(--hc-surface) !important;
   color: var(--hc-text) !important;
}

.list-group-item {
   background-color: var(--hc-bg) !important;
   color: var(--hc-text) !important;
   border: 2px solid var(--hc-border) !important;
}

.list-group-item.active {
   background-color: var(--hc-link) !important;
   color: #000 !important;
   border-color: var(--hc-border-strong) !important;
}

/* Modals */
.modal-content {
   background-color: var(--hc-bg) !important;
   color: var(--hc-text) !important;
   border: 2px solid var(--hc-border-strong) !important;
}

.modal-header,
.modal-footer {
   background-color: var(--hc-surface) !important;
   border-color: var(--hc-border) !important;
}

.btn-close {
   filter: invert(100%) grayscale(100%) !important; /* make the close icon visible on dark */
   opacity: 1 !important;
}

/* Tooltips and popovers */
.tooltip-inner {
   background-color: var(--hc-text) !important;
   color: #000 !important;
   border: 2px solid var(--hc-border-strong) !important;
}

.bs-tooltip-auto .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-start .tooltip-arrow::before {
   border-top-color: var(--hc-text) !important;
   border-right-color: var(--hc-text) !important;
   border-bottom-color: var(--hc-text) !important;
   border-left-color: var(--hc-text) !important;
}

.popover {
   background-color: var(--hc-bg) !important;
   color: var(--hc-text) !important;
   border: 2px solid var(--hc-border-strong) !important;
}

/* Accordions */
.accordion-button {
   background-color: var(--hc-surface) !important;
   color: var(--hc-text) !important;
}

.accordion-button:not(.collapsed) {
   color: #000 !important;
   background-color: var(--hc-link) !important;
}

/* Tabs */
.nav-tabs .nav-link {
   color: var(--hc-text) !important;
   border: 2px solid var(--hc-border) !important;
   background-color: var(--hc-bg) !important;
}

.nav-tabs .nav-link.active {
   color: #000 !important;
   background-color: var(--hc-link) !important;
   border-color: var(--hc-border-strong) !important;
}

/* Carousel */
.carousel,
.carousel-item,
.carousel-caption {
   background: var(--hc-bg) !important;
   color: var(--hc-text) !important;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
   filter: invert(100%); /* visible controls on dark bg */
}

/* Footer and header (generic) */
footer,
.header,
.footer {
   background-color: var(--hc-bg) !important;
   color: var(--hc-text) !important;
   border-top: 2px solid var(--hc-border) !important;
}

/* Skip link (keyboard users) */
.skip-link {
   position: absolute;
   left: -9999px;
   top: auto;
   width: 1px;
   height: 1px;
   overflow: hidden;
}

.skip-link:focus {
   position: static;
   width: auto;
   height: auto;
   padding: 0.5rem 1rem;
   background: var(--hc-link);
   color: #000;
   z-index: 10000;
}

/* Utilities */
.hc-outline {
   outline: 3px dashed var(--hc-focus) !important;
   outline-offset: 2px !important;
}

.hc-only {
   display: block !important;
}

/* Ensure common "light" helpers remain readable on dark bg */
.bg-light,
.text-bg-light {
   background-color: #1a1a1a !important;
   color: var(--hc-text) !important;
   border-color: var(--hc-border) !important;
}

.text-muted {
   color: var(--hc-muted) !important;
}

/* Ensure minimum control sizes for touch */
button,
.btn,
.page-link,
.form-control,
.form-select,
.input-group > .btn,
.dropdown-item {
   min-height: 44px;
}

/* Code and preformatted blocks */
code, kbd, pre, samp {
   color: #000 !important;
   background: var(--hc-link) !important;
   border: 2px solid var(--hc-border-strong) !important;
}

/* Captions and figures */
figure, figcaption {
   color: var(--hc-text) !important;
}

/* Forms: invalid/valid states */
.was-validated .form-control:invalid,
.form-control.is-invalid {
   border-color: var(--hc-danger) !important;
}

.was-validated .form-control:valid,
.form-control.is-valid {
   border-color: var(--hc-success) !important;
}

/* Collapse caret visibility on dark */
.dropdown-toggle::after {
   border-top-color: var(--hc-text) !important;
}

/* Toasts */
.toast {
   background-color: var(--hc-surface) !important;
   color: var(--hc-text) !important;
   border: 2px solid var(--hc-border) !important;
}

/* Progress */
.progress {
   background-color: var(--hc-surface-2) !important;
   border: 2px solid var(--hc-border) !important;
}

.progress-bar {
   background-color: var(--hc-link) !important;
   color: #000 !important;
}

/* Range input */
.form-range::-webkit-slider-thumb {
   background: var(--hc-link) !important;
}
.form-range::-moz-range-thumb {
   background: var(--hc-link) !important;
}