/* Capa pròpia sobre Bulma 1.0 (carregada DESPRÉS de bulma.min.css).
   Bulma cobreix botons, taules, formularis, tags, notificacions i columnes.
   Aquí només hi ha el que Bulma no porta: el layout amb barra lateral fixa,
   la gràfica de barres i els radios "pills". */

:root { --sidebar-w: 250px; }

/* ===== Paleta corporativa CODITA (codita.org) =====
   Colors de marca crus, reutilitzables per a degradats i accents. */
:root {
  --codita-green: #74B500;       /* verd corporatiu (primari) */
  --codita-green-dark: #31690A;  /* verd fosc (hover/contrast) */
  --codita-orange: #EE9632;      /* taronja (accent / destacats) */
  --codita-blue: #45C2F5;        /* blau clar */
  --codita-blue-dark: #4A6E88;   /* blau fosc */
}

/* Re-tenyim Bulma amb la marca: sobreescrivim els canals HSL base perquè
   tota l'escala derivada (light/dark/invert/hover) es recalculi sola.
   Verd #74B500 ≈ hsl(82,100%,36%). */
:root {
  --bulma-primary-h: 82deg;
  --bulma-primary-s: 100%;
  --bulma-primary-l: 36%;
  --bulma-link-h: 82deg;
  --bulma-link-s: 100%;
  --bulma-link-l: 36%;
  /* Bulma pinta el text dels enllaços (<a>) amb `--bulma-link-on-scheme-l`,
     que NO derivem dels canals anteriors: per defecte és 58% (massa clar i amb
     poc contrast sobre blanc). El fixem al verd corporatiu perquè tots els
     enllaços de l'app es vegin correctament. */
  --bulma-link-on-scheme-l: 36%;
}

body { min-height: 100vh; }

/* ===== App shell: sidebar + main ===== */
.app-shell { display: flex; min-height: 100vh; }

.app-sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--bulma-scheme-main, #fff);
  border-right: 1px solid var(--bulma-border, #e3e6ea);
  display: flex; flex-direction: column;
  padding: 1.1rem .85rem;
  position: sticky; top: 0; height: 100vh;
}

.app-brand { display: flex; align-items: center; gap: .7rem; padding: .25rem .4rem 1rem; }
.app-brand-mark {
  width: 38px; height: 38px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: 11px;
  background: linear-gradient(135deg, var(--codita-green), var(--codita-blue));
  color: #fff; font-weight: 800; font-size: 1.05rem;
}
.app-brand strong { font-size: 1rem; line-height: 1.1; }

.app-sidebar .menu { flex: 1; }
.app-sidebar .menu-list a { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.app-sidebar .menu-list .icon { width: 18px; height: 18px; }
.app-sidebar .menu-list .icon svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.app-sidebar-foot {
  margin-top: auto; padding-top: .9rem;
  border-top: 1px solid var(--bulma-border, #e3e6ea);
  display: flex; flex-direction: column; gap: .5rem;
}
.app-who { display: flex; align-items: center; gap: .55rem; min-width: 0; padding: 0 .25rem; }
.app-avatar {
  width: 30px; height: 30px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--bulma-primary-light, #ebfffc); color: var(--bulma-primary-dark, #00947e);
  font-weight: 700; font-size: .82rem;
}
.app-who-name { font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-main .container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 1.6rem 1.6rem 0; flex: 1; }
.app-footer { text-align: center; padding: 2rem 1.5rem; }

/* Logout com a enllaç dins la barra */
.app-logout {
  display: inline-flex; align-items: center; gap: .5rem;
  background: none; border: none; cursor: pointer;
  color: var(--bulma-text-weak, #6b7280); font: inherit; font-weight: 600;
  font-size: .88rem; padding: .45rem .25rem; border-radius: 8px;
}
.app-logout:hover { color: var(--bulma-danger, #c0392b); }
.app-logout svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ===== Radios as pills ===== */
.pills, .pills > div { display: flex; flex-wrap: wrap; gap: .5rem; }
.pills > div { width: 100%; }
.pills label {
  display: inline-flex; align-items: center; font-weight: 500;
  border: 1px solid var(--bulma-border, #e3e6ea); border-radius: 999px;
  padding: .42rem .9rem; cursor: pointer; user-select: none;
  transition: border-color .12s, background .12s, color .12s;
}
.pills label:hover { border-color: var(--bulma-link, #485fc7); }
.pills label:has(input:checked) {
  background: var(--bulma-link-light, #eef0ff);
  border-color: var(--bulma-link, #485fc7);
  color: var(--bulma-link-dark, #3850b7);
}
.pills input[type="radio"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: 0;
  border: 0; opacity: 0; pointer-events: none;
}
.pills label:focus-within { box-shadow: 0 0 0 3px var(--bulma-link-light, #eef0ff); border-color: var(--bulma-link, #485fc7); }

/* ===== Bar chart ===== */
.chart { display: flex; align-items: flex-end; gap: .5rem; height: 190px; padding-top: 1.4rem; margin-top: .5rem; }
.chart .bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
a.bar-wrap { text-decoration: none; cursor: pointer; border-radius: 6px; transition: background .12s; }
a.bar-wrap:hover { text-decoration: none; background: var(--bulma-background, rgba(0,0,0,.04)); }
.chart .bar {
  width: 64%; min-height: 3px; position: relative; border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, var(--codita-blue), var(--codita-green));
  transition: filter .12s;
}
.chart .bar-wrap:hover .bar { filter: brightness(1.1); }
/* Mes actualment filtrat */
.chart .bar.is-current { outline: 2px solid var(--bulma-link, #485fc7); outline-offset: 2px; }
.chart a.bar-wrap:hover .bar-label { color: var(--bulma-link, #485fc7); }
.chart .bar .val {
  position: absolute; top: -1.2rem; left: 50%; transform: translateX(-50%);
  font-size: .7rem; color: var(--bulma-text-weak, #6b7280); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.chart .bar-label { font-size: .72rem; color: var(--bulma-text-weak, #6b7280); margin-top: .4rem; }

/* Stat cards (totals) */
.stat .stat-num { font-size: 1.7rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.stat .stat-label { font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; }

.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Fila destacada: el registre acabat de crear/editar al llistat.
   Usa el taronja corporatiu CODITA com a accent. */
.table tr.is-highlighted > td {
  background-color: #fdebd3;
  box-shadow: inset 3px 0 0 0 var(--codita-orange);
  animation: row-flash 2.4s ease-out 1;
}
@keyframes row-flash {
  0%   { background-color: #f7c987; }
  100% { background-color: #fdebd3; }
}

/* Bulma no porta modificador vertical-center per a taules */
.table.is-vcentered td, .table.is-vcentered th { vertical-align: middle; }
/* Els formularis en línia dins de cel·les no han d'afegir marge inferior */
td form { margin-bottom: 0; }

/* ===== Selector de rang de dates (llistat i resum) =====
   Camps "Des de" / "Fins a" separats que poden saltar de línia quan
   no hi caben (substitueix l'antic "field has-addons" amb gap). */
.range-picker { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.range-picker .control { margin: 0; }

/* ===== Responsive: sidebar -> topbar ===== */
@media (max-width: 768px) {
  .app-shell { flex-direction: column; }
  .app-sidebar {
    width: 100%; height: auto; position: sticky; top: 0; z-index: 20;
    flex-direction: row; align-items: center; flex-wrap: wrap; gap: .4rem;
    padding: .6rem .9rem; border-right: none;
    border-bottom: 1px solid var(--bulma-border, #e3e6ea);
  }
  .app-brand { padding: 0; margin-right: auto; }
  .app-sidebar .menu { flex: 0 0 auto; }
  .app-sidebar .menu-list { display: flex; flex-wrap: wrap; gap: .2rem; }
  .app-sidebar-foot { margin-top: 0; padding-top: 0; border-top: none; flex-direction: row; align-items: center; gap: .5rem; }
  .app-who-name { display: none; }
  .app-main .container { padding: 1.1rem 1rem 0; }

  /* Controls còmodes per al dit (~44px): Bulma deriva l'alçada de botons,
     inputs, selects, paginació i fitxers d'aquesta variable. */
  :root { --bulma-control-height: 2.75em; }
  .datetimepicker-dummy { height: 2.75em; } /* el datepicker la porta fixa */
  .app-sidebar .menu-list a { padding: .55em .7em; }
  .pills label { padding: .55rem .95rem; }
  .app-logout { padding: .6rem .4rem; }

  /* Gràfica de barres: scroll horitzontal propi si no hi caben les barres
     (p. ex. vista anual amb 12 mesos). */
  .chart { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .chart .bar-wrap { flex: 1 0 2.6rem; }

  /* Totals: xifres una mica més petites perquè càpiguen 3 per fila */
  .stat .stat-num { font-size: 1.25rem; }
}

/* Mòbil estret: el rang de dates passa a ocupar tot l'ample */
@media (max-width: 600px) {
  .range-picker { width: 100%; }
  .range-picker .control { flex: 1 1 8.5rem; min-width: 0; }
  /* sobreescriu l'ample fix (150px) en línia dels camps de data */
  .range-picker .input { width: 100% !important; }
}

/* Pantalles molt petites (~360px): guanyem amplada útil */
@media (max-width: 480px) {
  .app-brand .app-tagline { display: none; }
  .app-main .container { padding: 1rem .75rem 0; }
  .box { padding: 1.1rem .85rem; }
}