/* =========================================
   1. GLOBAL LAYOUT & RESET
   ========================================= */
body {
	margin: 0;
	padding: 0;
	transition: background-color 0.3s ease, color 0.3s ease;
}

div#container {
	position: absolute;
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 100%;
}

#container > * {
	display: block;
	height: 100%;
	margin: 0;
}

/* List Spacing */
ul li {
	line-height: 150%;
}

.list-inside li { 
	list-style-position: inside; 
}

/* =========================================
   2. SIDEBAR (ASSET LIST)
   ========================================= */
#container #asset-list {
	flex: 0 0 400px;
	width: 400px;
	max-width: none !important; /* Overrides any lingering mobile width caps */
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
}

#asset-list table {
	width: 100% !important;
	min-width: 100% !important;
	cursor: default;
	border-collapse: collapse;
}

#asset-list thead {
	font-weight: bold;
	background-color: black;
	color: white;
	position: sticky;
	top: 0;
	z-index: 10;
}

#asset-list td {
	padding: 5px 12px;
}

#asset-list tbody tr {
	background-color: #F8F8F8;
	cursor: pointer;
	position: relative; /* Required for arrow positioning */
}

#asset-list tbody tr:nth-child(odd) {
	background-color: #E8E8E8;
}

#asset-list tbody tr td.asset-name {
	padding-left: 28px;
	background-repeat: no-repeat;
	background-position: 5px center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 0; /* Forces the cell to shrink and apply the ellipsis */
	width: 100%;
}

/* Status Icons */
#asset-list tbody tr.pass td.asset-name { background-image: url("../img/approval-16.png"); }
#asset-list tbody tr.warn td.asset-name { background-image: url("../img/alert-16.png"); }
#asset-list tbody tr.info td.asset-name { background-image: url("../img/info-16.png"); }
#asset-list tbody tr.fail td.asset-name { background-image: url("../img/error-5-16.png"); }

#asset-list tbody tr.fail {
	background-color: #FFAAAA;
}

#asset-list tbody tr:hover {
	background-color: #666666;
	color: white;
}

/* Selection Arrow Logic (::after allows color inversion) */
#asset-list tbody tr.selected::after {
	content: "";
	position: absolute;
	right: 15px; /* Anchors to the right edge dynamically instead of hardcoded left: 360px */
	top: 0;
	bottom: 0;
	width: 16px;
	background-image: url("../img/arrow-37-16.png");
	background-repeat: no-repeat;
	background-position: center;
	pointer-events: none;
}

#asset-list tbody tr.asset-header {
	font-weight: normal;
	background-color: black;
	color: white;
	text-align: center;
	cursor: default;
}

/* Sidebar Footer (Sticky) */
#asset-list tfoot {
	position: sticky;
	bottom: 0;
	z-index: 10;
	background-color: #F8F8F8;
	border-top: 1px solid #CCCCCC;
	box-shadow: 0 -1px 3px rgba(0,0,0,0.05);
}

#asset-list tfoot td {
	text-align: left;
	padding: 8px 12px;
}

/* =========================================
   3. MAIN CONTENT (ASSET INFO)
   ========================================= */
#container #asset-info {
	flex: 1 1 auto;
	height: 100%;
	overflow-y: scroll;
	overflow-x: scroll;
}

#info-container {
	margin: 20px;
}

.main-header {
	clear: both;
	border-bottom: 1px solid transparent;
	margin-bottom: 15px;
	padding-bottom: 5px;
}

.main-header + div {
	padding-top: 5px;
}

.infobox h1, 
.infobox h2, 
.infobox h3 {
	margin: 0 auto;
}

/* Load Screen */
#load-by-game-id {
	font-size: 125%;
	text-align: center;
	padding-bottom: 25px;
}

#ui-instructions {
	color: red;
	text-align: center;
}

div.instructions {
	font-size: 125%;
	line-height: 150%;
}

/* =========================================
   4. INTERACTIVE ELEMENTS (BUTTONS & INPUTS)
   ========================================= */

