/* ==========================================================================
   Obsidian — legacy compatibility layer

   MyAAC pages and plugins emit fixed class names inherited from the original
   tibia.com markup (TableContainer, Table1..Table5, LabelV*, Caption*, ...).
   Rather than rewrite every page, we restyle those classes to match Obsidian.
   Everything here targets markup we do not control.
   ========================================================================== */

/* --- typography inside page content -------------------------------------- */

.panel__body p {
    margin: 0 0 1em;
}

.panel__body ul,
.panel__body ol {
    padding-left: 20px;
}

.Text,
.TableContent {
    color: var(--text);
}

/* --- table shells --------------------------------------------------------
   The originals were built out of sliced GIF corners. We flatten them into a
   single bordered surface and neutralise the background images. */

.TableContainer,
.TableShadowContainer,
.TableShadowContainerRightTop,
.TableShadowContainerLeftTop,
.TableContentAndRightShadow,
.TableContentContainer,
.InnerTableContainer {
    background-image: none !important;
    width: 100%;
}

.TableContainer {
    margin-bottom: 22px;
}

.TableContentContainer,
.InnerTableContainer {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
}

/* the caption ribbon becomes a flat header bar */
.CaptionContainer,
.CaptionInnerContainer {
    background-image: none !important;
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 0;
}

.CaptionInnerContainer {
    border: 0;
    border-radius: 0;
    background: transparent;
}

/* the decorative caption edges have no meaning without their sprites */
.CaptionEdgeLeftTop,
.CaptionEdgeRightTop,
.CaptionEdgeLeftBottom,
.CaptionEdgeRightBottom,
.CaptionBorderTop,
.CaptionBorderBottom,
.CaptionVerticalLeft,
.CaptionVerticalRight,
.CornerWrapper-t,
.CornerWrapper-b,
.Corner-tl,
.Corner-tr,
.Corner-bl,
.Corner-br,
.Border_1,
.BorderTitleText {
    display: none !important;
}

.Text {
    /* positioned so the shared filigree pseudo-element can anchor to it */
    position: relative;
    /*
     * Flex, because MyAAC floats the caption's inner <div> left. A floated
     * child leaves its parent with no in-flow content, so .Text collapsed to
     * just its padding and the caption text spilled out the top. In a flex
     * container the float is ignored and the label is laid out and centred as a
     * normal item. The filigree ::before is position:absolute, so it stays out
     * of the flex flow and is unaffected.
     */
    display: flex;
    align-items: center;
    min-height: 22px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--gold-bright);
    text-shadow: var(--ink-drop);
    padding: 9px 16px;
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 55%, var(--navy-3) 100%) !important;
    border: 2px solid var(--gold-deep);
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow:
        inset 0 0 0 1px var(--navy-line),
        inset 0 2px 0 1px rgba(255, 255, 255, 0.13);
}

/* the caption's inner wrapper is floated by core CSS; flex makes that moot */
.Text > div {
    float: none !important;
}

/* --- data tables --------------------------------------------------------- */

table.TableContent,
table.Table1,
table.Table2,
table.Table3,
table.Table4,
table.Table5 {
    width: 100%;
    border-collapse: collapse;
    background-image: none !important;
    background: transparent;
    font-size: 13.5px;
}

/*
 * Direct rows only. MyAAC nests tables for pixel-exact layouts — the character
 * inventory is three stacked tables of 32x32 slots — and a descendant selector
 * would pad every one of those slots by 8px/12px, which is what pulled the
 * inventory grid out of alignment.
 */
table.TableContent > tbody > tr > td,
table.TableContent > tbody > tr > th,
table.TableContent > tr > td,
table.TableContent > tr > th {
    padding: 8px 12px;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
}

/* nested tables are scaffolding: keep their cells tight and unstyled */
table.TableContent table td,
table.TableContent table th {
    padding: 0;
    border-bottom: 0;
    /* columns of differing length must start level, not float to the middle */
    vertical-align: top;
}

/*
 * An inline image sits on the text baseline, so the line box reserves descender
 * space beneath it — 7px here, which made every 32px inventory slot 41px tall
 * and left the three columns out of step. Going block removes the line box.
 */
table.TableContent table td > img[width][height] {
    display: block;
}

table.TableContent th {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold-bright);
    text-shadow: var(--ink-drop);
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-3) 100%);
    border-bottom: 2px solid var(--gold-deep);
}

/* MyAAC alternates row colours with these inline-ish classes */
.LabelV175,
.LabelV150,
.LabelV125,
.LabelV100,
.LabelV80,
.LabelV60 {
    color: var(--text-dim);
    font-weight: 500;
}

tr.Odd,
.Odd {
    background: transparent;
}

/* zebra striping reads as a slightly deeper tone of the same paper */
tr.Even,
.Even {
    background: rgba(93, 78, 55, 0.07);
}

/* row hover, again only for the outer table's own rows */
table.TableContent > tbody > tr:hover,
table.TableContent > tr:hover {
    background: rgba(30, 73, 118, 0.13);
}

table.TableContent table tr:hover {
    background: transparent;
}

/*
 * Honour explicit pixel dimensions in legacy markup, whether they arrive as
 * attributes or inline styles. The global img{max-width:100%} otherwise clamps
 * them to the container, which broke two things measured on the character page:
 * 32x32 item sprites shrank to 22px, and the "current outfit" image — which
 * MyAAC scales to 80x80 and then pulls with negative margins to crop the
 * character out of its canvas — was squashed to 64x80, losing both its aspect
 * ratio and its alignment with those margins.
 */
img[width][height],
table.TableContent img[style*="width"] {
    max-width: none;
}

/* the original used bgcolor attributes on rows — override them */
table.TableContent tr[bgcolor],
table.Table1 tr[bgcolor],
table.Table3 tr[bgcolor] {
    background-color: transparent !important;
}

/* --- headline (news) ----------------------------------------------------- */

.NewsHeadline,
.NewsHeadlineBackground {
    background-image: none !important;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 14px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.NewsHeadlineDate {
    font-size: 11.5px;
    color: var(--text-mute);
    letter-spacing: 0.06em;
}

.NewsHeadlineText {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.NewsHeadlineAuthor {
    font-size: 11.5px;
    color: var(--text-mute);
    margin-left: auto;
}

/* --- buttons emitted by pages -------------------------------------------- */

.BigButton,
.BigButtonOver,
.MediumButtonBackground,
.MediumButtonOver,
.Button {
    background-image: none !important;
}

.BigButton,
.ButtonText,
input[type='submit'],
input[type='button'],
button:not(.btn):not(.navtoggle):not(.totop):not(.ticker__head) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    border-radius: var(--radius);
    border: 1px solid var(--wood-line);
    background: linear-gradient(180deg, var(--wood) 0%, var(--wood-2) 50%, var(--wood-3) 100%);
    box-shadow: var(--bevel);
    color: var(--text-on-dark);
    text-shadow: var(--ink-drop);
    cursor: pointer;
}

input[type='submit']:hover,
input[type='button']:hover,
button:not(.btn):not(.navtoggle):not(.totop):not(.ticker__head):hover {
    filter: brightness(1.13);
}

input[type='submit']:active,
input[type='button']:active,
button:not(.btn):not(.navtoggle):not(.totop):not(.ticker__head):active {
    box-shadow: inset 0 2px 4px rgba(61, 35, 20, 0.45);
}

/* --- form fields --------------------------------------------------------- */

/* fields read as pressed into the parchment, the inverse of a raised button */
input[type='text'],
input[type='password'],
input[type='email'],
input[type='number'],
input[type='search'],
select,
textarea {
    padding: 8px 11px;
    background: #fffaf0;
    border: 1px solid var(--wood-2);
    border-radius: var(--radius);
    box-shadow: inset 0 2px 3px rgba(93, 78, 55, 0.2);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 13.5px;
    max-width: 100%;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--gold-deep);
    box-shadow: inset 0 2px 3px rgba(93, 78, 55, 0.16), 0 0 0 3px rgba(217, 169, 78, 0.35);
}

/* --- misc ---------------------------------------------------------------- */

.BoxContent {
    background-image: none !important;
    background: transparent;
}

hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 18px 0;
}

/* bootstrap is still loaded for admin widgets — keep its cards dark */
.progress {
    background: var(--surface-3);
    border-radius: var(--radius);
    height: 16px;
}