/* Estils estructurals del portal.
   REGLA: aquí no hi pot haver colors, famílies tipogràfiques ni valors configurables en literal.
   Tot arriba de /branding/theme.css (variables --brand-*), generat a partir de la configuració de marca.
   Ho comprova la prova «BrandingLiteralsTests». */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  font-family: var(--brand-font);
  font-size: calc(1rem * var(--brand-font-scale));
  background: var(--brand-bg);
  color: var(--brand-text);
  line-height: 1.5;
}

/* Fons: color base + imatge opcional + superposició per mantenir la llegibilitat.
   Es fa servir al body (fix a la finestra) i a la previsualització (dins del seu contenidor). */
body { position: relative; isolation: isolate; }
body::before, body::after, .brand-preview::before, .brand-preview::after { content: ""; inset: 0; pointer-events: none; z-index: -1; }
body::before, body::after { position: fixed; }
.brand-preview::before, .brand-preview::after { position: absolute; }
body::before, .brand-preview::before {
  background-image: var(--brand-bg-image);
  background-size: var(--brand-bg-size);
  background-position: var(--brand-bg-position);
  background-repeat: var(--brand-bg-repeat);
  opacity: var(--brand-bg-image-opacity);
}
body::after, .brand-preview::after { background: var(--brand-bg); opacity: var(--brand-bg-overlay-opacity); }

a { color: var(--brand-link); }
h1, h2, h3 { line-height: 1.2; }
h1 { font-size: calc(2rem * var(--brand-heading-scale)); }
h2 { font-size: calc(1.5rem * var(--brand-heading-scale)); }
h3 { font-size: calc(1.17rem * var(--brand-heading-scale)); }
/* El router mou el focus al h1 en navegar; no cal mostrar-ne el contorn. */
h1:focus { outline: none; }

.page { min-height: 100vh; display: flex; flex-direction: column; }
.container { width: 100%; max-width: var(--brand-content-max); margin: 0 auto; padding: 0 1.25rem; }
main.content { flex: 1; padding: 2rem 0 3rem; }

