/* ==========================================================================
   Canary Design System — Legacy adapter
   Restyles the HTML that MyAAC core pages emit (system/templates/*.twig and
   plugins) without touching their markup: table layouts with bgcolor rows,
   .white header cells, LabelV/TableContent form scaffolding, BigButton sprites,
   tools/css/messages.css boxes… Scoped to `.legacy`.

   Row/header colours themselves come from config.ini (darkborder, lightborder,
   vdarkborder) which are mapped to the design-system surfaces.
   ========================================================================== */

.legacy {
	position: relative;
	color: var(--text-secondary);
	font-size: var(--text-small);
	line-height: var(--leading-body);
}

/* --------------------------------------------------------------------------
   Typography inside core content
   -------------------------------------------------------------------------- */
.legacy h1:not([class]),
.legacy h2:not([class]),
.legacy h3:not([class]),
.legacy h4:not([class]) {
	margin: 0 0 var(--spacing-md);
	font-family: var(--font-display);
	font-weight: var(--weight-heading);
	letter-spacing: var(--tracking-heading);
	line-height: var(--leading-heading);
	color: var(--text-primary);
}

.legacy h1:not([class]) {
	font-size: var(--text-h3);
}

.legacy h2:not([class]) {
	font-size: var(--text-h4);
}

.legacy h3:not([class]),
.legacy h4:not([class]) {
	font-size: var(--text-body-lg);
}

.legacy p:not([class]) {
	margin: 0 0 var(--spacing-md);
}

.legacy b,
.legacy strong {
	color: var(--text-primary);
	font-weight: 600;
}

.legacy small:not([class]),
.legacy .size_xs,
.legacy .size_xxs,
.legacy .size_s {
	font-size: var(--text-caption);
}

.legacy hr {
	border: 0;
	border-top: 1px solid var(--border-subtle);
	margin-block: var(--spacing-lg);
}

/* Core markup relies on inline images (skulls, flags, item/news icons) sitting in text flow */
.legacy img:not([class]) {
	display: inline-block;
	vertical-align: middle;
	max-width: 100%;
}

/* The character outfit medallion offsets a 128px sprite inside a 64px circle */
.legacy div[style*="border-radius"] > img {
	max-width: none;
}

/* Sprites (outfits, items, monsters) stay crisp */
.legacy img[src*="outfit"],
.legacy img[src*="/items/"],
.legacy img[src*="/monsters/"],
.legacy img[src*="/news/"],
.legacy img[src*="/flags/"] {
	image-rendering: pixelated;
}

/* Inline status colours used all over the core */
.legacy .red,
.legacy font[color="red"],
.legacy span[style*="color: red"],
.legacy span[style*="color:red"] {
	color: var(--blood-bright) !important;
}

.legacy font[color="green"],
.legacy span[style*="color: green"],
.legacy span[style*="color:green"] {
	color: var(--success) !important;
}

.legacy .white {
	color: var(--gold-muted);
}

.legacy ul:not([class]),
.legacy ol:not([class]) {
	padding-left: 1.2em;
}

/* --------------------------------------------------------------------------
   Tables — layout tables and data tables share the same tags, so keep the
   treatment light: coloured rows come from config.ini, we add rhythm.
   -------------------------------------------------------------------------- */
.legacy table:not(.ftable) {
	border-collapse: separate;
	border-spacing: 1px;
	max-width: 100%;
}

.legacy td:not(.ftable *),
.legacy th:not(.ftable *) {
	padding: 10px 12px;
	vertical-align: middle;
	text-align: left;
	overflow-wrap: anywhere;
}

/* Header rows: <tr bgcolor=vdarkborder><td class="white"><b>…</b></td> */
.legacy td.white,
.legacy th.white,
.legacy tr.white > td,
.legacy .LabelH > td,
.legacy .myaac-table > thead > tr > td,
.legacy .myaac-table > thead > tr > th,
.legacy .myaac-table > tfoot > tr > td {
	font-family: var(--font-ui);
	font-size: var(--text-caption);
	font-weight: var(--weight-ui);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--gold-muted) !important;
	background: rgba(0, 0, 0, 0.5);
	border-bottom: 1px solid var(--border-default);
}

.legacy td.white b,
.legacy th.white b,
.legacy .LabelH b,
.legacy .myaac-table > thead b {
	color: inherit;
	font-weight: inherit;
}