/* Unified Button Styling */
button, 
#unload-set, 
.logic-panel button, 
.main-header button,
.copy-btn {
	cursor: pointer;
	padding: 6px 14px;
	margin-left: 5px;
	
	background-color: #f0f0f0;
	color: #333;
	border: 1px solid #bbb;
	border-radius: 4px;
	
	font-size: 13px;
	font-weight: 600;
	/* No font-family set to preserve system default */
	
	transition: all 0.1s ease-in-out;
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Specific overrides */
#unload-set {
	margin-left: 0; 
}

.copy-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 10;
}

/* Hover State: Lift & Brighten */
button:hover,
#unload-set:hover, 
.logic-panel button:hover, 
.main-header button:hover,
.copy-btn:hover {
	background-color: #fff;
	border-color: #999;
	transform: translateY(-1px);
	box-shadow: 0 3px 5px rgba(0,0,0,0.15);
}

/* Active State: Press Down */
button:active,
#unload-set:active, 
.logic-panel button:active, 
.main-header button:active,
.copy-btn:active {
	background-color: #e0e0e0;
	transform: translateY(1px);
	box-shadow: none;
	border-color: #888;
}

/* Disabled State */
button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none !important;
	box-shadow: none !important;
}

/* Labels acting as buttons/toggles */
.logic-panel label {
	cursor: pointer;
	user-select: none;
	padding: 4px 8px;
	border-radius: 4px;
	transition: background-color 0.2s;
	margin-left: 5px;
}

.logic-panel label:hover {
	background-color: rgba(0,0,0,0.05);
}

/* Theme Switcher Toggle */
#theme-switcher {
	position: fixed;
	bottom: 15px;
	right: 15px;
	z-index: 1000;
}

.switch {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 26px;
}

.switch input { opacity: 0; width: 0; height: 0; }

.slider {
	position: absolute;
	cursor: pointer;
	top: 0; left: 0; right: 0; bottom: 0;
	background-color: #ccc;
	transition: .4s;
	border-radius: 26px;
}

.slider:before {
	position: absolute;
	content: "";
	height: 20px; width: 20px;
	left: 3px; bottom: 3px;
	background-color: white;
	transition: .4s;
	border-radius: 50%;
}

input:checked + .slider { background-color: #666; }
input:focus + .slider { box-shadow: 0 0 1px #2196F3; }
input:checked + .slider:before { transform: translateX(24px); }

/* =========================================
   5. CARDS & LISTS
   ========================================= */
img.icon {
	border: 1px solid black;
	display: block;
}

img.float-left {
	margin-right: 20px;
	float: left;
}

.float-right { float: right; }
.clear { clear: both; }

.asset-title { margin-bottom: 10px; }
.asset-desc { margin: 10px; }

.asset-card {
	border: 1px solid black;
	border-radius: 5px;
	background-color: #E8E8E8;
	cursor: pointer;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	column-gap: 15px;
	padding: 5px;
	margin-bottom: 10px;
}

.asset-card.warning {
	background-color: #FFCCCC;
	border-color: #FF0000;
}

.asset-card div p { margin: 5px; }

/* Recently Loaded Table */
#recently-loaded {
	border-radius: 12px;
	border: 1px solid black;
	overflow: hidden;
}

#recently-loaded > h2 {
	background-color: black;
	color: white;
	padding: 8px;
	margin: 0;
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
}

#recently-loaded > .table-headings {
	padding: 5px;
	font-size: 90%;
	color: #333;
	text-transform: uppercase;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	font-family: monospace;
}

#recently-loaded > ul { list-style-type: none; padding: 0; margin: 0; }

#recently-loaded > ul > li {
	padding: 8px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	cursor: pointer;
}

#recently-loaded > ul > li:hover { background-color: #EEEEEE; }
#recently-loaded > ul > li:nth-child(odd) { background-color: #F8F8F8; }
#recently-loaded > ul > li:nth-child(odd):hover { background-color: #E8E8E8; }

/* =========================================
   6. LOGIC DATA TABLES
   ========================================= */
#info-container .data-table h3 {
	font-weight: bold;
	padding-top: 20px;
}

#info-container .data-table table {
	border-collapse: collapse;
	font-family: monospace;
	width: 100%;
}

#info-container .data-table table td {
	border: 2px solid white;
	padding: 5px 15px;
}

#info-container .data-table table tbody tr:nth-child(odd) {
	background-color: #E8E8E8;
}

#info-container .data-table table tbody tr.warn, .warn {
	background-color: #FFFF99;
}

