/* ========================================
   TIGA Kundenportal — Styles
======================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Montserrat', sans-serif;
  background: #233D53;
  color: #e2e8f0;
  min-height: 100vh;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(81,117,147,.4); border-radius: 3px; }

/* Toast */
.portal-toast {
  position: fixed; bottom: 24px; right: 24px;
  background: #263F53; border: 1px solid rgba(81,117,147,.3);
  color: #e2e8f0; padding: 12px 20px; border-radius: 12px;
  font-size: 13px; font-weight: 500;
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
  z-index: 9999; animation: toastIn .3s ease;
}
@keyframes toastIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }

/* Status badges */
.badge {
  display: inline-flex; align-items: center; padding: 2px 10px;
  border-radius: 999px; font-size: 11px; font-weight: 600;
  line-height: 1.5;
}
.b-green  { background: rgba(16,185,129,.15); color: #34d399; }
.b-blue   { background: rgba(59,130,246,.15); color: #60a5fa; }
.b-orange { background: rgba(251,146,60,.15); color: #fb923c; }
.b-purple { background: rgba(167,139,250,.15); color: #a78bfa; }
.b-red    { background: rgba(248,113,113,.15); color: #f87171; }

/* Widget cards */
.widget-card {
  background: #263F53;
  border: 1px solid rgba(81,117,147,.15);
  border-radius: 16px;
  padding: 24px;
  transition: border-color .2s;
}
.widget-card:hover { border-color: rgba(81,117,147,.3); }

/* Input */
.portal-input {
  width: 100%; padding: 10px 14px;
  background: rgba(81,117,147,.15); border: 1px solid rgba(81,117,147,.2);
  border-radius: 12px; color: #e2e8f0; font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  outline: none; transition: border-color .2s;
}
.portal-input:focus { border-color: rgba(81,117,147,.5); }
.portal-input::placeholder { color: rgba(81,117,147,.5); }

/* Checkbox */
.check-done {
  width: 18px; height: 18px; border-radius: 6px;
  border: 2px solid rgba(81,117,147,.3); background: transparent;
  appearance: none; cursor: default; flex-shrink: 0;
}
.check-done:checked {
  background: rgba(16,185,129,.2); border-color: #34d399;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='%2334d399' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
}