/* ── Capçalera i peu ─────────────────────────────────────────────────── */
.site-header { background: var(--brand-header-bg); color: var(--brand-header-text); box-shadow: var(--brand-shadow); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 1.1rem; color: var(--brand-header-text); font-size: 1.35rem; font-weight: 700; text-decoration: none; }
.brand-logo { height: 2.5rem; width: auto; display: block; }
.brand-logo-dark { display: none; }
:root[data-theme="dark"] .page > .site-header .brand-logo-light.has-dark,
.brand-preview[data-mode="dark"] .brand-logo-light.has-dark { display: none; }
:root[data-theme="dark"] .page > .site-header .brand-logo-dark,
.brand-preview[data-mode="dark"] .brand-logo-dark { display: block; }
.site-nav { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.site-nav a, .link-btn { color: var(--brand-header-text); text-decoration: none; opacity: .9; font: inherit; }
.site-nav a:hover, .link-btn:hover { opacity: 1; text-decoration: underline; }
.link-btn { background: none; border: 0; padding: 0; cursor: pointer; }
.site-nav form { margin: 0; }
.site-footer { background: var(--brand-footer-bg); color: var(--brand-footer-text); padding: 1rem 0; font-size: .85rem; text-align: center; }
/* Text centrat i atribució de TuteApps a la dreta: el tooltip s'obre cap a l'esquerra perquè no surti de la pantalla. */
.footer-inner { position: relative; padding-right: 2.5rem; padding-left: 2.5rem; }
.footer-credit { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: inline-flex; line-height: 0; border-radius: .3rem; opacity: .85; }
.footer-credit img { width: 1.25rem; height: 1.25rem; border-radius: .2rem; object-fit: contain; }
.footer-credit:hover, .footer-credit:focus-visible { opacity: 1; }
.footer-credit:focus-visible { outline: 2px solid var(--brand-footer-text); outline-offset: 2px; }
.footer-credit::after {
  content: attr(data-tip); position: absolute; right: calc(100% + .5rem); top: 50%; z-index: 60; white-space: nowrap; pointer-events: none; line-height: 1.3;
  background: var(--brand-surface); color: var(--brand-text); box-shadow: var(--brand-shadow-hover); border: 1px solid var(--brand-border);
  font-size: .8rem; padding: .3rem .6rem; border-radius: .4rem; opacity: 0; transform: translate(3px, -50%);
  transition: opacity var(--brand-transition) ease, transform var(--brand-transition) ease;
}
.footer-credit:hover::after, .footer-credit:focus-visible::after { opacity: 1; transform: translate(0, -50%); }

/* Icones de la barra superior, amb tooltip (data-tip) en passar-hi o en prendre el focus. */
.site-nav { gap: .25rem; }
.icon-link {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;
  border-radius: 50%; border: 0; padding: 0; background: none; color: var(--brand-header-text); cursor: pointer; opacity: .92;
  text-decoration: none; font: inherit; transition: background-color var(--brand-transition) ease, opacity var(--brand-transition) ease;
}
.site-nav a.icon-link:hover { text-decoration: none; }
.icon-link:hover, .icon-link:focus-visible { opacity: 1; background: color-mix(in srgb, var(--brand-header-text) 18%, transparent); }
.icon-link:focus-visible { outline: 2px solid var(--brand-header-text); outline-offset: 1px; }
.icon-link svg { width: 1.45rem; height: 1.45rem; fill: currentColor; display: block; }
.icon-link::after {
  content: attr(data-tip); position: absolute; top: calc(100% + .4rem); right: 0; z-index: 60; white-space: nowrap; pointer-events: none;
  background: var(--brand-surface); color: var(--brand-text); box-shadow: var(--brand-shadow-hover); border: 1px solid var(--brand-border);
  font-size: .8rem; line-height: 1.3; padding: .3rem .6rem; border-radius: .4rem; opacity: 0; transform: translateY(-3px);
  transition: opacity var(--brand-transition) ease, transform var(--brand-transition) ease;
}
.icon-link:hover::after, .icon-link:focus-visible::after { opacity: 1; transform: none; }
.avatar {
  display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; font-size: .82rem; font-weight: 700;
  letter-spacing: .02em; background: var(--brand-btn-bg); color: var(--brand-btn-text);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-header-text) 70%, transparent);
}
/* Botó de tema: l'icona i el tooltip segueixen el mode actual (html[data-theme-mode]). */
.icon-link svg.theme-icon-light, .icon-link svg.theme-icon-dark { display: none; }
:root[data-theme-mode="light"] .icon-link svg.theme-icon-light, :root[data-theme-mode="dark"] .icon-link svg.theme-icon-dark { display: block; }
:root[data-theme-mode="light"] .icon-link svg.theme-icon-auto, :root[data-theme-mode="dark"] .icon-link svg.theme-icon-auto { display: none; }
[data-theme-toggle]::after { content: "Tema: automàtic (clica per canviar)"; }
:root[data-theme-mode="light"] [data-theme-toggle]::after { content: "Tema: clar (clica per canviar)"; }
:root[data-theme-mode="dark"] [data-theme-toggle]::after { content: "Tema: fosc (clica per canviar)"; }
.qr-group .chip-btn { align-self: start; }

/* ── Portada i targetes ──────────────────────────────────────────────── */
.hero { margin-bottom: 2rem; }
.hero h1 { margin: 0 0 .25rem; }
.hero p { margin: 0; color: var(--brand-text-muted); }
.breadcrumb { margin-bottom: 1rem; font-size: .9rem; }

.card-grid {
  display: grid;
  gap: calc(var(--brand-gap) * var(--brand-density));
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--brand-card-min)), 1fr));
}
.card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--brand-surface); color: var(--brand-text); border-radius: var(--brand-radius); box-shadow: var(--brand-shadow);
  text-decoration: none; transition: transform var(--brand-transition) ease, box-shadow var(--brand-transition) ease;
}
a.card:hover, a.card:focus-visible { transform: translateY(var(--brand-lift)); box-shadow: var(--brand-shadow-hover); }
.card-media { aspect-ratio: var(--brand-image-ratio); background: var(--brand-border); display: grid; place-items: center; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: var(--brand-image-fit); display: block; }
.card-placeholder {
  width: 100%; height: 100%; display: grid; place-items: center; font-size: 2.5rem; font-weight: 700; letter-spacing: .04em; color: var(--brand-primary-contrast);
  background: linear-gradient(var(--ph-angle, 135deg), var(--brand-primary), color-mix(in srgb, var(--brand-primary) var(--ph-mix, 50%), var(--brand-header-bg)));
}
.card-body { padding: calc(1rem * var(--brand-density)) calc(1.15rem * var(--brand-density)) calc(1.25rem * var(--brand-density)); display: flex; flex-direction: column; gap: .35rem; }
.card-title { margin: 0; font-size: calc(1.1rem * var(--brand-heading-scale)); }
.card-text { margin: 0; color: var(--brand-text-muted); font-size: .92rem; }
.card-meta { margin-top: auto; padding-top: .5rem; font-size: .8rem; color: var(--brand-text-muted); }

