/* =====================================================================
   DofusArena 2 (Arena Returns 2.79) — thème HTML/CSS
   - theme-gen.css : généré depuis gui/theme/default.xml (polices, couleurs,
     styles de composants .ui-<style>, 9-slices découpées dans theme/slices/)
   - ce fichier : socle (reset, widgets génériques, helpers de layout)
   ===================================================================== */
@import url("theme-gen.css");

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
body {
  font: var(--f-defaultFont);
  color: var(--c-defaultDarkColor);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

/* ---- écran (le canvas GL du client) ------------------------------------ */
.screen { position: relative; width: 100%; height: 100%; overflow: hidden; }
.scene  { position: absolute; inset: 0; background: #1b1a14 center / cover no-repeat; }
.scene.vignette::after { content: ""; position: absolute; inset: 0;
  background: url(../assets/gui/theme/images/fullBackground.png) center / 100% 100% no-repeat; opacity: .9; }

/* ---- primitives de layout (voir ui-layout.js : data-sld / data-size) --- */
.sl   { position: relative; }             /* StaticLayout : enfants positionnés par data-sld (y mesuré depuis le BAS) */
.ui   { position: absolute; }             /* widget positionné (prime sur .sl) */
.rl   { display: flex; flex-direction: row; align-items: center; }     /* RowLayout horizontal */
.rl.v { flex-direction: column; align-items: stretch; }                 /* RowLayout vertical */
.bl   { display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: auto 1fr auto; }
.bl > [data-bld="north"]  { grid-row: 1; grid-column: 1 / 4; }
.bl > [data-bld="south"]  { grid-row: 3; grid-column: 1 / 4; }
.bl > [data-bld="west"]   { grid-row: 2; grid-column: 1; }
.bl > [data-bld="east"]   { grid-row: 2; grid-column: 3; }
.bl > [data-bld="center"] { grid-row: 2; grid-column: 2; }
.fill { width: 100%; height: 100%; }
.hidden { display: none !important; }

/* ---- widgets génériques ------------------------------------------------ */
.label { display: flex; align-items: center; white-space: nowrap; line-height: 1; }
.label.c { justify-content: center; text-align: center; }
.label.e { justify-content: flex-end; text-align: right; }
.label.w { justify-content: flex-start; text-align: left; }
button, .button { display: inline-flex; align-items: center; justify-content: center;
  padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit;
  cursor: pointer; white-space: nowrap; line-height: 1; }
button.ui, .button.ui { position: absolute; }
button:disabled, .disabled { cursor: default; filter: saturate(.3) brightness(.9); opacity: .75; }
.img { background-repeat: no-repeat; display: block; }
.img:not(.natural) { background-position: center; background-size: 100% 100%; }   /* .natural = icône prise dans l'atlas (position/taille du thème) */
.textview { font: var(--f-defaultFont); color: var(--c-defaultBlackColor); line-height: 1.25;
  white-space: normal; overflow: hidden; }
.texteditor { font: var(--f-defaultFont); color: var(--c-defaultBlackColor); background: var(--c-editableAreaColor);
  border: 1px solid rgba(74,43,18,.6); padding: 2px 4px; outline: none; }
.scroll { overflow-y: auto; overflow-x: hidden; }
.scroll::-webkit-scrollbar { width: 23px; }
.scroll::-webkit-scrollbar-track { background: url(theme/slices/px_themeDefault_395_432_23x13.png) center / 100% auto; }
.scroll::-webkit-scrollbar-thumb { background: url(theme/slices/px_themeDefault_124_28_8x1.png) center / 100% 100%,
  rgb(135,122,82); border: 2px solid rgba(60,50,30,.6); }

/* ---- textes bordés (fonts "bordered" du thème : chiffres PA/PM/PV, XP) --- */
.bordered { -webkit-text-stroke: 1px #000; paint-order: stroke fill; text-shadow: 0 0 2px #000; }

/* ---- fenêtre "new" (template newWindowNoResizeNoMoveTemplate.xml) ------- */
.window-new { position: absolute; }
.window-new > .win-bg { position: absolute; inset: 0; }          /* .ui-windowNew = 9-slice themeSimple4 */
.window-new > .win-left  { position: absolute; left: -2px; top: 50%; transform: translateY(-50%); width: 29px; height: 334px; }
.window-new > .win-right { position: absolute; right: -2px; top: 50%; transform: translateY(-50%); width: 29px; height: 334px; }
.window-new > .win-close { position: absolute; right: 32px; top: 0; width: 45px; height: 20px; }
.window-new > .win-icon  { position: absolute; left: 50%; top: -68px; transform: translateX(-50%); width: 193px; height: 70px; }
.window-new > .win-content { position: absolute; inset: 0; }

/* ---- onglets (tabbedContainer) ---------------------------------------- */
.tabs { position: absolute; display: flex; gap: 2px; align-items: flex-end; height: 22px; }
.tabs > .tab { height: 22px; min-width: 80px; padding: 0 12px; }
.tab-content { position: absolute; left: 0; right: 0; top: 20px; bottom: 0; }

/* ---- listes à lignes alternées (coachStatistics, ladder) ---------------- */
.rows > div:nth-child(odd)  { background: var(--c-coachStatisticsListColor1); }
.rows > div:nth-child(even) { background: var(--c-coachStatisticsListColor2); }

/* ---- barre de progression ------------------------------------------------ */
.progress { position: relative; background: rgba(0,0,0,.35); overflow: hidden; }
.progress > i { position: absolute; left: 0; top: 0; bottom: 0; display: block; }

/* ---- chat --------------------------------------------------------------- */
.chat-history { font: var(--f-defaultFont); color: var(--c-defaultLightColor); line-height: 1.3; padding: 4px 8px; }
.chat-history b { color: #e6d58a; font-weight: bold; }
.chat-history .sys { color: #b7c9a0; }

/* ---- infobulle (tooltip) ------------------------------------------------- */
.tooltip { position: absolute; z-index: 50; font: var(--f-tooltipFont); color: var(--c-defaultLightColor);
  background: rgba(40,33,20,.93); border: 1px solid #8f7f52; padding: 4px 7px; white-space: nowrap; pointer-events: none; }

/* ---- cases (radio/checkbox) : on réutilise .ui-checkBox / .ui-radioButton… --- */
.ui-checkBox, .ui-checkBoxCenter { width: 15px; height: 15px; }

/* ---- spell icons 42×42 (spells/icons) ------------------------------------ */
.spell { width: 42px; height: 42px; background-size: 100% 100%; }