/* Headers */
#info-container .data-table table thead td,
#info-container .data-table table .header {
	color: white;
	font-weight: bold;
	padding: 10px 15px;
}

#info-container .data-table table .group-hdr {
	background-color: #333333 !important;
	text-align: center;
}

#info-container .data-table table .col-hdr {
	background-color: black !important;
}

/* Logic Toggles */
.logic-table table.show-hex .in-hex { display: inline; }
.logic-table table:not(.show-hex) .in-hex { display: none; }
.logic-table table.show-hex .in-dec { display: none; }
.logic-table table:not(.show-hex) .in-dec { display: inline; }

.logic-table table:not(.collapse-addaddress) .AddAddressIndicator { display: none; }

.logic-table [data-hits="0"] { opacity: 20%; }

.logic-panel { float: right; margin-top: 10px; }

/* Warnings & Highlights */
#info-container .data-table table tbody tr.warn td:first-child {
	background-repeat: no-repeat;
	background-position: right 5px center;
	background-image: url("../img/alert-16.png");
}

.feedback .warn {
	border-bottom: 1px dotted black;
}

span[title] {
	cursor: help;
	border-bottom: 1px dotted black;
}

@keyframes bg-highlight {
	  0% { background-color: inherit; }
	 25% { background-color: #FF9999; }
	 50% { background-color: inherit; }
	100% { background-color: inherit; }
}

#info-container .data-table table tbody tr.selected td:first-child {
	animation-name: bg-highlight;
	animation-duration: 1s;
	animation-iteration-count: 5;
	animation-delay: 1s;
}

.set-warning {
	border: 1px solid #FF0000;
	background-color: #FFCCCC;
	border-radius: 5px;

	text-align: center;
}

.set-warning h2 {
	margin-top: 5px;
}

/* =========================================
   7. RICH PRESENCE & NOTES
   ========================================= */
.code-notes pre,
.tooltip-info pre {
	white-space: break-spaces;
}

.rich-presence pre {
	white-space: pre-wrap;
	word-break: break-all;
	line-height: 175%;
}

.rich-presence .keyword { color: rgb(128, 64, 168); }
.rich-presence .header { background-color: rgba(204, 121, 167, 0.5); }
.rich-presence .condition { background-color: rgba(000, 158, 115, 0.25); }
.rich-presence .lookup { background-color: rgba(240, 228, 066, 0.5); }
.rich-presence .link { border-bottom: 1px dotted black; cursor: pointer; }
.rich-presence .logic { cursor: pointer; }
.rich-presence .logic.selected { color: rgb(213, 094, 000); }

/* =========================================
   8. TOOLTIPS & CHARTS
   ========================================= */
.tooltip {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted #888;
    cursor: help;
}

/* --- Global Tooltip Container & Content --- */

#global-tooltip-container {
    position: fixed;
    z-index: 9999;
    background: transparent;
    padding: 0;
    margin: 0;
    width: auto; 
    max-width: 450px; 
    pointer-events: none;
    display: flex; 
    flex-direction: column;
}

