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

*:focus,
*:focus-visible,
*:focus-within {
outline: none !important;
}

input:focus,
button:focus,
select:focus,
textarea:focus,
a:focus,
[tabindex]:focus {
box-shadow: none !important;
}

/* Ukrycie strzałek w polach numerycznych */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

/* Płynne przejścia między trybem ciemnym a jasnym — tylko na kontenerach, nie na komórkach tabeli */
body,
header, footer, main, aside, nav,
.left-sidebar, .right-sidebar, #mainScrollArea,
#syncOverlay,
.sug-box, .sug-item,
.context-menu,
button, a,
.filter-opt,
.list-row.header-row,
[class*="bg-"],
[class*="border-white/"] {
    transition:
        background-color 0.5s ease,
        color 0.5s ease,
        border-color 0.5s ease,
        box-shadow 0.5s ease;
}

/* Wymuszenie akceleracji sprzętowej - naprawia migotanie na mobile przy backdrop-filter i zmianie motywu */
body, .left-sidebar, .right-sidebar, #mainScrollArea, .sug-box, .context-menu, #syncOverlay,
[id$="Modal"], [id$="ModalContent"], .animate-row, .animate-hero-card, .animate-hero-card-out,
.animate-drive, .animate-spin, .animate-pulse, .animate-global-reset {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/* Wymuszenie osobnej warstwy GPU dla wszystkiego, co sie animuje */
.animate-row, .animate-hero-card, .animate-hero-card-out, .animate-drive,
.animate-spin, .animate-pulse, .context-menu, .sug-box, [id$="Modal"] {
will-change: transform, opacity;
}

[id$="Modal"],
[id$="ModalContent"] {
    transition:
        background-color 0.5s ease,
        color 0.5s ease,
        border-color 0.5s ease,
        box-shadow 0.5s ease,
        opacity 0.3s ease,
        transform 0.3s ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#eventCountdownContainer {
    max-height: 120px;
    opacity: 1;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease, margin 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.countdown-container-hide {
    max-height: 0 !important;
    opacity: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    pointer-events: none;
}
#dailyCountdownWrapper, #weeklyCountdownWrapper {
    max-width: 320px;
    max-height: 55px;
    opacity: 1;
    transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease, margin 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Na ekranach od 640px wzwyż ukrywamy pasek tylko zwijając go w poziomie (by uniknąć skakania wysokości) */
@media (min-width: 640px) {
    .countdown-wrapper-hide {
        max-width: 0 !important;
        opacity: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        pointer-events: none;
        border: none !important;
    }
}

/* Na telefonach (układ pionowy) ukrywamy pasek zwijając tylko jego wysokość */
@media (max-width: 639px) {
    .countdown-wrapper-hide {
        max-height: 0 !important;
        opacity: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        pointer-events: none;
        border: none !important;
    }
}

.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border-radius: 3px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 3px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #f18836; }

.icon-mask {
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain;
    mask-repeat: no-repeat; mask-position: center; mask-size: contain;
}

.icon-gog, .icon-epic {
    transform: scale(0.82);
}

.icon-switch {
	transform: scale(1.1);
}

.filter-group-row { display: flex; flex-direction: column; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.filter-group-row:last-child { border-bottom: none; }
.filter-group-label { display: flex; align-items: center; font-weight: 700; opacity: 0.35; font-size: 1.5rem; letter-spacing: 0.15em; cursor: default; pointer-events: none; user-select: none; }
.filter-options { display: flex; flex-wrap: wrap; gap: 10px 14px; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.panel-hide-left { margin-left: -332px; opacity: 0; transform: translateX(-15px); pointer-events: none; }
.panel-hide-right { margin-right: -332px; opacity: 0; transform: translateX(15px); pointer-events: none; }

/* Animowane ikony hamburgera */
.hamburger-svg path {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease-in-out, stroke 0.4s ease-in-out;
}
.hamburger-svg .top { transform-origin: 12px 6px; }
.hamburger-svg .middle { transform-origin: 12px 12px; }
.hamburger-svg .bottom { transform-origin: 12px 18px; }

.hamburger-svg.open .top { transform: translate(0, 6px) rotate(45deg); }
.hamburger-svg.open .middle { transform: scaleX(0); opacity: 0; }
.hamburger-svg.open .bottom { transform: translate(0, -6px) rotate(-45deg); }

.filter-opt { cursor: pointer; opacity: 0.5; transition: all 0.2s; font-weight: 500; font-size: 1.15rem; letter-spacing: 0.06em; }
.filter-opt:hover { opacity: 0.9; }
.filter-opt.active { opacity: 1; color: #f18836; font-weight: 600; }
.filter-opt.icon-mode { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.05); border-radius: 6px; font-size: 1.3rem; border: 1px solid transparent; }
.filter-opt.icon-mode:hover { background: rgba(255, 255, 255, 0.1); }
.filter-opt.icon-mode.active { background: rgba(241, 136, 54, 0.15); border-color: rgba(241, 136, 54, 0.5); color: #f18836; box-shadow: 0 0 10px rgba(241, 136, 54, 0.2); }

.left-sidebar, .right-sidebar { will-change: margin, transform, opacity; }

#tableBody { transition: filter 0.4s ease, opacity 0.4s ease, background-color 0.5s ease, border-color 0.5s ease; }

.list-row { display: flex; align-items: center; padding: 8px 0; font-size: 1.25rem; letter-spacing: 0.05em; border-bottom: 1px solid rgba(255, 255, 255, 0.03); contain: layout; }
.list-row:last-child { border-bottom: none; }
.header-row > div { display: flex; align-items: center; justify-content: center; text-align: center; }
/* Wciąga przyklejoną poprzeczkę kilka px powyżej krawędzi kontenera,
   żeby przy scrollowaniu żaden skrawek wierszy nie wystawał nad nią */
.list-row.header-row {
    position: sticky;
    top: -6px;
    padding-top: 12px;
    padding-bottom: -24px;
}

.col-rank { width: 55px; font-weight: 700; flex-shrink: 0; text-align: center; font-size: 1.1rem;}
.col-icon { width: 40px; display: flex; align-items: center; justify-content: center; font-size: 0.9em; opacity: 0.85; flex-shrink: 0; text-align: center;}
.col-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 15px; text-align: center;}
.col-track{ width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; text-align: center;}
.col-car  { width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; text-align: center;}

.col-time, .col-gap { font-variant-numeric: tabular-nums; flex-shrink: 0; }
.col-time { width: 140px; text-align: right; }
.col-gap  { width: 110px; text-align: left; padding-left: 10px; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.animate-row { animation: fadeIn 0.3s ease-out both; }

@keyframes driveConvoy {
    0% { transform: translateX(100vw); }
    100% { transform: translateX(-100%); }
}
.animate-drive {
    animation: driveConvoy 200s linear infinite;
    will-change: transform;
}

/* animacje horyzontalne (tasowanie się w szyku, wyprzedzanie i zwalnianie) */
@keyframes drift1 { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-50px); } }
@keyframes drift2 { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(40px); } }
@keyframes drift3 { 0%, 100% { transform: translateX(0); } 33% { transform: translateX(-30px); } 66% { transform: translateX(30px); } }

.anim-drift-1 { animation: drift1 4s ease-in-out infinite; }
.anim-drift-2 { animation: drift2 5.5s ease-in-out infinite; }
.anim-drift-3 { animation: drift3 7s ease-in-out infinite; }

/* animacje wertykalne (zawieszenie na szutrze, wyskoki) */
@keyframes bumpFast {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-4px) rotate(-1.5deg); }
    50% { transform: translateY(1px) rotate(1deg); }
    75% { transform: translateY(-2px) rotate(0deg); }
}
@keyframes bumpSlow {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    30% { transform: translateY(-6px) rotate(-2deg); }
    70% { transform: translateY(2px) rotate(1.5deg); }
}
@keyframes jumpHigh {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    10% { transform: translateY(-2px) rotate(-1deg); }
    25% { transform: translateY(-40px) rotate(-10deg); } /* daleki skok w powietrze */
    40% { transform: translateY(4px) rotate(5deg); }    /* ciężkie lądowanie i dobicie amortyzatora */
    50% { transform: translateY(-4px) rotate(0deg); }   /* odbicie w górę */
    70% { transform: translateY(0) rotate(-2deg); }
}