.empty-state { text-align: center; padding: 3rem 1rem; color: var(--brand-text-muted); background: var(--brand-surface); border-radius: var(--brand-radius); box-shadow: var(--brand-shadow); }

/* ── Formularis de compte ────────────────────────────────────────────── */
.auth-card { max-width: 26rem; margin: 2rem auto; background: var(--brand-surface); color: var(--brand-text); border-radius: var(--brand-radius); box-shadow: var(--brand-shadow); padding: 2rem; }
.auth-card h1 { margin-top: 0; font-size: calc(1.5rem * var(--brand-heading-scale)); }
.field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1rem; }
.field label { font-weight: 500; font-size: .9rem; }
.field input { padding: .6rem .75rem; border: 1px solid var(--brand-border); border-radius: calc(var(--brand-radius) * .66); font: inherit; background: var(--brand-surface); color: var(--brand-text); }
.field input:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 1px; }
.btn { display: inline-block; padding: .65rem 1.25rem; border: 0; border-radius: calc(var(--brand-radius) * .66); font: inherit; font-weight: 500; cursor: pointer; background: var(--brand-btn-bg); color: var(--brand-btn-text); transition: filter var(--brand-transition) ease; }
.btn:hover { filter: brightness(.92); }
.alert { padding: .75rem 1rem; border-radius: calc(var(--brand-radius) * .66); margin-bottom: 1rem; font-size: .92rem; }
.alert-error { background: color-mix(in srgb, var(--brand-danger) 14%, var(--brand-surface)); color: var(--brand-danger); }
.alert-info { background: color-mix(in srgb, var(--brand-accent) 16%, var(--brand-surface)); color: var(--brand-text); }
.validation-message { color: var(--brand-danger); font-size: .85rem; }

/* ── Administració ───────────────────────────────────────────────────── */
.admin-wrap { display: grid; gap: 1.25rem; }
.admin-wrap h1 { margin: 0; font-size: calc(1.6rem * var(--brand-heading-scale)); }
.image-upload img { max-width: 15rem; max-height: 9rem; display: block; margin: .5rem 0; border-radius: calc(var(--brand-radius) * .66); }

/* L'atribut hidden ha de guanyar sempre als display de les classes. */
[hidden] { display: none !important; }

/* ── Generador de codis QR (/qr) ───────────────────────────────────── */
.qr-layout { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .qr-layout { grid-template-columns: minmax(0, 1fr); } }
.qr-panel, .qr-card { background: var(--brand-surface); color: var(--brand-text); border-radius: var(--brand-radius); box-shadow: var(--brand-shadow); padding: 1.25rem; min-width: 0; }
.qr-panel { display: grid; gap: 1.25rem; }
.qr-side { display: grid; gap: 1.25rem; position: sticky; top: 1rem; min-width: 0; }
@media (max-width: 900px) { .qr-side { position: static; } }
.qr-card h2 { margin: 0 0 .75rem; font-size: calc(1.15rem * var(--brand-heading-scale)); }
.qr-group { border: 1px solid var(--brand-border); border-radius: calc(var(--brand-radius) * .66); padding: 1rem; margin: 0; display: grid; gap: .9rem; min-width: 0; }
.qr-group legend { padding: 0 .5rem; font-weight: 700; }
.qr-grid { display: grid; gap: .9rem 1.25rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); align-items: end; }
.qr-label { font-weight: 500; font-size: .9rem; }
.qr-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.qr-help { color: var(--brand-text-muted); font-size: .85rem; margin: 0; }
.qr-msg { margin: .25rem 0 0; font-size: .88rem; color: var(--brand-text-muted); }
.qr-msg-error { color: var(--brand-danger); }
.qr-check { flex-direction: row; align-items: center; gap: .5rem; }
.qr-check label { font-weight: 400; }
.field select, .field textarea { padding: .6rem .75rem; border: 1px solid var(--brand-border); border-radius: calc(var(--brand-radius) * .66); font: inherit; background: var(--brand-surface); color: var(--brand-text); width: 100%; }
.field textarea { resize: vertical; }
.field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 1px; }
.field input[type="color"] { padding: 0; height: 2.6rem; width: 100%; cursor: pointer; }
.field input[type="range"] { padding: 0; border: 0; width: 100%; accent-color: var(--brand-primary); }
.field input[type="checkbox"] { width: 1.1rem; height: 1.1rem; padding: 0; accent-color: var(--brand-primary); }
.field input[type="file"] { padding: .4rem; width: 100%; max-width: 100%; }
.qr-group .field, .qr-card .field { min-width: 0; }
.field input[type="number"] { width: 100%; }
.qr-stage {
  display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden; border: 1px dashed var(--brand-border);
  border-radius: calc(var(--brand-radius) * .66);
  /* Tauler: es veu quan el fons del codi és transparent */
  background-color: var(--brand-surface);
  background-image: conic-gradient(color-mix(in srgb, var(--brand-border) 55%, transparent) 25%, transparent 0 50%, color-mix(in srgb, var(--brand-border) 55%, transparent) 0 75%, transparent 0);
  background-size: 18px 18px;
}
.qr-stage img { width: 100%; height: 100%; object-fit: contain; display: block; }
.qr-empty { color: var(--brand-text-muted); padding: 1rem; text-align: center; margin: 0; background: var(--brand-surface); border-radius: .5rem; }
.qr-warnings { margin: .75rem 0 0; padding: .6rem .9rem .6rem 1.6rem; background: color-mix(in srgb, var(--brand-accent) 14%, var(--brand-surface)); border-radius: .5rem; font-size: .88rem; display: grid; gap: .3rem; }