/* Data rows (bgcolor alternation) */
.legacy tr[bgcolor] > td,
.legacy tr[style*="background-color"] > td,
.legacy .myaac-table > tbody > tr > td {
	color: var(--text-secondary);
	transition: background-color var(--duration-fast) var(--ease-cine);
}

.legacy tr[bgcolor]:hover > td:not(.white),
.legacy tr[style*="background-color"]:hover > td,
.legacy .myaac-table > tbody > tr:hover > td {
	background-color: rgb(var(--gold-rgb) / 0.05);
}

.legacy tr[bgcolor] > td a,
.legacy .myaac-table td a {
	color: var(--text-primary);
}

.legacy tr[bgcolor] > td a:hover,
.legacy .myaac-table td a:hover {
	color: var(--gold-primary);
}

/* Data tables from the core have cellpadding=4/cellspacing=1 and width=100%.
   Give them a frame so they read as a component. */
.legacy table[cellspacing="1"][width="100%"],
.legacy .myaac-table {
	background: var(--border-subtle);
	border: 1px solid var(--border-subtle);
}

.legacy table[cellspacing="1"][width="100%"] > tbody > tr > td:not([bgcolor]):not(.white),
.legacy table[cellspacing="1"][width="100%"] > tr > td:not(.white) {
	background-color: var(--bg-primary);
}

/* Layout tables (border=0 cellpadding=0 cellspacing=0): no chrome at all */
.legacy table[cellpadding="0"][cellspacing="0"],
.legacy table[cellpadding="0"][cellspacing="0"] > tbody > tr > td,
.legacy table[cellpadding="0"][cellspacing="0"] > tr > td {
	padding: 0;
	background: transparent !important;
	border: 0;
}

.legacy table[cellpadding="0"][cellspacing="0"] {
	border-spacing: 0;
}

/* --------------------------------------------------------------------------
   Tibiacom form scaffolding used by core templates
   (TableContainer / TableContent / LabelV / shadows / captions)
   -------------------------------------------------------------------------- */
.legacy .TableShadowContainerRightTop,
.legacy .TableShadowContainer,
.legacy .TableShadowRightTop,
.legacy .TableBottomShadow,
.legacy .TableBottomLeftShadow,
.legacy .TableBottomRightShadow,
.legacy .BoxFrameHorizontal,
.legacy .BoxFrameVerticalLeft,
.legacy .BoxFrameVerticalRight,
.legacy .BoxFrameEdgeLeftTop,
.legacy .BoxFrameEdgeRightTop,
.legacy .BoxFrameEdgeLeftBottom,
.legacy .BoxFrameEdgeRightBottom,
.legacy .CaptionEdgeLeftTop,
.legacy .CaptionEdgeRightTop,
.legacy .CaptionEdgeLeftBottom,
.legacy .CaptionEdgeRightBottom,
.legacy .CaptionBorderTop,
.legacy .CaptionBorderBottom,
.legacy .CaptionVerticalLeft,
.legacy .CaptionVerticalRight,
.legacy .AttentionSign,
.legacy .TopButtonContainer,
.legacy .BigButtonOver,
.legacy .MediumButtonOver {
	display: none !important;
}

.legacy .TableContainer {
	margin-block: var(--spacing-lg);
	border: 1px solid var(--border-subtle);
	background: linear-gradient(180deg, var(--surface-dark), var(--bg-secondary));
}

.legacy .TableContainer > table {
	width: 100%;
	border-spacing: 0;
}

.legacy .CaptionContainer {
	padding: var(--spacing-md) var(--spacing-lg);
	background: rgba(0, 0, 0, 0.45);
	border-bottom: 1px solid var(--border-default);
}

.legacy .CaptionContainer .Text {
	font-family: var(--font-display);
	font-size: var(--text-h4);
	font-weight: var(--weight-heading);
	letter-spacing: var(--tracking-heading);
	text-transform: uppercase;
	color: var(--gold-primary);
}

.legacy .InnerTableContainer {
	padding: var(--spacing-md);
}

.legacy .TableContentAndRightShadow,
.legacy .TableContentContainer {
	background: none !important;
}

.legacy .TableContent {
	width: 100%;
	border: 0 !important;
	border-spacing: 0;
}

.legacy .TableContent > tbody > tr > td,
.legacy .TableContent > tr > td {
	padding: 8px 10px;
	background: transparent !important;
}

