/* D:\Development\DatumExcel_SAM\app\static\css\app.css */
html, body { scroll-behavior: smooth; }
.badge { padding: 2px 8px; border-radius: 999px; font-size: 12px; }
.badge.green { background:#e7f7ec; color:#157a3e; }
.badge.red   { background:#fde8e8; color:#a01818; }

.btn.sm { padding: 6px 10px; font-size: 12px; }
.btn.green { background:#1a9b4b; color:#fff; }
.btn.red { background:#cc1f1a; color:#fff; }
.btn.outline { border:1px solid #999; background:transparent; color:#333; }

.grid.two { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.page-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.toolbar { display:flex; gap:8px; align-items:center; margin: 10px 0 16px; }
.table-wrap { overflow:auto; }
.table { width:100%; border-collapse: collapse; }
.table th, .table td { padding: 8px 10px; border-bottom: 1px solid #eee; }
.table .actions .btn { margin-right: 6px; }
.empty { text-align:center; color:#777; padding:18px; }
.card { display:block; background:#fff; border-radius:16px; padding:18px; border:1px solid #eee; }
.card:hover { box-shadow: 0 6px 16px rgba(0,0,0,.07); }
.card-title { font-weight:600; margin-bottom:6px; }

/* Soft buttons (pale colors) */
.btn-green-soft{
  display:inline-flex; align-items:center;
  border-radius:12px; padding:8px 16px;
  border:1px solid #86efac;              /* green-300 */
  color:#166534;                          /* green-800 */
  background:#ecfdf5;                     /* green-50 */
}
.btn-green-soft:hover{ background:#d1fae5; }

.btn-red-soft{
  display:inline-flex; align-items:center;
  border-radius:12px; padding:8px 16px;
  border:1px solid #fca5a5;               /* red-300 */
  color:#b91c1c;                          /* red-700 */
  background:#fef2f2;                     /* red-50 */
}
.btn-red-soft:hover{ background:#fee2e2; }

.btn-amber-soft{
  display:inline-flex; align-items:center;
  border-radius:12px; padding:4px 12px;
  border:1px solid #fcd34d;               /* amber-300 */
  color:#92400e;                          /* amber-800 */
  background:#fffbeb;                     /* amber-50 */
  font-size:14px;
}
.btn-amber-soft:hover{ background:#fef3c7; }

/* Soft badges (pale colors) */
.badge-green-soft{
  font-size:12px; text-transform:uppercase; letter-spacing:.05em;
  padding:4px 8px; border-radius:8px;
  background:#ecfdf5; color:#15803d;      /* green-700 */
  box-shadow: inset 0 0 0 1px #bbf7d0;    /* ring green-200 */
}
.badge-red-soft{
  font-size:12px; text-transform:uppercase; letter-spacing:.05em;
  padding:4px 8px; border-radius:8px;
  background:#fef2f2; color:#b91c1c;
  box-shadow: inset 0 0 0 1px #fecaca;
}
.badge-amber-soft{
  font-size:12px; text-transform:uppercase; letter-spacing:.05em;
  padding:4px 8px; border-radius:8px;
  background:#fffbeb; color:#92400e;
  box-shadow: inset 0 0 0 1px #fde68a;
}
.badge-slate-soft{
  font-size:12px; text-transform:uppercase; letter-spacing:.05em;
  padding:4px 8px; border-radius:8px;
  background:#f1f5f9; color:#475569;
}


/* Toggle switch (green/red) */
.switch { position: relative; display: inline-block; width: 42px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; inset: 0; background-color: #fecaca; border-radius: 9999px; transition: .2s; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; border-radius: 9999px; transition: .2s; }
.switch input:checked + .slider { background-color: #bbf7d0; }    /* green-100 */
.switch input:checked + .slider:before { transform: translateX(18px); }

.date-chip{
  display:inline-block;
  border-radius:10px;
  padding:2px 8px;
  font-size:12px;
  margin-top:4px;
  border:1px solid transparent;
}
.date-chip.green{ background:#ecfdf5; color:#166534; border-color:#86efac; }
.date-chip.amber{ background:#fffbeb; color:#92400e; border-color:#fcd34d; }
.date-chip.red{ background:#fef2f2; color:#b91c1c; border-color:#fca5a5; }