/* Panell «Aparença i marca» */
.brand-panel { display: grid; gap: 1.25rem; }
.brand-status { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.brand-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.brand-section { display: grid; gap: 1rem; padding: 1.25rem; }
.brand-section h2 { margin: 0; font-size: calc(1.15rem * var(--brand-heading-scale)); }
.color-grid { display: grid; gap: 1rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.color-field { display: flex; flex-direction: column; gap: .3rem; }
.color-label { font-size: .85rem; color: var(--brand-text-muted); }
.color-inputs { display: flex; gap: .5rem; align-items: center; }
.color-inputs input[type="color"] { width: 3rem; height: 2.25rem; padding: 0; border: 1px solid var(--brand-border); border-radius: calc(var(--brand-radius) * .5); background: var(--brand-surface); cursor: pointer; }
.color-hex { width: 7rem; padding: .45rem .6rem; border: 1px solid var(--brand-border); border-radius: calc(var(--brand-radius) * .5); font: inherit; font-family: var(--brand-font-mono); background: var(--brand-surface); color: var(--brand-text); }
.color-hex.invalid { border-color: var(--brand-danger); outline: 1px solid var(--brand-danger); }
.change-list { margin: .5rem 0 0; padding-left: 1.2rem; max-height: 16rem; overflow: auto; font-size: .92rem; }
.change-list code { font-family: var(--brand-font-mono); }

/* Previsualització de la marca */
.preview-toolbar { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin-bottom: .75rem; }
.preview-group { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.preview-group-label { font-size: .8rem; color: var(--brand-text-muted); margin-right: .25rem; }
.chip-btn { border: 1px solid var(--brand-border); background: var(--brand-surface); color: var(--brand-text); padding: .3rem .8rem; border-radius: 999px; font: inherit; font-size: .85rem; cursor: pointer; }
.chip-btn:hover { border-color: var(--brand-primary); }
.chip-btn[aria-pressed="true"] { background: var(--brand-btn-bg); color: var(--brand-btn-text); border-color: var(--brand-btn-bg); }
.preview-viewport { border: 1px solid var(--brand-border); border-radius: calc(var(--brand-radius) * .66); overflow: hidden; margin: 0 auto; }
.preview-viewport[data-size="mobile"] { max-width: 390px; }
.brand-preview { position: relative; isolation: isolate; background: var(--brand-bg); color: var(--brand-text); font-family: var(--brand-font); font-size: calc(1rem * var(--brand-font-scale)); line-height: 1.5; min-height: 20rem; display: flex; flex-direction: column; }
.brand-preview .content { flex: 1; padding: 1.5rem 0 2rem; }
.brand-preview .auth-card { margin: 1.5rem 0 0; }

/* Controls natius (input de fitxer): segueixen la marca igual que la resta de botons. */
input[type="file"] { font: inherit; color: var(--brand-text); }
input[type="file"]::file-selector-button {
  margin-right: .75rem; padding: .45rem .9rem; border: 1px solid var(--brand-border); border-radius: calc(var(--brand-radius) * .5);
  background: var(--brand-surface); color: var(--brand-text); font: inherit; cursor: pointer;
  transition: border-color var(--brand-transition) ease;
}
input[type="file"]::file-selector-button:hover { border-color: var(--brand-primary); }
.image-upload { display: grid; gap: .35rem; justify-items: start; }

/* ── Errors de Blazor ────────────────────────────────────────────────── */
#blazor-error-ui {
  color-scheme: light dark; background: var(--brand-surface); color: var(--brand-text); border-top: 3px solid var(--brand-danger);
  bottom: 0; box-shadow: var(--brand-shadow-hover); box-sizing: border-box; display: none; left: 0;
  padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }