/* Time Sand - adapts the theme to the markup generated by MyAAC pages. */

/* ---- page frame ------------------------------------------------------ */
.ts-page .container { text-align: left; }
.ts-page-panel { padding: 24px 26px; }
.ts-page-title { margin: 0 0 18px; font-size: 22px; font-weight: 800; color: var(--nz-text);
	text-transform: uppercase; letter-spacing: .5px; }
.nz-auth .container { max-width: 640px; }
.nz-auth .nz-auth__card { max-width: none; }
.nz-auth--wide .container { max-width: 860px; }

.online-dot.is-offline { background: var(--nz-error) !important; box-shadow: none !important; }

/* ---- home news feed -------------------------------------------------- */
.ts-news-feed { text-align: left; }
.ts-news-feed > * + * { margin-top: 18px; }
.ts-news-item .ts-article__title a { color: var(--nz-text); }
.ts-news-item .ts-article__title a:hover { color: var(--nz-gold); }
.ts-news-item .ts-article__title { font-size: 22px; margin-bottom: 14px; }
.ts-featured { display: block; }
.ts-featured .news__item-main { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0;
	background: var(--nz-panel); border: 1px solid var(--nz-border-soft); border-radius: var(--nz-r-lg);
	overflow: hidden; text-decoration: none; }
.ts-featured .news__media { min-height: 220px; }
.ts-featured .news__body { display: flex; flex-direction: column; gap: 10px; padding: 24px; }
.ts-featured .news__title { font-size: 22px; }
.ts-featured .news__more { margin-top: auto; color: var(--nz-gold); font-weight: 600; font-size: 13px; }
@media (max-width: 760px) {
	.ts-featured .news__item-main { grid-template-columns: 1fr; }
}

/* ---- MyAAC messages (success/error/note/warning) ---------------------- */
.ts-inner .error, .ts-inner .success, .ts-inner .note, .ts-inner .warning {
	display: block; margin: 0 0 16px; padding: 12px 16px; border-radius: var(--nz-r-md);
	font-size: 13px; font-weight: 600; background-image: none; }
.ts-inner .error { color: var(--nz-error); background-color: color-mix(in srgb, var(--nz-error) 12%, transparent); border: 1px solid color-mix(in srgb, var(--nz-error) 40%, transparent); }
.ts-inner .success { color: var(--nz-ok); background-color: color-mix(in srgb, var(--nz-ok) 12%, transparent); border: 1px solid color-mix(in srgb, var(--nz-ok) 40%, transparent); }
.ts-inner .note { color: var(--nz-text-dim); background-color: var(--nz-sunken); border: 1px solid var(--nz-border-soft); }
.ts-inner .warning { color: var(--nz-warn); background-color: color-mix(in srgb, var(--nz-warn) 12%, transparent); border: 1px solid color-mix(in srgb, var(--nz-warn) 40%, transparent); }
.ts-inner .red, .ts-inner span.red { color: var(--nz-error); }

/* ---- Tibia.com-style boxes used by many MyAAC templates ---------------- */
.ts-inner .TableContainer { margin: 0 0 18px; background: var(--nz-panel); border: 1px solid var(--nz-border-soft);
	border-radius: var(--nz-r-lg); overflow: hidden; }
.ts-inner .CaptionContainer { position: relative; }
.ts-inner .CaptionInnerContainer { position: relative; padding: 10px 14px; background: var(--nz-panel-raised);
	border-bottom: 1px solid var(--nz-border-soft); }
.ts-inner .CaptionInnerContainer > span { display: none !important; }
.ts-inner .CaptionContainer .Text { color: var(--nz-text-brand); font-weight: 700; font-size: 13px;
	text-transform: uppercase; letter-spacing: .5px; }
.ts-inner .TableContainer > table, .ts-inner .InnerTableContainer > table { border: 0; margin: 0; border-radius: 0; background: transparent; }
.ts-inner .InnerTableContainer { padding: 8px 12px; }
.ts-inner .TableContentContainer { border: 0; }
.ts-inner .TableContentAndRightShadow, .ts-inner .TableShadowContainer, .ts-inner .TableShadowContainerRightTop,
.ts-inner .TableBottomShadow { background-image: none !important; }
.ts-inner .TableShadowRightTop, .ts-inner .TableBottomLeftShadow, .ts-inner .TableBottomRightShadow { display: none; }
.ts-inner table.TableContent { border: 1px solid var(--nz-border-soft) !important; border-radius: var(--nz-r-md); margin: 0 0 12px; }
.ts-inner .LabelV, .ts-inner .LabelH { color: var(--nz-text-dim); font-weight: 600; white-space: nowrap; width: 1%; }
.ts-inner .BigButton, .ts-inner .BigButtonOver { background: none !important; }