.legacy .LabelV {
	width: 1%;
	white-space: nowrap;
	padding-right: var(--spacing-lg);
	font-family: var(--font-ui);
	font-size: var(--text-caption);
	font-weight: var(--weight-ui);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--text-muted);
	vertical-align: middle;
}

.legacy .FormFieldError {
	display: block;
	font-size: var(--text-caption);
	color: var(--blood-bright);
}

.legacy .FormFieldError:empty {
	display: none;
}

/* Small message boxes (SmallBox / MessageContainer) */
.legacy .SmallBox {
	margin-block: var(--spacing-lg);
}

.legacy .MessageContainer {
	padding: var(--spacing-md) var(--spacing-lg);
	border: 1px solid var(--border-default);
	background: var(--surface-dark);
}

.legacy .ErrorMessage {
	color: var(--text-primary);
}

.legacy .ErrorMessage li {
	margin-left: 1em;
}

/* Table-with-headline emulation inside core templates */
.legacy .InnerTableButtonRow {
	width: 100%;
	margin-top: var(--spacing-md);
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
/* Design-system controls (.finput / .fselect / .ftextarea) are exempt: they are already styled. */
.legacy input:not([type]):not(.finput),
.legacy input[type="text"]:not(.finput),
.legacy input[type="password"]:not(.finput),
.legacy input[type="email"]:not(.finput),
.legacy input[type="number"]:not(.finput),
.legacy input[type="search"]:not(.finput),
.legacy input[type="url"]:not(.finput),
.legacy input[type="date"]:not(.finput),
.legacy select:not(.fselect > select),
.legacy textarea:not(.ftextarea) {
	width: auto;
	max-width: 100%;
	min-height: 44px;
	padding: 0 var(--spacing-md);
	background: rgba(0, 0, 0, 0.55);
	border: 1px solid rgb(var(--gold-rgb) / 0.25);
	border-radius: var(--radius-sm);
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: var(--text-small);
	letter-spacing: var(--tracking-body);
	-webkit-appearance: none;
	appearance: none;
	transition:
		border-color var(--duration-base) var(--ease-cine),
		box-shadow var(--duration-base) var(--ease-cine),
		background-color var(--duration-base) var(--ease-cine);
}

.legacy input[size="30"]:not(.finput),
.legacy input[size="35"]:not(.finput),
.legacy input[style*="width: 100%"]:not(.finput) {
	width: min(100%, 360px);
}

.legacy textarea:not(.ftextarea) {
	min-height: 120px;
	padding: var(--spacing-sm) var(--spacing-md);
	line-height: var(--leading-body);
	resize: vertical;
}

.legacy select:not(.fselect > select) {
	padding-right: calc(var(--spacing-md) * 2 + 14px);
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dcc69b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--spacing-md) center;
	background-size: 14px 14px;
}

.legacy select option {
	background: var(--bg-secondary);
	color: var(--text-primary);
}

.legacy input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="image"]):not(.finput):hover,
.legacy select:not(.fselect > select):hover,
.legacy textarea:not(.ftextarea):hover {
	border-color: rgb(var(--gold-rgb) / 0.4);
}

.legacy input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="image"]):not(.finput):focus,
.legacy select:not(.fselect > select):focus,
.legacy textarea:not(.ftextarea):focus {
	outline: none;
	border-color: var(--gold-primary);
	box-shadow: var(--glow-gold-soft);
	background-color: rgba(0, 0, 0, 0.7);
}

.legacy input::placeholder,
.legacy textarea::placeholder {
	color: var(--text-muted);
}

.legacy input[type="checkbox"]:not(.fcheck input),
.legacy input[type="radio"]:not(.fradio input) {
	width: 18px;
	height: 18px;
	margin: 0 6px 0 0;
	vertical-align: middle;
	accent-color: var(--gold-primary);
	cursor: pointer;
}

.legacy label:not([class]) {
	cursor: pointer;
}

