/* components.css — cards, tiles, buttons, alerts */
.tile {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem; background: #00000005;
  display: flex; flex-direction: column; gap: .4rem; text-decoration: none; color: inherit;
}
.tile:hover { background: #0000000b; }
.tile h3 { margin: .1rem 0; font-size: 1.05rem; }
.tile p { margin: 0; color: var(--muted); font-size: .95rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--primary); color: #fff; font-weight: 700; cursor: pointer;
  transition: filter .2s ease, transform .02s ease, background .2s ease;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--text); }

.alert {
  padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid color-mix(in oklab, var(--danger) 30%, transparent);
  background: color-mix(in oklab, var(--danger) 12%, transparent);
  color: color-mix(in oklab, var(--danger) 90%, white 10%);
}

.alertok {
  padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid color-mix(in oklab, var(--danger) 30%, transparent);
  background: #00ff0044;
  color: color-mix(in oklab,  90%, white 10%);
}

.card { max-width: 1100px; margin: 0 auto; padding: 1.5rem; border: 1px solid #9993; border-radius: 12px; }
  label {
    display: flex;
    flex-direction: column;
    font-size: .9rem;
    flex: 1 1 30%;
    min-width: 220px;  /* prevents them from getting too tiny on narrow screens */
  }
  input,
  select {
    padding: .45rem .5rem;
    border: 1px solid #9995;
    border-radius: 8px;
  }
    .controls, .edit-box { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-bottom: 1.5rem; }
  .badge {
    display:inline-block;
    margin-left:.35rem;
    padding:.15rem .4rem;
    border-radius:.4rem;
    font-size:.75rem;
    line-height:1;
  }
  .badge-ok  { background:#10b98122; color:#10b981; border:1px solid #10b98155; }
  .badge-off { background:#ef444422; color:#ef4444; border:1px solid #ef444455; }
  .inline-switch { display:flex; align-items:center; gap:.5rem; }

  /* === Scoped layout for the add/edit box === */
  .edit-box {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    align-items: flex-start;
  }

  /* Labels behave like “30% width columns” inside the edit box */
  .edit-box > label {
    display: flex;
    flex-direction: column;
    font-size: .9rem;
    flex: 1 1 30%;
    min-width: 220px;  /* prevents them from getting too tiny on narrow screens */
  }
  

  /* Inline switches should align with the same grid */
  .edit-box > .inline-switch {
    flex: 1 1 30%;
    min-width: 220px;
  }

  /* Inputs/selects *inside* the edit box get the nice styling */
  .edit-box input,
  .edit-box select {
    padding: .45rem .5rem;
    border: 1px solid #9995;
    border-radius: 8px;
  }