/* nested layout tables should not draw a second card */
.ts-inner table table { border: 0; border-radius: 0; margin: 0; background: transparent; }
.ts-inner td[style*="border:0"], .ts-inner td[style*="border: 0"] { border-bottom: 0; }

/* rows painted by getStyle()/bgcolor keep readable text */
.ts-inner tr[bgcolor] td, .ts-inner .myaac-table td { color: var(--nz-text); }
.ts-inner tr.white td, .ts-inner tr.white th, .ts-inner .white { color: var(--nz-text-brand) !important; font-weight: 600; }
.ts-inner .myaac-table { border-spacing: 0; }
.ts-inner .myaac-table > thead > tr > th, .ts-inner .myaac-table > thead > tr > td { color: var(--nz-text-brand) !important; }

/* character page: outfit circle (inline-positioned for tibiacom's fixed width) */
.ts-inner td:has(> div[style*="border-radius:50px"][style*="position:absolute"]) { position: relative; }
.ts-inner div[style*="border-radius:50px"][style*="position:absolute"] {
	box-sizing: content-box !important; margin-left: 0 !important; left: auto; right: 24px; z-index: 3;
	border: 2px solid var(--nz-gold) !important;
	background: radial-gradient(circle, color-mix(in srgb, var(--nz-gold) 14%, transparent), transparent 70%), var(--nz-sunken);
	box-shadow: 0 0 0 4px var(--nz-sunken), 0 0 22px color-mix(in srgb, var(--nz-gold) 30%, transparent); }
.ts-inner div[style*="border-radius:50px"][style*="position:absolute"] > img {
	max-width: none !important; width: 128px !important; height: 128px !important; image-rendering: pixelated; }
/* character page: equipment grid (inline grey colours from the default template) */
.ts-inner table[style*="background: #808080"] { width: auto; margin: 4px auto; padding: 6px; border-collapse: separate;
	background: var(--nz-sunken) !important; border: 1px solid var(--nz-border-soft) !important; border-radius: var(--nz-r-md); }
.ts-inner table[style*="background: #292929"] { width: auto; background: transparent !important; border-collapse: separate; border-spacing: 3px; }
.ts-inner td[style*="border:1px solid #808080"] { width: 38px; min-width: 38px; height: 38px; padding: 0; text-align: center; vertical-align: middle;
	background: var(--nz-panel); border: 1px solid var(--nz-border) !important; border-radius: var(--nz-r); }
.ts-inner table[style*="background: #808080"] td { padding: 0; border-bottom: 0; }
.ts-inner table[style*="background: #808080"] tr:hover td { background: inherit; }
.ts-inner td[style*="border:1px solid #808080"] img { display: block; width: 32px; height: 32px; margin: 0 auto; }

.ts-inner input[type=image] { width: auto; height: auto; max-width: none; cursor: pointer; }

.ts-inner hr { border: 0; border-top: 1px solid var(--nz-border-soft); margin: 18px 0; }
.ts-inner label { color: var(--nz-text-dim); }
.ts-inner input[type=checkbox], .ts-inner input[type=radio] { accent-color: var(--nz-gold); }

/* auth card: MyAAC forms are tables, keep them full width */
.nz-auth__content table { width: 100%; }
.nz-auth__content .LabelV { padding-right: 12px; }
.nz-auth__content input[type=text],
.nz-auth__content input[type=password],
.nz-auth__content input[type=email] { width: 100%; box-sizing: border-box; }
.nz-auth__content input[type=submit] { width: auto; min-width: 160px; }

/* ---- footer ----------------------------------------------------------- */
.footer__powered a { color: var(--nz-text-dim); }
.footer__template-form { margin-top: 10px; color: var(--nz-text-mute); font-size: 12px; }
.footer__template-form select { background: var(--nz-sunken); color: var(--nz-text); border: 1px solid var(--nz-border);
	border-radius: var(--nz-r); padding: 4px 8px; }