/* Buttons that are still plain inputs (core pages not yet ported) */
.legacy input[type="submit"],
.legacy input[type="button"],
.legacy button:not(.fbtn):not(.ficon-btn):not(.finput-status__btn):not(.hall__card):not(.houses-city):not(:where([data-signup-wizard] button)),
.legacy .BigButtonText,
.legacy .MediumButtonText {
	position: static !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--button-height-sm);
	padding: 0 var(--spacing-lg);
	margin: 2px 0;
	width: auto !important;
	height: auto !important;
	background: rgba(9, 9, 9, 0.34) !important;
	background-image: none !important;
	border: 1px solid var(--border-strong);
	border-radius: 0;
	color: var(--gold-primary);
	font-family: var(--font-ui);
	font-size: var(--text-button);
	font-weight: var(--weight-ui);
	letter-spacing: var(--tracking-button);
	text-transform: uppercase;
	text-shadow: none;
	cursor: pointer;
	transition:
		color var(--duration-fast) var(--ease-cine),
		border-color var(--duration-fast) var(--ease-cine),
		background-color var(--duration-fast) var(--ease-cine);
}

.legacy input[type="submit"]:hover,
.legacy input[type="button"]:hover,
.legacy button:not(.fbtn):not(.ficon-btn):not(.finput-status__btn):not(.hall__card):not(.houses-city):not(:where([data-signup-wizard] button)):hover,
.legacy .BigButtonText:hover,
.legacy .MediumButtonText:hover {
	color: var(--gold-bright);
	border-color: var(--border-ornament-bright);
	background: rgba(14, 13, 10, 0.62) !important;
}

.legacy input[type="submit"]:focus-visible,
.legacy input[type="button"]:focus-visible,
.legacy .BigButtonText:focus-visible {
	outline: 2px solid var(--gold-primary);
	outline-offset: 2px;
}

/* Sprite button wrappers */
.legacy .BigButton,
.legacy .MediumButtonBackground,
.legacy .MediumButtonForm {
	display: inline-block;
	width: auto !important;
	height: auto !important;
	background: none !important;
	margin: 0;
}

.legacy .BigButton > div {
	position: static;
}

/* Image-input buttons (sbutton_*.gif) get a subtle frame so they do not float */
.legacy input[type="image"] {
	border: 1px solid var(--border-subtle);
	background: rgba(0, 0, 0, 0.4);
	padding: 4px;
	image-rendering: auto;
}

/* --------------------------------------------------------------------------
   tools/css/messages.css boxes (.error / .success / .note / .warning)
   -------------------------------------------------------------------------- */
.legacy .error,
.legacy .success,
.legacy .note,
.legacy .warning {
	display: flex;
	gap: var(--spacing-sm);
	margin-block: var(--spacing-md);
	padding: var(--spacing-md) var(--spacing-lg);
	font-size: var(--text-small);
	font-weight: 400;
	line-height: var(--leading-body);
	border: 1px solid var(--border-default);
	background: var(--surface-dark) !important;
	background-image: none !important;
	color: var(--text-primary);
}

.legacy .error {
	border-color: var(--border-danger);
	color: #e39a9c;
}

.legacy .success {
	border-color: rgb(127 156 106 / 0.5);
	color: var(--success);
}

.legacy .warning {
	border-color: rgb(201 154 75 / 0.5);
	color: var(--warning);
}

