/* Formulare / Buttons / Tabellen / Grundkomponenten */
.field{ min-width: 160px; }
.input, .select{
  width: 100%;
  height: var(--tap);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.98);
  outline: none;
  font-size: 14px;
  color: var(--text);
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
select.select{
  -webkit-appearance: none;
  appearance: none;
  max-width: 100%;
  min-width: 0;
}
textarea.input{
  min-height: calc(var(--tap) * 2.5);
  height: auto;
  resize: vertical;
  line-height: 1.45;
}
.input::placeholder,
.select::placeholder{
  color: #94a3b8;
}

/* iOS: Date/Time Inputs neigen zu "intrinsic" Breiten -> nie über Container hinaus */
input.input[type="date"],
input.input[type="time"]{
  max-width: 100%;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
}

.input:focus, .select:focus{
  border-color: rgba(11,91,211,.45);
  box-shadow: var(--focus-ring);
}

.input.is-invalid, .select.is-invalid, textarea.is-invalid{
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(239,68,68,.12);
}

.input.is-invalid:focus, .select.is-invalid:focus, textarea.is-invalid:focus{
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(239,68,68,.18);
}


.ts-hidden-accessible{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0, 0, 0, 0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

.ts-wrapper{
  position:relative;
  display:block;
  width:100%;
  min-width:0;
}
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  min-width:0;
  min-height:var(--tap);
  height:var(--tap);
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:none;
  padding:0 40px 0 12px;
  overflow:hidden;
  cursor:text;
}
.ts-wrapper.single .ts-control::after{
  content:"";
  position:absolute;
  right:14px;
  top:50%;
  width:10px;
  height:6px;
  margin-top:-3px;
  background:currentColor;
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  opacity:.55;
  pointer-events:none;
}
.ts-wrapper.single.dropdown-active .ts-control::after{ transform:rotate(180deg); }
.ts-wrapper.focus .ts-control,
.ts-wrapper.dropdown-active .ts-control{
  border-color:rgba(11,91,211,.45);
  box-shadow:0 0 0 4px rgba(11,91,211,.10);
}
.ts-wrapper.disabled .ts-control,
.ts-wrapper.single.disabled .ts-control{
  background:#f3f4f6;
  opacity:.8;
  cursor:not-allowed;
}
.ts-wrapper .ts-value{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.ts-wrapper .ts-input{
  position:absolute;
  inset:0 34px 0 10px;
  width:calc(100% - 44px) !important;
  height:100%;
  margin:0 !important;
  padding:0 2px !important;
  border:0 !important;
  outline:none !important;
  box-shadow:none !important;
  background:transparent !important;
  color:transparent;
  caret-color:transparent;
  font-size:14px;
  line-height:1.25;
}
.ts-wrapper .ts-input::placeholder{
  color:transparent;
}
.ts-wrapper.focus .ts-input,
.ts-wrapper.dropdown-active .ts-input{
  color:var(--text);
  caret-color:var(--text);
}
.ts-wrapper.focus .ts-input::placeholder,
.ts-wrapper.dropdown-active .ts-input::placeholder{
  color:var(--muted);
}
.ts-wrapper.single .item,
.ts-wrapper.single .placeholder{
  display:block;
  width:100%;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.25;
  font-size:14px;
  opacity:1;
  transition:opacity .12s ease;
}
.ts-wrapper.single .placeholder{ color:var(--muted); }
.ts-wrapper.focus .ts-value,
.ts-wrapper.dropdown-active .ts-value{
  opacity:0;
  pointer-events:none;
}
.ts-dropdown{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 16px 40px rgba(2,6,23,.12);
  overflow:hidden;
  z-index:1200;
}
.ts-dropdown[hidden]{ display:none !important; }
.ts-dropdown .ts-dropdown-content{ max-height:260px; overflow:auto; }
.ts-dropdown .option,
.ts-dropdown .no-results,
.ts-dropdown .optgroup-header{
  font-size:14px;
  padding:10px 12px;
}
.ts-dropdown .option{ cursor:pointer; }
.ts-dropdown .option.disabled{ opacity:.45; cursor:not-allowed; }
.ts-dropdown .optgroup-header{
  color:var(--muted);
  background:#f8fafc;
  font-weight:700;
}
.ts-dropdown .active,
.ts-dropdown .option:hover,
.ts-dropdown .option.active{
  background:rgba(11,91,211,.08);
  color:inherit;
}

@media (max-width: 767px){
  .ts-wrapper.single .ts-control,
  .ts-wrapper .ts-input,
  .ts-wrapper.single .item,
  .ts-wrapper.single .placeholder,
  .ts-dropdown .option,
  .ts-dropdown .no-results,
  .ts-dropdown .optgroup-header{
    font-size: 16px;
  }
}
.btn{
  min-height: var(--tap);
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.96);
  color: var(--text);
  cursor: pointer;
  font-weight: 700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease, transform .12s ease;
}
.btn:hover{
  border-color: rgba(148,163,184,.55);
  box-shadow: var(--shadow2);
}
.btn:focus-visible{
  outline: 0;
  box-shadow: var(--focus-ring);
}
.btn:active{ transform: translateY(1px); }
.btn:disabled{ opacity: .55; cursor:not-allowed; box-shadow:none; }

.btn-sm{
  height: 34px;
  padding: 6px 10px;
  border-radius: 10px;
  font-weight: 700;
}