/* Entry Animation */
@keyframes tooltip-entry {
    0% { opacity: 0; transform: scale(0.95) translateY(5px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Exit Animation */
@keyframes tooltip-exit {
    0% { opacity: 1; transform: scale(1) translateY(0); }
    100% { opacity: 0; transform: scale(0.95) translateY(5px); }
}

.tooltip-content {
    /* Darker gray for pop in light theme */
    background-color: #e0e0e0;
    color: #000000;
    
    /* THICKER & DARKER BORDER FOR POP */
    border: 2px solid #555;
    border-radius: 4px;
    
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    padding: 8px;
    
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: auto; 

    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.4;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    
    box-sizing: border-box;
    width: 100%;

    /* Default to entry animation */
    animation: tooltip-entry 0.15s ease-out forwards;
    transform-origin: top center;
}

/* Class applied when closing */
.tooltip-content.exiting {
    animation: tooltip-exit 0.15s ease-in forwards;
}

.tooltip-content pre {
    margin: 0;
    font-family: inherit;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* --- Arrows --- */

.tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    z-index: 10001;
    pointer-events: none;
    transform: translateY(-50%);
}

/* 
   Left Placement (Box on Left, Arrow points Right)
*/
.tooltip-arrow.left {
    right: -6px;
    border-width: 6px 0 6px 6px;
    border-color: transparent transparent transparent #555;
}
.tooltip-arrow.left::after {
    content: "";
    position: absolute;
    right: 2px; top: -6px;
    border-width: 6px 0 6px 6px;
    /* Match new background #e0e0e0 */
    border-color: transparent transparent transparent #e0e0e0;
}

/* 
   Right Placement (Box on Right, Arrow points Left)
*/
.tooltip-arrow.right {
    left: -6px;
    border-width: 6px 6px 6px 0;
    border-color: transparent #555 transparent transparent;
}
.tooltip-arrow.right::after {
    content: "";
    position: absolute;
    left: 2px; top: -6px;
    border-width: 6px 6px 6px 0;
    /* Match new background #e0e0e0 */
    border-color: transparent #e0e0e0 transparent transparent;
}

/* --- Dark Theme Overrides for Tooltips --- */

body.dark-theme .tooltip-content {
    background-color: #252526;
    color: #f0f0f0;
    border-color: #999; 
    box-shadow: 0 4px 12px rgba(77, 77, 77, 0.6);
}

body.dark-theme .tooltip-content::-webkit-scrollbar-track { background: #1e1e1e; }
body.dark-theme .tooltip-content::-webkit-scrollbar-thumb { background: #424242; }

/* Dark Theme Arrows (Keep dark gray background) */
body.dark-theme .tooltip-arrow.left { border-color: transparent transparent transparent #999; }
body.dark-theme .tooltip-arrow.left::after { border-color: transparent transparent transparent #252526; }

body.dark-theme .tooltip-arrow.right { border-color: transparent #999 transparent transparent; }
body.dark-theme .tooltip-arrow.right::after { border-color: transparent #252526 transparent transparent; }

div.chart {
	display: inline-block;
	width: 500px;
}

code {
	border: 1px solid #CCCCCC;
	background-color: #EEEEEE;
	border-radius: 3px;
}

pre code {
	padding: 10px;
	display: block;
}

.alias {
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: text-bottom;
}

.fade { opacity: 75%; }

/* =========================================
   9. OVERLAYS & EXPLAINER
   ========================================= */
#loading-overlay {
	position: fixed;
	top: 0; left: 0;
	width: 100vw; height: 100vh;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(2px);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

#loading-overlay.shown { display: flex !important; }

#loading-overlay .spinner {
	width: 60px; height: 60px;
	border: 8px solid #ccc;
	border-top: 8px solid #4aa3ff;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.explainer-anim-wrapper {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease-in-out;
}
.explainer-anim-wrapper.open {
	grid-template-rows: 1fr;
}
.explainer-anim-inner {
	overflow: hidden;
}

.explanation-container {
    background-color: #fcfcfc;
    padding: 20px;
    border: 1px solid #ccc;
    margin: 20px;
    border-radius: 5px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.logic-explanation h1 { font-size: 1.5em; border-bottom: 2px solid #ccc; margin-bottom: 10px; }
.logic-explanation h2 { font-size: 1.3em; margin-top: 20px; color: #444; }
.logic-explanation h3 { font-size: 1.1em; margin-top: 15px; font-weight: bold; }
.logic-explanation ul { margin-left: 20px; }
.logic-explanation li { margin-bottom: 5px; }

.explainer-details {
    background: #eaeaea;
    padding: 5px 10px;
    border-radius: 4px;
    margin: 5px 0;
    cursor: pointer;
}

.explainer-details summary { font-weight: bold; color: #0056b3; }
.explainer-details pre {
    margin-top: 10px;
    background: #fff;
    padding: 10px;
    border: 1px solid #ddd;
    white-space: pre-wrap;
    font-size: 0.9em;
}

/* Logic Highlight Colors */
.logic-variable {
    background-color: #e2e2e2;
    color: #222;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 0 4px;
    font-family: "Consolas", "Monaco", monospace;
    font-size: 0.95em;
    display: inline-block;
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    line-height: normal;
    cursor: help;
}

.logic-keyword-reset { color: #fca311; font-weight: bold; }
.logic-keyword-pause { color: #ff6b6b; font-weight: bold; }
.logic-keyword-measured { color: #4dabf7; font-weight: bold; }
.logic-keyword-trigger { color: #69db7c; font-weight: bold; }
.logic-keyword-measuredif { color: #da77f2; font-weight: bold; }
.logic-keyword-activate { color: #3bc9db; font-weight: bold; }

.logic-enum { font-style: italic; color: #a31515; }

/* Light Theme Overrides */
body:not(.dark-theme) .logic-keyword-reset  { color: #d97706; }
body:not(.dark-theme) .logic-keyword-pause { color: #d90429; }
body:not(.dark-theme) .logic-keyword-measured { color: #1971c2; }
body:not(.dark-theme) .logic-keyword-trigger { color: #2f9e44; }
body:not(.dark-theme) .logic-keyword-measuredif { color: #be4bdb; }
body:not(.dark-theme) .logic-keyword-activate { color: #0c8599; }

/* =========================================
   10. DARK THEME
   ========================================= */
body.dark-theme {
	background-color: #1E1E1E;
	color: #D4D4D4;
}

/* Scrollbars */
body.dark-theme ::-webkit-scrollbar { width: 12px; }
body.dark-theme ::-webkit-scrollbar-track { background: #2a2a2a; }
body.dark-theme ::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 20px;
    border: 3px solid #2a2a2a;
}
body.dark-theme { scrollbar-width: thin; scrollbar-color: #555 #2a2a2a; }

/* Sidebar */
body.dark-theme #asset-list {
	background-color: #252526;
	border-right: 1px solid #3e3e42;
}
body.dark-theme #asset-list thead { background-color: #000; }
body.dark-theme #asset-list tbody tr { background-color: #333333; }
body.dark-theme #asset-list tbody tr:nth-child(odd) { background-color: #212121; }
body.dark-theme #asset-list tbody tr:hover { background-color: #3E3E42; color: white; }

body.dark-theme #asset-list tbody tr.selected {
	background-color: #3E3E42;
	color: white;
}

/* Dark Theme Arrow Inversion */
body.dark-theme #asset-list tbody tr.selected::after {
	filter: invert(1);
}

body.dark-theme #asset-list tbody tr.asset-header { background-color: #000; }
body.dark-theme #asset-list tbody tr.fail { background-color: #5C2323; }

/* Icon Adjustments */
body.dark-theme #asset-list tbody tr.fail td.asset-name { background-image: url("../img/error-5-16.png"); }
body.dark-theme #asset-list tbody tr.warn td.asset-name { background-image: url("../img/alert-16.png"); }
body.dark-theme #asset-list tbody tr.info td.asset-name { background-image: url("../img/info-16.png"); }
body.dark-theme #asset-list tbody tr.pass td.asset-name { background-image: url("../img/approval-16.png"); }

/* Sidebar Footer */
body.dark-theme #asset-list tfoot {
    background-color: #252526;
    border-top: 1px solid #3e3e42;
    box-shadow: none;
}

/* Content Elements */
body.dark-theme a { color: #569CD6; }
body.dark-theme h1, body.dark-theme h2, body.dark-theme h3 { color: #D4D4D4; border-color: #3e3e42; }
body.dark-theme img.icon { border-color: #3e3e42; }

/* Interactive Elements (Buttons) Dark Theme */
body.dark-theme button,
body.dark-theme #unload-set,
body.dark-theme .logic-panel button,
body.dark-theme .main-header button,
body.dark-theme .copy-btn {
    background-color: #3e3e42;
    color: #e0e0e0;
    border: 1px solid #555;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

body.dark-theme button:hover,
body.dark-theme #unload-set:hover,
body.dark-theme .logic-panel button:hover,
body.dark-theme .main-header button:hover,
body.dark-theme .copy-btn:hover {
    background-color: #4e4e52;
    border-color: #777;
    color: #fff;
}

body.dark-theme button:active,
body.dark-theme #unload-set:active,
body.dark-theme .logic-panel button:active,
body.dark-theme .main-header button:active,
body.dark-theme .copy-btn:active {
    background-color: #2d2d30;
    border-color: #444;
}

body.dark-theme .logic-panel label:hover {
    background-color: rgba(255,255,255,0.1);
}

body.dark-theme .set-warning {
	background-color: #330000;
}

/* Cards */
body.dark-theme .asset-card {
	background-color: #2A2A2A;
	border-color: #3E3E42;
}
body.dark-theme .asset-card.warning {
    background-color: #44272d;
    border-color: #990000;
}

/* Data Tables */
body.dark-theme #info-container .data-table table {
    border-collapse: separate;
    border-spacing: 1px;
    background-color: #5b5b5b;
}
body.dark-theme #info-container .data-table table td { border: none; padding: 5px 15px; }
body.dark-theme #info-container .data-table table tbody tr { background-color: #303030; }
body.dark-theme #info-container .data-table table tbody tr:nth-child(odd) { background-color: #1f1f1f; }
body.dark-theme #info-container .data-table table tbody tr.warn,
body.dark-theme .warn { background-color: #4f4c2c; }
body.dark-theme #info-container .data-table table .group-hdr { background-color: #3C3C3C !important; }
body.dark-theme #info-container .data-table table .col-hdr { background-color: #000 !important; }

/* Tooltips & Code */
body.dark-theme .rich-presence .logic.selected { color: #ce9178; }
body.dark-theme .tooltip .tooltip-info {
    background-color: #252526;
    border: 1px solid #3e3e42;
}
body.dark-theme .tooltip .tooltip-info::after {
    border-color: transparent transparent transparent #252526;
}
body.dark-theme code {
	background-color: #252526;
	border-color: #3E3E42;
	color: #D4D4D4;
}
body.dark-theme pre code { background-color: #1E1E1E; }

/* Recently Loaded */
body.dark-theme #recently-loaded { border-color: #3e3e42; }
body.dark-theme #recently-loaded > h2 { background-color: #000; }
body.dark-theme #recently-loaded > .table-headings { color: #ccc; }
body.dark-theme #recently-loaded > ul > li:hover { background-color: #3E3E42; }
body.dark-theme #recently-loaded > ul > li:nth-child(odd) { background-color: #2A2A2A; }
body.dark-theme #recently-loaded > ul > li:nth-child(odd):hover { background-color: #3E3E42; }

/* Explainer */
body.dark-theme .explanation-container {
    background-color: #252526;
    border-color: #3e3e42;
    color: #d4d4d4;
}
body.dark-theme .logic-explanation h2 { color: #aaa; }
body.dark-theme .explainer-details { background: #333; }
body.dark-theme .explainer-details summary { color: #569cd6; }
body.dark-theme .explainer-details pre {
    background: #1e1e1e;
    border-color: #3e3e42;
}

body.dark-theme .logic-variable {
    background-color: #3a3a3a;
    color: #e4e4e4;
    border-color: #555;
}
body.dark-theme .logic-enum { color: #ce9178; }
/* =========================================
   11. RARP EDITOR PORT (RICH PRESENCE)
   ========================================= */
.rp-view-toggle {
	margin-bottom: 15px;
	padding: 8px 15px;
	background-color: #0078d7;
	color: white;
	border: none;
	border-radius: 4px;
	font-weight: bold;
	cursor: pointer;
}
.rp-view-toggle:hover { background-color: #005a9e; }

.rarp-layout {
	display: flex;
	height: calc(100vh - 200px);
	border: 1px solid #ccc;
	background-color: #f0f0f0;
	color: #333;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	border-radius: 4px;
	overflow: hidden;
}

/* Left Pane: Tree View */
.rarp-sidebar {
	flex: 0 0 350px; /* Default width, manipulated by JS splitter */
	border-right: 1px solid #ccc;
	background-color: #fafafa;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 5px 0;
	user-select: none;
}
.rarp-tree-group {
	font-weight: bold;
	padding: 4px 12px;
	cursor: pointer;
	display: flex;
	align-items: center;
}
.rarp-tree-group:hover { background-color: #eee; }
.rarp-tree-node {
	padding: 6px 12px 6px 32px;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 6px;
}
.rarp-tree-node.striped {
	background-color: rgba(0, 0, 0, 0.04);
}
.rarp-tree-node:hover { background-color: #eee; }
.rarp-tree-node.selected { background-color: #0078d7 !important; color: #fff; }

/* Right Pane: Editor & Preview */
.rarp-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	background-color: #e5e5e5;
	overflow-y: auto;
	min-width: 0;
	padding: 10px;
	gap: 10px;
}
.rarp-main.selected {
	animation-name: bg-highlight;
	animation-duration: 1s;
	animation-iteration-count: 5;
	animation-delay: 0s;
}

.rarp-top-row { display: flex; gap: 10px; min-height: 120px; }

.rarp-panel {
	flex: 1;
	background-color: #fff;
	border: 1px solid #ccc;
	display: flex;
	flex-direction: column;
}
.rarp-panel-header {
	font-size: 11px;
	text-transform: uppercase;
	color: #666;
	padding: 6px 10px;
	border-bottom: 1px solid #ccc;
	background-color: #f8f8f8;
	font-weight: bold;
}
.rarp-panel-content { padding: 10px; flex: 1; overflow-y: auto; }

/* Logic Explorer (Dropdown & Tabs) */
.rarp-logic-toolbar {
	padding: 8px;
	background-color: #f8f8f8;
	border-bottom: 1px solid #ccc;
}
.rarp-logic-select {
	width: 100%;
	padding: 5px;
	font-family: inherit;
	border: 1px solid #ccc;
}
.rarp-tabs {
	display: flex;
	background-color: #f0f0f0;
	border-bottom: 1px solid #ccc;
}
.rarp-tab {
	padding: 6px 15px;
	cursor: pointer;
	font-size: 13px;
	border-right: 1px solid #ccc;
	color: #666;
}
.rarp-tab.active {
	background-color: #fff;
	border-bottom: 2px solid #0078d7;
	color: #333;
	font-weight: bold;
}

/* Specific Styles */
.rarp-template-text {
	font-family: Consolas, "Courier New", monospace;
	font-size: 13px;
	white-space: pre-wrap;
	word-break: break-all;
	margin: 0;
}
.rarp-live-preview { font-size: 15px; font-weight: bold; display: flex; align-items: center; height: 100%; }

/* DARK THEME OVERRIDES */
body.dark-theme .rarp-layout { border-color: #3e3e42; background-color: #2d2d30; color: #d4d4d4; }
body.dark-theme .rarp-sidebar { background-color: #252526; border-color: #3e3e42; }
body.dark-theme .rarp-tree-group { color: #fff; }
body.dark-theme .rarp-tree-group:hover, body.dark-theme .rarp-tree-node:hover { background-color: #2a2d2e; }
body.dark-theme .rarp-tree-node.striped { background-color: rgba(255, 255, 255, 0.04); }
body.dark-theme .rarp-tree-node.selected { background-color: #04395e !important; color: #fff; }
body.dark-theme .rarp-main { background-color: #1e1e1e; }
body.dark-theme .rarp-panel { background-color: #252526; border-color: #3e3e42; }
body.dark-theme .rarp-panel-header { background-color: #2d2d30; border-color: #3e3e42; color: #999; }
body.dark-theme .rarp-logic-toolbar { background-color: #2d2d30; border-color: #3e3e42; }
body.dark-theme .rarp-logic-select { background-color: #3e3e42; color: #fff; border-color: #555; }
body.dark-theme .rarp-tabs { background-color: #2d2d30; border-color: #3e3e42; }
body.dark-theme .rarp-tab { border-color: #3e3e42; color: #aaa; }
body.dark-theme .rarp-tab.active { background-color: #252526; color: #fff; }
body.dark-theme .rarp-template-text { color: #ce9178; }

/* =========================================
   12. SPLITTERS (RESIZERS) & ANIMATIONS
   ========================================= */
.resizer-x {
	width: 5px;
	background-color: transparent;
	cursor: col-resize;
	flex-shrink: 0;
	z-index: 100;
	transition: background-color 0.2s;
}
.resizer-x:hover, .resizer-x.active {
	background-color: #0078d7;
}
body.dark-theme .resizer-x:hover, body.dark-theme .resizer-x.active {
	background-color: #569CD6;
}

/* Used for RARP top row panels */
.flex-panel-container {
	display: flex;
	width: 100%;
}

@keyframes fadeInView {
	from { opacity: 0; transform: translateY(5px); }
	to { opacity: 1; transform: translateY(0); }
}

.fade-in-view {
	animation: fadeInView 0.2s ease-out forwards;
}

/* Sidebar Hide/Show Button Restyling */
body.autocr-sidebar-fully-hidden #autocr-restore-btn {
	display: block !important;
}