.anim-bump-fast { animation: bumpFast 0.6s linear infinite; transform-origin: bottom center; }
.anim-bump-slow { animation: bumpSlow 0.9s linear infinite; transform-origin: bottom center; }
.anim-jump      { animation: jumpHigh 2.5s ease-in-out infinite; transform-origin: bottom center; }

@keyframes heroFadeIn {
    0% { opacity: 0; transform: scale(0.85) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes heroFadeOut {
    0% { opacity: 1; transform: scale(1) translateY(0); }
    100% { opacity: 0; transform: scale(0.85) translateY(-20px); }
}
.animate-hero-card {
    animation: heroFadeIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.1) both;
}
.animate-hero-card-out {
    animation: heroFadeOut 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1) forwards;
}

/* --- TABLE FOCUS (RIGHT CLICK) --- */
.list-row {
    cursor: context-menu;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s ease, opacity 0.3s ease, background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.3s ease;
}

#mainScrollArea > div > :not(#tableBody):not(.header-row) {
    transition: filter 0.3s ease, opacity 0.3s ease;
}

#mainScrollArea.table-focused > div > :not(#tableBody):not(.header-row) {
    filter: blur(3px) grayscale(40%);
    opacity: 0.5;
    pointer-events: none;
}

#mainScrollArea.table-focused #tableBody .list-row:not(.focused) {
    filter: blur(3px) grayscale(40%);
    opacity: 0.5;
    pointer-events: none;
}

