/* ---------- LOGIN SCREEN ---------- */
.login-screen{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#0c3422,#10422c 60%,#155f3b);
  padding:20px;
}
.login-card{
  background:#fff; padding:36px 32px; border-radius:18px;
  width:100%; max-width:380px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  text-align:center;
}
.login-logo{width:64px; height:auto; margin-bottom:12px; filter:invert(0)}
.login-card h1{font-size:22px; margin-bottom:4px; color:#16241d}
.login-sub{font-size:13.5px; color:#7d918a; margin:4px 0 22px}
.login-form{display:flex; flex-direction:column; gap:14px; text-align:left}
.login-form label{display:flex; flex-direction:column; gap:6px; font-size:12.5px; font-weight:600; color:#3c5147}
.login-form input{
  font-family:inherit; font-size:14px; color:#16241d;
  border:1px solid #e2eae5; border-radius:9px; padding:11px 13px; width:100%; transition:.15s;
}
.login-form input:focus{outline:0; border-color:#34c07a; box-shadow:0 0 0 3px rgba(52,192,122,.16)}
.login-btn{margin-top:8px; padding:12px 18px; font-size:15px}
.login-error{
  color:#9c2f1c; background:#f8ddd6; padding:8px 12px; border-radius:8px;
  font-size:13px; font-weight:600; display:none;
}
.link-forgot{
  background:transparent; border:0; color:#7d918a; font-size:12.5px;
  cursor:pointer; padding:6px; text-decoration:underline;
}
.link-forgot:hover{color:#1f8a55}

/* Amaga sidebar i main quan no està autenticat */
body.logged-out #app{display:none}

/* User info al sidebar foot */
.user-info{padding:4px 6px 10px; border-bottom:1px solid rgba(255,255,255,.1); margin-bottom:6px}
.user-info .mini{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:#7fd1a4}

:root{
  --green:#34c07a; --green-d:#1f8a55; --green-dd:#155f3b;
  --ink:#16241d; --ink-2:#3c5147; --muted:#7d918a;
  --bg:#f2f6f3; --card:#ffffff; --line:#e2eae5;
  --gold:#cf9b46; --red:#d2553f; --blue:#3d7bd6;
  --shadow:0 1px 3px rgba(16,40,28,.06),0 8px 24px rgba(16,40,28,.06);
  --radius:14px;
  font-synthesis:none;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased;
}
#app{display:flex; min-height:100vh}
button{font-family:inherit; cursor:pointer}
a{color:var(--green-d)}
h1,h2,h3{margin:0; font-weight:700; letter-spacing:-.01em}
.muted{color:var(--muted)}

/* Sidebar */
.sidebar{
  width:248px; flex:0 0 248px; background:linear-gradient(180deg,#10422c,#0c3422);
  color:#dff0e7; display:flex; flex-direction:column; padding:22px 16px; position:sticky; top:0; height:100vh;
}
.brand{display:flex; flex-direction:column; align-items:center; gap:6px; padding:6px 6px 20px}
.brand-logo{height:80px; width:auto; object-fit:contain;
  filter:brightness(0) invert(1); opacity:.96}
.brand-sub{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:#7fd1a4; text-align:center}
.nav{display:flex; flex-direction:column; gap:3px; margin-top:6px}
.nav-item{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  background:transparent; border:0; color:#cfe7da; padding:11px 13px; border-radius:10px;
  font-size:14.5px; font-weight:600; transition:.15s;
}
.nav-item:hover{background:rgba(255,255,255,.08); color:#fff}
.nav-item.active{background:var(--green); color:#06301c; box-shadow:0 6px 16px rgba(52,192,122,.35)}
.nav-ico{width:18px; text-align:center; font-size:15px; opacity:.95}
.sidebar-foot{margin-top:auto; padding:14px 8px 2px; display:flex; flex-direction:column; gap:9px; font-size:12.5px}
.sidebar-foot a{color:#8fd9b1; text-decoration:none}
.sidebar-foot a:hover{text-decoration:underline}
.link-danger{background:none;border:0;color:#f0a99c;text-align:left;padding:0;font-size:12.5px}
.link-danger:hover{color:#ff7d66;text-decoration:underline}

/* Main */
.main{flex:1; min-width:0; display:flex; flex-direction:column}
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 30px; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5;
}
.topbar h1{font-size:21px}
.topbar p{font-size:13px; margin-top:2px}
.topbar-actions{display:flex; gap:10px; flex-wrap:wrap}
.view{padding:26px 30px 60px; max-width:1240px}

/* Buttons */
.btn{border:1px solid var(--line); background:var(--card); color:var(--ink); padding:9px 15px; border-radius:10px; font-weight:600; font-size:14px; transition:.15s}
.btn:hover{border-color:var(--green); color:var(--green-d)}
.btn-primary{background:var(--green); border-color:var(--green); color:#06301c}
.btn-primary:hover{background:var(--green-d); border-color:var(--green-d); color:#fff}
.btn-ghost{background:transparent; border-color:transparent}
.btn-sm{padding:6px 10px; font-size:12.5px; border-radius:8px}
.btn-danger{color:var(--red); border-color:#f0d2cc}
.btn-danger:hover{background:var(--red); color:#fff; border-color:var(--red)}

/* Cards & grids */
.grid{display:grid; gap:16px}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.kpi .kpi-label{font-size:12.5px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em}
.kpi .kpi-value{font-size:27px; font-weight:800; margin-top:7px; letter-spacing:-.02em}
.kpi .kpi-sub{font-size:12.5px; color:var(--muted); margin-top:4px}
.kpi.accent{background:linear-gradient(135deg,#1f8a55,#34c07a); color:#fff; border:0}
.kpi.accent .kpi-label,.kpi.accent .kpi-sub{color:#d6f3e3}
.section-title{font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; margin:30px 0 12px}
.row2{display:grid; grid-template-columns:1.3fr 1fr; gap:16px}
.row2b{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:900px){.row2,.row2b{grid-template-columns:1fr}}

/* Tables */
.table-wrap{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:auto; box-shadow:var(--shadow)}
table{border-collapse:collapse; width:100%; font-size:13px}
th,td{padding:8px 10px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap}
th{font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; background:#fafcfb; position:sticky; top:0}
tbody tr:hover{background:#f7faf8}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:0}
.tot-row td{font-weight:800; background:#f4f9f6; border-top:2px solid var(--line)}
.pill{display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700}

/* Vendes / Clients: permet que els noms llargs es trenquin en 2 línies */
.table-wrap table tbody td.cell-strong{
  white-space:normal;
  max-width:220px;
  line-height:1.3;
}
.table-wrap table tbody td.cell-strong.num{
  white-space:nowrap;
  max-width:none;
}
/* Botons d'acció a les taules: més compactes */
.table-wrap .btn-sm{padding:5px 9px; font-size:12px}

/* Fires: taula molt ampla (15 columnes) — compactació agressiva */
.table-wrap.fires-table table{font-size:12.5px}
.table-wrap.fires-table th,
.table-wrap.fires-table td{padding:6px 6px}
.table-wrap.fires-table th{font-size:10.5px; letter-spacing:.02em}
.table-wrap.fires-table td.cell-strong{max-width:140px; line-height:1.25}
.pill.green{background:#dff3e8; color:var(--green-dd)}
.pill.gold{background:#f7ecd4; color:#8a6411}
.pill.blue{background:#e0ebfb; color:#274e8c}
.pill.grey{background:#eef2f0; color:#5a6b63}
.pill.red{background:#f8ddd6; color:#9c2f1c}
.cell-strong{font-weight:700}
.mini{font-size:11.5px; color:var(--muted)}

/* Forms */
.form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px 16px}
.form-grid.c3{grid-template-columns:repeat(3,1fr)}
.field{display:flex; flex-direction:column; gap:6px}
.field.full{grid-column:1/-1}
label{font-size:12.5px; font-weight:600; color:var(--ink-2)}
input,select,textarea{
  font-family:inherit; font-size:14px; color:var(--ink); background:#fff;
  border:1px solid var(--line); border-radius:9px; padding:9px 11px; width:100%; transition:.15s;
}
input:focus,select:focus,textarea:focus{outline:0; border-color:var(--green); box-shadow:0 0 0 3px rgba(52,192,122,.16)}
.help{font-size:11.5px; color:var(--muted)}
.input-inline{display:flex; gap:8px; align-items:center}

/* Sale line editor */
.lines{display:flex; flex-direction:column; gap:8px}
.line-row{display:grid; grid-template-columns:1fr 96px 110px 110px 38px; gap:10px; align-items:center}
.line-row .price-show{font-size:13px; color:var(--muted); text-align:right; font-variant-numeric:tabular-nums}
.line-head{font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700}
@media(max-width:720px){.line-row{grid-template-columns:1fr 70px 1fr 30px}.line-row .price-show{display:none}}

/* Toolbar */
.toolbar{display:flex; gap:10px; align-items:center; margin-bottom:16px; flex-wrap:wrap}
.search{flex:1; min-width:180px; max-width:340px}
.seg{display:inline-flex; background:#eaf0ec; border-radius:9px; padding:3px}
.seg button{border:0; background:transparent; padding:7px 12px; border-radius:7px; font-weight:600; font-size:13px; color:var(--ink-2)}
.seg button.active{background:#fff; color:var(--green-d); box-shadow:var(--shadow)}

/* Charts */
.chart-legend{display:flex; flex-direction:column; gap:8px; margin-top:6px}
.lg-item{display:flex; align-items:center; gap:9px; font-size:13px}
.lg-dot{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
.lg-name{flex:1}
.lg-val{font-weight:700; font-variant-numeric:tabular-nums}
.bars{display:flex; flex-direction:column; gap:11px}
.bar-row{display:grid; grid-template-columns:120px 1fr 64px; gap:10px; align-items:center; font-size:13px}
.bar-track{background:#eef2f0; border-radius:7px; height:14px; overflow:hidden}
.bar-fill{height:100%; border-radius:7px; background:linear-gradient(90deg,#34c07a,#1f8a55)}

/* Modal */
.modal-bg{position:fixed; inset:0; background:rgba(12,30,20,.45); display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; z-index:50; overflow:auto}
.modal{background:var(--card); border-radius:18px; width:100%; max-width:720px; box-shadow:0 30px 80px rgba(8,30,18,.35); animation:pop .16s ease}
.modal.wide{max-width:880px}
@keyframes pop{from{transform:translateY(8px) scale(.99); opacity:0}to{transform:none;opacity:1}}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--line)}
.modal-head h2{font-size:18px}
.modal-body{padding:22px 24px; max-height:68vh; overflow:auto}
.modal-foot{display:flex; justify-content:flex-end; gap:10px; padding:16px 24px; border-top:1px solid var(--line); background:#fafcfb; border-radius:0 0 18px 18px}
.x-btn{border:0;background:#eef2f0;width:32px;height:32px;border-radius:8px;font-size:17px;color:var(--ink-2)}
.x-btn:hover{background:#e0e8e3}

/* Toast */
.toast-root{position:fixed; bottom:22px; right:22px; display:flex; flex-direction:column; gap:10px; z-index:80}
.toast{background:#10422c; color:#dff0e7; padding:12px 16px; border-radius:11px; font-size:14px; font-weight:600; box-shadow:0 12px 30px rgba(8,30,18,.4); animation:pop .16s ease}
.toast.err{background:var(--red); color:#fff}

/* Empty state */
.empty{text-align:center; padding:48px 20px; color:var(--muted)}
.empty .big{font-size:34px; margin-bottom:8px; opacity:.5}

/* product cards */
.prod-card{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:14px; padding:22px 16px 20px;
}
.prod-info{width:100%}
.prod-thumb{
  width:170px; height:230px; border-radius:14px;
  background:#fff center/cover no-repeat;
  flex:0 0 auto; border:1px solid var(--line);
  box-shadow:0 2px 12px rgba(16,40,28,.05);
}
.cards:has(.prod-card){grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
@media (max-width:720px){
  .prod-card{flex-direction:row; align-items:center; text-align:left; padding:14px; gap:14px}
  .prod-thumb{width:80px; height:110px; border-radius:10px}
}
.tag{font-size:11px;font-weight:700;color:var(--green-d);background:#dff3e8;padding:2px 8px;border-radius:6px}
.flex{display:flex} .between{justify-content:space-between} .center{align-items:center} .gap{gap:10px} .wrap{flex-wrap:wrap}
.right{margin-left:auto}
.danger-text{color:var(--red)} .pos{color:var(--green-d)} .neg{color:var(--red)}

/* ---------- Responsive / mòbil ---------- */
.menu-btn{display:none; align-items:center; justify-content:center; width:40px; height:40px; flex:0 0 auto;
  border:1px solid var(--line); background:var(--card); border-radius:10px; font-size:19px; color:var(--ink)}
.menu-btn:hover{border-color:var(--green); color:var(--green-d)}
.nav-backdrop{display:none; position:fixed; inset:0; background:rgba(10,28,18,.45); z-index:30}
.topbar-titles{min-width:0}

@media (max-width:820px){
  .menu-btn{display:inline-flex}
  .sidebar{position:fixed; left:0; top:0; height:100vh; width:264px; z-index:40; overflow-y:auto;
    transform:translateX(-100%); transition:transform .22s ease; box-shadow:0 0 50px rgba(0,0,0,.35)}
  body.nav-open .sidebar{transform:translateX(0)}
  body.nav-open .nav-backdrop{display:block}
  body.nav-open{overflow:hidden}
  .main{width:100%; min-width:0}
  .topbar{padding:13px 15px; gap:10px}
  .topbar h1{font-size:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .topbar p{display:none}
  .topbar-titles{flex:1}
  .topbar-actions .btn{padding:8px 12px; font-size:13px}
  .view{padding:16px 14px 64px}
  .section-title{margin:22px 0 10px}
  .form-grid,.form-grid.c3{grid-template-columns:1fr}
  .kpi .kpi-value{font-size:24px}
  .modal-bg{padding:12px 8px}
  .modal,.modal.wide{max-width:100%}
  .modal-head{padding:16px 18px}
  .modal-body{padding:16px 18px; max-height:74vh}
  .modal-foot{padding:13px 18px}
  .toolbar{gap:8px}
  .toolbar .search{max-width:none; flex:1 1 100%}
  .seg{flex-wrap:wrap}
}
@media (max-width:420px){
  .seg button{padding:6px 9px; font-size:12px}
  .kpi .kpi-value{font-size:21px}
  .line-row{grid-template-columns:1fr 60px 1fr 28px}
}

/* ---------- Mòbil: taules → llista de targetes ---------- */
.td-lbl{display:none}
.td-val{display:contents}

@media (max-width:720px){
  .table-wrap{background:transparent;border:0;box-shadow:none;overflow:visible;padding:0}
  table{display:block;font-size:14px}
  thead{display:none}
  tbody{display:block}
  tr{display:flex;flex-direction:column}
  tbody tr{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:10px 14px 6px;
    margin-bottom:12px;
  }
  tbody tr:hover{background:var(--card)}
  td{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:7px 0;
    border-bottom:1px dashed #eaf0ec;
    white-space:normal;
    text-align:right;
    min-height:30px;
  }
  td:last-child{border-bottom:0;padding-top:9px}
  td.num{text-align:right}

  .td-lbl{
    display:inline-block;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--muted);
    font-weight:700;
    flex:0 0 auto;
    text-align:left;
  }
  .td-val{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:2px;
    flex:1 1 auto;
    min-width:0;
    text-align:right;
    overflow-wrap:anywhere;
  }
  .td-val .mini{font-size:11.5px;color:var(--muted)}
  /* cel·les sense label (típicament botons d'acció): valor en fila a la dreta */
  td:not(:has(> .td-lbl)) .td-val{
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:flex-end;
    align-items:center;
    gap:8px;
    width:100%;
  }
  /* Layout en CSS Grid: títol i botons comparteixen la primera fila, la resta sota */
  tbody tr{display:grid; grid-template-columns:minmax(0, 1fr)}
  /* Si hi ha botons d'acció, afegeix una segona columna per a ells */
  tbody tr:has(> .mb-action){grid-template-columns:minmax(0, 1fr) auto}

  /* Títol (primera cel·la cell-strong no numèrica) — full width esquerra */
  td.mb-title{
    grid-column:1;
    grid-row:1;
    align-self:start;
    border-bottom:1px solid var(--line);
    padding-bottom:10px;
    margin-bottom:4px;
    display:block;
    text-align:left;
    min-width:0;
  }
  td.mb-title .td-val{
    display:block;
    font-size:15.5px;
    font-weight:700;
    text-align:left;
    width:100%;
    line-height:1.3;
    overflow-wrap:break-word;
    word-break:normal;
  }
  td.mb-title .td-val .mini{font-size:13px; color:var(--muted); font-weight:500; margin-left:4px}
  td.mb-title .td-lbl{display:none}

  /* Botons d'acció — columna 2, mateixa fila que el títol */
  tbody tr td.mb-action{
    grid-column:2;
    grid-row:1;
    align-self:start;
    justify-self:end;
    padding:0;
    margin:0;
    border:0;
    background:transparent;
    min-height:0;
    width:auto;
    padding-left:10px;
  }
  tbody tr td.mb-action .td-val{
    flex-direction:row;
    flex-wrap:nowrap;
    gap:6px;
    width:auto;
    justify-content:flex-end;
  }
  tbody tr td.mb-action .btn-sm{padding:5px 10px; font-size:12.5px}

  /* La resta de cel·les (DATA, valors) — fila pròpia, ample complet */
  tbody tr td:not(.mb-title):not(.mb-action){
    grid-column:1 / -1;
  }

  /* fila total (tot-row) destacada */
  tbody tr.tot-row{
    background:linear-gradient(135deg,#1f8a55,#34c07a);
    color:#06301c !important;
    border:0;
    padding:12px 18px;
  }
  tbody tr.tot-row td{
    border-bottom-color:rgba(6,48,28,.25);
    color:#06301c !important;
    padding:6px 0;
  }
  tbody tr.tot-row .td-lbl{
    color:#06301c !important;
    font-weight:700;
    opacity:.75;
    font-size:10.5px;
  }
  tbody tr.tot-row .td-val{
    color:#06301c !important;
    font-weight:800;
    font-size:14px;
    white-space:nowrap;
  }
  tbody tr.tot-row .td-val .mini{color:rgba(6,48,28,.7) !important}
  tbody tr.tot-row td.mb-title .td-val{color:#06301c !important}
  /* inputs dins de cel·les (tarifes) — més usables a mòbil */
  tbody td input[type="number"]{width:110px !important;text-align:right}
  /* botons d'acció dins de cel·les */
  td .btn-sm{padding:8px 12px;font-size:13px}
}