/* Basic layout */
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 0; color: #111; }
.navbar { display:flex; gap:12px; align-items:center; padding: 10px 16px; background:#f7f7f8; border-bottom:1px solid #eaeaea;font-size: 0.8rem;}
.logo { font-weight:700;font-size: large; }
.container { width:96%; max-width: 900px; margin: 6px auto ; padding: 0px;}
.row { display:flex; align-items:center; }
.gap-6 { gap:6px; }
.gap-10 { gap:10px; }


.form-card { padding: 16px; background: #fff; border:1px solid #eee; border-radius: 14px; box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.form-card label { display:block; margin: 6px 0 6px; font-weight: 600; }
.form-card input[type="text"], .form-card input[type="date"], .form-card select {
  width: 100%; padding: 8px 10px; border:1px solid #ddd; border-radius: 4px;
}

.add-btn, .primary, .chip-btn {
  border: none; padding: 10px 14px; border-radius: 4px; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.add-btn { background:#eef6ff; }
.primary { background:#111; color:#fff; }
.actions { margin-top: 16px; }

/* Slot cards grid */
.slots-wrap { margin-top: 2px; }
.slot-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

/* Card */
.slot-card {
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 9px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.slot-header {
  display:flex; align-items:center; justify-content:space-between;
}
.slot-title {
  font-weight: 700; font-size: 0.95rem;
}
.slot-subtitle {
  font-size: 0.85rem; opacity: 0.7;
}

.slot-body { display:flex; flex-direction:column; gap:8px; }
.tz-row {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size: 0.9rem;
}
/* Updated timezone list styles - clean vertical alignment */
.tz-list { 
  list-style: none; 
  padding-left: 0px; 
  display: flex; 
  flex-direction: column; 
  gap: 8px; 
}

.timezone-item {
  background: #f4f4f5;
  padding: 4px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  /* gap: 6px; */
  font-size: 0.9rem;
  position: relative;
  min-height: 35px;
}

.tz-name {
  font-weight: 600;
  word-break: break-all;
  width: 100%;
  padding-left: 12px; /* Space for remove button */
}

.tz-time {
  color: #666;
  font-size: 0.9rem;
  white-space: normal;
  text-align: left;
  width: 100%;
  padding-left: 12px; /* Space for remove button */
}

.tz-list button {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 999px;
  padding: 8px 8px;
  cursor: pointer;
  position: absolute;
  top: 12px;
  bottom: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
}