/* portal/static/portal/portal.css */

.summarybar{
  margin-top:14px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  padding-bottom:14px;
  border-bottom:1px solid var(--line2);
}

.chips{ display:flex; gap:10px; flex-wrap:wrap; }
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid var(--line);
  background:#fff;
  color:#344054;
}
.dot{ width:8px; height:8px; border-radius:999px; display:inline-block; }
.dot.todo{ background:#F79009; }
.dot.done{ background:#12B76A; }

.month-nav{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line2);
}
.month-link{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  text-decoration:none;
  font-size:12px;
  font-weight:900;
  color:#344054;
}
.month-link:hover{ background:#f9fafb; }
.month-link-meta{ color:#667085; font-weight:900; }

.items-table{
  width:100%;
  border-collapse:collapse;
  margin-top:14px;
}
.items-table thead th{
  text-align:left;
  font-size:12px;
  color:#667085;
  font-weight:900;
  padding:10px 8px;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.items-table tbody td{
  padding:12px 8px;
  border-bottom:1px solid #f0f2f5;
  vertical-align:top;
  font-size:13px;
  color:#101828;
}
.items-table tbody tr:last-child td{ border-bottom:none; }

.nowrap{
  white-space:nowrap;
  font-variant-numeric: tabular-nums;
}
.label{ word-break:break-word; }

.badge{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  border:1px solid transparent;
  white-space:nowrap;
}
.badge.todo{ background:#fff7ed; color:#b54708; border-color:#fed7aa; }
.badge.wait{ background:#eff8ff; color:#175cd3; border-color:#b2ddff; }
.badge.other{ background:#f2f4f7; color:#344054; border-color:#e4e7ec; }

.btn{
  display:inline-block;
  text-decoration:none;
  font-weight:900;
  font-size:13px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(199,154,43,.55);
  background:rgba(199,154,43,.18);
  color:#111827;
  white-space:nowrap;
}
.btn:hover{ background:rgba(199,154,43,.26); }

.month-sep td{
  padding:14px 8px;
  border-bottom:1px solid var(--line2);
  background:#fbfcfe;
}
.month-sep-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.month-sep-title{ font-weight:950; color:#101828; }
.month-sep-meta{ display:flex; gap:8px; flex-wrap:wrap; }
.chip-mini{
  font-size:12px;
  font-weight:950;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid transparent;
  white-space:nowrap;
}
.chip-mini.todo{ background:#fff7ed; color:#b54708; border-color:#fed7aa; }
.chip-mini.done{ background:#ecfdf3; color:#027a48; border-color:#abefc6; }

/* Mobile: items list layout (date+amount row, label full width) */
@media (max-width: 640px){
  .items-table thead{ display:none; }
  .items-table, .items-table tbody{ display:block; width:100%; }

  /* Month separators keep their look */
  .items-table tbody tr.month-sep,
  .items-table tbody tr.month-sep td{
    display:block;
    width:100%;
  }

  /* Regular rows -> 2 columns grid */
  .items-table tbody tr:not(.month-sep){
    display:grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "date amount"
      "label label"
      "action action";
    gap:10px 12px;
    border-bottom:1px solid var(--line2);
    padding:14px 0;
  }

  .items-table tbody td{
    display:block;
    width:auto;
    border-bottom:none;
    padding:0;
  }

  /* Hide the "Date/Libellé/Montant/Action" pseudo labels */
  .items-table tbody td[data-label]::before{ display:none; }

  .items-table td.col-date{
    grid-area:date;
    font-weight:800;
  }
  .items-table td.col-amount{
    grid-area:amount;
    justify-self:end;
    font-weight:900;
  }
  .items-table td.label{ grid-area:label; }
  .items-table td.col-action{ grid-area:action; }

  .items-table td.col-action .btn{
    width:100%;
    padding:12px 14px;
    text-align:center;
  }
}

/* Auth / pages simples (connexion, lien envoyé, lien invalide, confirmation) */
.auth-wrap{
  width:100%;
  max-width:720px;
  margin:0; /* align with items pages */
}
.auth-title{
  margin:0;
  font-size:22px;
  font-weight:700;
  line-height:28px;
  font-family:var(--font-display);
  letter-spacing:.2px;
  text-align:left;
}
.auth-sub{
  margin:8px 0 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:18px;
  text-align:left;
}
.panel{
  margin-top:14px;
  border:1px solid var(--line2);
  border-radius:14px;
  padding:16px;
  background:#fff;
}
.form-row{ margin-top:10px; }
.form-row label{
  display:block;
  font-size:12px;
  font-weight:700;
  color:var(--muted);
}
.form-row input[type="email"]{
  width:100%;
  margin-top:6px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  font-family: inherit;
  font-size:13px;
  outline:none;
  background:#fff;
}
.btn-primary{
  display:inline-block;
  margin-top:12px;
  padding:12px 16px;
  border-radius:12px;
  border:1px solid rgba(199,154,43,.55);
  background:var(--accent);
  color:#1f2937;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
}
.btn-primary:hover{ filter:brightness(0.95); }
.btn-link{
  display:inline-block;
  margin-top:12px;
  text-decoration:none;
  font-weight:700;
  color:var(--primary);
  font-size:13px;
}
.messages{
  margin:12px 0 0 0;
  padding:0;
  list-style:none;
}
.messages li{
  margin:0 0 8px 0;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #dbe4f3;
  background:#f3f6fb;
  font-size:13px;
}