#mainScrollArea.table-focused #tableBody .list-row.focused {
    transform: scale(1.025);
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    z-index: 30;
    position: relative;
    pointer-events: auto;
    border: 1px solid rgba(241, 136, 54, 0.3);
}

body.light-mode #mainScrollArea.table-focused #tableBody .list-row.focused {
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    border-color: rgba(241, 136, 54, 0.5);
}

/* --- CONTEXT MENU POP-OUT --- */
.context-menu {
    transform: scale(0.95);
    opacity: 0;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease;
    transform-origin: top left;
}

.context-menu.show {
    transform: scale(1);
    opacity: 1;
}

/* Stylizowanie okienek Autocomplete w Precise Search */
.sug-box {
    position: absolute; top: 100%; left: 0; width: 100%;
    background: rgba(43, 53, 58, 0.95); backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1); border-top: none;
    border-radius: 0 0 6px 6px;
    max-height: 0; opacity: 0; overflow-y: auto;
    transition: max-height 0.3s ease, opacity 0.3s ease, background-color 0.4s ease, border-color 0.4s ease;
    z-index: 50; pointer-events: none;
}
.sug-box.show { max-height: 160px; opacity: 1; pointer-events: auto; }
.sug-item { padding: 8px 12px; cursor: pointer; font-size: 1.1rem; color: rgba(255, 255, 255, 0.7); transition: background 0.5s ease, color 0.5s ease; }
.sug-item:hover { background: rgba(255, 255, 255, 0.1); color: #f18836; }

/* --- THEME OVERRIDES (LIGHT MODE) --- */
body.light-mode #modeSwitcher,
body.light-mode #modeSwitcherToggle {
    background-color: rgba(253, 240, 222, 0.98);
    border-color: rgba(0, 0, 0, 0.1);
}
body.light-mode #modeSwitcher button.text-white\/50,
body.light-mode #modeSwitcherToggle.text-white\/50 {
    color: rgba(26, 32, 44, 0.5);
}
body.light-mode #modeSwitcher button.text-white\/50:hover,
body.light-mode #modeSwitcherToggle:hover {
    color: rgba(26, 32, 44, 1);
}

body.light-mode {
    background-color: #fdf0de !important;
    color: #1a202c !important;
}

body.light-mode .text-white { color: #1a202c !important; }
body.light-mode .text-white\/30 { color: rgba(26, 32, 44, 0.3) !important; }
body.light-mode .text-white\/40 { color: rgba(26, 32, 44, 0.4) !important; }
body.light-mode .text-white\/50, body.light-mode .text-white\/60, body.light-mode .text-white\/70 { color: rgba(26, 32, 44, 0.6) !important; }
body.light-mode .hover\:text-white:hover { color: #000 !important; }
body.light-mode .disabled\:hover\:text-white:disabled:hover { color: inherit !important; }

body.light-mode .custom-scrollbar::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); }
body.light-mode .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.25); }
body.light-mode .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #f18836; }

body.light-mode .border-white\/5, body.light-mode .border-white\/10 { border-color: rgba(0, 0, 0, 0.1) !important; }
body.light-mode .border-white\/20, body.light-mode .border-white\/30 { border-color: rgba(0, 0, 0, 0.2) !important; }