.legacy .note {
	color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   Page-specific fixes for core markup that hard-codes the old parchment layout
   -------------------------------------------------------------------------- */

/* characters.html.twig — outfit medallion absolutely positioned at 376px */
.legacy div[style*="border-radius:50px"] {
	right: var(--spacing-lg);
	margin-left: 0 !important;
	margin-top: var(--spacing-sm) !important;
	border-color: var(--border-strong) !important;
	background: rgba(0, 0, 0, 0.55);
	box-shadow: var(--shadow-soft);
	z-index: 1;
}

.legacy div[style*="border-radius:50px"] img {
	image-rendering: pixelated;
}

/* Spacer GIFs used as column gutters */
.legacy img[src*="blank.gif"] {
	display: none;
}

.legacy td[style*="width: 17px"],
.legacy td[style*="width: 18px"] {
	display: none;
}

/* Edit link with icon in the admin bar of a character page */
.legacy a[title="Edit in Admin Panel"] {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-bottom: var(--spacing-sm);
	font-size: var(--text-caption);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
}

/* Tooltips (Tipped) keep working; just darken the body font */
.legacy .item_image {
	image-rendering: pixelated;
}

/* --------------------------------------------------------------------------
   DataTables (spells, monsters, admin) — the bundled skin is white-on-white
   -------------------------------------------------------------------------- */
.legacy table.dataTable,
.legacy table.dataTable tbody tr,
.legacy table.dataTable.stripe tbody tr.odd,
.legacy table.dataTable.display tbody tr.odd,
.legacy table.dataTable.order-column tbody tr > .sorting_1,
.legacy table.dataTable.display tbody tr > .sorting_1,
.legacy table.dataTable.display tbody tr.odd > .sorting_1 {
	background-color: transparent;
	color: var(--text-secondary);
}

.legacy table.dataTable {
	border: 1px solid var(--border-subtle);
	border-collapse: separate;
	border-spacing: 0;
	margin-block: var(--spacing-md) !important;
}

.legacy table.dataTable thead th,
.legacy table.dataTable thead td {
	padding: 12px 24px 12px 12px;
	border-bottom: 1px solid rgb(var(--gold-rgb) / 0.2);
	background: var(--vdarkborder, #16150f);
	font-family: var(--font-ui);
	font-size: var(--text-caption);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--gold-muted);
}

.legacy table.dataTable thead .sorting,
.legacy table.dataTable thead .sorting_asc,
.legacy table.dataTable thead .sorting_desc {
	background-image: none;
	position: relative;
}

.legacy table.dataTable thead .sorting::after,
.legacy table.dataTable thead .sorting_asc::after,
.legacy table.dataTable thead .sorting_desc::after {
	content: "";
	position: absolute;
	right: 10px;
	top: 50%;
	width: 6px;
	height: 6px;
	transform: translateY(-50%) rotate(45deg);
	border: 1px solid rgb(var(--gold-rgb) / 0.45);
	opacity: 0.6;
}

.legacy table.dataTable thead .sorting_asc::after {
	border-color: var(--gold-primary);
	opacity: 1;
}

.legacy table.dataTable thead .sorting_desc::after {
	border-color: var(--gold-primary);
	background: var(--gold-primary);
	opacity: 1;
}

.legacy table.dataTable tbody td {
	padding: 10px 12px;
	border-top: 1px solid var(--border-subtle);
}

.legacy table.dataTable tbody tr:nth-child(even) {
	background-color: rgba(255, 255, 255, 0.02);
}

.legacy table.dataTable.hover tbody tr:hover,
.legacy table.dataTable.display tbody tr:hover,
.legacy table.dataTable tbody tr:hover {
	background-color: rgb(var(--gold-rgb) / 0.06);
}

.legacy table.dataTable tbody td.dataTables_empty {
	padding: var(--spacing-lg);
	text-align: center;
	color: var(--text-muted);
	font-style: italic;
}

.legacy .dataTables_wrapper {
	color: var(--text-muted);
	font-size: var(--text-caption);
}

.legacy .dataTables_wrapper .dataTables_length,
.legacy .dataTables_wrapper .dataTables_filter,
.legacy .dataTables_wrapper .dataTables_info,
.legacy .dataTables_wrapper .dataTables_paginate {
	color: var(--text-muted);
	padding-top: var(--spacing-sm);
}

.legacy .dataTables_wrapper .dataTables_length select,
.legacy .dataTables_wrapper .dataTables_filter input {
	min-height: 36px;
	padding: 0 var(--spacing-sm);
	margin-left: var(--spacing-xs);
}

.legacy .dataTables_wrapper .dataTables_paginate .paginate_button {
	padding: 6px 12px;
	margin-left: 4px;
	border: 1px solid var(--border-subtle) !important;
	border-radius: var(--radius-sm);
	background: transparent !important;
	color: var(--text-secondary) !important;
	font-family: var(--font-ui);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	box-shadow: none !important;
}

.legacy .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.legacy .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.legacy .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
	border-color: rgb(var(--gold-rgb) / 0.5) !important;
	color: var(--gold-primary) !important;
	background: rgb(var(--gold-rgb) / 0.08) !important;
}

.legacy .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.legacy .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
	color: var(--text-muted) !important;
	border-color: var(--border-subtle) !important;
	background: transparent !important;
	opacity: 0.5;
}

.legacy .dataTables_wrapper.no-footer .dataTables_scrollBody,
.legacy table.dataTable.no-footer {
	border-bottom-color: var(--border-subtle);
}

/* Long content never breaks the layout on small screens */
@media (max-width: 767.98px) {
	.legacy {
		overflow-x: auto;
	}

	.legacy table[width="100%"] {
		min-width: 560px;
	}

	.legacy .TableContainer > table,
	.legacy .TableContent {
		min-width: 0;
	}
}