.btn-primary{
  background: linear-gradient(180deg, #0b5bd3, #0a4eb6);
  border-color: rgba(11,91,211,.34);
  color: #fff;
  box-shadow: 0 10px 22px rgba(11,91,211,.18);
}
.btn-primary:hover{
  background: linear-gradient(180deg, #0a55c5, #0947a4);
  border-color: rgba(11,91,211,.42);
}

.btn-danger{
  background: linear-gradient(180deg, rgba(254,242,242,.96), rgba(254,226,226,.92));
  border-color: rgba(239,68,68,.24);
  color: #991b1b;
}
.btn-danger:hover{
  border-color: rgba(239,68,68,.34);
  background: linear-gradient(180deg, rgba(254,226,226,.98), rgba(254,202,202,.94));
}

.btn-warn{
  background: linear-gradient(180deg, rgba(255,251,235,.98), rgba(254,243,199,.94));
  border-color: rgba(245,158,11,.28);
  color: #92400e;
}
.btn-warn:hover{ border-color: rgba(245,158,11,.36); }

.btn-success{
  background: linear-gradient(180deg, rgba(236,253,245,.98), rgba(209,250,229,.94));
  border-color: rgba(16,185,129,.24);
  color: #065f46;
}
.btn-success:hover{ border-color: rgba(16,185,129,.32); }

/* Logout button should visually match cards */
.logoutCard{
  width: 100%;
  min-height: var(--tap);
  padding: 12px 14px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow2);
  color: var(--text);
  font-weight: 900;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.logoutCard:hover{ border-color: rgba(11,91,211,.20); box-shadow: var(--shadow); }
.logoutCard:active{ transform: translateY(1px); }
.logoutCard--compact{ padding: 10px 12px; min-height: 40px; box-shadow: none; }

.pill{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid var(--line);
  background: rgba(2,6,23,.03);
  cursor: default;
  user-select: none;
}
.pill-green{ background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.25); color: #065f46; }
.pill-red{ background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.25); color: #991b1b; }
.pill-blue{ background: rgba(11,91,211,.12); border-color: rgba(11,91,211,.25); color: #1e3a8a; }
.pill-gray{ background: rgba(51,65,85,.08); border-color: rgba(51,65,85,.15); color: #334155; }
.pill-warn{ background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.30); color: #92400e; }
.pill-note {
  background: rgba(0,0,0,0.05);
  backdrop-filter: blur(6px);
  border-radius: 999px;
}
.pill-auto{ background: rgba(168,85,247,.12); border-color: rgba(168,85,247,.28); color: #6b21a8; }
.pill-weekend{ background: rgba(244,63,94,.10); border-color: rgba(244,63,94,.24); color: #9f1239; }

.cell-pills{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;   /* Desktop: alles in einer Zeile */
  white-space: nowrap; /* verhindert zusätzlichen Text-Umbruch */
}
.cell-pills--right{ justify-content: flex-end; width: 100%; }

/* iPhone / kleine Screens: darf umbrechen, damit es nicht gequetscht wird */
@media (max-width: 520px){
  .cell-pills{
    flex-wrap: wrap;
    white-space: normal;
    gap: 4px;
  }
}

.kpi{
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(226,232,240,.95);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  min-width: 160px;
}
.kpi__label{ font-size: 12px; color: var(--muted); font-weight: 700; letter-spacing: .01em; }
.kpi__value{ font-size: 20px; font-weight: 900; margin-top: 4px; line-height: 1.05; }

.table{
  border: 1px solid var(--line);
  border-radius: var(--r);
  /* Allow horizontal scroll if columns don't fit */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}
.table__head{
  display:grid;
  grid-template-columns: 100px 130px 1.2fr 80px 80px 70px 80px 150px;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(248,250,252,.98), rgba(241,245,249,.94));
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: .02em;
}
.table__row{
  display:grid;
  grid-template-columns: 100px 130px 1.2fr 80px 80px 70px 80px 150px;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  align-items:center;
  background: rgba(255,255,255,.95);
}
.table__body .empty{
  margin: 12px;
}


.table--time-grouped{ background: rgba(248,250,252,.65); }
.time-group + .time-group{ border-top: 1px solid var(--line); }
.time-group__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(241,245,249,.96), rgba(248,250,252,.92));
  border-top: 1px solid var(--line);
}

.time-group:first-child .time-group__head{ border-top: none; }
.time-group__date{ margin-left: 6px; }
.table--time-grouped .table__row{ background: rgba(255,255,255,.9); }
.table--time-grouped .table__row .row-end{
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
}
.table--time-grouped .table__row .row-end .btn{
  flex: 0 0 auto;
}
.table--time-grouped .table__row .row-end .btn-sm{
  min-width: 84px;
  min-height: 34px;
  height: 34px;
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1.1;
}

.table__cell--actions{ text-align:right; }
.time-group__title{ display:flex; align-items:center; gap:6px; flex-wrap:nowrap; min-width:0; }
.time-group__title > b,
.time-group__date{ white-space:nowrap; }
.admin-users-toolbar{ align-items:flex-end; }
.admin-users-toolbar > .btn{ flex: 0 0 auto; }
.admin-users-toolbar__search{ flex:1 1 }

@media (max-width: 820px){
  .admin-users-toolbar{ align-items:stretch; }
  .admin-users-toolbar__search{ flex-basis:100%; }											  
  .time-group{
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    margin-bottom: 10px;
  }
  .time-group__head{
    flex-direction: column;
    align-items: flex-start;
    padding: 12px;
    border-top: none;
  }
  .table--time-grouped{ border: none; background: transparent; }
}