body.light-mode .bg-black\/5 { background-color: rgba(255, 255, 255, 0.4) !important; border-color: rgba(0,0,0,0.05) !important; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
body.light-mode .bg-black\/10 { background-color: rgba(255, 255, 255, 0.6) !important; }
body.light-mode .bg-black\/15 { background-color: rgba(255, 255, 255, 0.5) !important; border-color: rgba(0, 0, 0, 0.05) !important; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
body.light-mode .bg-black\/20 { background-color: rgba(0, 0, 0, 0.05) !important; }
body.light-mode .hover\:bg-black\/40:hover { background-color: rgba(0, 0, 0, 0.1) !important; }
body.light-mode .bg-\[\#465558\] { background-color: #fdf0de !important; }

body.light-mode .bg-white\/10 { background-color: rgba(0, 0, 0, 0.05) !important; }
body.light-mode .bg-white\/15 { background-color: rgba(0, 0, 0, 0.08) !important; }
body.light-mode .bg-white\/20 { background-color: rgba(0, 0, 0, 0.1) !important; }
body.light-mode .hover\:bg-white\/20:hover { background-color: rgba(0, 0, 0, 0.15) !important; }

body.light-mode .from-aor-bg-start { background-image: none !important; background-color: #fdf0de !important; }
body.light-mode .bg-\[\#54646a\] { background-color: #f1dfc4 !important; color: rgba(0,0,0,0.6) !important; }
body.light-mode .bg-\[\#2b353a\]\/95 { background-color: rgba(253, 240, 222, 0.95) !important; border-color: rgba(0,0,0,0.1); }
body.light-mode .bg-\[\#1f2529\]\/90 { background-color: rgba(253, 240, 222, 0.9) !important; }
body.light-mode #calPickerContainer { background-color: rgba(253, 240, 222, 0.98) !important; color: #1a202c !important; }
body.light-mode #calPickerContainer .bg-black\/20 { background-color: rgba(0, 0, 0, 0.03) !important; border-color: rgba(0, 0, 0, 0.08) !important; }
body.light-mode #calPickerContainer button.bg-white\/5 { background-color: rgba(0, 0, 0, 0.05) !important; color: rgba(26, 32, 44, 0.8) !important; }
body.light-mode #calPickerContainer button.bg-white\/5:hover { background-color: rgba(0, 0, 0, 0.1) !important; color: #000000 !important; }
body.light-mode #calPickerContainer div.bg-black\/10 { background-color: rgba(0, 0, 0, 0.03) !important; color: rgba(0, 0, 0, 0.2) !important; }
body.light-mode #gsLoadingDiv, body.light-mode #gsEmptyDiv { background-color: rgba(253, 240, 222, 0.9) !important; }

body.light-mode .badge-tooltip { background-color: rgba(253, 240, 222, 0.98) !important; color: #1a202c !important; border-color: rgba(0,0,0,0.1) !important; box-shadow: none !important; }

body.light-mode #notifDropdown { background-color: rgba(253, 240, 222, 0.98); border-color: rgba(0,0,0,0.1); color: #1a202c; }
body.light-mode #notifDropdown .bg-black\/20 { background-color: rgba(0,0,0,0.05); }
body.light-mode #notifDropdown .bg-white\/5 { background-color: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); }
body.light-mode #notifBadge.border-\[\#465558\] { border-color: #fdf0de !important; }

body.light-mode .placeholder-white\/30::placeholder { color: rgba(0, 0, 0, 0.3) !important; }
body.light-mode .border-b-2.border-white\/30 { border-color: rgba(0,0,0,0.2) !important; }
body.light-mode .focus\:border-aor-orange:focus { border-color: #f18836 !important; }
body.light-mode .group-focus-within\:text-aor-orange:focus-within { color: #f18836 !important; }

body.light-mode .sug-box { background: rgba(253, 240, 222, 0.98); border-color: rgba(0,0,0,0.1); }
body.light-mode .sug-item { color: rgba(0,0,0,0.7); }
body.light-mode .sug-item:hover { background: rgba(0,0,0,0.05); color: #f18836; }

/* Theme toggle switch styles */
.theme-switch {
    position: relative; width: 44px; height: 24px; background: rgba(255,255,255,0.2);
    border-radius: 12px; cursor: pointer; display: flex; align-items: center;
    padding: 2px; transition: background-color 0.4s ease;
}
body.light-mode .theme-switch { background-color: rgba(0,0,0,0.15); }
.theme-switch-knob {
    width: 20px; height: 20px; background: #fff; border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), box-shadow 0.4s ease;
    display: flex; align-items: center; justify-content: center; font-size: 11px;
}
.theme-switch-knob i {
    transform: translateY(1px);
}
body.light-mode .theme-switch-knob { transform: translateX(20px); box-shadow: 0 1px 3px rgba(0,0,0,0.2); }

/* --- GLOBAL RESET ANIMATION --- */
@keyframes globalReset {
    0% { transform: scale(1); filter: blur(0px) grayscale(0%); opacity: 1; }
    40% { transform: scale(0.96); filter: blur(8px) grayscale(50%); opacity: 0.3; }
    60% { transform: scale(0.96); filter: blur(8px) grayscale(50%); opacity: 0.3; }
    100% { transform: scale(1); filter: blur(0px) grayscale(0%); opacity: 1; }
}
.animate-global-reset {
    animation: globalReset 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    pointer-events: none;
}

.list-row:not(.header-row):hover {
    position: relative;
    z-index: 10;
}