/*
 * rpgdesk.css (opcional): o visual do RPG Desk para fichas e tabelas web.
 *
 * As cores vêm do tema da mesa, que o rpgdesk.js põe como variáveis (--rd-face-color,
 * --rd-dominant-color…); os valores abaixo valem enquanto não chegam (e no modo de teste).
 * Sem este arquivo, o plugin escolhe o próprio visual.
 */
@font-face { font-family: 'Roboto'; font-weight: 400; font-display: swap; src: url('fonts/roboto-400.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-weight: 500; font-display: swap; src: url('fonts/roboto-500.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-weight: 700; font-display: swap; src: url('fonts/roboto-700.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-weight: 400; font-display: swap; src: url('fonts/lato-400.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-weight: 700; font-display: swap; src: url('fonts/lato-700.woff2') format('woff2'); }
@font-face { font-family: 'Inconsolata'; font-weight: 400; font-display: swap; src: url('fonts/inconsolata-400.woff2') format('woff2'); }

:root {
  --rd-font: var(--rd-font-default, 'Roboto', system-ui, 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif);
  --rd-title-font: var(--rd-font-title, 'Lato', 'Roboto', system-ui, sans-serif);
  --rd-text: var(--rd-face-color, #f2f2f2);
  --rd-muted: var(--rd-text-content-deemphasized, rgb(153 153 153 / 90%));
  --rd-accent: var(--rd-dominant-color, #2a8a4a);
  --rd-accent-hover: var(--rd-dominant-color-hover, #2f9452);
  --rd-accent-text: var(--rd-dominant-color-text, #5bc27e);
  --rd-bg: var(--rd-content-bkg-color, #282828);
  --rd-bg-2: var(--rd-secondary-bkg-color, #2f2f2f);
  --rd-bg-3: var(--rd-short-content-bkg-color, #414141);
  --rd-line: var(--rd-emphasized-secondary-bkg-color, #383838);
  --rd-error: var(--rd-error-color, #f0a35a);
  --rd-radius: 4px;
  color-scheme: dark;
}

html, body { margin: 0; background: var(--rd-bg); color: var(--rd-text); font: 14px/1.45 var(--rd-font); }
body { padding: 12px; box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

h1, h2, h3, h4 { font-family: var(--rd-title-font); color: var(--rd-text); margin: 12px 0 6px; line-height: 1.2; }
h1 { font-size: 20px; } h2 { font-size: 17px; } h3 { font-size: 15px; } h4 { font-size: 14px; }
a { color: var(--rd-accent-text); }
hr { border: 0; border-top: 1px solid var(--rd-line); margin: 12px 0; }
small, .rd-muted { color: var(--rd-muted); }

label { display: inline-flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--rd-muted); }
label > input, label > select, label > textarea { font-size: 14px; color: var(--rd-text); }
label:has(> input[type='checkbox']), label:has(> input[type='radio']) { flex-direction: row; align-items: center; gap: 6px; font-size: 14px; color: var(--rd-text); }

input, select, textarea, button { font: inherit; color: inherit; }
input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']), select, textarea {
  background: var(--rd-bg-2);
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius);
  padding: 4px 6px;
  min-width: 0;
}
input[type='number'] { width: 6em; }
textarea { width: 100%; min-height: 4.5em; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 1px solid var(--rd-accent); outline-offset: 0; border-color: var(--rd-accent); }
input[type='checkbox'], input[type='radio'] { accent-color: var(--rd-accent); width: 16px; height: 16px; }

button, .rd-button {
  background: var(--rd-bg-3);
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius);
  padding: 4px 10px;
  cursor: pointer;
}
button:hover, .rd-button:hover { border-color: var(--rd-accent); }
button:disabled { opacity: 0.5; cursor: default; }
[data-roll], .rd-primary { background: var(--rd-accent); border-color: var(--rd-accent); color: #fff; }
[data-roll]:hover, .rd-primary:hover { background: var(--rd-accent-hover); }

/* campos que a pessoa não pode editar */
.rd-readonly { opacity: 0.75; }
input.rd-readonly, textarea.rd-readonly { background: transparent; border-color: transparent; }
img[data-image] { cursor: pointer; background: var(--rd-bg-2); border-radius: var(--rd-radius); object-fit: cover; }
img[data-image].rd-readonly { cursor: default; opacity: 1; }
[data-list-add].rd-readonly { display: none; }

/* abas (data-tabs) */
[data-tabs] { display: flex; gap: 2px; border-bottom: 1px solid var(--rd-line); margin-bottom: 8px; flex-wrap: wrap; }
[data-tabs] [data-tab] { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 6px 12px; color: var(--rd-muted); }
[data-tabs] [data-tab].rd-active { color: var(--rd-text); border-bottom-color: var(--rd-accent); }

/* listas (data-list) */
ul[data-list], ol[data-list] { list-style: none; padding: 0; margin: 0; }
[data-list] > * + * { margin-top: 4px; }

/* utilidades */
.rd-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.rd-col { display: flex; flex-direction: column; gap: 6px; }
.rd-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.rd-card { background: var(--rd-bg-2); border: 1px solid var(--rd-line); border-radius: 6px; padding: 8px; }
.rd-grow { flex: 1; }

/* rolagem fina, como na mesa */
* { scrollbar-width: thin; scrollbar-color: #4a4a4a transparent; }