/* ==========================================================================
   Penjats — Panell d'administracio (PHP)
   Identitat de marca: verd #4F8523, taronja #E8822B
   ========================================================================== */
:root{
  --linia:#4F8523;
  --linia-clar:#6FA83A;
  --abisme:#0D1108;
  --senyal:#E8822B;
  --papel:#FBFAF6;
  --fons:#F5F4EE;
  --grafit:#191712;
  --danger:#B3402A;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--fons);
  color:var(--grafit);
  font-size:15px;
  line-height:1.5;
}
a{ color:inherit; }
h1,h2,h3{ margin:0; }

/* ---------- Layout general ---------- */
.layout{ display:flex; min-height:100vh; }
.main{ flex:1; min-width:0; }
.container{ max-width:980px; margin:0 auto; padding:34px 32px 80px; }

/* ---------- Sidebar ---------- */
.sidebar{
  width:230px; flex-shrink:0;
  background:var(--abisme); color:#fff;
  display:flex; flex-direction:column; justify-content:space-between;
}
.sidebar__brand{ padding:22px 20px; border-bottom:1px solid rgba(255,255,255,.1); }
.sidebar__logo{ font-family:monospace; font-weight:800; font-size:17px; }
.sidebar__logo span{ color:var(--senyal); }
.sidebar__tag{ margin:3px 0 0; font-family:monospace; font-size:9px; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.4); }
.sidebar nav{ padding:12px; }
.sidebar nav a{
  display:block; padding:10px 12px; margin-bottom:2px;
  font-family:monospace; font-size:13px; color:rgba(255,255,255,.8);
  text-decoration:none; border-radius:3px;
}
.sidebar nav a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.sidebar nav a.is-active{ background:rgba(255,255,255,.1); color:#fff; }

.nav-group-toggle{
  display:flex; align-items:center; width:100%; text-align:left;
  padding:10px 12px; margin-bottom:2px; background:none; border:none; cursor:pointer;
  font-family:monospace; font-size:13px; color:rgba(255,255,255,.8);
  border-radius:3px;
}
.nav-group-toggle:hover{ background:rgba(255,255,255,.06); color:#fff; }
.nav-group-toggle__chevron{ margin-left:auto; transition:transform .15s ease; transform:rotate(-90deg); }
.nav-group-toggle.is-open .nav-group-toggle__chevron{ transform:rotate(0deg); }
.nav-group{ max-height:0; overflow:hidden; transition:max-height .18s ease; }
.nav-group.is-open{ max-height:400px; }
.nav-group a{
  display:block; padding:9px 12px 9px 34px; margin-bottom:2px;
  font-family:monospace; font-size:12.5px; color:rgba(255,255,255,.65);
  text-decoration:none; border-radius:3px;
}
.nav-group a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.nav-group a.is-active{ background:rgba(255,255,255,.1); color:#fff; }
.sidebar nav a .dot{ color:var(--senyal); margin-right:8px; }
.sidebar__user{ padding:16px 20px; border-top:1px solid rgba(255,255,255,.1); font-size:12px; }
.sidebar__user b{ display:block; font-size:13px; color:#fff; }
.sidebar__user span{ color:rgba(255,255,255,.45); }
.sidebar__user a{ display:inline-block; margin-top:8px; font-family:monospace; font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.5); text-decoration:none; }
.sidebar__user a:hover{ color:var(--senyal); }

/* ---------- Capçalera de pagina ---------- */
.page-head{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:12px; margin-bottom:26px; }
.page-head h1{ font-family:monospace; font-size:24px; font-weight:800; }
.page-head p{ margin:6px 0 0; font-size:13px; color:rgba(25,23,18,.55); }

/* ---------- Components ---------- */
.card{ background:var(--papel); border:1px solid rgba(0,0,0,.07); border-radius:3px; padding:22px; }
.card--flush{ padding:0; }
.row{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:13px 18px; border-bottom:1px solid rgba(0,0,0,.04);
}
.row:last-child{ border-bottom:none; }
.row--link{ cursor:pointer; text-decoration:none; color:inherit; }
.row--link:hover{ background:rgba(0,0,0,.015); }
.row__title{ margin:0; font-size:14px; font-weight:600; }
a.row__title:hover{ color:var(--linia); }
.row__meta{ margin:2px 0 0; font-size:12px; color:rgba(25,23,18,.5); }
.row__side{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.row--muted > div:first-child{ opacity:.4; }

.badge{
  display:inline-block; font-family:monospace; font-size:11px; letter-spacing:.05em;
  text-transform:uppercase; padding:4px 10px; border-radius:999px; border:1px solid;
  white-space:nowrap;
}
.badge--ok{ color:var(--linia); border-color:rgba(79,133,35,.35); background:rgba(79,133,35,.08); }
.badge--warn{ color:var(--senyal); border-color:rgba(232,130,43,.4); background:rgba(232,130,43,.08); }
.badge--bad{ color:var(--danger); border-color:rgba(179,64,42,.35); background:rgba(179,64,42,.08); }
.badge--muted{ color:rgba(25,23,18,.5); border-color:rgba(0,0,0,.12); background:rgba(0,0,0,.03); }

.btn{
  display:inline-block; font-family:monospace; font-size:12px; letter-spacing:.05em;
  text-transform:uppercase; font-weight:700; border-radius:3px; cursor:pointer;
  border:1px solid transparent; padding:10px 20px; text-decoration:none; background:none;
}
.btn--sm{ padding:6px 12px; }
.btn--primary{ background:var(--linia); color:#fff; }
.btn--primary:hover{ background:var(--linia-clar); }
.btn--outline{ border-color:rgba(0,0,0,.2); color:var(--grafit); }
.btn--outline:hover{ border-color:var(--linia); color:var(--linia); }
.btn--danger{ border-color:rgba(179,64,42,.35); color:var(--danger); }
.btn--danger:hover{ background:rgba(179,64,42,.08); }
.btn:disabled{ opacity:.5; cursor:progress; }

.link-add{
  background:none; border:none; cursor:pointer; padding:0;
  font-family:monospace; font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--linia);
}
.link-add:hover{ color:var(--linia-clar); }
.link-action{
  background:none; border:none; cursor:pointer; padding:0;
  font-family:monospace; font-size:11px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--linia); text-decoration:none;
}
.link-action--muted{ color:rgba(25,23,18,.45); }
.link-action--x{ color:rgba(25,23,18,.3); font-size:13px; }
.link-action--x:hover{ color:var(--danger); }

.field label{
  display:block; margin-bottom:6px;
  font-family:monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(25,23,18,.55);
}
.field input, .field select, .field textarea{
  width:100%; padding:9px 11px; border-radius:3px;
  border:1px solid rgba(0,0,0,.16); font-size:14px; background:#fff;
  font-family:inherit;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--linia); box-shadow:0 0 0 1px var(--linia);
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-grid--3{ grid-template-columns:1fr 1fr 1fr; }
.form-grid .full{ grid-column:1 / -1; }

.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:34px; }
.stat{ text-align:center; }
.stat b{ display:block; font-family:monospace; font-size:30px; font-weight:800; color:var(--linia); }
.stat b.accent{ color:var(--senyal); }
.stat span{ margin-top:4px; display:block; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:rgba(25,23,18,.5); }

.section{ margin-bottom:34px; }
.section__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.section__head h2{ font-family:monospace; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:rgba(25,23,18,.65); }
.section__head h2.danger{ color:var(--danger); }

.empty{
  border:1px dashed rgba(0,0,0,.14); border-radius:3px; padding:34px;
  text-align:center; font-size:13px; color:rgba(25,23,18,.45);
}

.notice{
  background:rgba(232,130,43,.1); border-bottom:1px solid rgba(232,130,43,.25);
  padding:10px 32px; font-size:12.5px; color:#7a4315;
}
.flash{ padding:10px 14px; border-radius:3px; margin-bottom:18px; font-size:13px; }
.flash--ok{ background:rgba(79,133,35,.1); border:1px solid rgba(79,133,35,.3); color:var(--linia); }
.flash--error{ background:rgba(179,64,42,.08); border:1px solid rgba(179,64,42,.3); color:var(--danger); }

/* ---------- Login ---------- */
.login-page{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--abisme); padding:16px; }
.login-box{ width:100%; max-width:360px; }
.login-box__brand{ text-align:center; margin-bottom:28px; }
.login-box__logo{ font-family:monospace; font-weight:800; font-size:24px; color:#fff; }
.login-box__logo span{ color:var(--senyal); }
.login-box__tag{ margin-top:4px; font-family:monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.45); }
.login-box form{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1); border-radius:3px; padding:30px; }
.login-box .field label{ color:rgba(255,255,255,.55); }
.login-box .flash--error{ background:rgba(179,64,42,.15); border-color:rgba(179,64,42,.4); color:#f0a99b; }

/* ---------- Factura: linies dinamiques ---------- */
.inv-lines-head, .inv-line{
  display:grid;
  grid-template-columns:1fr 80px 100px 70px 100px 28px;
  gap:8px; align-items:start;
}
.inv-lines-head{
  font-family:monospace; font-size:10px; text-transform:uppercase;
  color:rgba(25,23,18,.5); margin-bottom:8px; padding:0 2px;
}
.inv-line{ margin-bottom:8px; }
.inv-line__desc{ display:flex; flex-direction:column; gap:4px; }
.inv-line__desc select{ padding:6px 8px; font-size:12px; }
.inv-line__desc .sub{ font-size:12px; color:rgba(25,23,18,.6); padding:6px 11px; }
.inv-line__total{ text-align:right; font-size:14px; font-weight:600; padding-top:9px; }
.inv-line__remove{ background:none; border:none; cursor:pointer; color:rgba(25,23,18,.3); padding-top:9px; }
.inv-line__remove:hover{ color:var(--danger); }
.inv-totals{ margin-left:auto; max-width:260px; margin-top:24px; padding-top:14px; border-top:1px solid rgba(0,0,0,.1); }
.inv-totals div{ display:flex; justify-content:space-between; font-size:13px; color:rgba(25,23,18,.6); margin-bottom:4px; }
.inv-totals .total{ font-size:15px; font-weight:700; color:var(--grafit); }

/* ---------- Vista imprimible de factura ---------- */
.invoice-doc{ max-width:640px; margin:0 auto; background:#fff; border:1px solid rgba(0,0,0,.1); padding:40px; }
.invoice-doc table{ width:100%; border-collapse:collapse; margin-bottom:24px; font-size:13px; }
.invoice-doc th{
  border-bottom:1px solid rgba(0,0,0,.15); text-align:left; padding-bottom:8px;
  font-family:monospace; font-size:9px; text-transform:uppercase; color:rgba(25,23,18,.4); font-weight:500;
}
.invoice-doc td{ padding:8px 0; border-bottom:1px solid rgba(0,0,0,.06); vertical-align:top; }
.invoice-doc .num{ text-align:right; }
.invoice-doc .subdesc{ margin-top:2px; font-size:11px; color:rgba(25,23,18,.5); }

/* ---------- Format formal (replica el prototip de factura) ---------- */
.invoice-doc--formal{ padding:36px 40px; font-size:12.5px; color:#333; }
.invoice-doc--formal p{ margin:0 0 2px; }
.invoice-doc--formal .b{ font-weight:700; }
.invoice-doc--formal .muted{ color:#888; font-size:11px; }
.invoice-doc--formal .label{ font-size:11.5px; color:#555; }
.invoice-doc--formal table{ margin-bottom:0; border-collapse:collapse; }
.invoice-doc--formal td{ border:none; padding:0; vertical-align:top; }

.inv-header{ margin-bottom:30px; }
.inv-header td{ vertical-align:top; }
.inv-header__logo{ width:55%; }
.inv-header__issuer{ width:45%; text-align:right; }
.inv-header__issuer h1{ font-size:22px; font-weight:400; margin:0 0 10px; color:#222; }

.inv-meta{ background:#F1F0EC; padding:20px 24px; margin-bottom:26px; }
.inv-meta td{ padding:0; }
.inv-meta__client{ width:58%; }
.inv-meta__fields{ width:42%; vertical-align:top; }
.inv-meta__fields table{ width:100%; }
.inv-meta__fields tr td{ padding:2px 0; }
.inv-meta__fields .label{ text-align:left; padding-right:16px; white-space:nowrap; }
.inv-meta__fields .val{ text-align:right; }

.inv-items{ margin-bottom:6px; }
.inv-items thead th{
  text-align:left; font-family:inherit; font-size:12px; font-weight:600; text-transform:none;
  color:#333; border-bottom:1px solid #ccc; padding:0 0 8px 14px;
}
.inv-items thead th:first-child{ padding-left:0; }
.inv-items thead th.num{ text-align:right; }
.inv-items tbody td{ padding:10px 0 10px 14px; border-bottom:1px solid #eee; }
.inv-items tbody td:first-child{ padding-left:0; }
.inv-items tbody td.num{ text-align:right; white-space:nowrap; width:1%; }

.inv-totals-table{ width:100%; margin-bottom:20px; }
.inv-totals-table td{ padding:3px 0; }
.inv-totals-table .label{ text-align:right; padding-right:24px; }
.inv-totals-table .num{ text-align:right; width:110px; }
.inv-totals-table tr:last-child td{ padding-top:6px; border-top:1px solid #ccc; font-size:14px; }

.inv-due{ background:#F1F0EC; margin-bottom:30px; }
.inv-due td{ padding:16px 24px; text-align:right; }
.inv-due .label{ margin:0; color:#555; }
.inv-due .amount{ margin:4px 0 0; font-size:22px; font-weight:700; color:#222; }

.inv-section{ margin-bottom:22px; }
.inv-section p{ font-size:12px; color:#444; line-height:1.6; }

/* ---------- Pestanyes (fitxa de client) ---------- */
.tabs{ display:flex; gap:4px; border-bottom:1px solid rgba(0,0,0,.1); margin-bottom:24px; flex-wrap:wrap; }
.tab-btn{
  background:none; border:none; cursor:pointer; padding:11px 16px;
  font-family:monospace; font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  color:rgba(25,23,18,.5); border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tab-btn:hover{ color:var(--grafit); }
.tab-btn.is-active{ color:var(--linia); border-bottom-color:var(--linia); }
.tab-panel{ display:none; }
.tab-panel.is-active{ display:block; }

/* ---------- Buscador amb suggeriments (tipus Google) ---------- */
.search-box{ position:relative; max-width:420px; }
.search-box input{
  width:100%; padding:10px 14px 10px 36px; border-radius:3px;
  border:1px solid rgba(0,0,0,.16); font-size:14px; background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="%23999" stroke-width="2"><circle cx="6.5" cy="6.5" r="5"/><line x1="10.5" y1="10.5" x2="15" y2="15"/></svg>') no-repeat 12px center;
}
.search-box input:focus{ outline:none; border-color:var(--linia); box-shadow:0 0 0 1px var(--linia); }
.search-box.is-picked input{ border-color:var(--linia); background-color:rgba(79,133,35,.06); font-weight:600; }

/* ---------- Filtre per estat (factures, pressupostos) ---------- */
.status-filter{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.status-filter__chip{
  font-family:monospace; font-size:11.5px; letter-spacing:.03em; text-transform:uppercase;
  padding:7px 14px; border-radius:100px; border:1px solid rgba(0,0,0,.15);
  background:#fff; color:rgba(25,23,18,.6); cursor:pointer;
}
.status-filter__chip:hover{ border-color:var(--linia); color:var(--linia); }
.status-filter__chip.is-active{ background:var(--abisme); border-color:var(--abisme); color:#fff; }

/* ---------- Filtre multiopcio (pagina Feines) ---------- */
.multi-filter{ display:flex; flex-wrap:wrap; gap:26px; margin-bottom:22px; padding:16px; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:4px; }
.multi-filter__group b{ display:block; font-family:monospace; font-size:10px; text-transform:uppercase; color:rgba(25,23,18,.4); margin-bottom:8px; }
.multi-filter__group label{ display:flex; align-items:center; gap:6px; font-size:13px; margin-bottom:6px; cursor:pointer; }
.search-suggest{
  position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:30;
  background:#fff; border:1px solid rgba(0,0,0,.12); border-radius:3px;
  box-shadow:0 10px 28px rgba(0,0,0,.12); max-height:320px; overflow-y:auto; display:none;
}
.search-suggest.is-open{ display:block; }
.search-suggest__item{
  display:block; padding:10px 14px; text-decoration:none; color:inherit;
  border-bottom:1px solid rgba(0,0,0,.05); cursor:pointer;
}
.search-suggest__item:last-child{ border-bottom:none; }
.search-suggest__item:hover, .search-suggest__item.is-highlighted{ background:rgba(79,133,35,.07); }
.search-suggest__item b{ font-size:13.5px; font-weight:600; display:block; }
.search-suggest__item span{ font-size:12px; color:rgba(25,23,18,.5); }
.search-suggest__empty{ padding:14px; font-size:13px; color:rgba(25,23,18,.4); text-align:center; }

/* Filtre instantani de llistes (articles, certificacions, treballs) */
.filter-box{ max-width:320px; margin-bottom:14px; }
.filter-box input{
  width:100%; padding:8px 12px 8px 32px; border-radius:3px;
  border:1px solid rgba(0,0,0,.16); font-size:13px; background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" stroke="%23999" stroke-width="2"><circle cx="6" cy="6" r="4.5"/><line x1="9.5" y1="9.5" x2="13" y2="13"/></svg>') no-repeat 10px center;
}
.filter-box input:focus{ outline:none; border-color:var(--linia); }
.row[data-filter-hidden]{ display:none; }

/* Etiqueta discreta de numero de client */
.client-number{ font-family:monospace; font-size:11px; color:rgba(25,23,18,.35); }

/* ---------- Planning (calendari) ---------- */
.cal-nav{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.cal-nav h2{ font-family:monospace; font-size:16px; text-transform:capitalize; }
.cal-grid{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:1px; background:rgba(0,0,0,.08); border:1px solid rgba(0,0,0,.08); table-layout:fixed; }
.cal-grid__head{
  background:var(--papel); padding:8px; text-align:center;
  font-family:monospace; font-size:10px; text-transform:uppercase; color:rgba(25,23,18,.45);
}
.cal-cell{
  background:#fff; min-height:92px; min-width:0; padding:6px; display:flex; flex-direction:column; gap:3px;
  text-decoration:none; color:inherit; position:relative; overflow:hidden;
}
.cal-cell--empty{ background:rgba(0,0,0,.02); }
.cal-cell:not(.cal-cell--empty):hover{ background:rgba(79,133,35,.05); }
.cal-cell--today{ box-shadow:inset 0 0 0 2px var(--linia); }
.cal-cell--selected{ background:rgba(79,133,35,.08); }
.cal-cell__num{ font-family:monospace; font-size:11px; color:rgba(25,23,18,.5); }
.cal-pill{
  display:block; font-size:10.5px; padding:2px 5px; border-radius:2px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; background:rgba(232,130,43,.14); color:#7a4315;
  max-width:100%; position:relative; cursor:default;
}
.cal-pill[data-tooltip]:hover::after{
  content:attr(data-tooltip);
  position:absolute; left:0; bottom:calc(100% + 5px); z-index:60;
  background:#191712; color:#fff; padding:5px 9px; border-radius:4px;
  font-size:11.5px; white-space:normal; max-width:220px; line-height:1.35;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.cal-pill--done{ text-decoration:line-through; opacity:.55; }
.cal-pill--cancelled{ text-decoration:line-through; opacity:.4; }
.cal-pill__more{ font-size:10px; color:rgba(25,23,18,.4); }
.cal-legend{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:20px; }
.cal-legend__item{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:rgba(25,23,18,.6); }
.cal-legend__dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }

@media (max-width:840px){
  .layout{ flex-direction:column; }
  .sidebar{ width:100%; flex-direction:row; align-items:center; overflow-x:auto; }
  .sidebar nav{ display:flex; padding:8px; }
  .sidebar nav a{ white-space:nowrap; }
  .sidebar__user{ display:none; }
  .container{ padding:24px 16px 60px; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .form-grid, .form-grid--3{ grid-template-columns:1fr; }
  .inv-lines-head{ display:none; }
  .inv-line{ grid-template-columns:1fr 1fr; }
  .inv-line__desc{ grid-column:1 / -1; }
  .cal-cell{ min-height:60px; padding:4px; }
  .cal-grid__head{ font-size:9px; padding:5px 2px; }
  .cal-pill{ font-size:9px; padding:1px 3px; }
}

/* ---------- Impressio ---------- */
@media print{
  .no-print{ display:none !important; }
  body{ background:#fff; }
  .invoice-doc{ border:none; padding:0; }
  .container{ padding:0; }
}